Pagina 1 di 1
Re: css: div contenuto che "va sopra" div container...
Inviato: venerdì 3 ottobre 2008, 20:14
da 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.
Re: css: div contenuto che "va sopra" div container...
Inviato: venerdì 3 ottobre 2008, 20:52
da 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}
Re: css: div contenuto che "va sopra" div container...
Inviato: sabato 4 ottobre 2008, 10:01
da superseba
o provi ad usare un javascript che ridimensiona la div di sfondo, oppure usi una tabella..
Re: css: div contenuto che "va sopra" div container...
Inviato: sabato 4 ottobre 2008, 10:47
da zuccamonna
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.
Re: [RISOLTO]css: div contenuto che "va sopra" div container...
Inviato: sabato 4 ottobre 2008, 11:03
da zuccamonna
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.
Re: [RISOLTO]css: div contenuto che "va sopra" div container...
Inviato: sabato 4 ottobre 2008, 12:16
da zuccamonna
sinceramente non ho ben capito.