HTML układ: dodanie paska bocznego kolumny do istniejącej witryny

Mam witryny z ciała, które wygląda tak:HTML układ: dodanie paska bocznego kolumny do istniejącej witryny

<body> 
    <div id="header">...</div> 
    <div id="content">...</div> 
    <div id="footer">...</div> 
</body>

Brak bezwzględne/względne sztuczki pozycjonowania są używane w tych div s, ale istnieje wiele float s, clear s, margin s i padding s w stylach tych div s i ich wewnętrznych elementów. Wszystko to daje stronę, która wygląda tak:

┌───────────────┐ 
│  header │ 
└───────────────┘ 
┌───────────────┐ 
│ content │ 
└───────────────┘ 
┌───────────────┐ 
│  footer │ 
└───────────────┘

Moje pytanie brzmi: w jaki sposób mogę dodać jeden niezależny stałej szerokości lewa kolumna (pasek boczny) z dodatkową zawartość, która zakontraktowania całej witryny (nagłówek, treść i stopki) i przesuń je w prawo.

┌────┐┌─────────┐ 
│side││ header │ 
│bar │└─────────┘ 
│ │┌─────────┐ 
│ ││ content │ 
│ │└─────────┘ 
│ │┌─────────┐ 
│ ││ footer │ 
└────┘└─────────┘

Znam jedną niemal idealne rozwiązanie, ale jest brzydki i wymaga istniejące re-gniazdowania div:

<body> 
    <table> 
    <tr> 
     <td id="sidebar">...</td> 
     <td> 
     <div id="header">...</div> 
     <div id="content">...</div> 
     <div id="footer">...</div> 
     </td> 
    </tr> 
    </table> 
</body>

Czy to możliwe, aby to zrobić elegancko, wystarczy dodać gdzieś jednego zewnętrznego elementu paska bocznego w ciele, tj. w ten sposób?

<body> 
    <div id="sidebar">...</div> 
    <div id="header">...</div> 
    <div id="content">...</div> 
    <div id="footer">...</div> 
</body>

Próbowałem naiwne podejście - takich jak stylizacji:

#sidebar { float: left; width: 20em; }

lub

#header { margin-left: 20em; } 
#content { margin-left: 20em; } 
#footer { margin-left: 20em; }

tego rodzaju prac, ale łamie najszybciej clear: both lub clear: left napotkano w nagłówku/content/footer.

Czy są zatem alternatywy dla rozwiązania stołowego?

Źródło

2013-08-09 GreyCat

Chciałbym użyć bezwzględnie umieszczonego paska bocznego, a następnie ustawić wypełnienie na owijce na szerokość tego elementu. Następnie ustawiam dopełnienie marginesu na innych elementach lub dodaję go do dopełnienia na opakowaniu.

http://jsfiddle.net/jAVQv/

<div class="container"> 
    <div id="sidebar"></div> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

.container { position:relative; padding:0 0 0 55px; } 
#sidebar { 
    position:absolute; 
    top:0; bottom:0; left:0; 
    width:50px; 
    background:#000; 
} 

#header { border:1px solid #000; width:100px; height:20px; 
    margin:0 0 5px 0; 
} 
#content { border:1px solid #000; width:100px; height:50px; 
    margin:5px 0 5px 0; 
} 
#footer { border:1px solid #000; width:100px; height:20px; 
    margin:5px 0 0 0; 
}

Źródło

2013-08-09 13:57:47

Dzięki! Rozwiązanie to obejmuje również ponowne zagnieżdżanie nagłówka/treści/stopki, ale przynajmniej nie jest tak uciążliwe, jak rozwiązanie oparte na tabelach. Czy jest możliwe zachowanie nagłówka/treści/stopki w "treści"? Sądzę, że powinno być możliwe stylizowanie 'body' z względną pozycją i dopełnieniem? – GreyCat

Oto rozwiązanie: "body": http://jsfiddle.net/jAVQv/1/ - wygląda na to, że jest dokładnie to, czego potrzebuję. Rozumiem, że stylizacja "ciała" jest złą praktyką, ale myślę, że jest lepsza niż wszystkie alternatywy (to jest ponowne zagnieżdżanie) w tym przypadku. – GreyCat

Zrobiłem trochę jsfiddle pomóc podręczny. Możesz również sprawdzić, czy twoja zawartość div nie psuje całego CSS. Mam nadzieję że to pomoże.

Edycja: wszystkie kolory i wymiary są fikcyjne używane dla przykładu. To działa z dowolnym wymiarem.

html:

<body> 
    <div id="sidebar">...</div> 
    <div id="header"> 
     <div id="testLeft"></div> 
     <div id="testRight"></div> 
     <div class="clearFix"></div> 
    </div> 
    <div id="content">...</div> 
    <div id="footer">...</div> 
</body>

css:

.clearFix { 
    clear: both; 
} 

#sidebar { 
    width: 50px; 
    height: 30px; 
    background-color: green; 
    float: left; 
} 

#header { 
    width: 250px; 
    background-color: red; 
    margin-left: 55px; 
} 

#testLeft { 
    width: 50px; 
    height: 50px; 
    float: left; 
    background-color: pink; 
} 

#testRight { 
    width: 50px; 
    height: 50px; 
    margin-left: 55px; 
    background-color: purple; 
} 

#content { 
    width: 250px; 
    height: 20px; 
    background-color: blue; 
    margin-left: 55px; 
} 

#footer { 
    width: 250px; 
    height: 20px; 
    background-color: orange; 
    margin-left: 55px; 
}

Źródło

2013-08-09 13:58:38 Lapidouce

Dzięki za jsfiddle. Doskonale ilustruje dokładnie to, o czym mówię: 'clear' tu rozbija rzeczy - jeśli zwiększysz wysokość paska bocznego, nagłówek stanie się gigantyczny: http://jsfiddle.net/FbQZx/1/ – GreyCat

Problem doesn nie występuje już za każdym razem, gdy ustawiam zdefiniowaną wysokość nagłówka: [http://jsfiddle.net/FbQZx/1/](http://jsfiddle.net/FbQZx/1/) – Lapidouce

Nie wydajesz się mieć zaktualizowałeś wszystko (prawdopodobnie nie zapisałeś?) Co więcej, ustawienie stałej wysokości nagłówka (lub treści lub stopki) nie jest opcją dla mojej sprawy - szczególnie dla treści. – GreyCat

użyję elementów HTML5 dać znaczniki semantyczne znaczenie.

<body> 
    <aside><!-- Nav bar --></aside> 
    <article> 
    <header>...</header> 
    <section>...</section> 
    <footer>...</footer> 
    </article> 
</body>

Następnie styl aside i article z float: left.

Źródło

2013-08-09 14:02:15 James

HTML układ: dodanie paska bocznego kolumny do istniejącej witryny

Odpowiedz

Powiązane problemy