Salve a tutti... Sono un aspirante webmaster che sta tentando da un paio di giorni di risolvere alcuni problemi legati al posizionamento di alcuni DIV all'interno del sito che sto preparando. Il mio obiettvo è quello di centrare tutta la pagina in entrambi i browsers (Internet Explorer e Firefox). Sono riuscito attualmente a centrare il tutto con Internet Explorer..., ma purtroppo ho grossi problemi con Firefox... Posto qui sotto le pagine HTML e CSS per rendere l'idea del progetto... Se qualcuno mi potesse dare dei suggerimenti su come potere risolvere questo grande problema mi farebbe un grande favore!!!
Parte HTML:
Quote:
<html>
<head>
<title>GOSIA ANDRZEJEWICZ ITALIA</title>
<meta name="description" content="Informazioni sulla galleria della cantante polacca Gosia Andrzejewicz">
<meta name="keywords" content="Gosia Andrzejewicz Plus, Klubie Tuba Gosia Andrzejewicz, Gosia Andrzejewicz Zdjęcie różne,
Śremie i Suchowola Gosia Andrzejewicz, Klimat Gosia Andrzejewicz, Gosia za kierownicą, Walentynki i Wielki Zjazd Gosia
Andrzejewicz, Sopot Festival 2006 Gosia Andrzejewicz, Gwiazdytancza na lodzie Gosia Andrzejewicz, Wallpapers Gosia
Andrzejewicz, Altre foto Gosia Andrzejewicz, Eska Music Awards 2006 Gosia Andrzejewicz, Suwałki Gosia Andrzejewicz, Sesja
Walentynkowa 2009 Gosia Andrzejewicz">
<!-- INIZIO SCRIPT IN JAVASCRIPT -->
<script type="text/javascript">
if(document.all)
{
//Explorer
document.write("<link rel='stylesheet' href='css/GalleriaIE.css' type='text/css'>");
}
else if(document.getElementById)
{
//Netscape 6
document.write("<link rel='stylesheet' href='GalleriaMF.css' type='text/css'>");
}
</script>
<!-- FINE SCRIPT IN JAVASCRIPT -->
</head>
<body>
<!-- DIV CORPO CENTRALE -->
<div id="container">
<!-- DIV INTESTAZIONE -->
<div id="header">
<p>GALLERIA</p>
<a href="Biografia.html" title="Vai a BIOGRAFIA"><img src="css/Skins/frecciasx.gif" alt="Vai a BIOGRAFIA"></a>
 
<img src="css/Skins/banner2.png" alt="Gosia Andrzejewicz">
 
