allineamento div con position

**unkus_nob** · 26-09-2012, 11:32

Ciao a tutti, vi scrivo perchè ho un problema di allineamento con i div.
Allego la foto di come vorrei predisposto il layout
- un container blu che contiene il div rosso allineato al massimo del top
- un div giallo contenuto del div rosso, ma con larghezza maggiore.

Il codice che ho scritto è:

codice:

<body>    
 <div id="container"> 
   <div class="top">
            <ul>[*]Home[*]Ciao [/list]
   </div>
   <div class="header">
       

 bla bla </p>
   </div>
 </div>
</body>

con css:

codice:

body{ 
    background-color: green;
}

#container{
    max-width: 1080px;
    background-color: blue;
    margin-left: auto ;
    margin-right: auto ;
    top:0;
}

.header{
      margin-top: 0;
      margin-left: auto;
      margin-right: auto;
      background-color: red;
      width: 1080px;
      height:244px;
      z-index:2;
}

.top{ 
    position:absolute;
    left:0;
    width: 100%;
    height: 1px;
    background-color: yellow;
    opacity:.5;
    z-index: 5;
    top: 0;
    padding-bottom: 35px;
    
 }

.top li{ 
    display: inline;
 }


.top ul { 
    height:10px;
    text-align: right;
    padding-right: 200px;
}

Con questo codice ottengo che il div "top" si allinea perfettamente al top, ma il container no....riamane qualche pixel più giù.....mostrando il colore dello sfondo.
Ho provato anche a mettere al container la position:absolute ma senza successo.
C'è qualche errore nel mio codice?
Qualcuno riesce a darmi una mano?
Grazie mille

Stefania

**codencode** · 26-09-2012, 14:29

codice:

body{ 
    background-color: green;
}

#container{
    max-width: 1080px;
    background-color: blue;
    margin-left: auto ;
    margin-right: auto ;
    margin-top: -35px;
}

.header{
      margin-top: 35px;
      margin-left: auto;
      margin-right: auto;
      background-color: red;
      width: 1080px;
      height:244px;
      z-index:2;
}

.top{ 
    position:absolute;
    left:0;
    width: 100%;
    height: 1px;
    background-color: yellow;
    opacity:.5;
    z-index: 5;
    top: 0;
    padding-bottom: 35px;
    
 }

.top li{ 
    display: inline;
 }


.top ul { 
    height:10px;
    text-align: right;
    padding-right: 200px;
}

Se poi vuoi che "bla bla" compaia nel rosso, aggiungi padding-top:35px; a .header

**unkus_nob** · 26-09-2012, 17:22

Ciao....grazie mille per la risposta.....ora funziona correttamente!

Grazie ancora!
Stefy

Discussione: allineamento div con position

Strumenti discussione

Ricerca discussione

Visualizza

allineamento div con position

Permessi di invio