menu verticale

[inside1]

Ciao a tutti
ho fatto un menù verticale ma non mi si visualizza l' immagine dell' elenco non ordinato, forse una svista ma non riesco proprio a trovare l' errore.
Ecco il codice
Ciao

ul.menu1 {
	font: 12px Tahoma,Verdana,Arial;
	text-align: left;
	color: #31659C;
	width: 232px;
	height: 22px;
	list-style: url(img/quad.jpg);
	margin: 0;
	padding: 0; 
}
ul.menu1 li a { 
display:block; 
text-decoration:none; 
padding:0 1em; 
height:2em;line-height:2em; 
}
ul.menu1 li { display:inline ; } 
ul.menu1 li a:link, ul.menu1 li a:visited { 
background:#E7EDF2;
color: #009;
border-bottom:1px solid Red;
} 
ul.menu1 li a:hover, ul.menu1 li a:active { 
background: #31659C;
color:White;
}

[pierofix]

I percorsi delle immagini devono essere relative al file CSS: lo sono?

Ah, comunque io mi trovo meglio con una tecnica simile:

ul { list-style-type:none }
a {
   padding-left:30px;
   background:#fff url(immaginetta.gif) no-repeat 0 50%;
}

Ovvero eliminando pallini e immagini di lista e inserendo lo sfondo al link (sulla sinistra e non ripetuto), ove il testo di quest'ultimo è rientrato dei px che servono a non sovrapporsi all'immagine.

[edy72]

Ho notato due cose:

1) prova a togliere questa dichiarazione

ul.menu1 li { display:inline ; }

2) inoltre dovresti lasciare un po' di padding sinistro nella lista ul.menu1

comunque, anch'io preferisco decisamente la tecnica segnalata da pierofix

ciao!!

[inside1]

le immagini ci sono, non vedeva neanche il pallino

distratto... ha ragione edy72 devo lasciare un pochetto di spazio ...
però mi mette l' immaginetta all'esterno e quindi mi scombussola tutto..

mi sa che devo usare il vostro sistema

[inside1]

no non riesco a farla quadra con il vostro sistema...

cercando di capire quello che volevo fare con il mio precedente codice, mi postate gentilmente il codice con il vostro metodo ?

mille grazie

[edy72]

ecco il codice css:

 
ul.menu1 {
font: 12px Tahoma,Verdana,Arial;
text-align: left;
color: #31659C;
width: 232px;
list-style-type: none;
margin: 0;
padding: 0;
}

ul.menu1 li a { 
display:block; 
text-decoration:none; 
background: #E7EDF2 url(immagine.gif) no-repeat 0 50%;
padding:0 1em 0 30px; /* al posto di 30px 
metti il valore che vuoi */
height:2em;
line-height:2em; 
color: #009;
border-bottom:1px solid Red;
}

ul.menu1 li a:link {}
ul.menu1 li a:visited {} 

ul.menu1 li a:hover, ul.menu1 li a:active { 
background: #31659C;
color:White;
}

ciao!!

[inside1]

che dire ? perfetto

ne approfitto per chiedervi una cosa...

quando inserite del testo all' interno di un livello create una classe per il testo che si posiziona all' interno di quel livello, oppure inserite la formattazione del testo all' interno del livello stesso.

mmmm sarò stato chiaro ...speriamo


grazie mille

[edy72]

Il testo all'interno di un DIV (credo che sia quello che hai chiamato livello) di solito lo racchiudo sempre all'interno di un tag P (a meno che non abbia esigenza di marcare l'importanza, allora uso un titolo da H1 a H6).

Inoltre, di solito assegno una classe o un id solo al DIV e poi, dove possibile, con le regole css controllo il testo contenuto all'interno di P.

Ad esempio:
-codice css

#box1 {regole generali per il livello, 
da applicare al div nel documento xhtml}

#box1 p {regole specifiche per il testo,
da applicare al p contenuto nel div id="box1"}

-codice xhtml

<div id="box1">


 testo di prova ...
</p>
</div>

cercando di raggruppare i selettori e utilizzando i selettori discendenti in modo da limitare al minimo la proliferazione di class, div e id (classite e divite, come direbbe il buon J. Zeldman ... perdonami la citazione )

Spero di essere stato chiaro anch'io...
Ciao!!

[inside1]

tutto chiaro..
il paragrafo io lo evitavo perchè da qualche parte avevo letto qualcuno che diceva di non utilizzarlo... bha

seguirò le tue orme

per la citazione figurati nessun problema.


ciao e grazie mille ancora.

[edy72]

Sinceramente, evitare l'utilizzo del paragrafo mi sembra strano: comunque potrebbe esserci qualche problema che non conosco, per cui ti invito a prendere i miei esempi con beneficio d'inventario.

Inoltre, ma forse questo lo sapevi già, tieni presente che i vari elementi come P, DIV, UL, H1 ..H6 sono di tipo block-level per cui i browser possono aggiungerci un margine a loro piacimento. Per evitarmi delle sorprese, all'inizio di ogni css metto una regola che ne azzera i margini e i padding, in modo da livellare la presentazione grafica.
esempio:

p, div, ul, h1, h2, h3, form, table 
{margin: 0; padding: 0;}

Successivamente, sempre nel css, con altre regole più specifiche vado a controllare i margini che mi servono.
esempio:

div#box1 {margin: 10px 15px 0 20px;}

ciao!!