Problema menù

ciccio9999

Utente Attivo
16 Ago 2011
30
0
0
Non sono molto pratico con CSS ma ho provato a fare una home page. Ho due problemi con il menù...
1) Non so come fare a fare in modo che sia con Google Chrome che con Firefox si vedano correttamente... Fatto in un modo con GC sfora ma con MF si vede ben accentrato... Fatto in un altro sfora con Firefox ma va bene con GC...
Cosa sbaglio?

PHP:
body {
	background-image: url("Sfondo.png");
	} 
#container {
		width: 900px;
		height: 840px;
		margin: auto;
		}
#header {
		width: 900px;
		height: 250px;
		background-image: url("Header.png");
		
	}
#centro {
		width: 900px;
		height: 620px;
		background-image: url(corpo.png);
		
	}
#menu {
		width: 900px;
		height: 50px;
		position: absolute;
		margin-left: 35%;
		left: -225;
	}
#menu ul {
		list-style: none;
		margin: 10px;
		padding: 0;
		}
#menu ul li {
		display: inline;
		}
#menu ul a {
		text-decoration: none;
		display: block;
		float: left;
		line-height: 25px;
		color: white;
		margin-right: 50px;
		}
#menu ul a:hover {
			color:#b214b8;
			}
#contenuti {
		width: 850;
		height: 500;
		margin: auto;
		padding: 20px;
		position: relative;
		top: 50px;
		overflow: auto;
		}
#footer {
		width: 900px;
		height: 30px;
		background-image: url("Footer.png");
	}
#footer a {
		text-decoration: none;
		color: white;
		font-size: 11px;
		font-weight: bold;
		}

Questa è la pagina html:

PHP:
<html>
<head>
<style>
@import url(home.css);
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="centro">
<div id="menu">
	<ul>
		<li><a href="home.php"><b>Home</b></a></li>		
		<li><a href=""><b>Tesserati</b></a></li>
		<li><a href=""><b>Nazionali</b></a></li>
		<li><a href=""><b>Partite</b></a></li>		
		<li><a href=""><b>Albo d'oro</b></a></li>
		<li><a href=""><b>Marcatori</b></a></li>
		<li><a href=""><b>Notizie</b></a></li>
	</ul>
</div>
<div id="contenuti">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

2) Come faccio a fare in modo che il menù è accentrato?
 
Ho modificato i css e ho cambiato questo blocco:

PHP:
#menu {
		width: 900px;
		height: 50px;
		position: absolute;
		margin: 0 auto;
	}

La situazione ora è migliorata ed è più "coerente" per i due browser... Ci sono però gli stessi problemi:

1) Non è centrato ma è tutto spostato sulla sinistra dell'area di menù... Come faccio a centrarlo?
2) Tra MF e GC ci sono delle differenze di dimenzioni: in MF è tutto più grande e lo spazio a destra è molto sottile... Su GC c'è molto spazio a destra... Come si fa?
 
Non mi si centra comunque... E comunque non so come fare per fare in modo che si veda uguale sia con MF che con GC e altri browser
 
Ho aggiunto questa cosa:

PHP:
#menu ul li {
		display: inline;
		width: 14%;
		float: left;
		text-align: center;
		font-weight: bold;
		}

E pare che per tutti i browser si veda allo stesso modo... Il problema è che mi si vede così:

Screenshot-1.png

Come faccio a fare in modo che la distanza tra i campi sia la stessa? Oppure andrebbe bene anche una cosa così:

Screenshot-2.png
 
ciao
prova in questo modo, ho provato solo la parte relativa al menù
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
#menu { 
        width: 900px; 
        height: 50px; 
        position: absolute; 
        background-color:#FF0000; /*messo per evidenziare*/
    } 
#menu ul { 
        list-style: none; 
        display:block;
        } 
#menu li { 
        display: inline;
        text-align:center;
        } 
#menu  a { 
        text-decoration: none;
        display: block;
        width:90px;/*da provare in modo che il testo sia interno*/
        float: left; 
        line-height: 25px; 
        color: white;
        margin-right: 1.5%;/*da provare in funzione del width*/
        margin-left: 1.5%;/*uguale al right*/
        font-weight:bold;/*così non servono i tag <b>*/
        background-color:#CCCC99;/*messo colore di back per evidenziare meglio dove posizionato testo*/
        } 
#menu  a:hover { 
            color:#b214b8; 
            } 

</style>
</head>
<body>
<div id="menu"> 
    <ul> 
        <li><a href="home.php">Home</a></li>         
        <li><a href="">Tesserati</a></li> 
        <li><a href="">Nazionali</a></li> 
        <li><a href="">Partite</a></li>         
        <li><a href="">Albo d'oro</a></li> 
        <li><a href="">Marcatori</a></li> 
        <li><a href="">Notizie</a></li> 
    </ul> 
</div> 
</body>
</html>
 

Discussioni simili