Ciao a tutti
ho realizzato un sito di cui allego immagine. Il problema è il seguente:
Ho montato la struttura della barra in alto con logo e scritta. La barra però non si allinea con il div dei contenuti che è posto al di sotto di essa (quello con la riga di testo) Inoltre se cambio risoluzioni lo spostamento della barra rispetto al div dei contenuti varia ulteriormente. Il div dei contenuti dovrebbe essere centrato e ottimizzato per una risoluzione di 1024X768
Vi prego datemi la soluzione le ho provate tutte
ALLEGO CODICE CSS:
#header {
width: 100%;
}
#hea1 {
position:relative;
background:url(barraGrigioScuroLeft.jpg) repeat-x;
position:left top;
height:83px;
margin-left:0px;;
margin-top:0px;
margin-right:30%;
}
#hea2 {
margin-left:auto;
margin-top:0px;
margin-right:auto;
background-image:url(staccoCentrale.jpg);
background-repeat:no-repeat;
background-position:center top;
}
.hea2 {
position:absolute;
background-image:url(staccoCentrale.jpg);
width:80px;
height:83px;
}
#hea3 {
position:relative;
background:url(barraRossoRight.jpg) repeat-x;
position:right top;
height:83px;
margin-left:0px;
margin-top:0px;
margin-right:0px;
}
#scrittaLogo {
float:right;
margin-left:auto;
margin-top:0px;
margin-right:0px;
background:url(barraGrigioScuroLeft.jpg) repeat-x;
height:83px;
width: 980px;
/*background-repeat:no-repeat;
background-position:center top;
*/
}
#stacco {
display:inline;
float:left;
margin-left:auto;
margin-top:0px;
margin-right:0px;
background-image:url(staccoCentrale.jpg);
background-repeat:no-repeat;
height:83px;
width: 80px;
/*background-repeat:no-repeat;
background-position:center top;
*/
}
#logo {
float:left;
display:inline;
margin-left:auto;
margin-top:0px;
margin-right:5px;
background-image: url(LogoDiavoletto.jpg);
background-repeat:no-repeat;
height:83px;
width: 90px;
/*background-repeat:no-repeat;
background-position:center top;
*/
}
#scritta {
float:left;
display:inline;
margin-left:auto;
margin-top:0px;
margin-right:0px;
background-image: url(srittaLogo.jpg);
background-repeat:no-repeat;
height:83px;
width: 374px;
/*background-repeat:no-repeat;
background-position:center top;
*/
}
#PopoloDellaNotte {
display:inline;
float:right;
margin-left:auto;
margin-top:0px;
margin-right:0px;
background-image:url(PopoloDellaNotte.jpg);
background-repeat:no-repeat;
height:83px;
width: 245px;
/*background-repeat:no-repeat;
background-position:center top;
*/
}
#SpazioRosso {
display:inline;
float:left;
margin-left:auto;
margin-top:0px;
margin-right:0px;
background-image:url(barraRossoRight.jpg);
background-repeat:repeat-x;
height:83px;
width: 186px;
/*background-repeat:no-repeat;
background-position:center top;
*/
}
#contenitorePrincipale {
clear: both;
width: 980px;
margin: 0 auto;
}
ALLEGO CODICE XHTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body topmargin="0">
<div id="header">
<div id="hea3">
<div id="hea1">
<div id="scrittaLogo"> <div id="logo"></div> <div id="scritta"></div> <div id="stacco"></div> <div id="SpazioRosso"></div> <div id="PopoloDellaNotte" ></div>
</div>
</div>
</div>
</div>
<div id="contenitorePrincipale"> ciao fffff jhkjhj uiuhiuhkjhkij jijoii oi oikoioijo oijooikoki oiuiuiuiou uiujoioujoiuio uiouoopp uoiuoiuioui uiuouujoiu uiouio ui uiououjoi uiuiuio iouiyi iuouoiuio yuiyuiyi y</div>
</body>
</html>
Rispondi quotando
