[RISOLTO]css: div contenuto che "va sopra" div container...

zuccamonna

secondo me l'approccio non è corretto. tu metti tutto in absolute e dai le distanze e gli ingomnri minimi.

per un layout fisso è perfetto, però è comprensibile che quando il contenuto cambia faccia quello che dici tu.

secondo me dovresti mettere tutto come relative e definire il posizionamento a sx e a dx con l'attributo float.

poi, sotto ai div sx e dx metterai un altro div, che so un footer con la caratteristica float, in modo da ristabilire il flusso della pagina.

a quel punto il contenuto del div sopra imporrà la sua altezza senza passare sopra agli altri.

kodemondo

se vuoi prova questo:

Codice: Seleziona tutto

<body>
<div id="container">
<div id="header">
<h1>Titolo</h1>
</div>
<div id="content">
<h2>Layout a due colonne con posizionamenti assoluti</h2>
Quì i contenuti
</div>
<div id="navigation">
<ul>
<li><a id="activelink" href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div id="footer"></div>
</div>
</body>

CSS

Codice: Seleziona tutto

/*stili per il layout fisso con posizionamenti assoluti*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center}
div#container{position:relative; width: 760px;margin: 0 auto;text-align: left;
    border-left: 2px solid #000000;border-right: 2px solid #000000}

/*stili generici, su header e footer*/
div#header{background-color:#666666;color: #ffff00}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

/*stili specifici per il layout*/
div#navigation{position:absolute;top: 80px;right: 0;width: 13em}
div#content{margin-right: 13em;padding: 1em}
div#footer{text-align:center; padding: 0.5em;
    background-color: #666666; color: #000}

/*stili per la navigazione*/
div#navigation ul{margin: 1em 0 1em 1em;padding: 0; list-style-type: none;}
div#navigation li{margin: 0;padding: 0}
div#navigation a{color:#000000;font: normal bold 1.2em/1.6em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #999999;text-decoration: underline}
div#navigation a#activelink{color: #666666;text-decoration: none}

superseba · Messaggio da **superseba** » sabato 4 ottobre 2008, 10:01

o provi ad usare un javascript che ridimensiona la div di sfondo, oppure usi una tabella..

zuccamonna · Messaggio da **zuccamonna** » sabato 4 ottobre 2008, 10:47

beh no, i float fanno i contrario, consentono a 2 div di afiancarsi, a dx o a sx a seconda del float che definisci.

sono fatti apposta.

almeno provala questa soluzione, anche su un altra pagina con 2 o 3 div.

zuccamonna · Messaggio da **zuccamonna** » sabato 4 ottobre 2008, 11:03

ottimo, ora se metti sotto un altro blocco (div) e gli dai clear vedrai che il browser dovrà ristabilire il normale flusso della pagina e otterrai l'effetto voluto.

zuccamonna · Messaggio da **zuccamonna** » sabato 4 ottobre 2008, 12:16

sinceramente non ho ben capito.

Forum Ubuntu-it

[RISOLTO]css: div contenuto che "va sopra" div container...

Re: css: div contenuto che "va sopra" div container...

Re: css: div contenuto che "va sopra" div container...

Re: css: div contenuto che "va sopra" div container...

Re: css: div contenuto che "va sopra" div container...

Re: [RISOLTO]css: div contenuto che "va sopra" div container...

Re: [RISOLTO]css: div contenuto che "va sopra" div container...

Chi c’è in linea

Accedi • Iscriviti