img non visualizza background

[Arbalest]

piccollo problema di visualizzazione del background di un menù:

<div id="menu"> <div id="menu_container"> <img id="trasparent" />Home <img id="trasparent" />Approfondimenti <img id="trasparent" />Download <img id="triangle" /><span>Contatti</span> </div> </div>

#menu {     background-color: #0000FF;     border-bottom: 1px solid #000000;     border-top: 1px solid #000000;     width: 900px; } #menu_container {     padding-left: 30px; } #menu a {     color: #FFFFFF;     font-family: Arial,Helvetica,sans-serif;     font-size: 13px;     padding-right: 30px;     text-align: left; } #menu span {     color: #111111;     font-family: Arial,Helvetica,sans-serif;     font-size: 13px; } #triangle, #trasparent:hover {     background-image: url("images/triangle.png");     border: 0 none;     width: 14px;     height: 14px; } #trasparent {     background-image: url("images/trasparent.png");     border: 0 none;     width: 14px;     height: 14px; }

le immagini non vengono visualizzate e sinceramente non ho idea del perchè

[codencode]

Non puoi assegnare un background ad un'immagine. Un'immagine specificata nell'HTML con il tag img deve avere già nell'HTML il percorso del file; esempio:

[img]nomefile.png[/img]

Se il tuo obiettivo è realizzare un menu con effetto rollover, le immagini non vanno inserite nell'HTML ma solo nel CSS e come sfondo dei LINK.
Inoltre, sarebbe meglio e più semantico se per realizzare il tuo menu usassi una lista (UL) di link anziché inserire i link sciolti in un div. Esempio HTML:

<div id="menu">
    <ul>[*]Prima voce[*]Seconda voce[*]Terza voce
        ...[/list]
</div>

[Arbalest]

Originariamente inviato da codencode
Non puoi assegnare un background ad un'immagine. Un'immagine specificata nell'HTML con il tag img deve avere già nell'HTML il percorso del file; esempio:

[img]nomefile.png[/img]

Se il tuo obiettivo è realizzare un menu con effetto rollover, le immagini non vanno inserite nell'HTML ma solo nel CSS e come sfondo dei LINK.
Inoltre, sarebbe meglio e più semantico se per realizzare il tuo menu usassi una lista (UL) di link anziché inserire i link sciolti in un div. Esempio HTML:

<div id="menu">
    <ul>[*]Prima voce[*]Seconda voce[*]Terza voce
        ...[/list]
</div>

purtroppo l'immagine è un piccolo triangolo che va prima di ogni titolo ed i titoli hanno ovviamente grandezze diverse, dovrei quindi usare immagini fatte su misura per ogni titolo e nel caso ne volessi cambiare uno dovrei anche creare un'immagine con le nuovi dimensioni ...insomma è davvero poco pratico

non posso neanche usare la lista perchè lascia troppo stazio sopra e sotto

[codencode]

Assolutamente no. La cosa che ho suggerito si adatta perfettamente al tuo caso.

Per quanto riguarda il triangolino, basta assegnarlo nel CSS come background dell'elemento LI che contiene il link, allinearlo a sinistra e lasciare un opportuno padding-left per far si che il link venga subito dopo. Esempio CSS:

li {
    background: url('triangolo.png') no-repeat center left;
    padding-left: specificare una misura in px leggermente superiore alla larghezza del triangolino;
}

Riguardo lo spazio lasciato dalla lista, qual è il problema? Tramite CSS puoi fare quello che vuoi, formattandola a tuo piacimento, quindi eliminando o aggiustando gli spazi come meglio ritieni agendo sulle proprietà margin e padding.

[Arbalest]

Originariamente inviato da codencode
Assolutamente no. La cosa che ho suggerito si adatta perfettamente al tuo caso.

Per quanto riguarda il triangolino, basta assegnarlo nel CSS come background dell'elemento LI che contiene il link, allinearlo a sinistra e lasciare un opportuno padding-left per far si che il link venga subito dopo. Esempio CSS:

li {
    background: url('triangolo.png') no-repeat center left;
    padding-left: specificare una misura in px leggermente superiore alla larghezza del triangolino;
}

Riguardo lo spazio lasciato dalla lista, qual è il problema? Tramite CSS puoi fare quello che vuoi, formattandola a tuo piacimento, quindi eliminando o aggiustando gli spazi come meglio ritieni agendo sulle proprietà margin e padding.

ok grazie