Бягство от затвора
на 3 юли 2008 от Гонзо в Уеб,
Понякога не ви ли се иска да разкарате всички онези елементи, които сте наслагали само за да подредите съдържанието, и които нямат никакъв друг смисъл? Ще се опитам да ви помогна, като ви покажа как да се освободите от оковите на онзи <div id=”wrapper|wrap|frame|container”> и пак да запазите фиксираната ширина на сайта си.
Да видим как стават нещата обикновено:
<html>
<head>
</head>
<body>
<div id="container">
</div>
</body>
</html>
body {
background:#fff;
color:#000;
margin:0;
text-align:center;
}
#container {
width:1000px;
margin:0 auto;
text-align: left;
}
За да елиминираме безсмисления div елемент, просто ще преместим ширината върху body елемента и ще добавим малко стил към коренния елемен html.
<html> <head> </head> <body> </body> </html>
html {
text-align:center;
background:#fff;
margin:0;
}
body {
color:#000;
width:1000px;
margin:0 auto;
text-align: left;
}
Е, елиминирахме един елемент без да навредим на дизайна и направихме структурата една идея по-добра.
Вече използвам този трик в темата на този блог, така че няма за какво да се тревожите. Лошото е, че не мога да намеря сайта, от където видях как се прави, ако някой е попадал на него, да даде линка, за да отдам дължимото на автора.
Здравейте, аз съм 
Radoslav Popov профил
17 август 2008 @ 21:24
Интересен подход. Дори можем да се отървем от text-align и на двете места и да построим layout-а само с margin:0 auto. Разбира се си трябва doctype, за да работи под IE6.
Трябва да се внимава обаче да не се допусне inline елемент като първи child на body. При липсата на wrapper това е възможно в някои случаи. Накрая може да се окаже, че се налага да слагаме излишен div (без никакви стилове), само за да заградим inline елемент, което би обезсмислило този метод. Но това само между другото ;).
Гонзо профил
18 август 2008 @ 10:32
Мислех, че text-align:center е необходимо заради IE6, обаче на първо четене минава и без него, което съкращава нещата още малко. А doctype естествено че слагаме, нали, все пак спазваме уеб-стандартите… Само не разбирам какъв ще е проблема с inline елемента? След като ширината на body е фиксирна, всеки елемент ще си стои вътре. А и винаги може да се добави display:block за който и да е елемент, ако е необходимо.
Radoslav Popov профил
18 август 2008 @ 20:57
Просто inline елемент не може да е директен child на body. Пак уеб стандарти. ;)
Гонзо профил
18 август 2008 @ 22:35
Хмм, да, верно… Но все пак е малко вероятно някой да има нужда да го направи.