posizionare liste a sinistra

**fcw5** · 29-11-2007, 00:00

Ciao a tutti,

ho già scritto altre liste e mi si sono sempre posizionate correttamente, stavolta no, quindi ho sbagliato a scrivere le regole... solo che non so dove

ho un div#navigazione che mi contiene la lista così:

<div id="navigazione">
<ul>[*]CONVEGNO SCIENTIFICO INTERNAZIONALE - ALLENARE L'APNEA[/list]
</div>

il CSS è così:

div#navigazione li {
list-style: none;
list-style-position: outside;
}
div#navigazione ul a, div#navigazione ul a:visited {
color: #ccc;
font-size: 13px;
text-decoration: none;
font-weight: bold;
}
div#navigazione ul a:hover {
color: #fff;
text-decoration: underline;
}

Solo che vedo la scritta spostata a destra come se ci fosse sempre il palloccolo... il pallino della lista.
Qualcuno vede l'errore?

Grazie Fcw

**H5N1_Aviaria** · 29-11-2007, 01:26

Prova ad impostare margin e padding a zero.

**fcw5** · 29-11-2007, 13:16

L'ho fatto, l'ho inserito in tutte le voci, ma niente

rimane sempre spostato a destra.

Fcw

**H5N1_Aviaria** · 29-11-2007, 14:22

Per allinearle sulla sinistra è necessario o che siano "inline" o impostare il "float:left".
E comunque ho utilizzato il tuo codice e a destra non vedo allineato nulla, ma gli elementi vanno a capo.

**fcw5** · 29-11-2007, 16:10

Ho creato un nuovo file e reinserito lo stesso codice, rimane sempre a destra, non allineato a destra, ma spostato in quella direzione rispetto al margine sinistro.
Se togli le liste lasciando solo il collegamento, il testo si appiccica al lato sinistro, è così che vorrei la posizione del testo!

HTML
...
<head>

<title>..</title>
</head>

<body>
<div id="navigazione">
<ul>[*]CONVEGNO SCIENTIFICO INTERNAZIONALE - ALLENARE L'APNEA[/list]
CONVEGNO SCIENTIFICO INTERNAZIONALE - ALLENARE L'APNEA
</div>
</body>
</html>

CSS

div#navigazione li {
list-style: none;
list-style-position: outside;
padding: 0;
margin: 0;
}
div#navigazione ul a, div#navigazione ul a:visited {
color: #ccc;
font-size: 13px;
text-decoration: none;
font-weight: bold;
}
div#navigazione ul a:hover {
color: #fff;
text-decoration: underline;
}
div#navigazione {
height: 400px;
width: 200px;
float: left;
background-color:#CCFF66;
padding: 0;
margin: 0;
}

Se ho fatto bene ho allegato un'immagine del box in questione, il testo sopra è la lista che si vede scorretta, sotto c'è solo <a> che si vede bene.

Grazie
Fcw

**H5N1_Aviaria** · 29-11-2007, 16:27

Così fai un reset dei margini e dei padding degli elementi LI ma non degli UL!
Procedi così:

codice:

#navigazione ul,#navigazione ul li{
margin : o;
padding : 0;
list-style : none;
}

**fcw5** · 29-11-2007, 16:48

Mitico!

col tuo codice ho risolto

devo leggermi qualche guida sulle definizioni di LI e UL perchè ancora non ho capito la differenza

Grazie 1000 H5N1_Aviaria

Fcw

**H5N1_Aviaria** · 29-11-2007, 17:08

UL definisce un contenitore (o scatola : BOX) per la lista e LI definisce il contenitore per l'elemento della lista.
Entrambi hanno un proprio list-style attribute e, ovviamente, propri margini e padding.
Il mio consiglio è di usare un CSS per il reset degli stili, visto che ogni browser utilizza uno stile diverso di default per gli elementi.
Ti consiglio di urare il "reset-style" di Eric Meyer di cui utilizzo una versione personalizzata.
Lo trovi all'indirizzo http://meyerweb.com/eric/thoughts/20...eset-reloaded/

**fcw5** · 29-11-2007, 17:48

Link molto interessante, non ci avevo pensato a resettare tutto a monte

Penso di aver anche più chiaro il concetto UL e LI, grazie infinite

Fcw

Discussione: posizionare liste a sinistra

Strumenti discussione

Ricerca discussione

Visualizza

posizionare liste a sinistra

Permessi di invio