Questo sito utilizza cookies, anche di terze parti, per mostrare pubblicità e servizi in linea con il tuo account. Leggi l'informativa sui cookies.
Username: Password: oppure
HTML / CSS - Problema con DIV affiancati
Forum - HTML / CSS - Problema con DIV affiancati

Avatar
jack92 (Member)
Pro


Messaggi: 100
Iscritto: 06/08/2010

Segnala al moderatore
Postato alle 15:01
Mercoledì, 10/08/2011
Ciao a tutti. Oggi stavo progettando una piccola pagina html e ho riscontrato delle difficoltà nel impostare un layout.
La pagina l'ho strutturata in questo modo:
Codice sorgente - presumibilmente HTML

  1. ...
  2. <body>
  3.       <div id="header" style="border: solid 1px black;">
  4.           ....
  5.       </div>
  6.       <div id="menu" style="float: left; border: solid 1px red;">
  7.           ....
  8.      </div>
  9.      <div id="corpo" style="border: solid 1px green;">
  10.          ....
  11.      </div>
  12.      <div id="footer">
  13.          ...
  14.     </div>
  15. </body>
  16. ...


Ora con un browser come safari o firefox, ho problemi nella visualizzazione del div "corpo"... risulta come se il div "menu" fosse contenuto nel div corpo :noway:
mentre se apro la pagina con IE , riesco a visualizzarla come volevo. Che cosa ho sbagliato?


"Il sapere umano appartiene al mondo"
PM
Avatar
netarrow (Admin)
Guru^2


Messaggi: 2502
Iscritto: 12/05/2004

Up
2
Down
V
Segnala al moderatore
Postato alle 22:36
Mercoledì, 10/08/2011
Attenziona che se qualcosa la vedi giusta solo con IE, spesso è volentieri sta funzionando tutto solo per miracolo :)

Questo è un esempio che segue il layout che vuoi tu.

Codice sorgente - presumibilmente HTML / CSS

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.        
  6.         <title>Test</title>
  7.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  8.        
  9.         <style type="text/css">
  10.            
  11.             body {
  12.                 margin: 0px;
  13.             }
  14.            
  15.             #main {
  16.                 margin: auto;
  17.                 margin-top: 0px;
  18.                 width: 900px;
  19.                 background-color: black;
  20.                 min-height: 550px;
  21.                 padding: 5px;
  22.             }
  23.            
  24.             #header {
  25.                 background-color: red;
  26.                 min-height: 100px;
  27.             }
  28.            
  29.             #container {
  30.                 float: left;
  31.             }
  32.            
  33.             #menu {
  34.                 float: left;
  35.                 width: 200px;
  36.                 min-height: 390px;
  37.                 background-color: blue;
  38.                 margin-top: 5px;
  39.             }
  40.            
  41.             #corpo {
  42.                 width: 695px;
  43.                 background-color: green;
  44.                 min-height: 390px;
  45.                 margin-left: 205px;
  46.                 margin-top: 5px;
  47.                 margin-bottom: 5px;
  48.             }
  49.            
  50.             #footer {
  51.                 width: 900px;
  52.                 background-color: yellow;
  53.                 clear: both;
  54.                 height: 60px;
  55.             }
  56.            
  57.         </style>
  58.        
  59.     </head>
  60. <body>
  61.      <div id="main">
  62.        <div id="header">
  63.        </div>
  64.          
  65.         <div id="container">
  66.           <div id="menu">
  67.           </div>
  68.        
  69.           <div id="corpo">
  70.           </div>
  71.         </div>
  72.          
  73.            
  74.        <div id="footer">
  75.        </div>
  76.          
  77.     </div>
  78. </body>
  79. </html>



Considera che questo esempio è un layout fixed, quindi anche se funziona sui più diffusi browser non si adatta alle dimensioni della finestra e non scala alle dimensioni del testo.

Se ti interessano anche queste caratteristiche cerca informazioni sui layout liquidi e i layout elastici.



Mai memorizzare quello che puoi comodamente trovare in un libro.
Imparare è un'esperienza; tutto il resto è solo informazione.
L'immaginazione è più importante della conoscenza.
(A. Einstein)


Esistendo poi google...
PM