Prosty układ CSS 2 kolumny

Original: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

456 Berea Street

To jest pewien wychowawczy u jak wobec używać CSS stworzyć prosty układ dwukolumnowy. Jeśli chcesz utworzyć trzykolumnowy, przeczytaj jak ten poradnik wyjaśnia podstawowe pojęcia, które mogą być wykorzystywane do tworzenia tyle kolumn, ile potrzebujesz. Gdy to zrobisz, spójrz na jak stworzyć 3-kolumnowy układ z CSS.

Układ składa się z nagłówka, poziomy pasek nawigacyjny, głównej zawartości kolumna, pasek boczny i stopki. To również poziomo skupia się w oknie przeglądarki. Ładny podstawowy układ, i wcale nie trudno stworzyć z CSS gdy wiesz jak radzić sobie z nieuniknione Internet Explorer błędów.
Aby zobaczyć pełne CSS używane na każdym kroku, zobacz źródła, na przykład dokumenty.
1. podstawowe struktury
Przede wszystkim możemy utworzyć podstawowej struktury HTML:

<div id="wrap">

<div id="header"></div>

<div id="nav"></div>

<div id="main"></div>

<div id="sidebar"></div>

<div id="footer"></div>

</div>

Po tym możemy umieścić niektóre treści w różnych działach:

<div id="wrap">

<div id="header"><h1>Document Heading</h1></div>

<div id="nav">

<ul>

<li><a href="#">Option 1</a></li>

<li><a href="#">Option 2</a></li>

...

</ul>

</div>

<div id="main">

<h2>Column 1</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

</div>

<div id="sidebar">

<h2>Column 2</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

<ul>

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 2</a></li>

...

</ul>

</div>

<div id="footer">

<p>Footer</p>

</div>

</div>

Teraz mamy całkowicie stylu dokument HTML, który jest skonstruowany w sposób, który pozwala nam używać CSS do kontrolowania jej układ.
2. dostosowanie elementów ciała i html
Aby zawartość dotrzeć do krawędzi okna przeglądarki, możemy ustawić marginesy i dopełnienia elementów ciała i html do zera. Możemy również określić kolory tekstu i tła.

body,

html {

margin:0;

padding:0;

color:#000;

background:#a7a09a;

}

3. do głównych pojemników
Po to jest czas, aby dać szerokości obszaru zawartości i Wyśrodkuj w poziomie. Robimy to poprzez określenie szerokości i marginesy głównego kontenera, #wrap. Możemy również dać kolor tła, aby pokazać się na stronie.
Metody, których używamy, aby wyśrodkować zawartość opiera się na fakcie, że kiedy elementu po lewej i prawej marginesy ustawione na auto, pokażą, co pozostało po szerokości elementu została odjęta od tego kontenera. W tym przypadku szerokość #wrap zostanie odjęta od szerokości okna przeglądarki.
Uwaga: dla tej metoda, aby pracować w programie Internet Explorer (wersja 6 i późniejszy tylko), dokument musi używać DOCTYPE, że siły IE do jej w trybie standardów. Przeczytaj Fix Your Site z prawo DOCTYPE! Aby uzyskać więcej informacji.

#wrap {

width:750px;

margin:0 auto;

background:#99c;

}

W przypadku, gdy zastanawiasz się, dlaczego nie używamy elementu body kontrolować szerokość i centrowanie układu, dlatego robie tak może powodować niepożądane skutki uboczne w niektórych wersjach programu Internet Explorer.
Po tym dajemy sekcji różne kolory tła dokumentu aby je pokazać się.

#header {

background:#ddd;

}

#nav {

background:#c99;

}

#main {

background:#9c9;

}

#sidebar {

background:#c9c;

}

#footer {

background:#cc9;

}

4. miejsce kolumny boczne
Do dwóch kolumn (#main i #sidebar) wyświetlania obok siebie Pływamy je, jeden po lewej i po prawej stronie. Możemy również określić szerokość kolumny.

#main {

float:left;

width:500px;

background:#9c9;

}

#sidebar {

float:right;

width:250px;

background:#c9c;

}

Należy zauważyć, że suma szerokości powinna być równa szerokości do #wrap w kroku 3.
To sprawi, że #sidebar pojawiają się z prawej strony #main, ale Stopka jest nie gdzie powinno być.
5. wcisnąć stopki
Stopki nie dostaniesz wciśnięty do dolnej części treści ze względu na sposób pływak działa. Podczas ty płynąć element, jest usuwany z przepływem dokumentów i nie naciskać elementy, które po nim następują w dół. W tym przypadku #footer rozpocznie się tuż poniżej #sidebar.
Aby tego uniknąć używamy właściwości wyraźnie powiedzieć w stopce to, że nie ma żadnych elementów obok.

#footer {

clear:both;

background:#cc9;

}

6. Utrwalić kolor tła
Teraz widzimy, że krótszy kolumna nie kontynuować do stopki. Aby wyglądać tak jak to robi, używamy tego samego koloru tła dla #sidebar i #wrap.

float:right;

width:250px;

background:#99c;

}


Także jeśli ty wziąć pewien patrzeć na ten krok w programie Internet Explorer 6 można zauważyć, że kolor tła stopki naciska obok głównej treści. Który zadba o później.

 

Jeśli nie wiesz, która kolumna ma być najwyższy, i obie kolumny do różnych środowisk i wyglądać jak idą do dołu, musisz używać pewien workaround. Istnieje kilka sposobów, aby osiągnąć taki efekt:

 

Faux kolumny

Tworzenie układów płyn z negatywnych marginesów

W poszukiwaniu jednego układu prawda

 

7. aby poziomy pasek nawigacyjny

 

#nav zawiera regularne nieuporządkowaną listę linków. Ponieważ nie chcę wyglądać jak listy nieuporządkowanej mamy zmiany stylu go.

 

#nav ul {

margin:0;

padding:0;

list-style:none;

}

#nav li {

display:inline;

margin:0;

padding:0;

}

 

8. Dopasuj marginesy i uszczelek i aby IE 6 współpracować

 

Prawie gotowe. Czas, aby dopasować marginesy i dopełnienia niektórych elementów, aby układ trochę mniej ciasno.

 

#header {

padding:5px 10px;

background:#ddd;

}

h1 {

margin:0;

}

#nav {

padding:5px 10px;

background:#c99;

}

#main {

float:left;

width:480px;

padding:10px;

background:#9c9;

}

h2 {

margin:0 0 1em;

}

#sidebar {

float:right;

width:230px;

padding:10px;

background:#99c;

}

#footer {

clear:both;

padding:5px 10px;

background:#cc9;

}

#footer p {

margin:0;

}

 

Jeden rzecz wobec wziąć pod uwagę tutaj jest to, że gdy dodaliśmy dopełnienie do #main i #sidebar, możemy odjąć szerokość lewego i prawego uszczelek z każdego elementu szerokość. To jest jak CSS pole modelu działawięcej szczegółów na ten temat, zobacz program Internet Explorer i CSS model skrzyni.

 

I ostateczny jest zrekompensowanie pływak błąd w Internet Explorer 6. Jeśli spojrzeć na krok 6 w IE 6, zauważysz, że stopki nie zawsze pchają całkowicie poniżej #main. Przewiń w górę iw dół kilka razy, jeśli nie widać od razu.

 

Jest to bardzo widoczne w ten nazwa zbioru demonstracyjnego, ponieważ każdy głównym elementem jest kolor tła i wszystko jest bardzo mocno. Jednym ze sposobów rozwiązywania tego problemu jest upewnienie się, że Stopka ma pojęcie programu Internet Explorer o nazwie Layout. Istnieje kilka sposobów osiągnięcia tego celu, ale zrobimy to za pomocą Star HTML CSS hack do stopki na wysokości tylko w IE 6:

 

* html #footer {

height:1px;

}

 

Co dziwne, jak może to wyglądać, to nie praca. Dzięki kolejny błąd w IE, stopka nie będzie tylko jeden piksel wysoki, ale tak wysoka, jak dyktuje jej zawartości.

 

I mamy gotowe. Stworzyliśmy prosty układ, który może być używany jako starter dla bardziej zaawansowanych układów.

 

 

Proszę nie wahaj się skontaktować się ze mną, jeśli można zaproponować ulepszenia do tej metody.
Zapisz się / follow

 

Comments are closed.