Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Układ divów
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
mokry
18.02.2007, 23:07:53
Hm... Siedze nad problemem już ponad 3 godziny...

http://eurodens.pl/uklad.png

Jako, że siedzę w semantycznym XHTML 1.0 Strick od kilku dni, mam problem ze zrobieniem site'a opartego o DIV'y

Próbowałem kombinować z float, position, różnegej maći szerokościami, ale nadaremne... Jedynie co udało mi się (połowicznie) do ułożyć górne trzy bloki...
Środkowych już nie ułożyłem niestety, choć też próbowałem... Coś się rozjeżdża i nie umiem sobie z tym poradzić...

Omówienie tego przykładu pozwoli mi na jego dokładne przeanalizowanie i później- na uniknięcie tego typu błędów...
Pozdrawiam
Kisiol_Ent
19.02.2007, 00:12:50
To calkiem proste : > nie napisales tylko szczegolow zbyt duzo czy ma sie rozszerzacz do okna
przegladarki czy ma byt staly rozmiar ale ok mam cos takiego dla ciebie:

obrazek: http://img407.imageshack.us/img407/1148/aa...aaaaaaaako2.jpg

ps dziala tylko w Operze moze trzeba dodac doctype itd itp to w innych zalapie ale teraz niemam czasu ide spac.

[HTML] pobierz, plaintext 
  1. <html>
  2. <body>
  3.  
  4. <!-- Created by Kisiol_Ent (C) 2007 All rights reserwed. -->
  5.  
  6. <div style="border: 10px solid green; background-color: red; width: 850px;">
  7.  
  8.  
  9.   <div style="width: 150px; background-color: yellow;  float: left; ">
  10.     Dupa1 
  11.     Dupa1<br />
  12.     dddddddd<br />Dupa1<br />
  13.     dddddddd<br />Dupa1<br />
  14.     dddddddd<br />Dupa1<br />
  15.     dddddddd<br />    Dupa3
  16.     Dupa1<br />
  17.     dddddddd<br />Dupa1<br />
  18.     dddddddd<br />Dupa1<br />
  19.     dddddddd<br />Dupa1<br />
  20.     dddddddd<br />
  21.   </div>
  22.  
  23.   <div style="width: 250px; background-color: orange; float: right; ">
  24.     Dupa2 
  25.     Dupa1<br />
  26.     dddddddd<br />Dupa1<br />
  27.     dddddddd<br />Dupa1<br />
  28.     dddddddd<br />Dupa1<br />
  29.     dddddddd<br />
  30.   </div>
  31.  
  32.   <div style=" width: 450px; background-color: blue; ">
  33.     Dupa3 <br />
  34.     dddddddd<br />
  35.     dddd<br />
  36.     ddddd<br />
  37.   </div> 
  38.  
  39. </div>
  40. <br />
  41.  
  42.  
  43.  
  44. <div style="border: 10px solid blue; background-color: red; width: 900px;">
  45.  
  46.   <div style="width: 300px; background-color: yellow;  float: left; ">
  47.     Dupa1 
  48.     Dupa1<br />
  49.     dddddddd<br />Dupa1<br />
  50.     dddddddd<br />Dupa1<br />
  51.  
  52.     dddddddd<br />Dupa1<br />
  53.     dddddddd<br />
  54.   </div>
  55.  
  56.   <div style="width: 300px; background-color: orange; float: right; ">
  57.     Dupa2 
  58.     Dupa1<br />
  59.     dddddddd<br />Dupa1<br />
  60.     dddddddd<br />Dupa1<br />
  61.     dddddddd<br />Dupa1<br />
  62.     dddddddd<br />
  63.   </div>
  64.  
  65.   <div style=" width: 300px; background-color: blue; ">
  66.     Dupa3 <br />
  67.     dddddddd<br />
  68.     dddd<br />
  69.     ddddd<br />
  70.   </div> 
  71.  
  72. </div>
  73. <br />
  74.  
  75.  
  76. <div style="border: 10px solid blue; background-color: red; width: 600px;">
  77.  
  78.   <div style="width: 300px; background-color: yellow;  float: left; ">
  79.     Dupa1 
  80.     Dupa1<br />
  81. br />
  82.     dddddddd<br />
  83.   </div>
  84.  
  85.   <div style="width: 300px; background-color: orange; float: right; ">
  86.     Dupa2 
  87.     Dupa1<br />
  88.  
  89.     dddddddd<br />
  90.   </div>
  91.  
  92.  
  93.  
  94. </div>
  95. <br />
  96.  
  97.  
  98. </body>
  99. </html>
[HTML] pobierz, plaintext
gekon
19.02.2007, 01:12:57
http://kurs.browsehappy.pl/Krok/Float to x3 smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.