<a href="Testi.html" title="Vai a TESTI"><img src="css/Skins/frecciadx.gif" alt="Vai a TESTI"></a>
</div>
<p class="presentazione">CLICCA SUL LINK CHE TI INTERESSA PER VISUALIZZARE LE FOTO</p>
<p>SEZIONE AGGIORNATA AL 10 AGOSTO 2009</p>
<!-- APERTURA DIV CONTENENTE LE SEZIONI FOTOGRAFICHE -->
<div id="gallery">
<!-- DIV CONTENENTE LA SEZIONE 'ALBUM' -->
<div id="album">
<fieldset>
<legend>ALBUM</legend>
<a href="Gosia_Andrzejewicz_Plus.html" class="sxdx">Gosia Andrzejewicz Plus</a><br>
<a href="PSL.html" class="sxdx">Pozwól żyć</a><br>
<a href="PSL.html" class="sxdx">Słowa</a><br>
<a href="PSL.html" class="sxdx">Lustro</a><br>
<a href="Otworz_Oczy.html" class="sxdx">Otwórz Oczy</a><br>
</fieldset>
</div>
<!-- DIV CONTENENTE LA SEZIONE 'EVENTI' -->
<div id="eventi">
<fieldset>
<legend>EVENTI</legend>
<a href="Klimat.html" class="sxdx">KLIMAT - 25.03.07</a><br>
<a href="Gosia_za_kierownica.html" class="sxdx">Gosia za kierownicą!</a><br>
<a href="Walentynki_i_Wielki_Zjazd_Gosiomaniakow.html" class="sxdx">Walentynki i Wielki Zjazd</a><br>
<a href="Sopot.html" class="sxdx">Sopot Festival 2006</a><br>
<a href="GTNL.html" class="sxdx">Gwiazdytancza na lodzie</a><br>
</fieldset>
</div>
<!-- DIV CONTENENTE LA SEZIONE 'CONCERTI' -->
<div id="concerti">
<fieldset>
<legend>CONCERTI</legend>
<a href="Klubie_Tuba.html" class="sxdx">Klubie Tuba</a><br>
<a href="Zdjecie_rozne.html" class="sxdx">Zdjęcie różne</a><br>
<a href="Sremie_i_Suchowola.html" class="sxdx">Śremie i Suchowola</a><br>
</fieldset>
</div>
<!-- DIV CONTENENTE LA SEZIONE 'ALTRE' -->
<div id="altre">
<fieldset>
<legend>ALTRE</legend>
<a href="Wallpapers.html" class="sxdx">Wallpapers</a><br>
<a href="Altre_foto.html" class="sxdx">Altre foto</a><br>
<a href="EMA_2006.html" class="sxdx">Eska Music Awards 2006</a><br>
<a href="Suwalki.html" class="sxdx">Suwałki</a><br>
<a href="SW2009.html" class="sxdx">Sesja Walentynkowa 2009</a><br>
</fieldset>
</div>
</div>
<!-- CHIUSURA DIV CONTENENTE LE SEZIONI FOTOGRAFICHE -->
<!-- DIV VALIDAZIONI -->
<div id="validate">
.......................
</div>
<!-- DIV FOOTER -->
<div id="footer">
<a href="principale.html" class="sxdx">TORNA ALLA HOME PAGE</a>
</div>
</div>
</body>
</html>
|
Parte CSS:
Quote:
* { margin: 0; padding: 0; }
html {
background-color: white;
background-image: url(Skins/Gosia_Andrzejewicz_3.jpg);
background-repeat: no-repeat;
background-position: center;
color: #000000;
font: 190% "Ignacio", "Sybil Green", arial, sans-serif;
font-weight: bold;
}
body {
background-position: center;
margin: 0;
padding: 0;
text-align: center;
}
p {
margin: 35px;
font-family: "Ignacio", "Sybil Green", arial, sans-serif;
text-align: center;
}
a {
background-color: inherit;
color: blue;
padding: 1px 0;
line-height: 52.5px;
}
#container {
margin: auto;
text-align: left;
}
#header {
text-align: center;
/*margin-left: -50px;*/
}
div#gallery {
text-align: center;
width: 30em;
margin: auto;
}
div#album {
float: left;
width: 15em;
text-align: center;
}
div#concerti {
float: left;
width: 15em;
text-align: center;
margin-top: 20px;
}
div#eventi {
float: left;
width: 15em;
text-align: center;
}
div#altre {
float: left;
width: 15em;
text-align: center;
margin-top: 20px;
}
div#validate {
text-align: left;
margin: auto;
width: 800px;
}
p.presentazione {
font-family: "Ignacio", foo, bar, verdana;
font-size: 60%;
color: black;
text-align: center;
margin: 20px;
}
a.sxdx {
font-family: "Curlz MT";
font-size: 50%;
}
body {
margin:0 1px 0 0;
}
fieldset {
width: 400px;
text-align: center;
}
legend {
font-family: "Curlz MT", foo, bar, verdana;
font-size: 40%;
font-style: italic;
color: black;
}
img {
margin-top: 15px;
border: 0;
}
#footer {
/*position: relative;*/
bottom: 0;
margin: 0;
text-align: center;width: 800px;
/*margin-left: -50px;*/
}
|
Il file CSS è ovviamente quello utilizzato per Firefox..., ovvero 'GalleriaMF.css'... Ovviamente se si ruscisse a trovare una soluzione ideale per il centramento in entrambi i browsers sarebbe anche meglio..., così magari toglierei anche lo script in
JS per la scelta del file CSS... Cmq, aspetto fiducioso in qualche prezioso consiglio... Grazie anticipatemente!!!
11-21-2009, 08:58 PM
Allineamento al centro di alcuni DIV
Discussioni simili
Modalità lineare
