centrare menù ul

**Balu Persli** · 12-09-2006, 20:37

Ragazzi non so più cosa fare, alla pagina http://balupersli.altervista.org

Sto lavorando a un sito per la mia ragazza e intanto smanetto per prendere confidenza con html e css per poi passare più avanti al php.

Sto risistemando il layout seguendo i consigli datimi da alcuni di voi ora sto cercando di rendere il menù orrizzontale come voglio solo che non riesco a centrare i li ne orrizzontalmente ne verticalmente all'interno del ul.

Ho provato a usare line-height uguale a height e a utilizzare margin: 0 auto per centrare orrizzontalmente, ho provato anche text-align: center e vertical-align: middle; ma non funziona niente ne su IE ne su Firefox ne su Opera che sono i 3 browser che utilizzo per far si che il sito sia presentabile su tutti e 3

Sapete aiutarmi?

**ashtur1** · 12-09-2006, 22:35

se posti il codice è piu facile darti una mano

**Balu Persli** · 12-09-2006, 23:03

Questo è l'xhtml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Barbara Persich Home Page
</title>
<meta http-equiv="Content-type" content='text/html; charset="UTF-8"' />
<meta name="author" content="Luigi Liccardi" />
<meta name="copyright" content="Luigi Liccardi" />
<meta name="description" content="Home Page Barbara Persich, pagina iniziale con foto" />
<meta http-equiv="keywords" content=" " />
<link rel="stylesheet" type="text/css" href="Base.css" />
</head>
<body>
<div id="container">
<div id="header">

</div>
<ul id="ul_mnu_top">
<li id="selected_top">
Home

<li class="li_mnu_top">
<a class="a_mnu" href="scuola/scuola.html">
Scuola
</a>

<li class="li_mnu_top">
<a class="a_mnu" href="foto/foto.html">
Foto
</a>

<li class="li_mnu_top">
<a class="a_mnu" href="link/link.html">
I miei siti
</a>

<li class="li_mnu_top">
<a class="a_mnu" href="croazia/croazia.html">
Croazia
</a>

<li class="li_mnu_top">
<a class="a_mnu" href="write_me.html">
Scrivimi
</a>

[/list]
<div id="navigazione">
<p id="titnav">
SOTTOSEZIONI
</p>
<table>
<tr>
<td class="selected">
News
</td>
</tr>
<tr>
<td onclick="self.location='dati.html'" onmouseover="this.style.cursor='pointer'"
onmouseout="this.style.cursor=''">
Chi sono!
</td>
</tr>
</table>
<div id="xhtml">
<a href="http://validator.w3.org/check?uri=referer">

</a>
</div>
<div id="css">
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://balupersli.altervista.org/Base.css">

</a>
</div>
</div>
<div id="content">

</div>
<div id="footer">
Developed by Luigi Liccardi

(Sito ottimizzato per Mozzila Firefox - 1280X1024 px)
</div>
</div>
</body>
</html>

Questo invece è il CSS:

body {font-family: "century gothic", verdana, cursive;
font-size: 14px;
padding: 0px;
margin: 0px;
background-color: #87CEFA;
color: black;
text-align: center;
}
/*-----------------------------------------------------------------------------------------*/
#container {background-color: #DDA0DD;
color: black;
width: 961px;
height: 858px;
margin-left: auto;
margin-right: auto;
}
/*-----------------------------------------------------------------------------------------*/
#header {background-color: #DCDCDC;
color: black;
width: 100%;
font-size: 20px;
height: 80px;
margin: 0;
padding: 0;
}
/*-----------------------------------------------------------------------------------------*/
#ul_mnu_top {background-color: #DCDCDC;
color: #DDA0DD;
width: 100%;
height: 36px;
font-weight: bold;
text-align: center;
border-top: 3px solid #DDA0DD;
border-bottom: 3px solid #DDA0DD;
margin: 0 auto;
margin-left: 0;
padding-left:0;
list-style-type: none;
}
/*-----------------------------------------------------------------------------------------*/
.li_mnu_top {border: 1px solid #DDA0DD;
float: left;
line-height: 24px;
height: 24px;
width: 120px;
margin-left: 4px;
}
/*Link selezionato sui menù---------------------------------------------------------------*/
#selected_top {background-color: #DDA0DD;
color: #DCDCDC;
float: left;
line-height: 24px;
height: 24px;
width: 150px;
margin-left: 4px;
}
/*----------------------------------------------------------------------------------------*/
#navigazione {float: left;
width: 179px;
height: 685px;
background-color: #DCDCDC;
color: #DDA0DD;
font-weight: bold;
text-align: center;
}
/*Titolo Navigazione-----------------------------------------------------------------------*/
#titnav {font-size: 16px;
text-decoration: underline;
}
/*-----------------------------------------------------------------------------------------*/
#content {height: 685px;
width: 779px;
background-color: #DCDCDC;
color: black;
float: right;
}
/*-----------------------------------------------------------------------------------------*/
#footer {background-color: #DCDCDC;
color: #DDA0DD;
width: 100%;
height: 40px;
font-size: 10px;
}
/*----------------------------------------------------------------------------------------*/
#xhtml {position: absolute;
top: 550px;
left: 45px;
margin-left: auto;
margin-right: auto;
}
#css {position: absolute;
top: 590px;
left: 45px;
margin-left: auto;
margin-right: auto;
}
/*-------------------------------------------------------------------------------------------*/
a {text-decoration: none;
}
/*-------------------------------------------------------------------------------------------*/
a:visited {text-decoration: none;
}
/*-------------------------------------------------------------------------------------------*/
a img {border: none;
}

