Witam,

Mamy sobie kod:

<div id="contents">
<div class="col1">
<div class="thumbnail"></div>
</div>
<div class="col2"></div>
<div class="col3"></div>
</div>

Wszystkie "col" mają float:left. Aby zamknąć to w wizualnym bloku
"contents" musi mieć overflow:hidden. No i tu się zaczyna problem.
Mianowicie "thumbnail" jest pozycjonowany absolutnie z ujemną wartością
lewej pozycji (left:-100px) i tym samym staje się niewidoczny. Z kolei
najbardziej logiczny overflow:visible nie zamyka bloku floatów (jeden z
wielu bubli w CSS). W związku z tym jak spowodować to zamknięcie floatów
aby nie zaszkodzić klasie "thumbnail"? Czy da się to ładniej zrobić niż po
staremu poprzez dodanie:

<div style="clear:both"></div>

?

do góry

On Tue, 13 Sep 2011 10:46:28 +0200, Marek wrote:
> Wszystkie "col" mają float:left. Aby zamknąć to w wizualnym bloku
> "contents" musi mieć overflow:hidden. No i tu się zaczyna problem.
> Mianowicie "thumbnail" jest pozycjonowany absolutnie z ujemną wartością
> lewej pozycji (left:-100px) i tym samym staje się niewidoczny. Z kolei
> najbardziej logiczny overflow:visible nie zamyka bloku floatów

a overflow:auto ?

--
pozdrawiam, Konrad Karpieszuk

do góry

Dnia Tue, 13 Sep 2011 08:55:30 +0000 (UTC), |<onrad napisał(a):

> On Tue, 13 Sep 2011 10:46:28 +0200, Marek wrote:
>> Wszystkie "col" mają float:left. Aby zamknąć to w wizualnym bloku
>> "contents" musi mieć overflow:hidden. No i tu się zaczyna problem.
>> Mianowicie "thumbnail" jest pozycjonowany absolutnie z ujemną wartością
>> lewej pozycji (left:-100px) i tym samym staje się niewidoczny. Z kolei
>> najbardziej logiczny overflow:visible nie zamyka bloku floatów
>
> a overflow:auto ?

A to najgosze rozwiązanie, które spowoduje pojawienie się sliderów.

do góry

W dniu 13-09-2011 10:46, Marek pisze:
> Witam,
>
> Mamy sobie kod:
>
> <div id="contents">
> <div class="col1">
> <div class="thumbnail"></div>
> </div>
> <div class="col2"></div>
> <div class="col3"></div>
> </div>

#contents:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

--
Peter

do góry

Dnia Tue, 13 Sep 2011 16:15:01 +0200, Peter May napisał(a):

> W dniu 13-09-2011 10:46, Marek pisze:
>> Witam,
>>
>> Mamy sobie kod:
>>
>> <div id="contents">
>> <div class="col1">
>> <div class="thumbnail"></div>
>> </div>
>> <div class="col2"></div>
>> <div class="col3"></div>
>> </div>
>
> #contents:after{
> content:".";
> display:block;
> height:0;
> clear:both;
> visibility:hidden;
> }

Sprytne! :-) Standardowe pytanie: jak to działa pod IE8, IE9, FF6 i Operą
11 ? Masz doświadczenia?

do góry

W dniu 2011-09-13 10:46, Marek pisze:
> W związku z tym jak spowodować to zamknięcie floatów
> aby nie zaszkodzić klasie "thumbnail"?

#contents::after {
content:"";
display:block;
height:1px;
clear:both;
}


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

W dniu 2011-09-13 16:15, Peter May pisze:
> #contents:after{
> content:".";
> display:block;
> height:0;
> clear:both;
> visibility:hidden;
> }

Gópi hamster mi nie dociągnął wszystkich odpowiedzi ;)
Kropka w content jest zbędna, wystarczy samo ""


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

Dnia Tue, 13 Sep 2011 19:15:13 +0200, Paweł Piskorz napisał(a):

> W dniu 2011-09-13 16:15, Peter May pisze:
>> #contents:after{
>> content:".";
>> display:block;
>> height:0;
>> clear:both;
>> visibility:hidden;
>> }
>
> Gópi hamster mi nie dociągnął wszystkich odpowiedzi ;)
> Kropka w content jest zbędna, wystarczy samo ""

Zgaduję: koipiowałeś fragment z dokumentacji CSS? Oni tam właśnie z kropką
przykład dali :-D

do góry

Dnia Tue, 13 Sep 2011 19:13:10 +0200, Paweł Piskorz napisał(a):

> W dniu 2011-09-13 10:46, Marek pisze:
>> W związku z tym jak spowodować to zamknięcie floatów
>> aby nie zaszkodzić klasie "thumbnail"?
>
> #contents::after {
> content:"";
> display:block;
> height:1px;
> clear:both;
> }

A czemu teraz dałeś 1px? Czy poprzednie 0px wnosiło coś niewłaściwego w
zadziałaniu stylu?

do góry

W dniu 2011-09-13 18:15, Marek pisze:
>> #contents:after{
>> content:".";
>> display:block;
>> height:0;
>> clear:both;
>> visibility:hidden;
>> }
>
> Sprytne! :-) Standardowe pytanie: jak to działa pod IE8, IE9, FF6 i Operą
> 11 ? Masz doświadczenia?

O normalne przeglądarki raczej się nie martw, ta strona:

http://www.quirksmode.org/css/contents.html

mówi, że w IE :after działa od wersji 8.

Zresztą możesz poeksperymentować i zobaczyć jak to działa.

Jeśli chcesz, żeby działało też w IE 7 i 6, to możesz pewnie zawinąć
część treści w dodatkowego diva:

<div id="contents" style="position:relative">
<div class="col1" style="position:absolute; top:-3.14px">
<div class="thumbnail"></div>
</div>
<div style="overflow:hidden">
<div class="col2"></div>
<div class="col3"></div>
</div>
</div>

do góry