Riquadri galleria css

[elpupi86]

avrei bisogno di creare dei riquadri linkabili per una galleria in css così http://img696.imageshack.us/img696/2948/portfoliox.png il problema è che non riesco ad affiancarli e mi sfasano tutto il sito..come posso fare??grazie! se è possibile avere un esempio concreto sarebbe meglio..

[miki003]

Originariamente inviato da elpupi86
avrei bisogno di creare dei riquadri linkabili per una galleria in css così http://img696.imageshack.us/img696/2948/portfoliox.png il problema è che non riesco ad affiancarli e mi sfasano tutto il sito..come posso fare??grazie! se è possibile avere un esempio concreto sarebbe meglio..

Fai una semplice tabella

[miki003]

ESEMPIO

[elpupi86]

potresti postarmi il file zippato o un link da dove scaricarlo? xkè stavo guardando il codice ma è "sporcato" dalla barra di libero del tuo sito...

[Mich_]

Originariamente inviato da miki003
ESEMPIO

@Miki
1. E` semanticamente sbagliato usare una tabella quando si tratta di una lista.
Anche se le immagini sono disposte in forma tabellare a causa della limitata larghezza (o altezza), dal punto di vista semantico si tratta di una lista, e come tale va resa tramite tag di lista (<ul>, [list=1], <dl>)

2. Nel tuo codice fai uso di formattazione HTML: e` molto pericoloso usarla, dato che viene interpretata in modo diverso dai browser, ed in qualche caso va in conflitto con la formattazione CSS (e questo tipo di conflitti non si riescono a correggere tramite commenti condizionali o cose analoghe)

3. Non e` consigliabile l'uso di DTD transitional: manda i browser IE (compreso IE8) in modo retrocompatibile (quirks), e quindi lo rende molto diverso dagli altri browser: Una DTD Strict (o HTML5) e` sicuramente consigliabile per ottenere pagine che funzionino in (quasi) tutti i brwoser allo stesso modo.


@elpupi
Ci sono raccolte di layout in giro per la rete, che comprendono anche gallerie.
In molti casi si riesce a realizzarle con solo CSS (che poi possono anche essere migliorate con JS non-intrusivo).
Tra i "link utili" c'e` qualche riferimento; altri ne puoi trovare con una ricerca in rete.

[elpupi86]

si ma il problema è che proprio non riesco a trovare l'esempio che fa per me..la sto cercando da 2 giorni ma formattata come servirebbe a me non la trovo..eppure credo (o meglio suppongo) sia molto semplice da realizzare eppure non trovo un esempio simile..solo tabelle..tu mi sapresti indicare un link preciso? o per lo meno farmi uno schema a quadri come nella foto anche senza colori lo schema?

[Mich_]

Non riesco a capire la difficolta` (ma forse mi manca qualche elemento).

Prova questo:

HTML:
<ul id="galleria">[*][img]divano.jpg[/img][*][img]colonica.jpg[/img][*][img]vetro.jpg[/img]
  ...[/list]

CSS:
#galleria {
  width: ...;            /* deve essere definito */
  list-style-type: none;
  background: #666;
}
#galleria li {
  list-style-type: none;
  float: left;
  margin: 2px ;     /* da regolare */
  padding: 5px;    /* da regolare */
  background: orange;    /* da regolare */
  width: 50px;       /* prende la dim. foto + il bordo arancio */
  height: 50px;
}
#galleria a {
  display: block;
  width: 100%;
  height: 100%;
  backgrouond: white;
}
#galleria img {
  width: 100%;
  height: 100%;
}

naturalmente al CSS mancano vari attributi, che non sono essenziali, ma possono servire per abbellire
le misure sono messe a caso: vanno definite in base alle necessita`.
Potrebbe essere necessario definire in px la misura del blocco ul, facendo un po' di conti inmodo che rimanga un bordo "bello"; in alternativa si puo` lasciar fare al browser, ma allora il bordo grigio e` piu` difficile da definire.

[elpupi86]

ok grazie risolto con il tuo consiglio e con i css..volevo evitare di usare proprio le tabelle..grazie!