Первый "блин" блочной верстки

123 4
Prior
На сайте с 03.03.2008
Offline
194
#11

А по вертикали растянуть слабо? ;)

Ответы на вопрос - https://answers.net.pl
Evlampiy
На сайте с 15.05.2008
Offline
116
#12

Намек не тему для новичков? ;)

Все будет хорошо... или может быть даже еще лучше :)
Californiy
На сайте с 12.12.2006
Offline
95
#13

Верстка слабоватая, объясняю почему:

Добавь для начала:

*{border:0} /* убираем баг, когда ие6 добавляет границу к картинке, если она в ссылке */

a{outline:none} /* убираем баг, когда фаерфокс выделяет рамочкой ссылку при нажатии */

Не делай отступы от кривых скобок к атрибутам - лишний код.

Не делай отступы между атрибутами - лишний код.

Не делай отступы от идентификатора к скобкам - лишний код.

Последний атрибут не закрывай точкой с запятой - лишний код.

Если же собираешься делать по красоте - делай pretty print до конца.

Указывай:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

вместо стрикта. Он лучше поддается верстке, стрикт же будет матюкаться на любую твою хитрость.

Зачем давать divwidth:100% ? Все блочные элементы, включая див уже имеют данное значение атрибута.

Нулевые значения пишутся без указания единицы измерения, не:

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

а:

*{margin:0;padding:0}

Как уже говорили - укорачивай повторяющиеся элементы, пример:

border:1px solid #666666;
background:#000000 url(img/spa.gif) repeat-y;
padding:3px 4px 0 8px

Указание position:relative в боди, не переносит данный параметр на дочерние блоки, а значит:

#footer{bottom:0px}

Это неработающий атрибут. И я уже говорил про нулевые значения, что является ещё одной ошибкой.

И кстати - чтоб твой прием по прижиманию футера сработал, надо ставить position:absolute, но и данный шаг имеет свои минусы (поймешь при сложных верстках).

Проверяй все шаги в IE6, много моментов (например минимальная ширина, минимальная высота) у тебя не будут работать в нем.

Указывай цвет в hex формате.

Используй контекстные селекторы, экономишь кучу css и html кода. У тебя каждый див имеет идентификатор, когда его идентификацией может служить уже тот факт что он вложен в другой див с идентификатором.

Много дублирующих атрибутов, например overflow:hidden, опять же, контекстными селекторами этот код задается один раз:

body div{overflow:hidden}

Что распространяет данный атрибут на все дивы в бади.

Забудь про использование большинства html элементов, код:

<div id="footer"><center>"Копирайт" ширина auto</center></div>

Заменяется на:

<div id="footer">"Копирайт" ширина auto</div>
#footer{text-align:center}

Заменяй спецсимволы кодом:

&laquo;Левая и правая ёлочки&raquo;

Ну это так, навскидку... и кстати - классы быстрее обрабатываются браузерами, чем айди.

Тружусь в sapiense.com.
Evlampiy
На сайте с 15.05.2008
Offline
116
#14
Prior:
А по вертикали растянуть слабо? ;)

Пробовал. Все вроде бы хорошо, но если в нижнюю часть много контента добавить, то он на вышестоящие блоки наезжал...

Может подскажите как правильно это сделать?

Californiy, большое спасибо! Полезная инфа! Может посоветуете что-нибудь реально полезное почитать?

Я раньше писал <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">, но в моем примере в IE6 криво получается.

Alex Clever
На сайте с 06.06.2009
Offline
4
#15

Угу... думаю там больше будет отзывов...;)

~ Напишу статью бесплатно (/ru/forum/362057) ~ ~ Нарисую дизайн сайта (/ru/forum/363565) ~
Evlampiy
На сайте с 15.05.2008
Offline
116
#16

Alex Clever, мне не отзывы, а реальные советы от бывалых нужны...

P.s. Но если модераторы считают также, то можно тему перенести.

Alex Clever
На сайте с 06.06.2009
Offline
4
#17

это я и имел ввиду... отзывы на вашу просьбу помочь...

Californiy
На сайте с 12.12.2006
Offline
95
#18
Californiy, большое спасибо! Полезная инфа! Может посоветуете что-нибудь реально полезное почитать?

Все, что найдете в интернете.

Я раньше писал <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">, но в моем примере в IE6 криво получается.

Ищите причину в другом.

BrokenBrake
На сайте с 03.03.2007
Offline
194
#19

Элемент center нужно убрать, его нет в стандарте, доктайп которого вы прописали в документе. Это во-первых. А во-вторых, пора уже на HTML5 переходить.

HTML5, кстати, удобнее и проще - верстать одно удовольствие.

FeoOne
На сайте с 27.12.2008
Offline
32
#20
bugerman:
А можно до padding: 3px 3px;☝

Ну тогда и про padding: 3px 3px 3px; не надо забывать ☝

123 4

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий