Делаем качественную верстку, и никаких лишних выделяемых областей в интернет браузере
Такие синие области при выделении мышкой, как раз и есть "пустые области страницы".
Чтобы избавиться от них нужно заполнять контент. например в данном примере нужно залить белым цветом в стилях.
background-color:#FFFFFF;
в следующем примере много ошибок. например
Там где пиксельная полоска на белом фоне, взят широкий Div и не залит белым бэкграундом. его нельзя залить целиком белым фоном. по этому нужно сделать отступы от краев и только потом, залить белым background-color:#FFFFFF;.
нужно делать больше деталей, тоесть разбить те участки где нет заполнения.а вот следующая ошибка смещения.Элемент дизайна нужно организовывать в одном блоке не деля его на части. так легче контроллировать его строгость. Либо делать одинаковые отступы. В этом примере слева отступы верхней части margin: 25px 0 0 0; а отступов нижней части их просто нет, она сделана просто по центру, - это не не правильно.
Если задаете ширину то center выравнивание блока в большенстве случаев перестанет действовать.
по этому добавляют margin: 0 auto; делают так
#btm{ background:url(images/btm.jpg) no-repeat center; height:162px; width:720px;
margin: 0 auto; padding: 0; }
а теперь поговорим о блоках за пределами отступов.
скажем копирайт находится в блоке с отступами #copy {padding:82px 0 0 20px;}
но это отступы от самой левой границы окна. а не в блоке как на картинке:
здесь более понятней видно как расположены сейчас блоки:
Сначала в HTML вынести из внутреннего блока div id="copy", 1 на уровень выше:
.div. id="btm"
.div id="copy". © 2008 Setera ./div.
.div. id="btm_img" ./div.
./div.
в стилях сделать
добавить два поля
position:absolute;
left: 10px;
получится вот так:
#copy { color:#d2c7bd;
position:absolute;
left: 10px;
padding: 85px 0 0 20px;
}
а вто что показывает опера когда экономите на слоях.
подложек нет.
в данном случае ошибку было очень трудно найти
была в не правильной последовательности значений заднего фона:
не правильно:
background: url(images/cnt_bg.jpg) center repeat-y top;
правильно
background: url(images/cnt_bg.jpg) repeat-y center top;
Opera не корректно выводит.
Вот полный листинг стиля и HTML
.content {
background: url(images/cnt_bg.jpg) repeat-y center top;
color: #4e3f30;
margin: 0 auto;
padding: 0;
width: 720px;
}
#main{
background-color:#FFF;
width:680px;
margin: 0 20px 0 20px;
}
#main .cntnt{
width:602px;
background-color:#FFFFFF;
}
и HTML последовательность с описанием
.blockquote. .div class="content". тень
.div id="main". отступы по 20 пикселов
.div class="cntnt". ./blockquote.
теперь все в порядке.
Плавающие блоки делают делают наоборот сначала правый потом левый
#menu {margin:0; padding:0; width:680px;
height:55px;}
.right {float:right; margin:0;padding:0;
background: url(images/srch_bg.jpg);
width:206px;
height:55px;
}
.left {float:left; margin:0; padding:0;
background:url(images/menu_bg.jpg);
width:474px;
height:55px;}
в итоге получается вот так: сначала левая потом правая часть.
чтобы получилось так (качественная верстка, но можно еще лучше):
делаем промежуточный блок. тогда padding сверху не нужно делать
Комментарии
Отправить комментарий