liste di definizione e classi per immagini

[andrea_kobe]

Buon pomeriggio a tutti voi. Sono qui per l'ennesima volta a chiedere il vostro prezioso aiuto.
Ho una serie di nominativi e vorrei usare delle immagini per marcare i dt di una lista di definizione. Ho cercato qui nel codice che posto di semplificare il più possibile. In pratica ho tanti div quanti sono gli individui e vorrei assegnare alla voce telefono un'immagine, alla voce orario un'altra immagine. Pensavo fosse sufficiente definire una classe per ciascun dt ma l'immagine non appare. Ovviamente il percorso ho controllato ed è giusto.
Mi affido a voi.

Codice css

<style type="text/css">
div#soggetti{width: 350px}
dl{
width:350px;
padding: 0 5px;
border:1px solid #68B0D8;
background: #CCD8E6 url(./img/gradiente.jpg) no-repeat top left;
}

dt{font-weight:bold; 
height:20px;
line-height:20px;
padding-left: 15px;
}
dt.orario{
background-image:url(./img/clock.png) no-repeat center left;
}
</style>

e relativo html

<div id="soggetti">
<div id="soggetto1">
<dl>
<dt>Nome:</dt>
<dd>Mario</dd>
<dt>Telefono:</dt>
<dd>999 999</dd>
<dt class="orario">Orario:</dt>
<dd>Da definire</dd>
</dl>
</div>
</div>

[Mich_]

Praticamente usi una lista di definizione per i vari "attributi" da assegnare al soggetto ...
Non mi pare un uso proprio delle dl, ma forse mi sbaglio io.


Comunque, tornando al tuo codice, un errore c'e`: nel dt.orario usi l'attributo background-image come se fosse un background, aggiungendo anche ripetizione e posizione.

Non ne sono sicuro, ma credo che il problema sia proprio quello.

[andrea_kobe]

Originariamente inviato da Mich_
Praticamente usi una lista di definizione per i vari "attributi" da assegnare al soggetto ...
Non mi pare un uso proprio delle dl, ma forse mi sbaglio io.


Comunque, tornando al tuo codice, un errore c'e`: nel dt.orario usi l'attributo background-image come se fosse un background, aggiungendo anche ripetizione e posizione.

Non ne sono sicuro, ma credo che il problema sia proprio quello.

Ciao Mich_ e grazie come sempre per la disponibilità.
Vista la tua competenza sicuramente sono io che sbaglio.
Quindi al posto di una lista di definizione tu cosa mi consiglieresti di usare? Io pensavo fosse più appropriato come tag rispetto magari a una lista non ordinata.

[Mich_]

Premetto che a questo punto i quesiti sono due: quello posto da te e quello di quale sia lo strumento migliore per rendere una determinata situazione oggettiva.
E` importante tenere distinti i due ambiti, altrimenti non arriviamo ad una discussione corretta.

Per il problema dell'immagine nel <dt>:
Hai provato a correggere come ti suggerivo? Sei riuscito a risolvere?

---

Per l'uso della <dl>
Non sono sicuro di cio` che sto dicendo, anzi non ci ho mai pensato finora e il tuo quesito mi ha fatto sorgere il dubbio. Non credo ci sia una risposta univoca, ma una discussione puo` aiutare a chiarirci (e spero che atri intervengano: piu` pareri ci sono e piu` si riesce ad "aprire la mente").

Di primo acchito, la "lista" mi pare quella della serie di persone, non delle "proprieta`" che possiedono le persone stesse.
Io vedo i tuoi dati come una tabella: in orizzontale le persone e in verticale le varie "proprieta`" (nome, telefono, orario, ...)
Quindi realizzarei con una <table>.
Questo puo` avere delle controindicazioni, ad esempio la larghezza eccessiva (quante volte scriviamo ciascuna "riga logica" di una tabella su due righe fisiche - questo non e` possibile renderlo con i CSS, che io sappia)

Come secondo tentativo, la tua "serie di dati" la renderei con delle liste: una lista che prevede una entry per ogni persona: puo` esser una <ul> oppure un <dl> (con <dt> il nome e <dd> tutto il resto).
In pratica farei una formattazione tipo i menu, con liste annidate (voce principale il nome, sottovoci le altre).
In questo caso sia la lista principale che le eventuali sottoliste possono essere sia <ul> che <dl>, a seconda del significato ceh vogliamo dare alle varie parti.

[andrea_kobe]

Ancora ciao.

Scusami se rispondo solo ora ma stamane in ufficio ero impegnato con le faccende burocratiche.

Tornando alla discussione per quel che riguarda la visualizzazione delle immagini ho risolto così, in pratica specificando la posizione col background-position. Evidentemente il fatto di usare il background-image comunque non crea problemi.

<style type="text/css">
div#soggetti{width: 350px}
dl{
width:350px;
padding: 0 5px;
border:1px solid #68B0D8;
background: #CCD8E6 url(./img/gradiente.jpg) no-repeat top left;
}

dt{font-weight:bold; 
height:20px;
line-height:20px;
padding-left: 15px;
}
dt.orario{
background-image:url(./img/clock.png);
background-repeat:no-repeat;
background-position: 0 .2em;
}
</style>

Per quel che riguarda le tue perplessità circa l'uso forse improprio delle liste di definizione non saprei proprio. Se hai dei dubbi tu figurati io. Conosco abbastanza bene l'html ma all'uso semantico del codice (si dice così ?!? ) mi sto avvicinando solo adesso con lo studio dei css.
Se avete pareri in merito postate numerosi.