sto facendo una pagina dove mi servirebbero dei box al cui interno inserire nel testo delle immagini allineate a destra o sinistra.
I div sono perfetti, solo che le immagini se più alte del corpo del testo, trabordano... Ovvero anche se vanno oltre il testo, non fanno allungare il div, ma arrivate all'altezza massima vanno oltre i margini del div...
codice css
- Codice: Seleziona tutto
body{background:#000; color:#000;font:font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10;background:black;}
a{color:red;}
a:hover, a:visited {color:white}
.wrapper {width:502px;background:#fff;padding:6px;}
.box_title{width:100%;padding:3px; border-left: solid #990000 10px; margin-bottom:15px; margin-top:40px;font-weight:bold;}
.box h3{font-weight:bold;font-size:100%;text-shadow: 0px 4px 3px #cc0000;color:#000;margin-bottom:5px;}
.box a{color:#000;border-bottom:1px solid #990000;text-decoration:none;}
.box a:hover, a:visited {border-bottom:1px solid #333;}
.box p{width:auto;background:#ccc; border:outset #333 2px; margin-left:3px;margin-right:3px;padding:6px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}
.box2{width:100%;text-align:justify;margin-bottom:6px;min-height:120px;}
.box img {border:0px solid #ccc;padding:4px;margin:4px;max-height:100px;padding-bottom:3px;}
.box a:link img{border-bottom:2px solid #990000;}
.box {width:auto; border-bottom: solid #ccc 1px; margin-left:0px;margin-right:0px;margin-top:3px;padding:6px;min-height:142px;}
codice html
- Codice: Seleziona tutto
<html>
<body>
<div class='wrapper'>
<div class='box_title'>titolo</div>
<div class='box'>
<h3>descrizione<h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
</html>
Ho provato a rimediare dando un altezza massima alle immagini, e un'altezza minima per i div, ma la soluzione non mi soddisfa, visto che non sempre risolve il problema...
l'ideale sarebbe avere le immagini che si ridimensionano massimo al 90% dell'altezza del div, ma non ci sono riuscito.
Chi mi sa aiutare?
Grazie. ;)