Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Gdy jednej kolumny(diva) nie chcemy?!
R2D2
post 29.09.2008, 22:37:29
Post #1





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 29.09.2008
Skąd: Szczecin

Ostrzeżenie: (0%)
-----

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.

Ten post edytował R2D2 29.09.2008, 22:40:01
Go to the top of the page
+Quote Post
Cezar708
post 29.09.2008, 22:53:13
Post #2





Grupa: Zarejestrowani
Postów: 1 116
Pomógł: 119
Dołączył: 10.05.2005
Skąd: Poznań

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
R2D2
post 29.09.2008, 23:02:29
Post #3





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 29.09.2008
Skąd: Szczecin

Ostrzeżenie: (0%)
-----

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.

Ten post edytował R2D2 29.09.2008, 23:54:23
Go to the top of the page
+Quote Post
nevt
post 30.09.2008, 10:07:39
Post #4





Grupa: Przyjaciele php.pl
Postów: 1 595
Pomógł: 282
Dołączył: 24.09.2007
Skąd: Reda, Pomorskie.

Ostrzeżenie: (0%)
----- 

[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


--------------------

- Oh no, my young coder. You will find that it is you who are mistaken, about a great many things... -
Go to the top of the page
+Quote Post
R2D2
post 30.09.2008, 13:29:16
Post #5





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 29.09.2008
Skąd: Szczecin

Ostrzeżenie: (0%)
-----

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

Ten post edytował R2D2 30.09.2008, 13:30:41
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 29.06.2025 - 19:24
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn