Stesso markup html, visualizzare o testo o icona.. come?

[strae]

Ciao ragazzi, ho un piccolo problema, allora, poniamo che io ho questo semplicissimo markup html:

<div id="lower-menu">
    <div class="l-m-icons" id="treasure">
        Treasure!
    </div>
    <div class="l-m-icons" id="pirates">
        Pirates!
    </div>
</div> 

Il markup è molto semplice, e vorrei mantenerlo tale.. tuttavia posso modificarlo come voglio, se quello che chiedo non è fattibile con quello.
Allora, io vorrei che dai CSS si potesse fare in modo che i due div con class 'l-m-icons' fossero visualizzati solo come due icone, ad esempio di 24px, e che il testo dentro ('Treasure!', 'Pirates!') venga nascosto.
Oppure, cambiando solo il css,che venga mostrato solo la scritta, che sò, in grassetto.

Ho fatto un paio di prove:

/* versione con icona, testo nascosto */
div#lower-menu div.l-m-icons{
    width: 24px;
    height: 24px;
    margin: 2px 5px;
    overflow: hidden;
}

div#treasure{
    background-image: url('images/icons/treasure.gif');
} 

Ma non riesco a nascondere il testo dentro il div.
E' possibile farlo?

[ricman]

Puoi nascondere un tag tramite "display:none" ma tu non hai assegnato niente al testo... mettilo dentro un tag P.
Inoltre se quella che si vede è lista di cose... devi usare i marcatori per liste (ul, li)... e poi questa class="l-m-icons" potrebbe essere superflua

[strae]

Ho risolto mettendo

text-indent: 500px; 

così il testo lo sposta fuori dal campo del bottone.. che con overflow: hidden; non viene proprio mostrato.

Si, per elenchi sarebbe più corretto utilizzare <ul>[*][/list], ma questi danno meno libertà rispetto ai div.

[ricman]

Originariamente inviato da strae
Ho risolto mettendo

text-indent: 500px; 

così il testo lo sposta fuori dal campo del bottone.. che con overflow: hidden; non viene proprio mostrato.

Si, per elenchi sarebbe più corretto utilizzare <ul>[*][/list], ma questi danno meno libertà rispetto ai div.

Intanto avresti potuto utilizzare i margini negativi (sul tag P) al posto di text-indent.

E poi che discorsi sono? Ogni cosa è stata creata per uno scopo (magari alcune volte ne ignoriamo il significato). Le tabelle per intabellare dati... la forchetta per portare il cibo alla bocca (non per tagliarlo, per quello c'è il coltello)... il tag P per gestire i paragrafi ... e così via...

[strae]

Originariamente inviato da ricman
Intanto avresti potuto utilizzare i margini negativi (sul tag P) al posto di text-indent.

E poi che discorsi sono? Ogni cosa è stata creata per uno scopo (magari alcune volte ne ignoriamo il significato). Le tabelle per intabellare dati... la forchetta per portare il cibo alla bocca (non per tagliarlo, per quello c'è il coltello)... il tag P per gestire i paragrafi ... e così via...

Bhè, il discorso è che sò che gli <ul> hanno lo scopo delle liste, e i div sono dei 'semplici' contenitori, ma sò anche (o meglio, è mia opinione) che non ha senso usare qualcosa che ha dei limiti..

Laddove ho un menu semplice, con degli effetti semplici, che sò che non dovrò modificare praticamente mai, userò (e già uso) i <ul>... ma dove ho bisogno di un pò più di libertà non mi faccio problemi a partire subito usando i <div>... e, anche se non è la conferma che sia una buona cosa, il fatto che molti altri siti usano lo stesso metodo un pò mi conferma l'ipostesi, credo.

Per il discorso del tag

.. non mi piace molto come idea, andrei ad aggiungere un'altro livello di indentazione, un altro elemento nella pagina per niente... secondo il mio punto di vista, ovvio.