Ciao a tutti. Sono disperato, perciò chiedo aiuto... disperatamente. Ho un css con un layout a tre colonne. Questa la strutura:
html,body{margin: 0;padding:0;/*background: url(immagini/gradientBG.jpg) 0% 0% repeat-x*/}
body{font-family: arial,sans-serif;font-size: 76%;text-align:center}
div#container{width:950px; margin:0 auto; padding:0;
border-width: 0 2px; border-style:solid; border-color: #ff0000;
background: url(immagini/rightBG.png) repeat-y top right; color:#376E39
}
div#container2{background: url(immagini/leftBG.png) repeat-y top left;text-align: left}
/*stili generici, su header e footer*/
div#header{height: 162px;background-color:#fff;color: #ff0;border-bottom:2px solid #ff0000}
div#footer a{color:#fff;font-weight: bold;text-decoration: underline}
/*stili specifici per il layout*/
div#navigation{float: left;width: 130px;\width:140px;w\idth:130px;padding: 1em 0 0 10px; text-align:right;font:normal 1em Arial,sans-serif}
div#extra{float: right; width: 160px;\width:170px;w\idth:160px;padding: 1em 5px;/*border-left: 2px solid #ff0000; */text-align:center;font:normal 1.2em Arial,sans-serif;color:#f00}
div#content{margin: 0 170px 0 160PX;padding: 0em 10px;background-color:#fff;background: url(immagini/caddy.png) top center no-repeat;min-height:459px}
/*div#content p{text-align:center;font:bold 1.2em Arial, sans-serif}*/
div#footer{clear:both; text-align:center; padding: 5px 0;background-color: #fff; color: #ff0000;border-top: 2px solid #ff0000;border-bottom: 2px solid #ff0000}
/*stili per la navigazione*/
div#navigation ul{margin: 0;padding: 0; list-style-type: none}
div#navigation li{margin: 0;padding: 0; border-bottom: 1px solid #fff}
/*stili per la sezione extra*/
div#extra div.newsbox{font-size: 90%;margin-bottom: 2em}
div#extra div.newsbox h2{color: #999;font-size: 1.2em}
div#extra div.newsbox p{margin: 0}
Nella sezione header ci sono i seguenti div
div#logo{width:210px;height:162; margin-right: 0!important;margin-right: -3px;padding: 0;float: left}
div#title{width:446px;height:112px;padding:0;margi n-left:210px}
div#dolomitibanner {width:229px;height:140px;padding:0;margin-left:718px}
#menu-2 {
position:absolute;
top:145px!important;
top:148px;
left:870px!important;
left:715px;
background-color:#FF0000;
z-index:2;
font: 90% Arial, Helvetica, sans-serif;
}
#menu-2 ul{
margin:0;
padding: 0;
list-style:none;
}
#menu-2 li{
font-size:.8em;
float:right;
display:inline;
margin:0;
padding:0;
}
#menu-2 a:link,
#menu-2 a:visited{
float:left;
background-color:#FF0000;
color:#fff;
margin:0px;
padding:1px 10px;
text-decoration:none;
border-right:1px solid #fff;
}
#menu-2 a:hover,
#menu-2 a:focus,
#menu-2 a:active a{
color:#FFF;
background-color:#28560f;
}
Nella pagina XHTML con DOCTYPE ecco il codice:
<div id="container">
<div id="container2">
<div id="header">
<div id="logo">
[img]immagini/logo.png[/img]
</div>
<div id="title">
[img]immagini/titolo.gif[/img]
</div>
<div id="dolomitibanner">
[img]immagini/dolomitibanner.gif[/img]
</div>
<div id="menu-2">
<ul>
[*]Contatti
[*]Dove siamo
[*]Chi siamo
[*]Home
[/list]
</div>
</div>
...
</div>
Il risultato non lo potete più vedere perché ho combinato un casino e mi sono sovrascritto i file da solo. Ho bisogno di staccare un po'... Comunque, se trovate un errore, ben venga. Appena ho risistemato tutto, posto un link.
Il risultato migliora rinunciando al banner sulle dolomiti in quanto il menu risulta allineato con il bordo rosso inferiore dell'header, ma in IE& (mannaggia a lui) rimane copmunque spostato a sinistra.
Preciso che con il codice seguente, il risultato era discreto, con nomalia che tutto il contenuto dell'header mi veniva spostato di circa 3 pixel a sinistra sia in IE6 e 7 che in Opera (notate che non ci sono i div#logo e div#title ma solo le immagini linkate nel documento XHTML):
CSS:
div#dolomitibanner {
position:relative;
left:20px;
top:0;
}
#menu-2 {
position:relative;
top:.2em;
background-color:#FF0000;
z-index:2;
font: 90% Arial, Helvetica, sans-serif;
}
#menu-2 ul{
margin:0;
padding: 0;
list-style:none;
}
#menu-2 li{
font-size:.8em;
float:right;
display:inline;
margin:0;
padding:0;
}
#menu-2 a:link,
#menu-2 a:visited{
float:left;
background-color:#FF0000;
color:#fff;
margin:0px;
padding:1px 10px;
text-decoration:none;
border-right:1px solid #fff;
}
#menu-2 a:hover,
#menu-2 a:focus,
#menu-2 a:active a{
color:#FFF;
background-color:#28560f;
}
XHTML:
<div id="header">
[img]immagini/logo.gif[/img]
[img]immagini/titolo.gif[/img]</a>
<div id="dolomitibanner">
[img]immagini/dolomitibanner.gif[/img]
</div>
<div id="menu-2">
<ul>
[*]Contatti
[*]Dove siamo
[*]Chi siamo
[*]Home
[/list]
</div>
</div>
Il risultato di questo codice è visibile qui: http://gelaterialacadorina.com/index2.php
Se guardate il contatore accessi, misura i tentativi fatti per metterci una pezza. Non so che fare... Qualcuno può darmi una mano?
Grazie davvero a chiunque abbia solo avuto la voglia di leggere tutta la spataffiata!
Rispondi quotando
