[HTML] Problema allineamento DIV

MaRgEnIuS · 21-11-2009, 23:41

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="">
<meta name="keywords" content="">



<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>



</head>
<body>



<div id="container">



<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>
&nbsp
<img src="css/Skins/banner2.png" alt="Gosia Andrzejewicz">
&nbsp
<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>



<div id="gallery">



<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 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 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 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>





<div id="validate">
<a href="">
<img src="" alt="Valid HTML 4.01 Strict" height="31" width="88">
</a>
<a href="">
<img style="border:0;width:88px;height:31px" src="" alt="CSS Valido!">
</a>
</div>



<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!!!

kurts · 22-11-2009, 16:50

qui ho postato un template moooooolto semplice tanto per fare un esempio ma che risolve il problema del centramento in FF/IE.

prova a buttare un occhio

22-11-2009, 16:50	#2
kurts Senior Member Iscritto dal: Oct 2009 Città: Varese Messaggi: 307	qui ho postato un template moooooolto semplice tanto per fare un esempio ma che risolve il problema del centramento in FF/IE. prova a buttare un occhio

Strumenti
Mostra una versione stampabile Invia questa pagina per email