Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [css] Struktura strony. Przejście ztabelek na divy podejście 2
starach
post 24.01.2007, 23:01:55
Post #1





Grupa: Zarejestrowani
Postów: 999
Pomógł: 30
Dołączył: 14.01.2007
Skąd: wiesz ?

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


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
  3. <title>Centrum Projektowe</title>
  4. </head>
  5. <style type="text/css">
  6. body { font:x-small Verdana, Arial, Helvetica, sans-serif; background-color:#CCCCCC; color:#333333; padding:15px; }
  7. div#main { width:780px; background-color:#999999; display:block; margin:0 auto; }
  8. div#main div.left_frame { width:150px; background-color:#00CC00; display:inline; }
  9. div#main div.right_frame { width:630px; background-color:#99FF00; display:inline; }
  10. <div id="main">
  11. <div class="left_frame"> </div>
  12. <div class="right_frame"> </div>
  13. </div>
  14. </body>
  15. </html>

Co należy zrobić żeby wyświetlały się te dwa divy obok siebie, i miały szerokość taką jak ustalona właściwością width: ?
Wiem że mógłbym skorzystać z float:left i right ale przeczytałem gdzieś że nie należy stosować tego typu techniki. Moim drugim problemem jest to że jeśli użyję float na elementach wewnątrz div'a owy div zwinie mi się do góry tak jakby nic w nim nie było.
Proszę o radę i podpowiedź.
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
chlebik
post 24.01.2007, 23:49:29
Post #2





Grupa: Zarejestrowani
Postów: 113
Pomógł: 5
Dołączył: 12.09.2006
Skąd: Pruszków/Warszawa

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


Domyslam sie, ze chcesz po prostu miec 2 DIVy obok siebie. Mysle, ze jesli masz ustalona z gory szerokosc w pikselach to mozna sie pokusic i na sztywno rozmiescic DIVy na stronie gdzie nadrzednym kontenerem jest po prostu znacznik BODY. Chyba, ze caly layout bedzie sie dalej zmienial i takie rozwiazanie nie jest odpowiednie. Oto kod (ramki dodalem by bylo widac co i gdzie jest):



  1. !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3.  
  4.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
  6.  
  7. <title>Centrum Projektowe</title>
  8.  
  9. </head>
  10.  
  11. <style type="text/css">
  12. body {background-color:#CCCCCC; color:#333333; padding:15px; }
  13.  
  14. .left_frame { width:150px; background-color:#00CC00; position: absolute;
  15. top: 5%; left: 0; right: auto; border: 2px dotted #yellow;}
  16. .right_frame { width:630px; background-color:#99FF00; position: absolute;
  17. top: 5%; right: 0; left: auto; border: 2px dotted #yellow;}
  18.  
  19.  
  20.  
  21. <div class="left_frame">to jest lewy DIV </div>
  22. <div class="right_frame">to jest prawy DIV </div>
  23.  
  24.  
  25. </body>
  26.  
  27. </html>



Ps. Gdzie wyczytales o tym "float" questionmark.gif

Ten post edytował chlebik 24.01.2007, 23:50:56


--------------------
"Człowiek dążący do swego celu może być skuteczny tylko w przypadku, jeśli każdą minutę swego życia wykorzysta z maksymalną korzyścią dla osiągnięcia zaplanowanego celu. Jeśli stworzył dla siebie system kar i karze sam siebie za każdą zmarnowaną minutę. Człowiekowi w zupełności wystarczą 3-4 godziny snu, cały pozostały czas może być wykorzystany dla osiągnięcia upragnionego celu." -- Wiktor Suworow
Java devBlog
KulturalnyChlebik
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Wersja Lo-Fi Aktualny czas: 20.06.2025 - 07:47