Salve a tutti,
sto facendo il layout per un sito.. ma dopo tanto mi trovo in difficolta....
la struttura del sito è abbastanza semplice, ma devo fare in modo che le misure e gli spazi coincidano e siano perfettamente CENTRATI su ogni risoluzione...
Il codice è il seguente:
Invece a questo link potete vedere come si vede ....
PROVA
Come potete vedere il blocco di colore viola si sovrappone al blocco di colore blu...La misura del blocco MAIN è 1020x2000
La somma dei pixel (come potete vedere nel file html) non arriva neanche a 1020...
Potete aiutarmi? Dove sbaglio?
Emiliano.
sto facendo il layout per un sito.. ma dopo tanto mi trovo in difficolta....
la struttura del sito è abbastanza semplice, ma devo fare in modo che le misure e gli spazi coincidano e siano perfettamente CENTRATI su ogni risoluzione...
Il codice è il seguente:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>...La via dell'anima...</title>
<style type="text/css">
body { background-image: url(sfondo_tortoranew.jpg);
background-repeat: repeat-x;
}
</style>
<style type="text/css">
#main {
width: 1024px; /*la larghezza dell'elemento*/
height: 2000px; /*l'altezza dell'elemento*/
position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
margin-left: -512px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
margin-top: -1000x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
background-color: #333333;
}
#logo {
width: 480px; /*la larghezza dell'elemento*/
height: 200px; /*l'altezza dell'elemento*/
position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
margin-left: -240px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
margin-top: -100x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
background-color: #0F0
}
#topmenu {
width: 620px; /*la larghezza dell'elemento*/
height: 40px; /*l'altezza dell'elemento*/
position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
margin-left: -320px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
margin-top: -20x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
background-color: #C36;
}
#imgcenter {
width: 620px; /*la larghezza dell'elemento*/
height: 504px; /*l'altezza dell'elemento*/
position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
margin-left: -320px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
margin-top: -252x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
background-color: #009
}
#flashnews {
width: 200px; /*la larghezza dell'elemento*/
height: 100px; /*l'altezza dell'elemento*/
position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
margin-left: -100px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
margin-top: -50x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
background-color: #FF0
}
#footer {
width: 620px; /*la larghezza dell'elemento*/
height: 40px; /*l'altezza dell'elemento*/
position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
margin-left: -320px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
margin-top: -20x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
background-color: #C36;
}
#imgalt {
width: 300px; /*la larghezza dell'elemento*/
height: 350px; /*l'altezza dell'elemento*/
position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
margin-left: -150px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
margin-top: -175x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
background-color: #639
}
#section {
width: 300px; /*la larghezza dell'elemento*/
height: 250px; /*l'altezza dell'elemento*/
position: absolute; /*posizione assoluta per potere riposizionare l'elemento*/
left: 50%; /*il bordo sinistra dell'elemento si troverà al 50% della larghezza disponibile*/
top: 50%; /*il bordo superiore dell'elemento si troverà al 50% dell'altezza disponibile*/
margin-left: -150px; /*la metà della larghezza dell'elemento è tolta come margine superiore per centrarlo*/
margin-top: -125x; /*la metà dell'altezza dell'elemento è tolta come margine superiore per centrarlo*/
background-color: #F00
}
</style>
</head>
<body>
<div id="main" style="left:50%; top:50%; margin-left:-510px; margin-top: -500px;">
<div id="logo" style="left:510px; top:380px; margin-left:-240px; margin-top: -100px;">
</div>
<div id="topmenu" style="left:440px; top:589px; margin-left:-240px; margin-top: -100px;">
</div>
<div id="imgcenter" style="left:520px; top:790px; margin-left:-320px; margin-top: -252px;">
</div>
<div id="flashnews" style="left:300px; top:1106px; margin-left:-100px; margin-top: -50px;">
</div>
<div id="flashnews" style="left:510px; top:1106px; margin-left:-100px; margin-top: -50px;">
</div>
<div id="flashnews" style="left:721px; top:1107px; margin-left:-100px; margin-top: -50px;">
</div>
<div id="footer" style="left:300px; top:1220px; margin-left:-100px; margin-top: -50px;">
</div>
<div id="imgalt" style="left:100px; top:659px; margin-left:-100px; margin-top: -50px;">
</div>
</div>
</body>blu.....
</html>Invece a questo link potete vedere come si vede ....
PROVA
Come potete vedere il blocco di colore viola si sovrappone al blocco di colore blu...La misura del blocco MAIN è 1020x2000
La somma dei pixel (come potete vedere nel file html) non arriva neanche a 1020...
Potete aiutarmi? Dove sbaglio?
Emiliano.
