Ciao a tutti!
Ho provato a ridimensionare orizzontalmente un logo (che nell'esempio sintetizzo con tre elementi di colore diverso) tenendo la prima e la terza immagine fisse nel contenitore, mentre quella centrale con width: 100% che si dovrebbe allargare con l'espandersi del viewport. Con IE e Opera funziona alla perfezione, ma con Firefox e Netscape no! L'immagine nel mezzo rimane uguale e non si espande. Non riesco a capire come ovviare al problema! Qualcuno potrebbe aiutarmi??
Qui sotto html e css, oppure, per rendervi conto dell'effetto grafico: http://www.isolepontine.altervista.org/
Thanxalot!
Paolo
<body>
<div id="contenitor">
<div id="logo">
<div id="sinistra">[img]a.gif[/img]</div>
<div id="centro">[img]b.gif[/img]</div>
<div id="destra">[img]c.gif[/img]</div>
</div>
</div>
</body>
<style type="text/css">
<!--
body {
background-color: #4E87FA;
margin: 0px;
padding: 0px;
width: 100%;
}
#contenitor {
margin: 0px;
padding: 0px;
}
#logo {
margin: 0px auto;
padding: 0px;
width: 78%;
position: relative;
left: auto;
top: 1em;
right: auto;
text-align: left;
}
#logo #destra img {
}
#logo #centro img {
margin: 0px;
padding: 0px;
width: 100%;
position: relative;
height: 102px;
}
#logo #sinistra {
margin: 0px;
padding: 0px;
float: left;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
position: absolute;
z-index: 3;
width: 565px;
}
#logo #centro {
margin: 0px 25px 0px 550px;
padding: 0px;
float: left;
}
#logo #destra {
margin: 0px;
padding: 0px;
float: right;
position: absolute;
z-index: 1;
right: 0px;
top: 0px;
}
-->
</style>
Rispondi quotando