Проблемы с навигационной панелью HTML

Так что, когда я загружаю свою страницу, у меня есть панель навигации, но по какой-то причине моя прокладка между моими улью различна, и я думаю, что это потому, что границы и мой #nav центрированы правильно, но мой ul ' t действительно сосредоточен, как и должно быть. Также при моем наведении вся навигация идет с ним, и мне нужно только 1 ли, чтобы спуститься.Проблемы с навигационной панелью HTML

см изображение:

HTML код:

body { 
 
     background: url(../images/wallpaper.jpg)no-repeat center center fixed; 
 
     background-size: cover; 
 
     padding: 0; 
 
     margin: 0; 
 
    } 
 

 
    /*De navigatie bar*/ 
 

 
    #nav { 
 
     width: 80%; 
 
     height: 50px; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 

 
    } 
 

 
    #nav ul { 
 
     margin: 0; 
 
     padding: 0; 
 
     line-height: 45px; 
 
     width: 24%; 
 
     display: inline-block; 
 
     padding: 0; 
 
    } 
 

 
    #nav ul li { 
 
     list-style: none; 
 
     float: left; 
 
     width: 100%; 
 
     height: 50px; 
 
     text-align: center; 
 
     margin-left: auto; 
 
     margin: 0; 
 
     padding: 0; 
 
     opacity: 0.3; 
 
     background-color: #A7B5BF; 
 
     border-right: 2px solid black; 
 
    } 
 

 
    #nav ul:first-child li { 
 
     border-left: 2px solid black; 
 
    } 
 

 
    #nav ul li a { 
 
     text-decoration: none; 
 
     height: 50; 
 
     font-size: 16px; 
 
     font-family: Sans-serif, Verdana; 
 
    } 
 

 
    #nav ul li:hover { 
 
     opacity: 0.5; 
 
     margin-top: 2px; 
 
    } 
 

 
    /*einde navigatie bar*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 

 
<html> 
 

 
<head> 
 
    <title>website</title> 
 
    <link rel="stylesheet" style="text/css" href="css/style.css" /> 
 
    <script type="text/javascript" src="javascript/javascript.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="nav"> 
 

 
    <ul> 
 
     <li><a href="#">home</a> 
 
     </li> 
 
     <!--<ul> 
 
    \t <li></li> 
 
    \t <li></li> 
 
    \t <li></li> 
 
    \t </ul> --> 
 
    </ul> 
 

 
    <ul> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 

 
    <ul> 
 
     <li><a href="#">Galary</a> 
 
     </li> 
 
    </ul> 
 

 
    <ul> 
 
     <li><a href="#">ToS</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <div id="container"> 
 
    </div> 
 
    <div id="footer"> 
 
    <p></p> 
 
    </div> 
 

 
</body> 
 

 
</html>

источник

2014-10-15 Thibaut

Почему у вас есть элементы 'ul' с одним' li'? Вы планируете иметь подменю? –

Причина вы получаете странное поведение парения этот раздел:

#nav ul li:hover { 
    opacity: 0.5; 
    margin-top: 2px; 
}

Добавляя маржу к li, вы взвинтить ul, который толкает все вниз. Вы можете легко исправить это путем изменения выше:

#nav ul li:hover { 
    opacity: 0.5; 
    position:relative; 
    top: 2px; 
}

намного более простым способом для достижения этой цели является использование более простой список структуру:

<div id="nav"> 
    <ul> 
     <li><a href="#">home</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Galary</a></li> 
     <li><a href="#">ToS</a></li> 
    </ul> 
</div>

И тогда вы можете использовать display:table-cell чтобы легко настроить элементы списка, не прибегая к поплавкам (которые могут быстро запутаться):

#nav ul { 
    display: table; 
    width: 100%; 
} 

#nav ul li { 
    list-style: none; 
    display: table-cell; 
    width: 25%; 
}

Существует complete JSfiddle here which should give you an idea of how it works.

источник

2014-10-15 23:28:27

Это работает thnx! но теперь мои границы испорчены, я просто хочу 2px с каждой стороны 1 раз. и сделать его центром все – Thibaut

@ user2855957 Ну, как люди имеют состояние, есть некоторые проблемы с вашей разметкой HTML, которые могут помочь исправить это. Нужно ли структурировать вашу разметку? –

не очень, я просто проверяю вещи, но это только пространство между ul, которое является проблемой, и я просто не уверен, что это все о границах или ширина, я использовал – Thibaut

Я пытался очистить свой код немного. вам не нужны все эти элементы ul ... достаточно одного. вот фрагмент кода для вас .. надеюсь, это поможет вам

#nav{ 
 
    /*padd en marge mag weg*/ 
 
    width: 80%; 
 
    height: 50px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#nav ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 45px; 
 
    width: 100%%; /* changed this so that the nav bar takes up the entire width specified */ 
 
    display: inline-block; 
 
    padding: 0; 
 
} 
 
#nav ul li{ 
 
    list-style: none; 
 
    float: left; 
 
    height: 50px; 
 
    width:25%; /* since you have 4 total nav items i divided the total width by 4 */ 
 
    box-sizing:border-box; /* add this since you have used border */ 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    opacity: 0.3; 
 
    background-color: #A7B5BF; 
 
    border-right: 2px solid black; 
 
} 
 
#nav ul li:first-child{ 
 
    border-left: 2px solid black; /* re arranged this so that the first child pseudo is given to the li element */ 
 
} 
 
#nav ul li a{ 
 
    text-decoration: none; 
 
    height: 50; 
 
    font-size: 16px; 
 
    font-family: Sans-serif, Verdana; 
 
} 
 
#nav ul li:hover{ 
 
    opacity: 0.5; 
 
    margin-top: 2px; 
 
} 
 
/*einde navigatie bar*/

<div id="nav"> 
 
<ul> 
 
    <li><a href="#">home</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    <li><a href="#">Galary</a></li> 
 
    <li><a href="#">ToS</a></li> 
 
</ul> 
 
</div> 
 
<div id="container"></div> 
 
<div id="footer"><p></p></div>

источник

2014-10-15 23:17:16 Sai

это просто ставит его под друг друга:/ – Thibaut

-1

Это как ваша структура меню должно быть.

<div id="nav"> 
    <ul> 
     <li><a href="#">home</a></li> 
      <ul> 
      <li></li> 
      <li></li> 
      </ul> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Galary</a></li> 
     <li><a href="#">ToS</a></li> 
    </ul> 
    </div>

источник

2014-10-15 23:19:40 Dominofoe

Как изменение HTML исправляет поведение CSS? –

Проблемы с навигационной панелью HTML

ответ

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