lista e img

[michelepi]

Salve ho questo, una lista con immagini

<ul>[*][url="#"][img]../ico/documenti_penna.gif[/img][/url][*][url="#"][img]../ico/documenti_penna.gif[/img][/url][*][url="#"][img]../ico/documenti_penna.gif[/img][/url][/list] 

Con questo css non riesco ad allineare l'immagine alla scritta del link

#menusx{
    float: left;
    margin: 0px 0px 2px 0px;
    padding: 0px;
    border:dotted orange 1px;
    width: 200px;
    /*background-image: url(../immagini/box.jpg);
    background-repeat: repeat-y;*/
}
#menusx ul{

padding-bottom: 20px ;
list-style-type: none;

}
#menusx ul li{
list-style-image: url(../ico/cartellina_gialla.gif);
border: 1px red ;
padding-bottom: 10px ;
}
#menusx ul li a img{
vertical-align: bottom;
border: 0px ;
} 

Invece se inserisco l'immagine nel documento html così:

<h1>Titolo Menu1</h1>
 <ul>
     [*][url="#"][img]../ico/cartellina_gialla.gif[/img] Menu1[/url]
     [*][url="#"]Menu2[/url][/list] 

Con questo css funziona l'allineamento dell'immagine

#menusx{
    float: left;
    margin: 0px 0px 2px 0px;
    padding: 0px;
    border:dotted orange 1px;
    width: 200px;
    /*background-image: url(../immagini/box.jpg);
    background-repeat: repeat-y;*/
}
#menusx ul{

padding-bottom: 20px ;
list-style-type: none;

}
#menusx ul li{
}
#menusx ul li a img{
vertical-align: bottom;
border: 0px ;
} 

Vorrei anche capire quale è la strada da percorrere se introdurre immagine nel css oppure nel documento

grazie

[michelepi]

Sbagliato il primo codice htlm eccolo

<h1>Titolo Menu2</h1>
 <ul>
     [*][url="#"]Menu1[/url]
     [*][url="#"]Menu2[/url][/list] 

Con questo css non riesco ad allineare l'immagine alla scritta del link

#menusx{
    float: left;
    margin: 0px 0px 2px 0px;
    padding: 0px;
    border:dotted orange 1px;
    width: 200px;
    /*background-image: url(../immagini/box.jpg);
    background-repeat: repeat-y;*/
}
#menusx ul{

padding-bottom: 20px ;
list-style-type: none;

}
#menusx ul li{
list-style-image: url(../ico/cartellina_gialla.gif);
border: 1px red ;
padding-bottom: 10px ;
}
#menusx ul li a img{
vertical-align: bottom;
border: 0px ;
} 

Invece se inserisco l'immagine nel documento html così:

<h1>Titolo Menu1</h1>
 <ul>
     [*][url="#"][img]../ico/cartellina_gialla.gif[/img] Menu1[/url]
     [*][url="#"]Menu2[/url][/list] 

Con questo css funziona l'allineamento dell'immagine

#menusx{
    float: left;
    margin: 0px 0px 2px 0px;
    padding: 0px;
    border:dotted orange 1px;
    width: 200px;
    /*background-image: url(../immagini/box.jpg);
    background-repeat: repeat-y;*/
}
#menusx ul{

padding-bottom: 20px ;
list-style-type: none;

}
#menusx ul li{
}
#menusx ul li a img{
vertical-align: bottom;
border: 0px ;
} 

Vorrei anche capire quale è la strada da percorrere se introdurre immagine nel css oppure nel documento

grazie [/QUOTE]

[Mich_]

Vorrei anche capire quale è la strada da percorrere se introdurre immagine nel css oppure nel documento

Domanda cruciale, e da cui dipende il modo di realizzare il layout.

Non si puo` rispondere in via generale, ma ti devi chiedere:
L'immagine fa parte del contenuto, oppure e` un abbellimento?
Girando la domanda:
Se manca l'immagine si perde il contenuto informativo o non cambia?

Nel primo caso l'immagine VA INSERITA con il tag <img> (e relativo attributo alt); nel secondo caso l'immagine e` da considerare SFONDO e va inserita nel CSS.

[michelepi]

E' un abbellimento, il contenuto senza l'immagine non varia nel senso che le informazioni rimangono. Infatti l'ideale sarebbe inserire una sola riga e quindi nel css il tutto.

Io ho risolto mettendo tutto nel tag img perchè nel css non riesco ad allineare bene l'immagine ai link, rimane un pò più su.


grazie