Oppure

Loading
10/08/11 13:01
jack92
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: 
 ...
<body>
      <div id="header" style="border: solid 1px black;">
          ....
      </div>
      <div id="menu" style="float: left; border: solid 1px red;">
          ....
     </div>
     <div id="corpo" style="border: solid 1px green;">
         ....
     </div>
     <div id="footer">
         ...
    </div>
</body>
...

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?
aaa
10/08/11 20:36
netarrow
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. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
        
        <style type="text/css">
            
            body {
                margin: 0px;
            }
            
            #main {
                margin: auto;
                margin-top: 0px;
                width: 900px;
                background-color: black;
                min-height: 550px;
                padding: 5px;
            }
            
            #header {
                background-color: red;
                min-height: 100px;
            }
            
            #container {
                float: left;
            }
            
            #menu {
                float: left;
                width: 200px;
                min-height: 390px;
                background-color: blue;
                margin-top: 5px;
            }
            
            #corpo {
                width: 695px;
                background-color: green;
                min-height: 390px;
                margin-left: 205px;
                margin-top: 5px;
                margin-bottom: 5px;
            }
            
            #footer {
                width: 900px;
                background-color: yellow;
                clear: both;
                height: 60px;
            }
            
        </style>
        
    </head>
<body>
     <div id="main">
       <div id="header">
       </div>
         
        <div id="container">
          <div id="menu">
          </div>
       
          <div id="corpo">
          </div>
        </div>
         
            
       <div id="footer">
       </div>
         
    </div>
</body>
</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.
aaa