CSS - jak zrobić 2 kolumny
Marek
Mam problem z utworzeniem prostego layoutu 2-kolumnowego w postaci:
<div id="container">
<div id="leftColumn">tre��</div>
<div id="rightColumn">tre��</div>
</div>
#container posiada 500px szeroko�ci. Lewa kolumna mo�e nie wyst�pi� w kodzie
lecz gdy wyst�pi to jej szeroko�� wynosi 100px. Prawa kolumna zajmuje ca��
reszt� przestrzeni. Nada�em styl float:left i width:100px lewej kolumnie.
Problem w tym, �e je�li prawa kolumna posiada styl float:left, to spada pod
lew� gdy tekst zawarty w niej jest bez �amania. Natomiast gdy usun�
float:left z prawej kolumny, to tekst umieszczony w prawej kolumnie uk�ada
si� dobrze ale tylko do momentu gdzie ko�czy si� lewa kolumna. Poni�ej jej
tekst zaczyna si� od lewej kraw�dzi ekranu. Czy da si� problem rozwi�za� bez
budowania layoutu na tabelach ?
Krzysztof Warunek
ale og�lnie �le si� zabierasz do tego:
http://www.code-sucks.com/css%20layouts/
--
Krzysztof Warunek
Marek
> ale og�lnie �le si� zabierasz do tego:
> http://www.code-sucks.com/css%20layouts/
To co mi podes�a�e� dotyczy "fixed width" a nie "auto width" jednej z
kolumn. Ponadto w tym tutorialu i tak identycznie realizujďż˝ podziaďż˝ na dwie
kolumny wi�c nie rozumiem? . Je�li robi� to niew�a�ciwie, to jakie podej�cie
sugerujesz? Szuka�em rozwi�za� w Google ale niczego innego ni� stosuj� nie
znalaz�em.
W mi�dzyczasie nada�em styl display:table-cell prawej kolumnie. Pomog�o pod
IE8 i FF ale nie zadzia�a pod IE<8. Z overflow poeksperymentuj�.
Giecze
#leftColumn + #rightColumn {width: 400px; float: right;}
Giecze
..w starym IE to pewnie nie zadzia�a, sugeruj� ola� u�ytkownik�w IE i
da� protez�: dla #rightColumn na sta�e 400px (tylko dla IE, hackiem).
PS.
By�oby spoko gdyby� zamiast za�mieca� grup� (t� i p.c.grafika) do��
podstawowe pytania _najpierw_ siďż˝ pouczyďż˝ i poszukaďż˝ w sieci - o tym
wszystkim juďż˝ napisano.
Grzegorz
Marek
> da� protez�: dla #rightColumn na sta�e 400px (tylko dla IE, hackiem).
W�a�nie tego zrobi� nie mog�. U�ytkownik�w IE w statystykach jest jeszcze
zbyt wielu. Sta�a szeroko�� prawej kolumny rozwali layout w przypadku gdy
lewa nie wyst�pi.
> PS.
> By�oby spoko gdyby� zamiast za�mieca� grup� (t� i p.c.grafika) do��
> podstawowe pytania _najpierw_ siďż˝ pouczyďż˝ i poszukaďż˝ w sieci - o tym
> wszystkim juďż˝ napisano.
Przeczytaj dok�adnie o czym tam napisa�em a nie wnioskuj po tytu�ach
sugerujacych, �e to bana�. M.in. sporo o tym czego szuka�em i nie znalaz�em
w Googlach lub helpach. Trudno jest zreszt� znale�� co� czego nie ma - jak
si� p�niej dowiedzia�em. Po d�ugiej dyskusji (jak na tak pono� banalne
Twoim zdaniem problemy) nawet osoby do�wiadczone przyzna�y, �e nie ma
rozwi�zania kwestii o jakich pisa�em, s� tylko obej�cia. Skoro to stanowi�o
problem dla os�b zaawansowanych (w domy�le), to s�dz�, �e problem by�
adekwatny do tego by pisaďż˝ o nim na grupie.
Po drugie zauwa�, �e nawet niniejszy problem dw�ch kolumn w specyficznym
zastosowaniu r�wnie� trudno namierzy� w Googlach, a szuka�em z godzin�
odpowiedzi. Przypuszczalnie r�wnie� i ten temat jest nierozwi�zywalny.
Giecze
> > ..w starym IE to pewnie nie zadzia�a, sugeruj� ola� u�ytkownik�w IE i
> > da� protez�: dla #rightColumn na sta�e 400px (tylko dla IE, hackiem).
>
> W�a�nie tego zrobi� nie mog�. U�ytkownik�w IE w statystykach jest jeszcze
> zbyt wielu. Sta�a szeroko�� prawej kolumny rozwali layout w przypadku gdy
> lewa nie wyst�pi.
Zbyt wielu tzn... jaki procent?
> > PS.
> > By�oby spoko gdyby� zamiast za�mieca� grup� (t� i p.c.grafika) do��
> > podstawowe pytania _najpierw_ siďż˝ pouczyďż˝ i poszukaďż˝ w sieci - o tym
> > wszystkim juďż˝ napisano.
>
> Przeczytaj dok�adnie o czym tam napisa�em a nie wnioskuj po tytu�ach
> sugerujacych, �e to bana�. M.in. sporo o tym czego szuka�em i nie znalaz�em
> w Googlach lub helpach. Trudno jest zreszt� znale�� co� czego nie ma - jak
> si� p�niej dowiedzia�em. Po d�ugiej dyskusji (jak na tak pono� banalne
> Twoim zdaniem problemy) nawet osoby do�wiadczone przyzna�y, �e nie ma
> rozwi�zania kwestii o jakich pisa�em, s� tylko obej�cia. Skoro to stanowi�o
> problem dla os�b zaawansowanych (w domy�le), to s�dz�, �e problem by�
> adekwatny do tego by pisaďż˝ o nim na grupie.
Ka�dy z tych niby-problem�w mo�na doprowadzi� do kilku krok�w w action
kt�ry za�atwi to w sekund�. Zapewniam.
> Po drugie zauwa�, �e nawet niniejszy problem dw�ch kolumn w specyficznym
> zastosowaniu r�wnie� trudno namierzy� w Googlach, a szuka�em z godzin�
> odpowiedzi. Przypuszczalnie r�wnie� i ten temat jest nierozwi�zywalny.
Zauwa�am tyle:
#container {
width: 500px;
}
#leftColumn {
width: 100px;
float: left;
}
#rightColumn {
height: 100%;
}
#leftColumn + #rightColumn {
width: 400px;
float: right;
}
Sam si� uczy�em CSS (mia�em r�wnie� zadanie z "menu") i zakasa�em
r�kawy, znalaz�em i przyswoi�em wiedz�. To s� tematy do _poznania_ a nie
_dyskutowania_.
Photoshopa r�wnie� si� poznaje intensywnymi tygodniami, bo to pot�ne
narz�dzie, a ty rzucasz "dyskusje" nie poznawszy nawet filozofii
dzia�ania narz�dzia.
G�upio mi by�o bez wysi�ku z w�asnej strony �mieci� na usenecie. Taki
old school.
Grzegorz
Marek
W grudniu wysz�o 28%. Z czego 1% to IE8.
> Ka�dy z tych niby-problem�w mo�na doprowadzi� do kilku krok�w w action
> kt�ry za�atwi to w sekund�. Zapewniam.
Tak, tylko trzeba sk�adowe pozna� tych akcji. Dzi�ki za pomoc na grupie
graficznej. Sam na to nie wpad�bym czytaj�c po 10x do��czon� instrukcj� cho�
teoretycznie by�oby to mo�liwe do zrobienia.
> Zauwa�am tyle:
>
> #container {
> width: 500px;
> }
>
> #leftColumn {
> width: 100px;
> float: left;
> }
>
> #rightColumn {
> height: 100%;
> }
>
> #leftColumn + #rightColumn {
> width: 400px;
> float: right;
> }
No i w�a�nie tu jest problem - to nie zadzia�a na IE<8. Efekt jest taki:
tekst w lany w praw� kolumn� powoduje, �e staje si� ona wy�sza od lewej. Od
momentu gdy tekst przekracza granic� dolnej kraw�dzi lewej ramki zaczyna
renderowa� si� od kraw�dzi containtera. Styl:
> #rightColumn {
> height: 100%;
> }
nie wniesie skutku dlatego bo ten container nie posiada narzuconej wysoko�ci
i zgodnie z dokumentacjďż˝:
http://www.w3.org/TR/CSS21/visudet.html#propdef-height
The percentage is calculated with respect to the height of the generated
box's containing block. If the height of the containing block is not
specified explicitly (i.e., it depends on content height), and this element
is not absolutely positioned, the value computes to 'auto'
> Sam si� uczy�em CSS (mia�em r�wnie� zadanie z "menu") i zakasa�em
> r�kawy, znalaz�em i przyswoi�em wiedz�. To s� tematy do _poznania_ a nie
> _dyskutowania_.
>
> Photoshopa r�wnie� si� poznaje intensywnymi tygodniami, bo to pot�ne
> narz�dzie, a ty rzucasz "dyskusje" nie poznawszy nawet filozofii
> dzia�ania narz�dzia.
>
S�k w tym, �e trudno przy braku wiedzy oceni� czy problem jest nadaj�cy si�
na grupďż˝ czy nie. Z kolei gdy posiada siďż˝ juďż˝ wiedzďż˝ to zwykle nie ma po co
zadawa� pyta� skoro zna si� odpowiedzi. Najwa�niejsze aby wykaza� si� dobr�
wol� rozwi�zania samemu problemu w oparciu o dokumentacj� jakiego� programu
lub Google. Je�li to nie pomog�o to wtedy uwa�am, �e nale�y pisa� na grup�
niezale�nie od skali problemu. To co dla pocz�tkuj�cego w dziedzinie jest
problemem, dla obytego w temacie mo�e by� pestk� i nie widz� niczego
zdro�nego w tym, �e kto� z kim� podzieli si� t� wiedz�. Unikanie pisania za
wszelk� cen� to przegi�cie w drug� stron� bo wtedy grupy trac� sens
istnienia.
> G�upio mi by�o bez wysi�ku z w�asnej strony �mieci� na usenecie. Taki
> old school.
Pewnie! Tu si� zgadzam. Zwr�� jednak uwag�, �e ja przy�o�y�em si� i wyra�nie
napisa�em co i gdzie szuka�em. By� mo�e jestem t�py i zdarza mi si� czasem
nie znale�� odpowiedzi w Googlach albo nie wydedukowa� jej z dokumentacji.
Trudno, tacy ludzie teďż˝ istniejďż˝ i musisz siďż˝ z tym pogodziďż˝.
Czasem teďż˝ wracam z pewnym pytaniem po roku aby sprawdziďż˝ czy ktoďż˝ znalazďż˝
jaki� trik na obej�cie czego� co nie by�o mo�liwe w poprzednich
technologiach. To drugi pow�d moich wizyt.
Giecze
A sprawdza�e�? Ten dopisek 100% jest tylko dla IE6 (ni�szych nie
sprawdza�em). w IE 7 dzia�a OK bez tego (jak w FF czy O, tak powinno).
W dobrych przegl�darkach prawa nast�puj�ca po lewej dostaje 400px i
float i op�ywa, w z�ym IE6 prawa dostaje hacka. U mnie to dzia�a (IE6,
7, FF3, O9.6).
> nie wniesie skutku dlatego bo ten container nie posiada narzuconej wysoko�ci
> i zgodnie z dokumentacjďż˝:
> http://www.w3.org/TR/CSS21/visudet.html#propdef-height
> The percentage is calculated with respect to the height of the generated
> box's containing block. If the height of the containing block is not
> specified explicitly (i.e., it depends on content height), and this element
> is not absolutely positioned, the value computes to 'auto'
bo to jest tylko na IE6, gdzie b��dem naprawia si� inny b��d.
GC
Marek
> sprawdza�em). w IE 7 dzia�a OK bez tego (jak w FF czy O, tak powinno).
Ups, da�em cia�a. Zrobi�em liter�wk� w stylach i dlatego nie zadzia�a�o.
Faktycznie pomaga. Dzi�ki po raz 2 :-)
> bo to jest tylko na IE6, gdzie b��dem naprawia si� inny b��d.
Tak, ju� troch� wypad�em z dziedziny hack�w IE6. Wspomina�e�, �e poradzi�e�
sobie z przypadkem menu. Czy m�g�by� rozwin�� w�tek przy moim poscie "CSS -
problem z prostym menu". Mam ju� pewn� koncepcj� obej�cia z zastosowaniem
podw�jnych tag�w np. stosuj�c <div><span>tekst menu</span></div> i nadaj�c
lewe wci�cie dla span�w. Wtedy zagnie�d�enie opcji w opcji zadzia�a.
Jednak�e wol� pos�ucha� mniej rozrzutnych propozycji.
Giecze
..
> Tak, ju� troch� wypad�em z dziedziny hack�w IE6. Wspomina�e�, �e poradzi�e�
> sobie z przypadkem menu. Czy m�g�by� rozwin�� w�tek przy moim poscie "CSS -
> problem z prostym menu". Mam ju� pewn� koncepcj� obej�cia z zastosowaniem
> podw�jnych tag�w np. stosuj�c <div><span>tekst menu</span></div> i nadaj�c
> lewe wci�cie dla span�w. Wtedy zagnie�d�enie opcji w opcji zadzia�a.
IMO to jest rozwi�zanie dorzucane do stron na si�� i albo robisz
mo�liwie estetycznie i piszesz z b�lem CSS pod konkretne warunki
(zachowania i grafiki: kolory, odst�py, ramki etc) albo korzystasz z
gotowca - jest tego trochďż˝ (Google: CSS menu generator itp) - ale
liczysz si� z ba�aganem w CSS kt�rego strach wog�le bada�. Ja robie w
wariancie 1 (w htmlu na listach ul) ale najch�tnie unikam ;).
Najpro�ciej podpatrze� u innych i si� bawi� samemu - takie �amig��wki
oswajajďż˝ z CSSem.
Grzegorz
Marek
> mo�liwie estetycznie i piszesz z b�lem CSS pod konkretne warunki
> (zachowania i grafiki: kolory, odst�py, ramki etc)
Tak w�a�nie chc� zrobi�. Ideowo takie pionowe menu jest banalne i robi�em je
mn�stwo razy natomiast w tym przypadku problem jest nietypowy gdy� podmenu z
jednej strony musi zachowywa� si� jak wci�te, a z drugiej strony background
ka�dej opcji musi rozci�ga� na ca�� szeroko��. Warunek wykluczaj�cy si�
pozornie...
> albo korzystasz z
> gotowca - jest tego trochďż˝ (Google: CSS menu generator itp) - ale
> liczysz si� z ba�aganem w CSS kt�rego strach wog�le bada�.
Nie, to odpada.
> Ja robie w
> wariancie 1 (w htmlu na listach ul) ale najch�tnie unikam ;).
Ja r�wnie� na <ul>. Zazwyczaj w 10 minut mam ostylowane i dzia�aj�ce menu.
Jednak�e listy tu nie maj� (chyba) zastosowania gdy� w ten spos�b klasyczne
wci�cia robisz, kt�re w tym projekcie s� bardziej z�o�one j/w.
> Najpro�ciej podpatrze� u innych i si� bawi� samemu - takie �amig��wki
> oswajajďż˝ z CSSem.
Ju� si� pobawi�em i g�owa mi spuch�a :-) Trudno szuka� w Googlach "menu bez
wci�� z punktu widzenia t�a ale zachowuj�ce si� jak z wci�ciami z punktu
widzenia tekstu". Nie spos�b zada� pytanie Googlom wi�c nie s�dz� abym
znalaz� jak�kolwiek referencj�. Ponadto jest to do�� unikalny spos�b
prezentowania menu wi�c tym bardziej nie b�dzie czego podpatrywa�.
Giecze
..
> Trudno szukaďż˝ w Googlach "menu bez
> wci�� z punktu widzenia t�a ale zachowuj�ce si� jak z wci�ciami z punktu
> widzenia tekstu".
Ja tego nie rozumiem, mo�e Google te� nie. Poka� najlepiej na jakiej�
bitmapie o co chodzi (mo�e by� kilka stan�w).
GC
Marek
> bitmapie o co chodzi (mo�e by� kilka stan�w).
Bitmapa by�aby banalna. Sk�ada�aby si� z szarych pask�w zawieraj�cych tekst
(s� to pozycje menu) i bia�ych 5px odst�p�w. Wszystkie szare i bia�e paski
maj� t� sam� szeroko�� i zaczynaj� si� od tej samej pozycji X. Nie ma wi�c
czego rysowa�. Wysoko�� szarego paska zale�y od ilo�ci linii tekstu
znajduj�cego si� w nim. Wielko�� wci�cia tekstu zale�y od poziomu menu. Np.
Punkt 1 zacznie si� wci�ciem 5px. Podpunkt 1.1 b�dzie mia� 10px itd. Proste
a zarazem skomplikowane...
Czego by� szuka� w Googlach? Bo ja szczerze m�wi�c nie wiem.
Giecze
Powiedzia�bym proste (kropka)
Cho� sam guru CSS si� nie czuj� z pewno�ci� bym to zrobi�.
> Czego by� szuka� w Googlach? Bo ja szczerze m�wi�c nie wiem.
Podobnych rozwi�za� i patrze� jak zrobione, mo�na r�znie� pod r�nymi
generatorami, ale chyba nie trzeba bo to wydaje si� do�� proste.
Ja szuka�em r�nych, cz�sto nietypowych trik�w dla CSS i zawsze
znajdywa�em rozwi�zania (albo pewno��, �e w CSS x.x tego nie osi�gn�). W
skrajnych przypadkach (ten na taki nie wygl�da) zorpoznanie problemu
zajmowa�o mi nawet kilkadziesi�t godzin. Ale c�, bior� za prac�
pieni�dze to si� jej ucz�.
Grzegorz
Artur Kosmal
to styl dla kolejnego poziomu definiujesz:
ul li
ul ul li
ul ul ul li
i dla kazdego poziomu ustawiasz inne text-indent
nie wiem czy jasno i przystepnie wytlumaczylem, jesli chcesz jakies
zrodla do przejrzenia to podesle wzor na priv
Marek
> Cho� sam guru CSS si� nie czuj� z pewno�ci� bym to zrobi�.
Ja r�wnie� za pomoc� podw�jnego tagowania, a mo�e raczej potr�jnego nawet:
<li><div>opcja
<ul>
<li><div>podopcja 1</div></li>
<li><div>podopcja 2</div></li>
</ul>
</div>
</li>
ul {
padding: 0px;
margin: 0px;
}
li {
background-color: #CCC;
border-bottom: 5px #FFF solid;
padding: 0px;
margin: 0px;
}
div {
pudding-left: 5px;
}
czy jako� tak. Mi to si� wyda�o chore (nie sprawdza�em czy zadzia�a). Czy
nie mo�esz cho�by wspomnie� jak rozwik�a�by� sprzeczno�� mi�dzy
konieczno�ci� robienia wci�� tekstu i braku wci�� dla opcji?
> Podobnych rozwi�za� i patrze� jak zrobione, mo�na r�znie� pod r�nymi
> generatorami, ale chyba nie trzeba bo to wydaje si� do�� proste.
Generatory nie majďż˝ tu zastosowania. One i tak nic innego nie wygenerujďż˝ niďż˝
HTML. Ich HTML nie b�dzie innym HTMLem ni� napisany przeze mnie.Rozwi�zania
na JS mnie nie interesujďż˝.
> Ja szuka�em r�nych, cz�sto nietypowych trik�w dla CSS i zawsze
> znajdywa�em rozwi�zania (albo pewno��, �e w CSS x.x tego nie osi�gn�). W
> skrajnych przypadkach (ten na taki nie wygl�da) zorpoznanie problemu
> zajmowa�o mi nawet kilkadziesi�t godzin. Ale c�, bior� za prac�
> pieni�dze to si� jej ucz�.
Osobi�cie preferuj� efektywniej zarabia� i nie marnowa� czasu na ok�adanie
si� biczami w imi� idei, �e na grupy pisa� nie wolno w �adnym temacie :-)
Je�li nie potrafi� zada� pytania dla wyszukiwarek to nie mam po co dr��y�
tematu. Bez sensu jest po ca�ym �wiecie ogl�da� przypadkowe serwisy WWW bo
by� mo�e kto� zastosowa� podobne rozwi�zanie. Szansa jak jeden do miliona *
2 minuty na serwis = 1.5 roku pracy :-D Tyle czasu m�j klient nie b�dzie
czeka� dlatego nie widz� niczego niew�a�ciwego w pytaniu o rozwi�zanie tu.
Giecze
> Osobi�cie preferuj� efektywniej zarabia� i nie marnowa� czasu na ok�adanie
> si� biczami w imi� idei, �e na grupy pisa� nie wolno w �adnym temacie :-)
> Je�li nie potrafi� zada� pytania dla wyszukiwarek to nie mam po co dr��y�
> tematu.
To zle� to na zewn�trz. Chcesz aby kto� robi� robot� za kt�r� ty
skasujesz? Pytasz o podstawy! Troch� przyzwoito�ci na boga.
Grzegorz
Marek
> skasujesz? Pytasz o podstawy! Troch� przyzwoito�ci na boga.
Ok, zr�bmy wi�c tak: s� to podstawy jak twierdzisz... Pewnie te� par� linii
kodu. Czy podejmiesz si� tego banalnego zlecenia? Je�li nie wywi��esz si� z
niego: Ty mi zap�acisz, ok?
Warunek od strony HTML: nie ma podw�jnego tagowania opcji menu bo to i sam
potrafi�. Stosowa� mo�na wy��cznie HTML i CSS.