[CSS-semantica] come posso creare un menu di questo tipo?

[awd]

Ho una piccola foto (75x75) sulla sinistra, mentre sulla destra ho 3 righe di testo: una è diciamo il titolo, la seconda è un indirizzo stradale, la terza è il link per aprire la scheda di approfondimento!
Le 3 righe più o meno dovrebbero coprire l'altezza dell'immagine, almeno con carattere standard.
Tutto questo va ripetuto x 7 elementi uno sotto l'altro!

Sono indeciso sul codice da usare. Pensavo ad una DL, con l'immagine nel DT e i testi nel DD, ma non sono convinto!
Cosa mi suggerite?

[awd]

ha fatto una schematizzazione grafica

[Mich_]

Non sono molto d'accordo.

Premetto che non conosco bene il problema, ma questa mi pare piu` una domanda teorica, per cui si puo` prescindere dal problema specifico.

<dl> = definition list
<dt> = definition term
<dd> = definition description

Non direi che un <dt> puo` essere un'immagine, semmai il "titolo" puo` essere un <dt>; e comunque un link non direi che puo` essere un <dd>.

Inoltre devi poi sistemare il tutto dentro un oggetto unico, per poter allineare correttamente i 7 blocchi: non credo che sia semanticamente corretto inserire dei <div> o altro all'interno di un <dl> .

E` vero che per te l'insieme dei 7 oggetti e` una lista, ma e` una lista un po' speciale, in cui ci sono inseriti vari oggetti, alcuni dei quali devono essere sistemati uno sotto l'altro.

In conclusione: la vedo una forzatura delle liste. Io farei una serie di <div>, ciascuno con i suoi oggetti all'interno:
l'immagine a sinistra, un ulteriore <div> a destra contenente un <h*> per il titolo, un

per l'indirizzo (se non un <address>) e un

<a> per il link.

[thomas_anderson]

Però le liste si prestano allo scopo, ed in special modo quelle che hai citato tu, mich_.. abbiamo infatti un termine principale ed una descrizione del suo contenuto. se lui non usasse quelle liste si snaturerebbe il senso, cioè dovrebbe usare altri elementi impropri per fare una cosa che può fare con elementi già esistenti. io la vedo così. lui avrebbe:

<div class="boxTerm">
  [img][/img]
  <dl>
    <dt>Termine</dt>
    <dd>Descrizione</dd>
  </dl>
</div>

ma forse sbaglio. ciao !

[awd]

E' una domanda teorica! capire come è sementicamente più corretto, perché a fare un div con 3 paragrafi non ci metto nulla! ma vorrei usare la struttura più consona possibile!

Le dl le ho già utilizzate con le immagini con didascalia, mettendo la prima nel dt e la seconda nel dd.
In questo caso però ho 4 elementi e non 2 e in effetti non c'è proprio una correlazione tra termine e definizione!

[awd]

in mancanza di ulteriori indicazioni ho agito nel modo più semplice, così:

Codice XHTML 
<div class="menu_arte">
[img]img/monumento.jpg[/img]
<div>
  

Titolo

  indirizzo</p>
  

Vai alla scheda</p>
</div>
</div>

in div annidato serve a fini grafici!
Ho però un problema con Firefox e famiglia
in css è questo:

Codice CSS 
div.menu_arte {
	min-height: 83px;
	height: auto !important; /* regola per tutti i browser standard */
	height: 83px; /* regola per IE */
	margin-top: 10px;
	padding: 1px;
}
div.menu_arte img {
	float: left;
	background: #ddd;
	margin-right: 10px;
	padding: 3px;
	border: 1px solid #ccc;
}
div.menu_arte div {
	background: url(../paese/img/sfondo_menu.gif) repeat-y top right;
	margin: 5px 0 0 83px;
	padding-bottom: 5px;
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
	border-right: 1px dotted #ccc;
}
div#content div.menu_arte p {
	margin-top: 5px;
}
}

Facciamo come se il padding in rosso non ci sia x ora!!
Come si vede (in blu) ho un margine superiore di 5px del div interno, ma così com'è questo su FF non funziona e il DIV resta contro il lato superiore del div.menu_arte. Con IE invece funziona come vorrei (Allego immagine di come voglio che appaia).
Se applico invece, per esempio il padding in rosso, su FF il margine diventa effettivo! Invece su IE il margine resta fisso, ma l'immagine a lato subisce il padding del contenitore e viene spostata in giù di 1px! a 1px il problema è quasi impercettibilema con valori maggiori aumenta! e poi quel padding a me non servirebbe se funzionasse il margin!

Tornando alla situazione iniziale, ancora più curioso è se invece del padding applico ad div.menu_arte un bordo! In IE la cosa non interferisce, mentre FF rende effettivo il margin impostato!
sarebbe la scelta migliore ma non mi occorre un bordo e colorarlo come lo sfondo non mi sembra professionale!

In effetti Firefox qualche stranezza coi margin l'vaveo già rilevata... commento: boh! :master:

[Mich_]

[OT] ... ancora non ho visto risposte da alcuni forumisti esperti in semantica (avevo modificato il titolo per richimarli): evidentemente sono gia` in ferie [/OT]

NOTA: Questa risposta prescinde dalle considerazioni semantiche di cui si diceva, che rimangono un problema aperto.

Quel margine di 83px dentro il div interno non mi piace. Meglio un float:left; allo stesso div.

Poi forse devi mettere clear:left al box esterno, per evitare che rimanga traccia del float nel secondo blocco.

[awd]

Originariamente inviato da Mich_
[OT] ... ancora non ho visto risposte da alcuni forumisti esperti in semantica (avevo modificato il titolo per richimarli): evidentemente sono gia` in ferie [/OT]

NOTA: Questa risposta prescinde dalle considerazioni semantiche di cui si diceva, che rimangono un problema aperto.

Quel margine di 83px dentro il div interno non mi piace. Meglio un float:left; allo stesso div.

Poi forse devi mettere clear:left al box esterno, per evitare che rimanga traccia del float nel secondo blocco.

infatti li aspettavo pure io...

sul float del div posso provare. il contenimento del float non è però necessario in quanto l'impostazione dell'altezza del div serve ad evitarlo (è una tecnica che avevo già sperimentato)

Sul problema Firefox nessuna idea? In effetti c'è poco da dire, solo vorrei capire il motivo del comportamento!

[pierofix]

Mi è venuta in mente una cosa. Il fatto che ci siano 7 elementi con la stessa struttura mi porta a pensare che essi debbano figurare ognuno come item di una stessa lista (non usare, quindi, liste distinte).

In secondo luogo, non vedo una gerarchia tra i tre componenti testuali che giustifichi l'utilizzo di una lista di definizione. Direi nemmeno di una lista in generale.

Mi verrebbe addirittura da dire che qui, my dears, c'è bisogno di una bella di tabella: ogni riga rappresenterebbe un elemento distinto mentre le colonne garantirebbero una suddivisione di parametri quali "fotografia", "nome", "locazione" e "dettagli".

Se magari Mr. awd ci descrive meglio il contesto potremmo valutare meglio la situazione.

[awd]

Originariamente inviato da pierofix
Mi è venuta in mente una cosa. Il fatto che ci siano 7 elementi con la stessa struttura mi porta a pensare che essi debbano figurare ognuno come item di una stessa lista (non usare, quindi, liste distinte).

In secondo luogo, non vedo una gerarchia tra i tre componenti testuali che giustifichi l'utilizzo di una lista di definizione. Direi nemmeno di una lista in generale.

Mi verrebbe addirittura da dire che qui, my dears, c'è bisogno di una bella di tabella: ogni riga rappresenterebbe un elemento distinto mentre le colonne garantirebbero una suddivisione di parametri quali "fotografia", "nome", "locazione" e "dettagli".

Se magari Mr. awd ci descrive meglio il contesto potremmo valutare meglio la situazione.

Tabella?? VVoVe:

Non mi sembra il caso! L'unica cosa che penso, potrei eliminare il br, che l'ho messo per ragioni estetiche, e dare una classe descrittiva ai paragrafi, ma una tabella non mi sembra più appropriata di così!
Oppure mettere il tutto dentro un LI (che sostituirebbe il div)

Il contesto? è una specie di menu interno (quindi nella colonna dei contenuti) che serve ad accedere alla pagina con descrizione del relativo monumento. La foto è un'anteprima di quella grande che si aprirà dopo, più che altro è decorativa