Блогът на Гонзо

Бягство от затвора

Понякога не ви ли се иска да разкарате всички онези елементи, които сте наслагали само за да подредите съдържанието, и които нямат никакъв друг смисъл? Ще се опитам да ви помогна, като ви покажа как да се освободите от оковите на онзи <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;
}

Е, елиминирахме един елемент без да навредим на дизайна и направихме структурата една идея по-добра.

Вече използвам този трик в темата на този блог, така че няма за какво да се тревожите. Лошото е, че не мога да намеря сайта, от където видях как се прави, ако някой е попадал на него, да даде линка, за да отдам дължимото на автора.

Споделяне

Етикети: , ,

4 коментара по “Бягство от затвора”

  1. Radoslav Popov

    Интересен подход. Дори можем да се отървем от text-align и на двете места и да построим layout-а само с margin:0 auto. Разбира се си трябва doctype, за да работи под IE6.
    Трябва да се внимава обаче да не се допусне inline елемент като първи child на body. При липсата на wrapper това е възможно в някои случаи. Накрая може да се окаже, че се налага да слагаме излишен div (без никакви стилове), само за да заградим inline елемент, което би обезсмислило този метод. Но това само между другото ;).

  2. Гонзо

    Мислех, че text-align:center е необходимо заради IE6, обаче на първо четене минава и без него, което съкращава нещата още малко. А doctype естествено че слагаме, нали, все пак спазваме уеб-стандартите… Само не разбирам какъв ще е проблема с inline елемента? След като ширината на body е фиксирна, всеки елемент ще си стои вътре. А и винаги може да се добави display:block за който и да е елемент, ако е необходимо.

Comments are closed.