Witam,

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 ?

do góry

W dniu 2009-12-10 19:26, Marek pisze:
> Witam,
>
> 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 ?
overflow można spróbować,
ale ogólnie źle się zabierasz do tego:
http://www.code-sucks.com/css%20layouts/

--
Krzysztof Warunek

http://tocheckserver.pl

do góry

> overflow można spróbować,
> 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ę.

do góry

Marek wrote:

> Witam,
>
> 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 ?

#leftColumn + #rightColumn {width: 400px; float: right;}

do góry

Giecze wrote:

> Marek wrote:
>
> > Witam,
> >
> > 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 ?
>
> #leftColumn + #rightColumn {width: 400px; float: right;}

..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

do góry

> ..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.

> 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.

do góry

Marek wrote:

> > ..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

do góry

> Zbyt wielu tzn... jaki procent?

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-heig
ht
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.

do góry

Marek wrote:

> > Zbyt wielu tzn... jaki procent?
>
> 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%;
> > }

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-heig
ht
> 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

do góry

> 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).

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.

do góry