Aiuto con lista...definita male!

**gnola** · 08-05-2007, 10:44

Ciao a tutti, ho fatto un pò di casino con le liste...chi sà darmi una mano??
Non sono esperta di CSS e stò montando un sito solo con i fogli stile....avevo creato un menù orizzontale di immagini proprio con le liste ed era tutto ok.....solo che evidentemente ho sbagliato metodo perchè adesso ho necessità di fare in una pagina una semplice lista di servizi ma non ci riesco! mi prende il cpmportamento della lista precedente....ho capito l'errore in pratica prima non avevo definito una classe ma un id ma non sò come modificarla.....
Mi posto il codice del CSS e della pagina col menù di immagini:

////////////// CSS //////////////

codice:

ul#navigazione {
padding : 0;
margin : 0;
}
li {
float : left;
width : 100px;
height : 78px;
list-style-type : none;
}
li a {
display : block;
width : 100px;
height : 78px;
text-decoration : none;
background : no-repeat 0 0;
position : relative;
font-size : 1px;
color : #ffffff;
}
#nav_home_active {
background-image : url('img/home_active.gif');
}
#nav_home {
background-image : url('img/home.gif');
}
#nav_home:hover {
background-image : url('img/home_roll.gif');
}
#nav_profilo_active {
background-image : url('img/profilo_active.gif');
}
#nav_profilo {
background-image : url('img/profilo.gif');
}
#nav_profilo:hover {
background-image : url('img/profilo_roll.gif');
}
#nav_servizi_active {
background-image : url('img/servizi_active.gif');
}
#nav_servizi {
background-image : url('img/servizi.gif');
}
#nav_servizi:hover {
background-image : url('img/servizi_roll.gif');
}
#nav_soluzioni_active {
background-image : url('img/soluzioni_active.gif');
}
#nav_soluzioni {
background-image : url('img/soluzioni.gif');
}
#nav_soluzioni:hover {
background-image : url('img/soluzioni_roll.gif');
}

//////////////////////////////////////

/////////////////PAGINA////////////

<ul id="navigazione">
[*]Home
[*]Profilo
[*]Servizi
[*]Soluzioni[/list]

//////////////////////////////////////

Come devo modificarli???

grazie!!!!!!!!

**robbi_gallo** · 08-05-2007, 11:33

li {
float : left; fa si che la lista sia orizzontale
width : 100px;
height : 78px;
list-style-type : none;
}

**gnola** · 09-05-2007, 14:14

grazie...ma forse non hai capito cosa intendevo....la lista di bottoni orizzzontale và bene e funge...il problema è che ora qualsiasi altra lista debba fare mi prende quel comportamento....
come posso fare per far sì che ognuna abbia un suo stile che non influezi le altre??
Ho sicuramente sbagliato a definirmi la prima lista ma non sò come và modificata.

qualcuno sà aiutarmi??

**erredeco** · 09-05-2007, 14:23

come posso fare per far sì che ognuna abbia un suo stile che non influezi le altre??

Facile: visto che la lista orizzontale è solo quella dentro ul#navigazione, basterà fare così:

codice:

ul#navigazione {
padding : 0;
margin : 0;
}

ul#navigazione li {
float : left;
width : 100px;
height : 78px;
list-style-type : none;
}
ul#navigazione li a {
display : block;
width : 100px;
height : 78px;
text-decoration : none;
background : no-repeat 0 0;
position : relative;
font-size : 1px;
color : #ffffff;
}

**robbi_gallo** · 09-05-2007, 14:34

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>

</style>

</head>

<body>

<ul id="navigazione">[*]Home[*]Profilo[*]Servizi[*]Soluzioni[/list]

<hr />

<ul id="nav_orizzontale">[*]Home[*]Profilo[*]Servizi[*]Soluzioni[/list]

</body>
</html>

id è un identificatore univoco all'interno della pagina, associandone uno diverso per ogni lista, puoi deinere gli stili diversi per ciascuna di esse.

**gnola** · 09-05-2007, 15:11

Grazie! ho capito

però ho dovuto modificare il codice e togliere le a dai 3 stati altrimenti non si vedevano le immagini..

#nav_orizzontale #nav_home_active a{
background-image : url('img/home_active.gif');
}
#nav_orizzontale nav_home a{
background-image : url('img/home.gif');
}
#nav_orizzontale #nav_home a:hover {
background-image : url('img/home_roll.gif');
}

Un ultima cosa....non si può togliere il rientro a destra che si crea per ogni elemento li della lista normale vero? Non si può dare un allineamento al margine sinistro?

ciao!

**copsteve** · 09-05-2007, 15:19

Originariamente inviato da gnola
Un ultima cosa....non si può togliere il rientro a destra che si crea per ogni elemento li della lista normale vero? Non si può dare un allineamento al margine sinistro?
ciao!

Prova a mettere sul li {margin: 0;}

**robbi_gallo** · 09-05-2007, 15:23

body{
margin: 0;
padding:0;
}

con questo definisci margini e paddind del corpo della pagina,
se vuoi spostare la tua lista a sinistra o in basso devi impostare i margini di:

ul#nav_orizzontale {
padding: 0;
margin: 10px 0 10px 10px; <------ margin: alto destro basso sinistro;
width: 150px;
}

**gnola** · 09-05-2007, 15:29

Adesso è perfetta!

Grazie mille

Discussione: Aiuto con lista...definita male!

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto con lista...definita male!

Permessi di invio