Я страдаю "divitis"? (Нужен CSS-специалист)
Я прочитал много статей, которые осуждают чрезмерное использование divs. У меня есть ощущение, что я мог бы сделать это в следующей отметке:
HTML:
<div id="header">
<div class="container">
<div id="banner">
<h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
<ul id="lang">
<li><a href="index.php">English</a></li>
<li><a href="es/index.php">Español</a></li>
<li><a href="tw/index.php">中文(繁體)</a></li>
<li><a href="cn/index.php">中文(简体)</a></li>
</ul>
</div>
<div id="intro">
<div id="tagline">
<h2>Nulla vitae tortor mauris</h2>
<p>Pellentesque faucibus est eu tellus varius in susc...</p>
</div>
<div id="about">
<h2>right</h2>
<p>Pellentesque faucibus est eu tellus varius in susc...</p>
</div>
</div><!-- #intro -->
</div><!-- .container -->
</div><!-- #header -->
CSS:
.container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
/* header */
#header {
background: #EEE;
}
#header h1 {
float: left;
}
#header h2, #header a, #header p {
color: #999;
}
#header h1 a {
background: url(../images/logo.png) no-repeat scroll 0 0;
float: left;
height: 30px;
text-indent: -9999px;
width: 500px;
}
#banner {
border-bottom: 1px solid #DDD;
padding: 0 0 15px 0;
margin: 30px 0 30px 0;
overflow: hidden;
width: 960px;
}
#lang {
float: right;
padding: 9px 0 0 0;
}
#lang li {
float: left;
margin: 0 0 0 20px;
}
#lang li a {
font-size: 10px;
}
/* intro */
#intro {
overflow: hidden;
padding: 0 0 30px 0;
}
#tagline {
float: left;
margin: 0 40px 0 0;
width: 540px; /* 560 */
}
#tagline h2 {
font-size: 24px;
}
#about {
float: right;
width: 380px;
}
объяснение использования этих дивов:
: определяет цвет фона, который расширяется до конца окна (лежит за пределами div .container
).
контейнер: центрирует содержимое (но не фон).
баннер: чтобы определить цвет фона или границы вокруг ul#lang
и h1
.
введение: то же, что и выше, но для #tagline
и #about
(в противном случае я должен определить, скажем, отступ или поле для слогана и о индивидуально).
я злоупотребляю divs?
может ли это быть упрощенно?
12 ответов:
выглядит идеально. Это следует взять в качестве примера!
один симптом "divitis", когда вы видите список
<div>'s
вместо<ul>
.
по большей части ваша разметка в порядке. Каждый сайт представляет несколько разные проблемы. Я бы сказал, что ваш код может быть улучшен путем удаления
#intro
и просто применяя CSS к двум столбцам.в зависимости от остальной части вашей страницы, вы сможете обойтись без
#header
div.кроме того, вы можете стиль
html
иbody
при необходимости, чтобы помочь с несколькими фонов / контейнеров. Просто помните, чтоbody
начинает действовать какdiv
(не распространяется на нижнюю часть браузера), как только вы начнете применять стили кhtml
.используя
divs
или новые элементы блока HTML 5, это все о создании семантического смысла в первую очередь, и давая места, чтобы повесить ваш CSS во-вторых.С каждого
div
элементы служат определенной цели, где они обеспечивают семантическую группировку элементов, которые идут вместе, я бы сказал, что ваш код просто отлично.для записи, это divitis:
<div class='image'> <div class='shadow'> <div class='bottom-shadow'> <img src="..." alt="" /> </div> </div> <div class="clear"></div> </div>
вы используете
<ul>
S для навигации, и<h1><h2>
для заголовков - это достаточно хорошо для меня. Я не мог придумать более подходящий элемент для любого элементаdiv
s вы используете. Прошел бы мою проверку качества без дальнейших церемоний.
вы используете
<p>
,<h*>
когда они вам нужны, так что это правильно.что плохо, так это использование div вместо соответствующего элемента. Здесь такого нет.
у каждого может быть свое мнение на этот счет, но вот мое мнение:
ты не С помощью
<div>
.если вы были используя
<div>
когда вы должны использовать<h2>
,<p>
и т. д., Тогда вы, безусловно, будете делать это неправильно. Другими словами, если вы сгибаете<div>
в зависимости от ваших целей, у вас есть проблема.к сожалению, когда CSS начал получать популярный, было много статей, написанных в поддержку этой практики с названиями / темами после "Use
<div>
вместо<tagX>
!" узор.
Это отличная разметка. Хорошее семантическое использование всех элементов. И красивое использование комментариев. (Да, я видел, что на это уже ответили и проголосовали правильно, но я новичок и ищу некоторые моменты, если бы я был здесь первым, wammo!)
вы можете начать использовать новые элементы HTML 5 Теперь, с несколькими трюками JS.
затем вы получаете действительно полезный верхний и Нижний колонтитулы, статьи, в сторону и элементы меню.
объедините это со стилями CSS3 для закругленных углов, теней... divitis может есть лекарство, но нам придется подождать, чтобы получить полную поддержку для этого.
Не злоупотреблять вообще. Это чистый, семантический код всего с 2 дивами, связанными непосредственно с дизайном (не знаю, если ваш .контейнер div имеет стили-я бы предположил, что вы используете их в других местах, потому что это класс). Семантический код-вот что имеет значение! Я думаю, ты проделал отличную работу.
есть одно изменение, которое сразу приходит на ум:
Если это действительно все ваши стили, бросьте.container
div. Поскольку у него нет стилей, он избыточен.
Я попробовал код в FF3.5 и IE8. Цвет фона, определенный для div "header", в FF3.5 весь div заголовка имеет этот цвет. Но в IE8 цвет фона отображается только для баннера и заголовка h2 в intro div.
Итак, вопрос в том, должен ли цвет фона применяться ко всему заголовку div или он предназначен только для определенной части?
и для контейнера div, класс атрибутов имеет значение "контейнер". Этот класс не определен в CSS.