Моя панель навигации не соответствует моему div.container?

header { 
 
    background-color:black; 
 
    color:white; 
 
    text-align:center; 
 
    padding:5px; 
 
} 
 

 
nav { 
 
    line-height:30px; 
 
    background-color:gainsboro; 
 
    height:548px; 
 
    width:100px; 
 
    float:left; 
 
    padding:px; 
 
} 
 

 
body { 
 
\t background-color:Lavender; 
 
} 
 

 
article { 
 
\t float:right; 
 
\t height:1250px; 
 
\t width:580px; 
 
\t text-align:center; 
 
\t padding:1em; 
 
\t background-color:#5DADE2; 
 
} 
 

 
section { 
 
    float:left; 
 
\t height:1320px; 
 
\t width:600px; 
 
\t text-align:center; 
 
    padding:0em; 
 
\t background-color:#ECF0F1 
 
} 
 

 
footer { 
 
    background-color:black; 
 
    color:white; 
 
    clear:both; 
 
    text-align:center; 
 
    padding:5px;  
 
} 
 

 
div.container { 
 
\t width:100%; 
 
\t border:2px solid purple; 
 
} 
 

 
.clearfix { 
 
\t overflow: auto; 
 
} 
 

 
.clear { 
 
    clear:right; 
 
    line-height:0; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 

 
<title>Links - Bannerlord Assignment</title> 
 

 
<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css"> 
 

 
</head> 
 

 
<div class="container"> 
 

 
<body> 
 

 
<header> 
 

 
<h1>Further Information</h1> 
 

 
</header> 
 

 
<nav> 
 
<a href="Home.html">Home</a><br> 
 
<a href="About.html">About</a><br> 
 
<a href="Media.html">Media</a><br> 
 

 

 
</nav> 
 

 
</body> 
 

 
</div> 
 

 
<br class="clear" /> 
 

 
</html>

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

Моя навигационная панель не соответствует границе моего div, и это не проблема, но как я могу ее получить, чтобы панель навигации и заголовок не перекрывались при использовании границы, так как на данный момент div граница работает только с заголовком.

источник

2016-09-03 Jon Bad

добавить 'border' в заголовке вместо' .container' и переместить тело тега вне '.container' ... –

Вы думаете о добавлении верхнего поля 5px к вашей навигационной панели, это будет учитывать границу 5px ... Я думаю. Я все еще учусь. Удачи, я буду смотреть.

Также вы всегда хотите, чтобы тело было самым большим, чем то, что отображается на странице. Таким образом, все контейнеры должны быть внутри него.

источник

2016-09-03 04:47:13 TallOrderDev

Вам нужно переполнение, скрытое в контейнере.

header { 
 
    background-color:black; 
 
    color:white; 
 
    text-align:center; 
 
    padding:5px; 
 
} 
 

 
nav { 
 
    line-height:30px; 
 
    background-color:gainsboro; 
 
    height:548px; 
 
    width:100px; 
 
    float:left; 
 
    padding:px; 
 
} 
 

 
body { 
 
\t background-color:Lavender; 
 
} 
 

 
article { 
 
\t float:right; 
 
\t height:1250px; 
 
\t width:580px; 
 
\t text-align:center; 
 
\t padding:1em; 
 
\t background-color:#5DADE2; 
 
} 
 

 
section { 
 
    float:left; 
 
\t height:1320px; 
 
\t width:600px; 
 
\t text-align:center; 
 
    padding:0em; 
 
\t background-color:#ECF0F1 
 
} 
 

 
footer { 
 
    background-color:black; 
 
    color:white; 
 
    clear:both; 
 
    text-align:center; 
 
    padding:5px;  
 
} 
 

 
div.container { 
 
\t width:100%; 
 
\t border:2px solid purple; 
 
    overflow: hidden; 
 
} 
 

 
.clearfix { 
 
\t overflow: auto; 
 
} 
 

 
.clear { 
 
    clear:right; 
 
    line-height:0; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 

 
<title>Links - Bannerlord Assignment</title> 
 

 
<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css"> 
 

 
</head> 
 

 
<div class="container"> 
 

 
<body> 
 

 
<header> 
 

 
<h1>Further Information</h1> 
 

 
</header> 
 

 
<nav> 
 
<a href="Home.html">Home</a><br> 
 
<a href="About.html">About</a><br> 
 
<a href="Media.html">Media</a><br> 
 

 

 
</nav> 
 

 
</body> 
 

 
</div> 
 

 
<br class="clear" /> 
 

 
</html>

источник

2016-09-03 04:51:43 rmarif

вы знаете, почему мой раздел, нав и статьи должны быть разной высоты? –

такие проблемы возникают из-за плавания. Вы можете исправить это, предоставив ясное свойство контейнерам. – rmarif

Проблема а) ваше тело тег находится в неправильном месте (следует начинать непосредственно перед головой, а конец как раз перед HTML тега и б) нет высота декларации на контейнере.

Добавление этого кода в CSS:

html,body { 
    background-color:Lavender; 
    height:100%; 
} 

div.container { 
    width:100%; 
    height:100%; 
    border:2px solid purple; 
}

и иметь это HTML должен работать.

<body> 

<div class="container" style = "border: solid yellow;"> 


<header> 

<h1>Further Information</h1> 

</header> 
<nav> 
<a href="Home.html">Home</a><br> 
<a href="About.html">About</a><br> 
<a href="Media.html">Media</a><br> 


</nav> 


</div> 

<br class="clear" /> 
</body> 


</html>

источник

2016-09-03 05:09:11 the12

Я нашел ответ на этом сайте, но что делает ясно в этом обстоятельстве? Общий запрос. –

Это должно избавиться от поплавков, т. Е .: clear: right, не позволяло бы поплавкам появляться справа от любого элемента, имеющего свойство clear. – the12

Также как примечание. Кажется, это не работало. Вышеупомянутое решение было выполнено. Вы знаете, как удалить поля на моей странице? Я положил margin: 0px; в моем div.container и он не сработал. –

Моя панель навигации не соответствует моему div.container?

ответ

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