Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> div i jego wysokosc
barF
post 1.03.2006, 02:06:54
Post #1





Grupa: Zarejestrowani
Postów: 43
Pomógł: 1
Dołączył: 17.01.2006
Skąd: pionowe

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

mam problem z wysokoscia kontenera.
niemoge spasowac zeby dzialalo pod FF i jednoczesnie dla IE

index.html
[HTML] pobierz, plaintext 
  1. <body>                                                                                                                                            
  2. <div id="page">                                                                                                                                   
  3. <div id="top"></div>                                                                                                                              
  4. <div id="content">                                                                                                                                
  5.     <div>                                                                                                                                         
  6.     ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel                                                           
  7.     ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel                                                           
  8.     ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel                                                           
  9.     ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel                                                           
  10.     ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel                                                           
  11.     ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel                                                           
  12.     ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel                                                           
  13.     </div>                                                                                                                                        
  14. </div>                                                                                                                                            
  15. <div id="menu">menu</div>                                                                                                                         
  16. <div id="footer"></div>                                                                                                                           
  17. </div>                                                                                                                                            
  18. </body>
[HTML] pobierz, plaintext


i style CSS
[HTML] pobierz, plaintext 
  1. html, body {                                                                                                                                      
  2.     margin: 15px;                                                                                                                                 
  3. }                                                                                                                                                 
  4. body {                                                                                                                                            
  5.     background: #a9ac99;                                                                                                                          
  6.     font-size: 13px;                                                                                                                              
  7.     font-family: 'Trebuchet MS', 'Bitstream Vera Sans', Verdana, Arial, 'Lucida Sans', 'Lucida Sans Unicode', Helvetica, sans-serif;              
  8. }                                                                                                                                                 
  9. #page {                                                                                                                                           
  10.     width: 714px;                                                                                                                                 
  11.     background: #ffffff url(images/middle.png);                                                                                                   
  12.     border: 0px solid #000000;                                                                                                                    
  13.     margin: 10px auto;                                                                                                                            
  14.     #height: auto;                                                                                                                                
  15. }                                                                                                                                                 
  16. #top {                                                                                                                                            
  17.     height: 15px;                                                                                                                                 
  18.     background: url(images/top.png) no-repeat;                                                                                                    
  19. }                                                                                                                                                 
  20. #content {                                                                                                                                        
  21.     width: 400px;                                                                                                                                 
  22.     float: left;                                                                                                                                  
  23.     padding: 10px 20px 30px;                                                                                                                      
  24. }                                                                                                                                                 
  25. #menu {                                                                                                                                           
  26.     width: 230px;                                                                                                                                 
  27.     float: left;                                                                                                                                  
  28. }                                                                                                                                                 
  29. #footer {                                                                                                                                         
  30.     height: 70px;                                                                                                                                 
  31.     background: url(images/bottom.png);                                                                                                           
  32.     #clear: both;                                                                                                                                 
  33. }
[HTML] pobierz, plaintext

jak odkomentuje clear:both; to pod FF dziala dobrze.
niewiem gdzie robie blad dry.gif
Go to the top of the page
+Quote Post
Zajec
post 1.03.2006, 07:13:07
Post #2





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

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

Nigdze. Clear jest potrzebny, jeśli chcesz, aby rodzic rozciągnął swoją wysokość.

Zgodnie ze standardami elementy z przypisanym float nie mają wpływu na wysokość rodzica.
Go to the top of the page
+Quote Post
mike
post 1.03.2006, 10:35:02
Post #3





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

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

Rozciągniesz rodzica dając mu (dla rodzica) overflow: auto; i będziesz mógł wywalić clear: both;
Go to the top of the page
+Quote Post
barF
post 1.03.2006, 12:44:21
Post #4





Grupa: Zarejestrowani
Postów: 43
Pomógł: 1
Dołączył: 17.01.2006
Skąd: pionowe

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

mike_mech:
zrobilem tak jak mowiles, ale efekt niejest zadowalajacy.

po zmianie mam
[HTML] pobierz, plaintext 
  1. #page {
  2.     width: 714px;
  3.     background: #ffffff url(images/middle.png);
  4.     border: 0px solid #000000;
  5.     margin: 10px auto;
  6.     overflow: auto;
  7. }
  8. #footer {
  9.     height: 70px;
  10.     width: 714px;
  11.     background: url(images/bottom.png);
  12. }
[HTML] pobierz, plaintext


1) w IE wyglad ramki OK ale niejest wycentrowana :/ , problem zalatwia dodanie do CSS body text-align: center;
ale czy niemozna tego okreslic w #page (how)?

2) w FF wszystko ramka jest wycentrowana.
ale niejest wyswietlana poprawnie. zobaczcie jak to wyglada TUTAJ
Go to the top of the page
+Quote Post
mike
post 1.03.2006, 13:11:56
Post #5





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

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

Spróbuj tak:
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" >
  5.   <head>
  6.   <title></title>
  7.  
  8.   <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  9.  
  10.   <style type="text/css">
  11.   html, body {
  12.       margin: 15px;
  13.   }
  14.   body {
  15.       background: #a9ac99;
  16.       font-family: normal 13px Trebuchet MS, Bitstream Vera Sans, Verdana, Arial, Lucida Sans, Lucida Sans Unicode, Helvetica, sans-serif;
  17.       text-align: center;
  18.   }
  19.  
  20.   #page {
  21.       width: 714px;
  22.       background: #ffffff url( 'images/middle.png' );
  23.       margin: 10px auto;
  24.       overflow: auto;
  25.       text-align: left;
  26.   }
  27.  
  28.   #top {
  29.       width: 714px;
  30.       height: 15px;
  31.       background: url( 'images/top.png' ) no-repeat;
  32.       float: left;
  33.   }
  34.  
  35.   #content {
  36.       width: 400px;
  37.       float: left;
  38.       padding: 10px 20px 30px 20px;
  39.   }
  40.  
  41.   #menu {
  42.       width: 274px;
  43.       float: right;
  44.   }
  45.  
  46.   #footer {
  47.       height: 70px;
  48.       width: 714px;
  49.       background: url(images/bottom.png);
  50.       float: left;
  51.   }
  52.   </style>
  53.  
  54. </head>
  55.  
  56. <body scroll="no">
  57.  
  58. <div id="page">
  59.   <div id="top"></div>
  60.   <div id="content">
  61.     ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel
  62.     ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel
  63.     ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel
  64.     ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel
  65.     ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel
  66.     ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel
  67.     ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel ble bel bel
  68.   </div>
  69.   <div id="menu">menu</div>
  70.   <div id="footer"></div>
  71. </div>
  72.  
  73. </body>
  74. </html>
[HTML] pobierz, plaintext


badzIEwIE może inaczej szerokości bloków wyświetlać, ale to dlatego że inaczej interpretuje padding. Łetwo to zmienisz dodając alternatywne style dla niego.
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: 8.07.2025 - 01:16
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn