All'interno di un DIV ho inserito un menù orizzontale formato da una lista <ul><li>...</li></ul>.
Il problema è che non riesco a centrare questa lista che invece compare tutta sulla sinistra del div.
Che codice devo insereire nel CSS?
Printable View
All'interno di un DIV ho inserito un menù orizzontale formato da una lista <ul><li>...</li></ul>.
Il problema è che non riesco a centrare questa lista che invece compare tutta sulla sinistra del div.
Che codice devo insereire nel CSS?
Prova mettendo nello stile del DIVciauzzCodice HTML:text-align:center;
Niente non va! Ne' con IE, nè con Firefox!!!
Questo è il codice HTML:
Questo il CSSCodice HTML:<div id="menu_princ">
<ul id="navigazione">
<li><a id="nav_home" href="/">Home</a></li>
<li><a id="nav_forum" href="/">Forum</a></li>
<li><a id="nav_chat" href="/">Chat</a></li>
</ul>
</div>
Come fare?Codice:#menu_princ {height: 25px; background: #5F737D;}
#navigazione,
#navigazione * {margin:0; padding:0; list-style: none;}
#navigazione li {float:left; width:83px; height:25px;}
#navigazione li a {display:block; width:83px; height:25px; text-indent:-1000em; text-decoration:none; background:no-repeat 0 0;}
#nav_home:link,active,visited {background-image:url(immagini/bottoni/home_01.gif);}
#nav_home:hover {background-image:url(immagini/bottoni/home_02.gif);}
Hai provato ad applicare un display: block all'ul e poi a dargli un bel margin: 0 auto?
E per fare questo cosa devo scrivere precisamente nel CSS?
Questo?
#navigazione ul {margin:0 auto; display: block}
oppure devo scriverlo nel #navigazione li ?
Aspetta un attimo.
Vuoi che il menu sia centrato rispetto alla pagina o vuoi che le voci siano centrate rispetto allo sfondo dei link?
Se è la seconda ipotesi ti passo questo:Codice HTML:#menu_princ {height: 25px; background: #5F737D;}
#navigazione {margin:0; padding:0; list-style: none}
#navigazione li {display: inline; width:83px; height:25px; color: #fff}
#navigazione li a {display:block; text-indent:-1000em; text-align: center; width:83px; height:25px; text-decoration:none; background:no-repeat 0 0; color: #fff}
#nav_home:link,active,visited {background-image:url(immagini/bottoni/home_01.gif);}
#nav_home:hover {background-image:url(immagini/bottoni/home_02.gif);}
Fai così:
oppureCodice HTML:#menu_princ {height: 25px; background: #5F737D; margin-left:auto; margin-right:auto}
altrimenti posta un link alla pagina dove si verifica il problema..Codice HTML:#menu_princ {height: 25px; background: #5F737D; text-align:center}
Non funziona! Ho risolto impostando il padding al div....
EDIT: Mi risolvete questo altro problema?
In questo layout subito sotto l'header, nella striscia orizzontale di colore più scuro, è presente un menu.
Questo però non si vede! Si vede solo se ci si passa con il mouse sopra!!!
Come faccio a farlo visualizzare sempre?
Ecco il sito:
http://www.aereimilitari.org/temp/2/test2.html
E questi i codici HTML:
e CSS:Codice HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Aerei Militari - index</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link href="test2_css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="container2">
<div id="header"></div>
<div id="menu_princ">
<ul id="navigazione">
<li><a id="nav_home" href="/">Home</a></li>
<li><a id="nav_forum" href="/">Forum</a></li>
<li><a id="nav_chat" href="/">Chat</a></li>
<li><a id="nav_guestbook" href="/">Guestbook</a></li>
<li><a id="nav_links" href="/">Links</a></li>
<li><a id="nav_webmaster" href="/">Webmaster</a></li>
</ul>
</div>
<div id="colonna1">
<div class="newsbox">
<h2>Larghezza delle colonne</h2>
<p>La tendenza è avere le due colonne laterali a larghezza fissa e la colonna centrale fluida [...]</p>
</div>
</div>
<div id="colonna2">
<div class="newsbox">
<h2>Larghezza delle colonne</h2>
<p>La tendenza è avere le due colonne laterali a larghezza fissa e la colonna centrale fluida [...]</p>
</div>
</div>
<div id="contenuto">
<h2>Layout a tre colonne - versione con i float</h2>
<p>Il layout a tre colonne è uno dei più diffusi e permette di gestire siti di dimensioni medio-alte,
fino ad arrivare ai portali. Si compone delle seguenti sezioni fondamentali:
header, navigazione, contenuti, sezione extra e footer.</p>
non imporre vincoli sulla lunghezza relativa delle colonne.
D' altra parte vincola l' ordine di codifica dell' html.<br> </p>
</div>
<div id="footer">© 1997-2004 - Grafica, layout e guide sono di esclusiva proprietà di html s.r.l.<br>
Note e informazioni legali</div>
</div>
</div>
</body>
</html>
Nessuno sa il motivo di questo comportamento strano?Codice:/*stili per il layout fisso con background*/
html,body {margin: 0; padding: 0;}
body {font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; background-image: url(immagini/background.gif);}
div#container {width: 760px; margin: 0 auto; border-width: 0; background-image: url(immagini/container760.gif);}
div#container2 {text-align: left;}
/*stili del testo*/
a:link {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration: none;}
a:active {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration: none;}
a:visited {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration: none;}
a:hover {font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline;}
h1,h2,h3,h4 {margin: 0; padding: 0;}
h1 {font-size: 16px; font-weight: normal; color: #000000;}
h2 {font-size: 12px; font-weight: normal; color: #333333;}
h3 {font-size: 11px; font-weight: normal; color: #333333; line-height: 16px;}
h4 {font-size: 10px; font-weight: normal; color: #333333;}
/*stili specifici per il layout*/
div#header {height: 100px; background-color:#C2CBD2; background-image: url(immagini/logo.gif);}
div#menu_princ {height: 25px; background-color:#5F737D; padding: 0 131px;}
div#colonna1 {float: left; width: 150px; padding: 0; margin: 25px 0;}
div#colonna2 {float: right; width: 150px; padding: 0; margin: 25px 0;}
div#contenuto {margin: 10px 160px; padding: 0;}
div#footer {clear:both; text-align:center; padding: 0; height: 30px; background-image: url(immagini/background.gif); font-size: 10px;}
/*stili del menu principale*/
#navigazione,
#navigazione * {margin:0; padding:0; list-style: none;}
#navigazione li {float:left; width:83px; height:25px;}
#navigazione li a {display:block; width:83px; height:25px; text-indent:-1000em; text-decoration:none; background:no-repeat 0 0;}
#nav_home {background-image:url(immagini/bottoni/home_01.gif);}
#nav_home:hover {background-image:url(immagini/bottoni/home_02.gif);}
#nav_forum {background-image:url(immagini/bottoni/forum_01.gif);}
#nav_forum:hover {background-image:url(immagini/bottoni/forum_02.gif);}
#nav_chat {background-image:url(immagini/bottoni/chat_01.gif);}
#nav_chat:hover {background-image:url(immagini/bottoni/chat_02.gif);}
#nav_guestbook {background-image:url(immagini/bottoni/guestbook_01.gif);}
#nav_guestbook:hover {background-image:url(immagini/bottoni/guestbook_02.gif);}
#nav_links {background-image:url(immagini/bottoni/links_01.gif);}
#nav_links:hover {background-image:url(immagini/bottoni/links_02.gif);}
#nav_webmaster {background-image:url(immagini/bottoni/webmaster_01.gif);}
#nav_webmaster:hover {background-image:url(immagini/bottoni/webmaster_02.gif);}
Come mai non si vedono i bottoni del menù, se non quando ci si passa sopra con il mouse?
(ho controllato i links alle immagini, sono giusti...)
Help
FunCool: Non fare UP, usa il tasto Edita.
@aereimilitari, ti é stato già sottolineatoa la nota di non fare up, per favore, non insistere!! se qualcuno sapra risponderti lo farà!!
Mi dispisce, scusatemi. Non mi ero accorto della segnalazione.
Non si ripeterà!
In ogni caso ho risolto da solo.
Visto che risolto, chiudo.