[xhtml/css] Divy...

[SLy]

Chodzi mi dokładnie o "wyrównywanie" ich długości. Mam sobie stronę, której główna część jest podzielona na trzy "kolumny". Chciałbym, żeby czerwona i zielona warstwa zawsze były tej samej długości. Oczywiście nie chcę z góry ustalać wartości tylko jeśli zielona warstwa się wydłuży to równoczeście zrobi to czerwona... Próbowałem ustawiać padding i margin bottom ale nie bardzo działa :|

[Maximal]

IMO divami nie da rady, lepiej byłoby gdybyś to zrobił na tabelach. Ale niech się inni wypowiedzą.

 

PS. Fajny layout :)

[BeWuO]

Tabele to przeżytek, jak mi to Ranma kiedyś powiedział :P

 

Spróbuj wstawić czerwoną w zieloną i czerwonej dać float: left.

[SLy]

Spróbuj wstawić czerwoną w zieloną i czerwonej dać float: left.

Próbowałem i nie bardzo chce działać :/

 

Ja mam to zrobione tak:

index.php

.
.
<!--main content-->
<div>
   <div style="width: 140px; float: left; background-image: url(gfx/grafy_r8_c5.gif); background-repeat: repeat-y;"><?php include "include/lewe.php";?></div>
   <div style="width: 520px; float: left; width: 520px; background-image: url(gfx/wood.jpg);"><?php include "include/main.php";?></div>
   <div style="width: 140px; float: left; background-image: url(gfx/grafy_r8_c6.gif); background-repeat: repeat-y;"><?php include "include/prawe.php";?></div>
</div>
<!--end of main content-->
.
.

lewe.php

<div style="width: 140px;">
   <div style="height: 20px; width: 140px; background-image: url(gfx/grafy_r6_c1.jpg);"></div>
<!--box-->
<!--gorna belka-->
   <div style="height: 27px; width: 140px; background-image: url(gfx/grafy_r1_c1.jpg); color: #CDB27B; font-weight: bold; text-align: center; padding-top: 3px;">MENU</div>
<!--end of gorna belka-->
<!--main content-->
   <div style="width: 140px; background-image: url(gfx/grafy_r2_c1.jpg);">
      <div style="width: 140px; padding-left: 10px; padding-right: 10px; color: #CDB27B; font-weight: bold;">
         <img src="gfx/bullets/b1.gif" alt="" /> Strona główna<br />
         <img src="gfx/bullets/b1.gif" alt="" /> Forum<br />
         <img src="gfx/bullets/b1.gif" alt="" /> Galeria<br />
         <img src="gfx/bullets/b1.gif" alt="" /> Biblioteka<br />
         <img src="gfx/bullets/b1.gif" alt="" /> Pliki<br />
         <img src="gfx/bullets/b1.gif" alt="" /> Karczma<br />
      </div>
   </div>
<!--end of main content-->
<!--dolna belka-->
   <div><img src="gfx/grafy_r4_c1.jpg" style="width: 140px; height: 20px;" alt="" /></div>
<!--end of dolna belka-->
<!--end of box-->
   <div><img src="gfx/grafy_r7_c1.gif" style="width: 140px; height: 32px;" alt="" /></div>
</div>

main.php

<!--news table-->
<div style="width: 520px;">
<!--gorna belka-->
<div>
   <div><img src="gfx/grafy_r3_c2.jpg" style="width: 30px; height: 80px; float: left;" alt="" /></div>
   <div style="height: 50px; width: 455px; float: left; background-image: url(gfx/grafy_r3_c3.jpg); background-repeat: repeat-x; font-weight: bold; padding-left: 5px; padding-top: 30px; color: #CDB27B;">Tytuł niusa</div>
   <div><img src="gfx/grafy_r3_c4.jpg" style="width: 30px; height: 80px; float: left;" alt="" /></div>
</div>
<!--end of gorna belka-->
<!--main content-->
<div>
   <div style="height: 200px; width: 30px; background-image: url(gfx/grafy_r5_c2.jpg); float: left;"></div>
   <div style="height: 200px; width: 460px; background-image: url(gfx/grafy_r5_c3.jpg); float: left;"></div>
   <div style="height: 200px; width: 30px; background-image: url(gfx/grafy_r5_c4.jpg); float: left;"></div>
</div>
<!--end of main content-->
<!--dolna belka-->
<div>
   <div><img src="gfx/grafy_r8_c2.jpg" style="width: 30px; height: 20px; float: left;" alt="" /></div>
   <div style="width: 460px; height: 20px; background-image: url(gfx/grafy_r8_c3.jpg); background-repeat: repeat-x; float: left;"></div>
   <div><img src="gfx/grafy_r8_c4.jpg" style="width: 30px; height: 20px; float: left;" alt="" /></div>
</div>
<!--end of dolna belka-->
</div>
<!--end of news table-->

"prawe.php" niewiele się różni od "lewe.php". Wszystkie trzy warstwy są włożone w jednego diva.

[BeWuO]

A czy ja mówiłem w jednego DIVa?!

Wstawiasz lewe w środek.

Obczaj sobie jak to ejst na GMCLANIE zrobione, ja też to stad ściągnąłem.

[Ranmus]

BeWuO: Nie o to mu chodzi. :)

 

Sly: Nie da się (a przynajmniej nie ma sposoby na poprawne wyświetlanie w ff, ie i operze), więc albo wrócisz do tabelek albo zastosujesz java script:

http://www.projectseven.com/tutorials/css/...s/col2fixed.htm

[BeWuO]

No ale domyślam się, ze chodzi mu o wyrównanie konkretnie tła, a tym sposobem da rade ;]

[SLy]

albo zastosujesz java script

Oł je, dokładnie o to mi chodziło. Dzięki :)