Вопрос начинающего по основам блочной вёрстки.
Поставил перед собой задачу - сделать страничку: две колонки по центру экрана. В левой- контент, включая фотки. В правой - доп. инфа. Хэдер на 100% ширины монитора. Так же и с футером. В хедер вставить, например, два блока ссылок (справа и слева, но неприжатые к краям футера, а соотнесённые к краям основного блока. Также под всем этим лежит основной фон.
Примерно как тут
На практике эту идею нашёл, например, на страницах вроде этой (http://www.kupikupon...rfumel_xx_25432
). Понятное дело - такое для меня создать сейчас совсем нереально.
Попытался написать код для схематичного расположения элементов - получается плохо. Футер не крепится к низу (это, я так понимаю, избитая проблема и решение найти легко). Далее, при ресайзе страницы хедер с футером почему-то располагаются левее правой колонки и получается чёрти что. Также блок с ссылками (menu у меня он назван) уезжает на следующую строчку.
Т.е. для начала мне просто нужно хедер хоть сделать и разместить правильно блоки. Вот он, хтмл этого страшилища. Стили:
html {
height:100%;
background: url(images_study/back.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
body {
margin:0;
padding:0;
color: #000;
font: 16px Tahoma, Helvetica, sans-serif;
}
h2 {
font-size:16px;
}
#page {
}
#header {
width:100%;
background:#000000;
height:45px;
}
#city {
width: 400px;
height:45px;
float:left;
}
#city li {
display: inline-block;
margin-left: 170px;
color: #999;
font-size: 17px;
}
#menu {
width: 400px;
height:45px;
float:right;
}
#menu li {
display: inline-block;
margin-right: 45px;
color: #999;
font-size: 17px;
}
#header a {
text-decoration: none;
color:#999;
}
#header a:hover {
color:#00A9E0;
}
#content-wrapp {
width: 960px;
margin-left:auto;
margin-right:auto;
margin-top:100px;
padding: 20 40 20 40;
}
#content {
float:left;
width:660px;
background:green;
}
#content h1{
font-size: 24;
padding: 16px 0 0 35px;
width: 620px;
height: 72px;
overflow: hidden;
}
#sidebar {
width:300px;
margin-left:660px;
background:red;
}
#footer {
clear:both;
background:yellow;
padding:5px;
text-align:center;
margin-top:-30px;
height:30px;
}