Ciao a tutti, ho un problema con overflow che non riesco a spiegare, il sito è tozzinisecsa.com/Pomba25
Il problema è questo: Di norma il sito non crea problemi, però per scelta è ottimizzato per una risoluzione di 1024 x 768. il problema è che se io per qualche motivo faccio uno zoom sulla pagina, la pagina fuoriesce dai bordi e rimane nascosta solamente nella parte superiore. Cioé il browser in automatico mi posiziona le barre di scorrimento, mi applica l'overflow, ma solo parzialmente... PERCHE???
Se occorre posso pubblicare tutto il codice css (ma è decisamente lungo), di seguito solo le porzioni necessarie:
PORZIONE DI HTML
<head><title>Pomba 25</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" language="javascript1.2">
<!--
switch (navigator.appName)
{
case "Opera" :
document.write("<link rel=stylesheet href='opera.css' type='text/css'");
break;
case "Microsoft Internet Explorer" :
document.write("<link rel=stylesheet href='ie.css' type='text/css'");
break;
default :
document.write("<link rel='stylesheet' href='stile.css'type='text/css'");
}
//-->
</script>
</head>
<body>
<div id="pagina">
<div id="contenuti">
<a href="index.php" id="titolo"></a>
<div id="foto"></div>
<a href="lo-stabile.php" id="tasto1"><br/>LO STABILE</a>
<a href="i-materiali.php" id="tasto2"><br/>I MATERIALI</a>
<a href="unita-abitative.php" id="tasto3"><br/>UNITA' ABITATIVE</a>
<a href="dove-siamo.php" id="tasto4"><br/>DOVE SIAMO</a>
<a href="contatti.php" id="tasto5"><br/>CONTATTI</a>
<a href="***" target="_new"><img id="w3c" src="***" alt="Valid XHTML 1.0 Transitional" /></a>
</div>
</div>
<div id="esterni">
<a href="***.it" id="bricherasio"><br/>***.it</a>
<a href="***.com" id="tozzini"><br/>***.com</a>
<a href="***.it" id="valpiana"><br/>***it</a>
</div>
</body>
PORZIONE DI CSS
/*--------------------------------------- index.css ---------------------------------------*/body {
background: url(_img/sfondo1.jpg);
font-size: x-small;
line-height: 1.8em;
font: 75%/0.9 arial, helvetica, sans-serif;
margin: 0 auto;
}
a:visited {
color:
#FFF;
}
a:hover {
color:;
}
a:active {
color:;
}
/*--------------------------------------- Pagina ---------------------------------------*/
#pagina {
width: 100%;
height: 100%;
text-align: center;
background: none;
margin: 0 auto;
overflow: scroll;
}
/*--------------------------------------- Contenuti ---------------------------------------*/
#contenuti {
width: 900px;
height: 571px;
background: none;
position: absolute;
top: 50%;
left: 50%;
margin-top: -286px;
margin-left: -450px;
overflow: scroll;
}
/*--------------------------------------- Titolo ---------------------------------------*/
#titolo {
width: 380px;
height: 70px;
float: left;
left: 260px;
bottom: 570px;
position: absolute;
background-image: url(_img/titolo.png);
background-position: top;
z-index: 99;
visibility: visible;
}
:hover {
background-image: url(_img/titolo.png);
background-position: center;
}
:active {
background-image: url(_img/titolo.png);
background-position: bottom;
}
/*------------------------------------- Foto - Iframe - Contatti -------------------------------------*/
#foto {
width: 876px;
height: 536px;
background: url(_img/foto1.jpg);
border: solid 2px
#000;
/*--- ANGOLI ARROTONDATI ---*/
text-align: center;
padding: 10px 10px 10px 10px;
border-radius: 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
behavior: url(ie-css3.htc);
/*--- OMBRA ESTERNA ---*/
-webkit-box-shadow: 10px 10px 5px;
-moz-box-shadow: 10px 10px 5px;
box-shadow: 10px 10px 15px;
}
