Почему я не могу навести навигационную панель на страницу?

Ниже мой HTMLПочему я не могу навести навигационную панель на страницу?

<div id="wrap"> 


<ul class="navbar"> 
     <li><a href="">Home</a></li> 
     <li><a href="">Franchises</a> 
     <ul> 
     <li><a href="">elroyz Xpress</a></li> 
     <li><a href="">skye stickbeetles</a></li> 
     <li><a href="">Juddamania</a></li> 
     </ul> 
     </li> 
     <li><a href="">Fixtures</a> 
     <ul> 
     <li><a href="">Round 1</a></li> 
     <li><a href="">Round 2</a></li> 
     <li><a href="">Round 3</a></li> 
     <li><a href="">Round 4</a></li> 
     <li><a href="">Round 5</a></li> 
     </ul> 
     </li> 
     <li><a href="">Free Agents</a> 
     <ul> 
     <li><a href="">Adelaide</a></li> 
     <li><a href="">Brisbane</a></li> 
     <li><a href="">Carlton</a></li> 
     </ul> 
     </li> 
</ul> 
</div>

ниже мой CSS

#wrap { 
    width:100%; 
    height: 37px; 
    margin: 0; 
    z-index:99; 
    position:relative; 
    background-color:#F00;} 

.navbar { 
    height: 35px; 
    padding:0; 
    margin: 0; 
    position:absolute; 
    border-right: 1px solid #1c1c1c; 
} 

    .navbar li { 
      height: auto; 
      width: 150px; 
      float: left; 
      text-align: center; 
      list-style: none; 
      font: normal bold 14px/1.2em Arial, Verdana, Helvetica; 
      padding: 0; 
      margin: 0; 
      background-color: #F00 
         } 

.navbar a {       
     padding: 10px 0; 
     border-left: 1px solid #1c1c1c; 
     border-right: 1px solid #1c1c1c; 
     text-decoration: none; 
     color: white; 
     display: block; 
     } 

.navbar li:hover, a:hover {background-color: #a4a4a4;} 

.navbar li ul { 
     display: none; 
     height: auto;         
     margin: 0; 
     padding: 0;   
     }    

.navbar li:hover ul  { 
         display: block; 
         } 

.navbar li ul li {background-color: #a4a4a4;} 

.navbar li ul li a { 
     border-left: 1px solid #1c1c1c; 
     border-right: 1px solid #1c1c1c; 
     border-top: 1px solid #1c1c1c; 
     border-bottom: 1px solid #1c1c1c; 
     } 

.navbar li ul li a:hover {background-color: #1c1c1c;}

им только новичок в HTML и CSS, так им с ABIT хлопот получать панель навигации для центрирования на странице. по центру i означает, что фактические элементы списка центрируются на странице, а не на левой стороне, как сейчас. любая помощь очень благодарна спасибо!

источник

2013-02-20 elroyz

Вы должны добавить width и margin auto для вашего navbar Я сделал немного jsFiddle

.navbar { 
    height: 35px; 
    width:610px; 
    margin:0 auto; 
}

jsFiddle

источник

2013-02-20 07:35:51 dinodsaurus

спасибо за вашу помощь чувак работал отлично! – elroyz

.navbar { 
    height: 35px; 
    padding:0; 
    position:relative; 
    margin-left:auto; 
    margin-right:auto; 
    width: 100px;// change this to desired width 
    border-right: 1px solid #1c1c1c; 
}

источник

2013-02-20 07:31:40

его, потому что вы даете класс NavBar абсолютную позицию, в этом случае вы должны использовать сверху, слева параметры, чтобы переместить DIV –

Вы должны установить ширину обхвата к чему-либо в пикселях, как этот

#wrap { 
width:750px; // Set it according to your need 
margin: 0px auto; // i also changed this 
height: 37px; 
z-index:99; 
position:relative; 
background-color:#F00;}

, а также маржинальной к 0px auto

Вот это JSfiddle

источник

2013-02-20 07:32:17

Почему я не могу навести навигационную панель на страницу?

ответ

Смежные вопросы