HTML5 макет и ошибка нижнего колонтитула

Я новичок в мире HTML5, и я пытаюсь создать макет, чтобы лучше понять, как я могу перейти от HTML4. Я в настоящее время построен макет, но хотел проверить:HTML5 макет и ошибка нижнего колонтитула

Если мой код написан правильно (любые советы или рекомендации будут действительно оценили, как первый раз, когда я пишу в HTML5 так хотят, чтобы убедиться, что им делать вещи справа)
пытается исправить нижний колонтитул, чтобы сидеть в нижней части страницы, слегка перекрывая боковую панель и секцию2, но в настоящее время она отображается через середину страницы.
Я заметил, что при просмотре сайта в Firefox и использовании Firebug сайт не отображается в точном размере, который я определил в CSS, поэтому хотел бы понять, почему это так.

Ниже мой код:

<!DOCTYPE html> 
<html> 
<head> 
<title>BrightBees Layout</title> 
<link href="styles2.css" rel="stylesheet" /> 
</head> 
<body> 
<div id ="container"> 
    <header> 
     <h1>This my Header</h1> 
     <nav><h2>My Navigation Bar<h2></nav> 
    </header> 
    <div id="banners"><h2>My Banners<h2></div> 
    <aside id="sidebar"><h2>My SideBar<h2></aside> 
    <section id="content"><h2>This is my section1</h2></section> 
    <section id="list"><h2>This is my section2</h2></section> 
</div> 
<footer> 
     <h3>This is my footer</h3> 
</footer> 
</body> 
</html>

Мой CSS:

body { 
background:#FFF; 
} 

#container { 
margin: 0px auto 0px auto; 
width:960px; 
border:1px solid #CCC; 
} 

header { 
margin:0; 
padding:0px; 
text-align:center; 
height:166px; 
} 

nav { 
height:65px; 
text-align:center; 
background:#CCC; 
} 

#banners { 
margin:0; 
height:253px; 
background:#01AEF0; 
text-align:center; 
} 

#sidebar { 
height:600px; 
width:310px; 
background:#ec8400; 
float:left; 
text-align:center; 
} 

#content { 
height:300px; 
width:650px; 
background:#CCC; 
float:right; 
text-align:center; 
} 

#list { 
height:300px; 
width:650px; 
background:#01AEEF; 
float:right; 
text-align:center; 
} 

footer { 
margin:0; 
padding:0; 
text-align:center; 
font-weight:bold; 
height:167px; 
background:#efefef; 
z-index:-1px; 
text-align:center; 
}

Заранее спасибо за глядя на это, любой совет будет весьма признателен.

источник

2015-10-06 Michael Owen

'z-index: -1px' определенно не соответствует – Jay

высота раздай «контейнер» в CSS файл должен быть в «рх» ...

пример

#container { margin: 0px auto 0px auto; width:960px; border:1px solid #CCC; height: 600px }

он должен работать нормально

источник

2015-10-06 09:56:05 Reoxey

некоторые шаги, чтобы в сначала: Удалить поле браузера по умолчанию и отступы.

* { 
    margin: 0px; 
    padding: 0px; 
}

Удалить край: 0 и утеплитель: 0 из .header, .footer и #banner.

использование мета-тег видового экрана, чтобы сделать его более отзывчивым:

<head> 
    <title>BrightBees Layout</title> 
    <link href="styles2.css" rel="stylesheet" /> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>

источник

2015-10-06 10:07:57 Koen

Используйте классы вместо идентификаторов, они слишком специфичны. Оставьте ID для JS.

Смотрите здесь разница между идентификаторами и классами: https://css-tricks.com/the-difference-between-id-and-class/

источник

2015-10-06 10:10:46

Спасибо, ребята, очень признательны. Некоторые полезные советы. Нижний колонтитул теперь находится под боковой панелью/секцией2, как мне получить нижний колонтитул, чтобы он перекрывался, поэтому он начинается на фоне боковой панели/секции примерно на 40 пикселей. –

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

margin-top: -80px;

Спасибо, ребята, за то, что посмотрели на это для меня, очень цените это.

источник

2015-10-06 12:09:14

HTML5 макет и ошибка нижнего колонтитула

ответ

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