Czy jest możliwe układanie newsów w 2 kolumnach jeśli ich treść podawana
jest bez możliwości rozróznienia, który jest prawy, a który lewy?

Zobrazuję kwestie. Meny newsa o szerokości mniej niż połowy kolumny:

<div class="kontener_o_szer_ponad_2_newsow">

<div class="news">
tu treść
</div>

...

</div>

Generujemy np. 4 takie newsy. Chciałbym aby wyglądało to tak:
- pierwszy przylega do lewej krawędzi kontenera
- drugi jest obok pierwszego z marginesem 20px, prawa część tego newsa
pokrywa się z prawą częścią kontenera
- trzeci news jest dokładnie pod pierwszym
- czwarty news jest dokładnie pod drugim

i podobnie ma być z całą resztą o ile będzie ich więcej... Czy da się to w
ogóle zorganizować jakoś?

do góry

W dniu 2012-01-08 15:44, Marek pisze:
> Czy jest możliwe układanie newsów w 2 kolumnach jeśli ich treść podawana
> jest bez możliwości rozróznienia, który jest prawy, a który lewy?
>
> Zobrazuję kwestie. Meny newsa o szerokości mniej niż połowy kolumny:
>
> <div class="kontener_o_szer_ponad_2_newsow">
>
> <div class="news">
> tu treść
> </div>
>
> ...
>
> </div>
>
> Generujemy np. 4 takie newsy. Chciałbym aby wyglądało to tak:
> - pierwszy przylega do lewej krawędzi kontenera
> - drugi jest obok pierwszego z marginesem 20px, prawa część tego newsa
> pokrywa się z prawą częścią kontenera
> - trzeci news jest dokładnie pod pierwszym
> - czwarty news jest dokładnie pod drugim
>
> i podobnie ma być z całą resztą o ile będzie ich więcej... Czy da się to w
> ogóle zorganizować jakoś?

Może selektor nth-child Cię zainteresuje:

http://reference.sitepoint.com/css/pseudoclass-nthch
ild

Tyle, że IE (do 8 wersji) nie wspiera go.

--
Cezary Tomczyk

do góry

Dnia Sun, 08 Jan 2012 16:11:59 +0100, Cezary Tomczyk napisał(a):

>
> Może selektor nth-child Cię zainteresuje:
>
> http://reference.sitepoint.com/css/pseudoclass-nthch
ild
>
> Tyle, że IE (do 8 wersji) nie wspiera go.

Dzięki! Nie pamiętałem o tej pseudoklasie. :-) A może raczej kiedyś trochę
obawiałaem sie kompatybilności więc wyrzuciłem z pamięci :-)

do góry

W dniu 08.01.2012 16:11, Cezary Tomczyk pisze:
> Tyle, że IE (do 8 wersji) nie wspiera go.

co o ile mi wiadomo można łatwo obejść dodając osobny arkusz stylów dla IE:

#cos element:nth-child(3) = #cos element + element + element (dla IE)

do góry

Dnia Wed, 11 Jan 2012 22:38:54 +0100, olo napisał(a):

> W dniu 08.01.2012 16:11, Cezary Tomczyk pisze:
>> Tyle, że IE (do 8 wersji) nie wspiera go.
>
> co o ile mi wiadomo można łatwo obejść dodając osobny arkusz stylów dla IE:
>
> #cos element:nth-child(3) = #cos element + element + element (dla IE)

Ja bym się tym nie przejmował. IE < 8 da się upgradeować do wersji 8
(szoda, że nie wyższej) więc nie ma o co walczyć. Jeśli ktoś chce używać
archaicznej przeglądarki, to musi sie liczyć z tym, że strony sie rozsypią
w mniejszym lub większym stopniu.

do góry

W dniu 2012-01-11 22:38, olo pisze:
> W dniu 08.01.2012 16:11, Cezary Tomczyk pisze:
>> Tyle, że IE (do 8 wersji) nie wspiera go.
>
> co o ile mi wiadomo można łatwo obejść dodając osobny arkusz stylów dla IE:
>
> #cos element:nth-child(3) = #cos element + element + element (dla IE)

Podany przez Ciebie selektor dla IE złapie trzeci element i wszystkie
następne.
#cos element:nth-child(3)
jest równoważne z
#cos element:first-child + element + element

Zaś w omawianym przypadku przyda się raczej
#cos element:nth-child(2n+1)
albo
#cos element:nth-child(odd)
co jest równoważne z:
#cos element:first-child,
#cos element:first-child + element + element,
#cos element:first-child + element + element + element + element
i tak dalej, także jeżeli chcesz mieć dużo tych elementów to się sporo
naklepiesz :)


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

do góry