.a_mnu {background-color: #DCDCDC;
display: block;
color: #DDA0DD;
height: 100%;
width: 100%
}

Occhio che non è impaginato come sul mio editor se volete salvarvi i 2 file sono http://balupersli.altervista.org/index.html e http://balupersli.altervista.org/Base.css

Thanks per l'interessamento

**salasir** · 13-09-2006, 09:13

Io sposterei id="ul_mnu_top su un div che contiene la lista e come css assegni a questo il text-align:center .

Infatti assegnare margin:0 auto; alla lista serve per centrarla ma non viene interpretato da IE, che ha bisogno di avere il center assegnato al div che lo contiene.

[edit]PS. trovo l'abbinamento di colori sfondo/testo abbastanza difficile da leggere.

**Mich_** · 13-09-2006, 09:34

C'e` anche un problema di linguaggio.
IE6 non riesce ad interpretare XHTML 1.1 (interpreta in quirks mode)

Secondo me ti conviene passare a XHTML 1.0 Strict, e togliere il preambolo XML (il DOCTYPE deve iniziare nella prima riga del file): in questo modo sistemi automaticametne molti problemi di IE (XHTML Strict viene interpretato quasi bene).

**Balu Persli** · 13-09-2006, 14:38

Raga il problema è che non funge neanche su firefox e Opera

Inoltre a aggiungere il div ci avevo pensato prima di modificare il tutto ma in questo forum me lo avevate fatto togliere perchè ul è già un elemento di tipo block

Mi ero messo su Xhtml 1.1 perchè volevo pensare già al futuro voi consigliate di togliere il tutto e tornare all' 1.0?

Thanks

**Mich_** · 13-09-2006, 14:54

Pensare al futuro va bene, ma prima occorre pensare al presente.
Credo che XHTML 1.0 Strict sia il compromesso migliore, ma le idee possono essere diverse.

**bizzu** · 13-09-2006, 16:43

Mi accodo anche io a questa richiesta...
Io ho seguito pari pari la guida di html.it
http://css.html.it/articoli/leggi/17...ab-grafiche/1/

e anche io non riesco a centrare quella maledetta ul!

codice:

<ul id="nav">
      <li id="active"><span>Articoli</span>[*]<span>Gallerie</span>[*]<span>Link</span>[*]<span>Chi siamo</span>[/list]

codice:

ul#nav{float: left; width: 100%; list-style: none; margin: 0; padding: 0;
       background-color:#00DEFF; border-top: 3px solid #00DEFF;}
ul#nav li{float: left; margin: 0 0.2em 0; padding: 0}
ul#nav a{float: left; padding: 0 0 0 0.4em; font: normal bold 1.2em arial,sans-serif;
    background: url(../images/tab.png) no-repeat top left;
    text-decoration: none;color: navy}
ul#nav span{float: left;padding: 0.4em 0.4em 0.4em 0;
    background: url(../images/tab.png) no-repeat top right;cursor: pointer}

Dimenticavo il sito: http://www.lafatina.it/fatina/

**Mich_** · 13-09-2006, 18:37

Ci sono un po' di incongruenze:
float:left non va d'accordo con width:100%
E non ha senso centrare un oggetto largo 100%

Cosa devi centrare? La #nav dentro il suo contenitore? E cosa e` il contenitore? (posta li codice anche di quello)

**bizzu** · 13-09-2006, 19:08

Dunque width:100% mi serve per avere la "barra" blu larga come tutta il contenitore, mentre se tolgo float:left mi "scompare" il riempimento della barra stessa...

L'ul lo vorrei centrare rispetto al container:

codice:

<div id="container">
    <ul id="nav">
        <li id="active"><span>Articoli</span>[*]<span>Gallerie</span>[*]<span>Link</span>[*]<span>Chi siamo</span>[/list]
</div>

codice:

html{margin: 0;padding:0;}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center;
    background: #A3EAFF url('../images/sfondo.gif') repeat-x}
div#container{width: 760px;margin: 0 auto;text-align: left;
    border-left: 2px solid navy;border-right: 2px solid navy;
    border-top: 2px solid navy;border-bottom: 2px solid navy;}

ul#nav{float:left; width: 100%; list-style: none; margin: 0; padding: 0;
       background-color:#00DEFF; border-top: 3px solid #00DEFF;}
ul#nav li{float: left; margin: 0 0.2em 0; padding: 0}
ul#nav a{float: left; padding: 0 0 0 0.4em; font: normal bold 1.2em arial,sans-serif;
    background: url(../images/tab.png) no-repeat top left;
    text-decoration: none;color: navy}
ul#nav span{float: left;padding: 0.4em 0.4em 0.4em 0;
    background: url(../images/tab.png) no-repeat top right;cursor: pointer}

Grazie per l'aiuto...

Discussione: centrare menù ul

Strumenti discussione

Ricerca discussione

Visualizza

centrare menù ul

Permessi di invio