Struttura annidata - blocchi equidistribuiti

[fiber81]

Non so come cominciare ad affrontare una tabella...vi posto delle immagini così ci si capisce meglio...
In questa immagine è mostrata la struttura della pagina, mentre in quella successiva una mia proposta. Quello che non sò è come distribuire i primi tre campi in alto a sinistra in verticale rispetto all'altezza dell'immagine...
Grazie

[Mich_]

Per poter procedere e` necessario conoscere la semantica del tutto.
Infatti se vuoi fare una bella cosa e` importante che nella marcatura siano rispettate le relazioni logiche che ci sono tra gli elementi.

In particolare dovrei sapere (riferimento al disegno "prodotti"):
- se c'e` relazione tra var1 e la prima stringa corta
- se i due vanno messi allineati
- come vanno allineati eventualmente var4 e la stringa lunga corrispondente (idem per var5)?
- se c'e` relazione tra i vari var1 ... var5
- che relazione c'e` tra le varie scritte e l'immagine.
- se l'immagine va posizionata sempre nello stesso punto (ad esempio con top:0; right:0

Altra domanda: la cosa puo` diventare semplice se viene usato un linguaggio di programmazione per posizionare i vari oggetti.
- Usi un linguaggio lato server (ASP, PHP, ...)?
- In subordine si puo` pensare di usare JS?

[fiber81]

Grazie Mich e scusa il ritardo.
Allora...Prima di tutto è una pagina dinamica in asp, prima era tutto tabella adesso vorrei farlo con i css. Preferirei non usare JS...ma se facilita ok.

In pratica questa è una scheda che descrive un prodotto. Le varie Var sono degli indici, tipo codice, nome, caratteristiche, mentre le stringhe sono il contenuto variabile.
Detto questo, le Var e le stringhe vanno allineate, var occuperà sempre e solo una riga, le stringhe potranno andare anche su più righe, l'importante è che la prima riga sia allineata verticalmente.

Quindi, Var1, Var2,...hanno tutti la stessa dimensione e lo stesso allineamento. Ad ognuno di questi si associa a fianco del testo (le stringhe).

L'immagine è un pò più complicata, tendenzialmente può avere 2 altezze, a seconda che sia orizzontale o verticale. La mia idea era adattare Var1, Var2 e Var3 in modo da occupare tutta l'altezza dell'immagine. Dato che l'immagine è più alta dell'occupazione del testo di questi tre campi, servirà una spaziatura tra questi blocchi...

Questo è il link della vecchia pagina, ma la struttura della scheda rimane uguale.
http://www.vedani.it/prodotti/prodot...p?idsottocat=5

Grazie

Ciao ciao

[Mich_]

Allora provo a prospettare una soluzione.

I var e le corrispondenti stringhe sono rispettivamente il termine (<dt>) e la descrizione (<dd>) di una lista di definizione (<dl>).
I vari <dt> e <dd> hanno display:block e float:left; naturalmente la larghezza sara` fissa (meglio se espressa in em).
L'immagine e` posizionata nell'angolo a destra, mediante un float:right; e inserita all'interno del <dd> prima del primo <dt>. Potrebbe anche essere valido un livello superiore (quindi un posizionamento mediante position), ma questo puo` portare a nascondere parte del testo se l'utente ingrandisce i caratteri.

E` molto importatnte PRIMA sistemare la marcatura, poi pensare al CSS.

[fiber81]

OK, grazie. Ho un dubbio però...
le descrizioni sono di due tipi diversi, in larghezza intendo. Quindi uso due descrizioni diverse?

Per l'immagine invece, ho capito bene?
<dl>

<dd class="aaa"><img scr...></dd>

<dt>Var1</dt>
<dd class="bbb">prima stringa corta</dd>

<dt>Var2</dt>
<dd class="bbb">seconda stringa corta</dd>

<dt>Var3</dt>
<dd class="bbb">terza stringa corta</dd>

<dt>Var3</dt>
<dd class="ccc">prima stringa lunga</dd>

<dt>Var4</dt>
<dd class="ccc">seconda stringa lunga</dd>

</dl>

grazie!

[Mich_]

Originariamente inviato da fiber81
OK, grazie. Ho un dubbio però...
le descrizioni sono di due tipi diversi, in larghezza intendo. Quindi uso due descrizioni diverse?

Se l'immagine la inserisci flottata, non serve: semplicemente alcune righe sono piu` corte dato che un po' di spazio e` occupta dalla img.

Per l'immagine invece, ho capito bene?

Io imamginavo una cosa diversa:

<dl>
  [img]...[/img]
  <dt>Var1</dt>
  <dd class="bbb">prima stringa corta</dd>
  <dt>Var2</dt>
  <dd class="bbb">seconda stringa corta</dd>
  <dt>Var3</dt>
  <dd class="bbb">terza stringa corta</dd>
  <dt>Var3</dt>
  <dd class="ccc">prima stringa lunga</dd>
  <dt>Var4</dt>
  <dd class="ccc">seconda stringa lunga</dd>
</dl>

Con il CSS di questo tipo (e` solo una traccia):

dl {
  width: ...;
}
dl img {
  float: right;
  border: ...;
}
dt {
  float: left;
  width: ...;
  border: ...;
}
dd {
  max-width: ...; /* poi ci vorra` hack JS per IE */
  float: left;        /* forse, ma e` da vedere - cerca in post vecchi del forum */
  border: ...;
}
dd.after {         /* vedi pillola sul clearing di fcaldera */
  width: 100%;
  clear: left;
  ...       
}