Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: div i jego wysokosc
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
barF
1.03.2006, 02:06:54
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
Zajec
1.03.2006, 07:13:07
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.
mike
1.03.2006, 10:35:02
Rozciągniesz rodzica dając mu (dla rodzica) overflow: auto; i będziesz mógł wywalić clear: both;
barF
1.03.2006, 12:44:21
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
mike
1.03.2006, 13:11:56
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.
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.