Ho letto la bellissima guida sui layot fluidi che c'è su questo sito.
Ho visto che il problema con i layout fatti con i float è che al loro interno non posso usare dei clear o rompo la struttura della pagina.
La mia domanda è questa: se io nel corpo centrale della pagina ho una immagina con una breve didascalia a destra (che è più corta dell'immagine), come posso metterci del testo sotto senza il clear?
Se lo metto si pone anche quello a fianco dell'immagine.
Grazie mille
Se metti un <div style="clear:both"></div> dentro un altro div con float non dovrebbe avere nessun effetto su quest'ultimo div.
Mi potrei anche sbagliare, sono un po' arruginito con i css
Sì, se il div in cui metto il clear è un div con float allora funziona, ma il mio caso è composto di:
-un div con float che ha una larghezzza in pixel
-un div che senza float, con un margin pari alla larghezza del primo in modo tale che si incastrino perfettamente. E' in questo che devo mettere il clear.
Se la cosa non è chiara posto il codice
Se magari dai il codice o un link!
Colleziono problemi matematici divertenti o strani e li raccolgo nel mio sito. Se me ne mandate qualcuno vi ringrazio. flan
e se l'altro div lo posizioni in modo assoluto (o relativo a un div li contiene tutti e due)? Così non dovresti avere più problemi di float.
Vi copio il codice, è lo stesso codice che trovate nella giuda al layout fluidi a due colonne.
Ho solo aggiunto un clear dopo il primo punto nella parte dove c'è il testo e l'immagine allineata a destra.
Il secondo blocco di testo si posiziona dopo la fine del div col float.
Originale della giuda: http://www.html.it/layout_css/2cf.php?stile=2cfbase
Codice mio:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout a due colonne con float</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<style type="text/css">
/*stili per il layout fisso*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center}
div#container{width: 760px;margin: 0 auto;text-align: left;
border-left: 2px solid #36c;border-right: 2px solid #36c}
/*stili generici, su header e footer*/
div#header{background-color:#36C;color: #ff0}
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{float:right;width: 13em}
div#content{margin-right: 13em;padding: 1em}
div#footer{clear:right; text-align:center; padding: 0.5em;
background-color: #69c; 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:#369;font: normal bold 1.2em/1.6em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #033;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Html.it</h1>
</div>
<div id="navigation">
<ul>[*]Home[*]Pillole[*]Contenuti[*]Grafica[*]Linguaggi[*]Webdesign[*]Software[/list]
</div>
<div id="content">
<h2>Layout a due colonne con float</h2>
[img]pippo.gif[/img]Il layout a due colonne con i float presenta un indubbio vantaggio rispetto ad un layout a due colonne con
posizionamenti assoluti: non impone vincoli sulla lunghezza relativa delle colonne.<br clear="all">
D' altra parte obbliga, nella
maggiorparte dei casi, ad avere la navigazione prima dei contenuti, cosa che può avere influenze negative
su tematiche quali l' accessibilità e il posizionamento sui motori di ricerca.
Il layout a due colonne si compone di quattro sezioni fondamentali: header, navigazione, contenuti e footer.</p>
Il layout a due colonne con i float presenta un indubbio vantaggio rispetto ad un layout a due colonne con
posizionamenti assoluti: non impone vincoli sulla lunghezza relativa delle colonne. D' altra parte obbliga, nella
maggiorparte dei casi, ad avere la navigazione prima dei contenuti, cosa che può avere influenze negative
su tematiche quali l' accessibilità e il posizionamento sui motori di ricerca.
Il layout a due colonne si compone di quattro sezioni fondamentali: header, navigazione, contenuti e footer.</p>
Il layout a due colonne con i float presenta un indubbio vantaggio rispetto ad un layout a due colonne con
posizionamenti assoluti: non impone vincoli sulla lunghezza relativa delle colonne. D' altra parte obbliga, nella
maggiorparte dei casi, ad avere la navigazione prima dei contenuti, cosa che può avere influenze negative
su tematiche quali l' accessibilità e il posizionamento sui motori di ricerca.
Il layout a due colonne si compone di quattro sezioni fondamentali: header, navigazione, contenuti e footer.
</p>
</div>
<div id="footer">© 1997-2004 - Grafica, layout e guide sono di esclusiva proprietà di HTML.it s.r.l.
Note e informazioni legali</div>
</div>
</body>
</html>
Ieri ho fatto molte prove, in maniera sporca sono riuscita a farlo andare su Explorer e Mozilla ma non su Opera.
Grazie a tutti
Non sono sicuro di aver capito...
E se metti la foto e descrizione dentro un div cui dai float:right e magari la larghezza e poi la descrizione in un div con float left? tipo:
<div style="float:right;width:150px;">[img]pippo.gif[/img]Breve descrizione più corta...</div>
Colleziono problemi matematici divertenti o strani e li raccolgo nel mio sito. Se me ne mandate qualcuno vi ringrazio. flan
Permessi di invio
Rispondi quotando