Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Gdy jednej kolumny(diva) nie chcemy?!
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
R2D2
29.09.2008, 22:37:29
Witam! Mam przykladowo taki kod strony.
[HTML] pobierz, plaintext 
  1. <div id="all">   
  2.      <div id="left">Lewy blok</div>  
  3.      <div id="middle">Srodek</div> 
  4.      <div id="right">Prawy blok</div>
  5.  </div>
[HTML] pobierz, plaintext

I teraz chodzi mi o to jak zrobic, by w przypadku gdy na danej postronie nie umieszczam lewego bloku, blok srodkowy sie automatycznie rozszerzal by zajmowal tez obszar "wczesniejszego" bloku lewego?? Jak probuje z roznymi width: auto itd ... to zawsze srodkowy blok sie rozpycha i powoduje spadniecie prawego bloku pod wszystko.

Kombinowal juz ktos kiedys z czyms takim ?

P.S. Zapomnialem dodac, ze szerokosci bloku prawego i lewego sa stale ustalone.
Cezar708
29.09.2008, 22:53:13
proponuję poczytać o właściwości CSS o nazwie float, na pewno Ci wystarczy.

Pozdrawiam
Cezar708

PS: podobny przykład zastosowania pokazałem tutaj: http://forum.php.pl/index.php?showtopic=77...st&p=399009
R2D2
29.09.2008, 23:02:29
dobra spoko .... ogarniam float itd... problem jest w tym, ze jak dla bloku lewego i srodkowego daje float: left, a dla bloku prawego float: right nie wiem jak (pamietajac, ze prawy i lewy blok maja stala szerokosc - np. 22%) zrobic by blok srodkowy automatycznie sie dostosywal z szerokoscia, czyli jka usuwam blok prawy to blok srodkowy sie rozciaga zajmujac jego miejsce i analogicznie z blokiem lewym.

P.S. ten drugi link to nie wiem do czego mi dales tongue.gif ja w tym momencie w bazy danych sie nie bawie tongue.gif
Np. mamy takiego css'a 
[HTML] pobierz, plaintext 
  1. #left{  
  2.         width: 22%;  
  3.         float: left;  
  4.     }  
  5.     #middle{  
  6.        width: auto; - no i wlasnie jak ogarnac ta szerokosc  jak nie bede mial lewego lub prawego diva ?:(
  7.        float: left;  
  8.    }  
  9.    #right{  
  10.        width: 22%;  
  11.        float: right;  
  12.  
  13.    }
[HTML] pobierz, plaintext



P.S.2
Dobra troche ogarnalem. Dziala mi pod IE, ale pod FF i Opera nie tongue.gif
A zmienilem poprostu kolejnosc kodu:
[HTML] pobierz, plaintext 
  1. <div id="all">   
  2.      <div id="left">Lewy blok</div> 
  3.      <div id="right">Prawy blok</div>
  4.      <div id="middle">Srodek</div> 
  5.  </div>
[HTML] pobierz, plaintext


teraz tylko jak ogarnac temat w FF i Operze, bo w nich srodkowy div idzie pod wszystko.
nevt
30.09.2008, 10:07:39 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5. <style type="text/css">
  6. *{
  7. margin: 0px;
  8. padding: 0px;
  9. }
  10.  
  11. #all{
  12. width: 100%;
  13. }
  14.  
  15. #all div{
  16. height: 200px;
  17.  
  18. }
  19.  
  20. #left{
  21. background-color: red;
  22. width: 22%;
  23. float: left;
  24. }
  25.  
  26. #middle{
  27. background-color: green;
  28. margin: 0px auto;
  29. }
  30.  
  31. #right{
  32. background-color: blue;
  33. width: 22%;
  34. float: right;
  35. }
  36.  
  37. </style>
  38. </head>
  39. <body>
  40. <div id="all">
  41. <div id="left">Lewy blok</div>
  42. <div id="right">Prawy blok</div>
  43. <div id="middle">Srodek</div>
  44. </div></body>
  45. </html>
[HTML] pobierz, plaintext

powodzenia
R2D2
30.09.2008, 13:29:16
dobra dzieki ... zawartosc srodka cos mi rozwala to w FF i Operze... ale nie jest idealnie, ale smiga tylko trzeba wiecej porzezbic w css'ie. Dzieki.

mozna zamknac tongue.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.