mh...
avevo già fatto così:
#principale {
width:809px;
margin:auto;
position:relative;
}
ma non centra in verticale...
cmq ho un problema se utilizzo i bottoni...
ecco un estratto dal codice:
file CSS:
body {
text-align:center;
background:#000000;
}/*serve per gli ie in quirk*/
#principale {
width:809px;
margin:auto;
position:relative;
}
#logo {
background: url("home/top-left.jpg") no-repeat;
position:absolute;
left:0px;
top:0px;
width:210px;
height:100px;
}
#curriculum {
position:absolute;
left:0px;
top:50px;
width:210px;
height:37px;
}
#spazio1 {
background: url("home2/spazio1.jpg") no-repeat;
position:absolute;
left:0px;
top:137px;
width:210px;
height:10px;
}
#servizi {
position:absolute;
left:0px;
top:73px;
width:210px;
height:37px;
}
...
...
questo invece tutto il file html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="FAX">
<meta name="title" content="LORENZO POLETTI - YOUR LANGUAGE PARTNER">
<meta name="keywords" content=">
<meta name="description" content="">
<meta name="robots" content="all">
<title>LORENZO POLETTI - YOUR LANGUAGE PARTNER</title>
<style type="text/css" media="all">@import url(index.css);
</style>
<script language="JavaScript" type="text/javascript" src="rollover.js"></script>
</head>
<body>
<div id="principale">
<div id="logo"></div>
<div id="curriculum">
<a href="#" target="dx" onmouseover="MM_swapImage('curriculum','','home2/curriculum2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="home2/curriculum1.jpg" name="curriculum" width="210" height="37" border="0" id="curriculum"></a>
</div>
<div id="spazio1"></div>
<div id="servizi">
<a href="#" target="dx" onmouseover="MM_swapImage('servizi','','home2/servizi2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="home2/servizi1.jpg" name="servizi" width="210" height="37" border="0" id="servizi"></a>
</div>
<div id="spazio2"></div>
<div id="top-main"></div>
<div id="center-main">
<!-- pagina principale - iframe -->
<IFRAME src="prova.html" width="100%" height="100%" frameborder="0" overflow="auto" name="dx">
</IFRAME>
</div>
<div id="bottom-main"></div>
<div id="right"></div>
</div>
</body>
</html>
prendi ad esempio #curriculum
il suo posizionamento dall'alto dovrebbe essere 100px.
invece per vederlo al posto giusto devo mettere 50px...
se tolgo il bottone e ci metto la sua immagine come sfondo, invece devo mettere 100px per vederlo al posto giusto...
sia su IE che su MOZILLA....
e tutto questo mi provoca dei problemi vista l'altezza dispari delle immagini dei bottoni... argh...
come mai????
non è magari un conflitto col javascript x il rollover???
se si, che devo fare???
grazie di brutto.
questo si che si chiama fare web!!!