Цвет навигационной панели не отображается

0

Я несколько раз стучал головой, пытаясь понять, почему цвет моей навигационной панели просто не появляется. Пожалуйста, взгляните на следующий CSS, чтобы рассказать мне, что я делаю неправильно.

#header {
    position: relative;
    top: 20px;
    background-color: blue;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-color: #ffffff;
    overflow: hidden;
}

li {

    border: 2px solid #000000;
    font-family: Futura, Tahoma, sans-serif;
    color: black;
    border-radius: 5px 5px;
    margin-left: 5px;
    margin-right: 5px;
    display:inline;
    font-family: ubuntu;
    background-color: #e1e3e4;
    padding: 5px 5px 5px 5px;
    border-width: 1px;
}

#navbar {
    position: fixed;
    margin-top: 10px;
    left: 50%;
    margin-left: -200px;
}


body {
    background-color: #e1e3e4;
}

    p{
        font-family: ubuntu;

    }

это html для документа:

    <!DOCTYPE html>

     <html>
        <head>
            <link type="text/css" rel="stylesheet" href="stylesheet.css" href="css/hover.css" rel="stylesheet" media="all"/>
            <title>Palliative Care Toolkit</title>
        </head>

    <body id= "page">

        <div id="header">
        <div id="navbar">
        <ul>


            <li href="#" class="button grow">What is Palliative Care?</li>
            <li>Who Needs Palliative Care?</li>
        <li>Taking about Palliative Care?</li>
        <li>How to Interact with Providers?</li>
        <li>Additional Resources?</li>
        </ul>
            </div>
        <p style="display:inline; font-size:30px; margin-top: 20px; position:fixed; margin-left: 30px; "> Palliative Care ToolKit </p>

    </div>

Большое спасибо за Вашу помощь! Хосе

  • 0
    есть HTML для меня?
  • 0
    какой цвет вы наносили?
Теги:

1 ответ

0

Поскольку ваш навигатор имеет position:fixed, оно больше не расположено относительно #header. Это означает, что #header действует так, как будто у него нет содержимого; что означает, что он падает в высоту. Просто #header height или измените метод позиционирования.

  • 0
    Большое вам спасибо, Dre. Это наконец-то сработало для меня. Я не знал, что решение было так просто!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню