Jak wykonać trzy kolumny

[ilder]

Już mam dość. Zdrowo ponad 3 godziny walczyłem z tym i nie mogę dać rady

Chciałem całą stronę wykonać w CSS. Wszystko szło fajnie dopóki nie trafiłem na to. Mianowicie w środku strony mam trzy kolumny. Wykonać w tabeli to nie problem ale jak wykonać to w CSS? Myślałem, że jak obejmę je znacznikiem div i dam któryś rodzaj pozycjonowania to spozycjonuje mi się do tego diva, który obejmuje ale niestety to nie działa.

Jest na to jakiś sposób czy jednak lepiej użyć tabeli?

<h1>Nagłówek</h1>
Tekst
<div>
 <div class="sekcja_lewa">Sekcja lewa</div>
 <div class="sekcja_srodkowa">Sekcja środkowa</div>
 <div class="sekcja_prawa">Sekcja prawa</div>
</div>
Tekst

div.sekcja_lewa {position: absolute;
		left: 0px;
		top: 0px;
		width: 160px;}
div.sekcja_srodkowa {position: absolute;
		left: 160px;
		top: 0px;
		width: 653px;}
div.sekcja_prawa {position: absolute;
		left: 813px;
		top: 0px;
		width: 160px;}

Z góry dzięki za pomoc.

[Sanchez Spinoza]

<div id="content">
	  <div id="sekcja_lewa">LEWA</div>
			  <div id="sekcja_prawa">
					 <div id="sekcja_prawa_L">PRAWA_LEWA</div>
					 <div id="sekcja_prawa_P">PRAWA_PRAWA</div>
			  </div>
</div>

#content {width:100%;}
#sekcja_lewa {width:30%; float:left; background-color:#eee;}
#sekcja_prawa {width:70%; float:right; background-color:#c0c0c0;}
#sekcja_prawa_L {width:50%; float:left; background-color:#ddd;}
#sekcja_prawa_P {width:50%; float:right; background-color:#808080;}

Nie testowałem ale powinno działać.

P.s Jak masz wartość 0 w stylach to nie dodawaj px;

P.s2 Staraj się unikać absolutnego pozycjonowania. Lepiej zastosować procentowe ustawianie divów.

[ilder]

dzięki za pomoc

dodam jeszcze, że żeby nie było problemów to w elemencie następującym po tym kodzie należy dodać

clear: both;

[truvati]

po pierwsze unikać % przy szerokościach

<h1>Nagłówek</h1>

Tekst

<div id="content">

<div id="c1">Sekcja lewa</div>

<div id="c2">Sekcja środkowa</div>

<div id="c3">Sekcja prawa</div>

<br style="clear:both;"/>

</div>

Tekst

#content {width:300px;}

#c1 {width:100px; float:left; margin:0px, padding:0px;}

#c2 {width:100px; float:left; margin:0px, padding:0px;}

#c3 {width:100px; float:left; margin:0px, padding:0px;}

co i jak:

padding i margin specjalnie pod ie, gdyż ta urocza przeglądarka czasami jest nadgorliwa...

czasami pojawia się problem z wyświetlaniem float w jednej linii pod IE należy wtedy dla elementów z float dodać w deklaracji "display:inline;"

[ilder]

Chyba tabel do końca nie da się pozbyć. Metody oparte o znacznik <div> mają tę wadę, że przy

background-color: #7CB900;

kolor jest tak długo jak długo jest zawartość w kolumnie. A przy 3 kolumnach i 3 kolorach, kolory kończą się na różnych wysokościach

[Tobi]

Chyba tabel do końca nie da się pozbyć. Metody oparte o znacznik <div> mają tę wadę, że przy

background-color: #7CB900;

kolor jest tak długo jak długo jest zawartość w kolumnie. A przy 3 kolumnach i 3 kolorach, kolory kończą się na różnych wysokościach

Daj linka.

[zero3]

Metody oparte o znacznik <div> mają tę wadę, że ...kolor jest tak długo jak długo jest zawartość w kolumnie.

ustal height elementu div i pusty element rowniez bedzie mial kolor

[Paweł Dzedzej]

Czemu jesteście tak mało pomysłowi? Wystarczy dać magiczny znaczek -   (lub &[nic]#160; ) - i masz puste miejsce.

po pierwsze unikać % przy szerokościach

A to dlaczego? Dzięki procentom ustalimy proporcje na wyświetlaczu - w przypadku pikseli już nie...

[zero3]

Wystarczy dać magiczny znaczek -   (lub &[nic]#160; ) - i masz puste miejsce.

i zbędnego śmiecia w kodzie

[Paweł Dzedzej]

tak, kosmiczne śmietnisko. Jak Ci się nie podoba, możesz też dać kropkę przy czcionce 1px

[truvati]

Takie rzeczy załatwia się odpowiednio podstawionym tłem w <div id="content"> udającym tło pod trzy znajdujące się wewnątrz divy, i po sprawie testowane i działa w baaardzo wielu szablonach

Tru

[shpyo]

słyszał o ONE TRUE LAYOUT?

hint: alistapart.com

[ilder]

Tobi

Daj linka.

A po co? Kod masz na tej stronie

zero3

ustal height elementu div i pusty element rowniez bedzie mial kolor

height: 100% - nie pomaga

chyba nie chodziło Tobie o height: 100000000px? Bo szablon jest jeden a treści wiele i teraz jaką wybrać wysokość elementu żeby do każdej strony pasowało

Paweł Dzedzej

Czemu jesteście tak mało pomysłowi? tongue.gif Wystarczy dać magiczny znaczek -   (lub &[nic]#160; ) - i masz puste miejsce

ok, tylko strona jest tak długa jak dużo jest treści w którejkolwiek kolumnie. A co będzie jak to będzie szablon? Będziesz przeglądał każdą stronę i dorzucał spacji?

truvati

Takie rzeczy załatwia się odpowiednio podstawionym tłem w <div id="content"> udającym tło pod trzy znajdujące się wewnątrz divy, i po sprawie testowane i działa w baaardzo wielu szablonach

musi działać jeżeli szablon ma na każdej stronie jednakową wysokość? Tak jak pisałem poprzednio. A co z sytuacją kiedy strona jest tak długa jak dużo jest treści w którejkolwiek kolumnie? Chyba musiałbym drugi raz do <div id="content"> wrzucić zawartość kolumny z najobszerniejszą treścią

shpyo

nie słyszał o ONE TRUE LAYOUT. Wszedłem, obejrzałem i zbytnio nie rozumiem. Mój angielski stoi (albo leży) na poziomie średnio kiepskim

[zero3]

zero3

ustal height elementu div i pusty element rowniez bedzie mial kolor

height: 100% - nie pomaga

chyba nie chodziło Tobie o height: 100000000px? Bo szablon jest jeden a treści wiele i teraz jaką wybrać wysokość elementu żeby do każdej strony pasowało

mozesz ustalic wysokosc elementu tak, by byl wypelniony kolorem nawet jesli jest pusty lub jesli jest wypelniony trescia tylko w czesci.

i wcale nie procentowo ani jakimis milionami pixeli.

pod Firefoxem swietnie dziala min-height: pod IE height: wydluzy sie "poprawnie" nawet jesli przekroczy ustalona liczbe

truvati juz podal rozwiazanie zapewne optymalne dla Ciebie

[Tobi]

Tobi

Daj linka.

A po co? Kod masz na tej stronie

Myslisz, ze chce mi sie tworzyc strone, zeby to przetestowac? Nie chcesz, to nie, ja mam co robic