[CSS] Problema centramento all'interno di un div

29-04-2006, 13.35.41

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?

29-04-2006, 13.40.38

Prova mettendo nello stile del DIV

Codice HTML:

text-align:center;

ciauzz

29-04-2006, 14.32.19

Niente non va! Ne' con IE, nè con Firefox!!!

Questo è il codice HTML:

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

Questo il CSS

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);}

Come fare?

**SolitaryExplorer** · 29-04-2006, 14.59.41

Hai provato ad applicare un display: block all'ul e poi a dargli un bel margin: 0 auto?

29-04-2006, 15.06.45

E per fare questo cosa devo scrivere precisamente nel CSS?

Questo?

#navigazione ul {margin:0 auto; display: block}
oppure devo scriverlo nel #navigazione li ?

**SolitaryExplorer** · 29-04-2006, 15.21.08

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);}

29-04-2006, 15.30.06

Fai così:

Codice HTML:

#menu_princ {height: 25px; background: #5F737D; margin-left:auto; margin-right:auto}

oppure

Codice HTML:

#menu_princ {height: 25px; background: #5F737D; text-align:center}

altrimenti posta un link alla pagina dove si verifica il problema..

29-04-2006, 18.23.40

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:

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>

e CSS:

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);}

Nessuno sa il motivo di questo comportamento strano?

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.

**NoWhere** · 30-04-2006, 12.38.33

@aereimilitari, ti é stato già sottolineatoa la nota di non fare up, per favore, non insistere!! se qualcuno sapra risponderti lo farà!!

30-04-2006, 13.33.32

Mi dispisce, scusatemi. Non mi ero accorto della segnalazione.
Non si ripeterà!

In ogni caso ho risolto da solo.

**funcool** · 30-04-2006, 16.09.43

Visto che risolto, chiudo.

Discussione: [CSS] Problema centramento all'interno di un div

LinkBack

Strumenti discussione

Display

[CSS] Problema centramento all'interno di un div

Regole di scrittura