2

Вопрос начинающего по основам блочной вёрстки.

Поставил перед собой задачу - сделать страничку: две колонки по центру экрана. В левой- контент, включая фотки. В правой - доп. инфа. Хэдер на 100% ширины монитора. Так же и с футером. В хедер вставить, например, два блока ссылок (справа и слева, но неприжатые к краям футера, а соотнесённые к краям основного блока. Также под всем этим лежит основной фон.

Примерно как тут

alt text

На практике эту идею нашёл, например, на страницах вроде этой (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;
}
2

2 ответа 2

1

Здравствуйте! Я советую Вам почитать литературу про CSS, так как всё строится на базовых знаниях вёрстки. Ну если вам лень, то вот готовое решение: http://csstemplater.com/

Также Вы можете подсмотреть css код сайта с такой же структурой.

Надеюсь, что помог :)

0

Если хотите изучать и развиваться, то имеет смысл записаться на курсы. Вы сэкономите кучу своего времени. Важно понять как это работает и почему, какое ПО пригодится для ваших проектов. Самообучение хорошо и даже самые матерые программисты раз в тцать дней познают что-то новое, но без основных базовых принципов вы будете неоднократно топтаться на месте.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.