Posizionamento assoluto di diversi div

**StonedPera** · 08-06-2014, 00:05

Buonasera a tutti, sono nuovo dei CSS e apro una discussione probabilmente sciocca ma su cui mi sto scervellando da giorni.

Vorrei che nella Home all'interno del body ci sia:
- il div container con:
- in alto un'immagine (div header), con position: absolute; top:0
- subito sotto il div navigation (una barra con i pulsanti per le altre pagine)
- subito sotto il div content (con del testo o foto)
- e in fondo il footer, con position: absolute; bottom:0

Di seguito posto il CSS e l'HTML che ho scritto, quello che non riesco a fare è posizionare correttamente il navigation e il content con posizionamento assoluto, in modo che ogni blocco sia di seguito a quello precedente.
Con il navigation ci sono riuscito solo facendo position: relative; top:330px, perchè l'immagine che ho messo nell'header è 900x330 px.
Ma poi col content non posso usare questo trucchetto perchè il navigation si adatta all'altezza dei pulsanti.

Potete aiutarmi?
Grazie in anticipo!

style.css

codice:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
}


html, body {
    font-family: arial,sans-serif;
    font-size: 76%;
    margin: 0;
    text-align: center;
    padding: 5px 0 5px 0;
    height: 100%;
    background: url(Immagini/sfondo.jpg) repeat;
}




#container {
    position: relative; 
    width: 904px; 
    height: 100%;
    margin: 0 auto;
    padding: 0;
        text-align: center; 
    border: 2px solid #7c5945;
    background-color: #FFE4E1;
    height: auto;
    min-height: 100%;
}


#header {
    position: absolute; 
    top: 0;
    width: 100%; 
        padding: 0
}


#navigation {
    position: relative; 
    top: 330px;
    width: 100%; 
    background-color: #a07251; 
    border-top: 2px solid #7c5945; border-bottom: 2px solid #7c5945;text-align:center;
    padding: 0;
}
#navigation ul{margin: 0;padding: 0; list-style-type: none;}
#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/


#content {
    position: absolute;
    top: 0;
    width: 100%; 
    padding: 50px;
}


#footer {
    position: absolute; 
    bottom: 0; 
    width: 100%; 
        background-color: #a07251; 
    color: #000;
    text-align:center;
    border-top: 2px solid #7c5945;
}


#pulsante {
    outline: none;
    cursor: pointer;
     text-align: center;
     text-decoration: none;
     font: bold 14px Arial, Helvetica, sans-serif;
     color: #7c5945;
     padding: 10px 20px;
     border: solid 1px #a07251;
     background: #f7f2ea;
     background: -webkit-gradient(linear, left top, left bottom, from(#f7f2ea), to(#f0e6d7));
     background: -webkit-linear-gradient(top,  #f7f2ea,  #f0e6d7);
     background: -moz-linear-gradient(top,  #f7f2ea,  #f0e6d7);
     background: -ms-linear-gradient(top,  #f7f2ea,  #f0e6d7);
     background: -o-linear-gradient(top,  #f7f2ea,  #f0e6d7);
     background: linear-gradient(top,  #f7f2ea,  #f0e6d7);
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
     border-radius: 8px;
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }


#pulsante:hover    
    {
     background: #f0e6d7;
    }

index.htm

codice:

<body>


<div id="container">
            
        <div id="header">
            <img src="Immagini/logo.jpg" alt="Logo">
        </div>
        
        <div id="navigation">
            <ul>
            <li><a id="activelink" href="Index.htm"><button id="pulsante">Home</button></a></li>
            </ul>
        </div>


        <div id="content">
            
        </div>
        
        <div id="footer">
            <p>Info varie<br />
        </div>
</div>


</body>

**Ciakko** · 08-06-2014, 01:18

Secondo me è il cane che si morde la coda. Se hai una necessità effettiva che il content sia absolute allora il navigation deve avere delle dimensioni precise, se no usa tutto in relative con float:left.

**StonedPera** · 08-06-2014, 09:40

Originariamente inviata da Ciakko

Se hai una necessità effettiva che il content sia absolute

In che senso "necessità effettiva"?
Cioè io vorrei solo che nel modo più semplice io possa inserire nel codice i diversi div e averli uno immediatamente sotto all'altro..
Probabilmente mi sfugge qualcosa a causa nella mia inesperienza!

**StonedPera** · 08-06-2014, 12:38

Schema sito.jpg
In pratica vorrei fare una cosa del genere, molto semplice!
Non credo che mi sia utile il float:left se ho capito bene a cosa serve..

**tampertools** · 08-06-2014, 13:59

Guarda che i div si dispongono da soli uno sotto l'altro

**StonedPera** · 08-06-2014, 16:13

Originariamente inviata da tampertools

Guarda che i div si dispongono da soli uno sotto l'altro

Potresti per favore dirmi come faresti? Perchè io ci sto provando ma proprio non ci riesco!
Se tolgo tutti i position il navigation mi viene leggermente staccato dall'header, e il footer mi viene a metà del container (che occupa tutto lo schermo).
Grazie!

**StonedPera** · 08-06-2014, 18:55

Dunque io ho usato in pratica il css di questo esempio: http://html.it/guide/esempi/layout_css/esempio13.html

Però se dal codice nell'header metto un'immagine di larghezza 760px e altezza qualunque, mi aspetterei che immediatamente sotto all'immagine ci fosse il navigation.
Invece ci sono 3-4 px di colore di sfondo dell'header.. Perchè??

**tampertools** · 08-06-2014, 19:59

Controlla i vari margin e padding, però potrebbe essere perché se dopo un'elemento inline (come un'immagine) c'è un "a-capo" nel codice, la volte lascia qualche pixel di sotto o di lato...
Hai il link alla pagina?

**Shores** · 09-06-2014, 00:10

I tag div come comportamento predefinito hanno quello di occupare il 100% della larghezza del contenitore, ed avere un'altezza data dal loro contenuto.

Quindi il modo più semplice per ottenere ciò che vuoi è quello di NON dare nessun position a nessuna delle div, inserire al loro interno ciò che devono contenere, assicurarti che tra la chiusura di ogni div, </div>, e l'apertura della seguente <div> non ci sia nessun carattere, ed infine dare position:fixed; bottom:0; alla sola div footer.

Nota che QUALSIASI metodo che, lasciando agli altri div la possibilità di avere un'altezza variabile, faccia si che il footer si trovi in fondo alla schermata anche se il content è poco alto comporta obbligatoriamente che se il content è invece più alto della pagina esso finisca sotto al footer.

**tampertools** · 09-06-2014, 01:13

Nota che QUALSIASI metodo che, lasciando agli altri div la possibilità di avere un'altezza variabile, faccia si che il footer si trovi in fondo alla schermata anche se il content è poco alto comporta obbligatoriamente che se il content è invece più alto della pagina esso finisca sotto al footer.

???
http://www.yourinspirationweb.com/20...o-alla-pagina/

Discussione: Posizionamento assoluto di diversi div

Strumenti discussione

Ricerca discussione

Visualizza

Posizionamento assoluto di diversi div

Permessi di invio