disposizione immagini

[ferra.s]

salve a tutti.
dovrei realizzare una piccola galleria di immagini (con l'elenco dei file caricato dinamicamente) non omogenee, come nella colonna destra di questo screenshot:
screenshot

senza nessuna formattazione il risultato è questo:
pagina

se metto le immagini dentro dei div contenitori come li gestisco perchè si riempiano tutti i "buchi"?

grazie in anticipo...

[ferra.s]

up...

nessuna idea???

[Mich_]

La cosa non e` semplice, perche` devi combinare le varie immagini.

Direi che e` necessaria "troppa" intelligenza per poterlo fare lato client, per cui occorre lavorare di piu` lato server.

Comunque lato client puoi (devi) essere piu` razionale.
Anzitutto controllando i vari float e non-float (il footer io [FF sotto linux] lo vedo un po' sotto la meta` pagina: forse non hai usato il clear in modo corretto).

E devi anche eliminare tutta la formattazione dai tag HTML, spostandola nel CSS.

Inoltre ad occhio direi che hai usato troppi blocchi innestati, e forse hai anche usato nomi non semanticamente corretti, per cui risulta complesso per un'altra persona capire il tutto (i nomi devono rispecchiare il contenuto, non la posizione).

Tornando al nocciolo della domanda:
C'e` una modularita` nelle immagini (cioe` hanno tutte la stessa larghezza, l'altezza e` multipla di uno stessa misura, ...)?
Chi (intendo il programma) deve "metterle assieme" conosce le dimensioni?
C'e` qualche regola da seguire?
C'e` una preferenza sulla posizione (in alto, in basso, su quale colonna, ...)

In pratica tutte queste domande sono quelle che si farebbe un umano qualora dovesse fare il lavoro a mano: la stessa conoscenza la devi inserire nel programma automatico.

[ferra.s]

ho sistemato un po' il css e messo nomi più significativi...era un po' incasinato.

E devi anche eliminare tutta la formattazione dai tag HTML, spostandola nel CSS.

per formattazione nei tag HTML a cosa ti riferisci? il massimo che ho usato è un <p align="center">... anche questo devo togliere?

per quel che riguarda le immagini, sono ricavate dalla tabella di un database, e esiste un campo per l'ordinamento. Il cliente vorrebbe poter inserire le immagini con la disposizione che vuole, ma dovremo trovare un compromesso se non trovo soluzione.

Avevo pensato di mettere tutte le immagini della stessa dimensione, incapsulandole in un div con overflow=hidden, oppure di fornirgli più template già pronti da scelgliere in fase di inserimento dei dati, cioè come nello screenshot...

Altre idee sono venuto a cercarle qui...

[Mich_]

per formattazione nei tag HTML a cosa ti riferisci? il massimo che ho usato è un <p align="center">... anche questo devo togliere?

Esatto, ma anche
border='0'
width e height nelle immagini ci possono stare, anche se anche quella e` formattazione, che starebbe meglio nel CSS.

Pero`
width=151px
contiene due errori:
- mancano apici o virgolette per marcare il valore;
- l'unita` di misura non fa parte della sintassi HTML (fa parte di quella CSS).


Per quanto riguarda il layout, ho l'impressione che ci siano ancora dei <div> inutili (mi pare ci siano dei blocchi che contengono esattamente un altro blocco, tipo container, outer, inner).

Altri errori:
#nero{ ... width:100%; ...}
100% di che? Di un valore nondeterminato. Devi dare lo stesso valore anche a html e body.

#containerRight { ... float:right; position:relative; ... }
Questi due attributi non vanno d'accordo: un oggetto float, non puo` venir posizionato.
E non e` il caso di posizionare i blocchi interni ad un float: avresti problemi di cross-browser.

Avevo pensato di mettere tutte le immagini della stessa dimensione, incapsulandole in un div con overflow=hidden, oppure di fornirgli più template già pronti da scelgliere in fase di inserimento dei dati, cioè come nello screenshot...

Sono scelte valide.
Sicuramente semplificano il lavoro a te, e rendono l'utente piu` contento, anceh se deve lavorare un pochino.
E` chiaro che devi fare un compromesso tra la liberta` assoluta (con pesante riformattazione da parte del sw, che rischia di scontentare l'utente esigente), e i vincoli della grafica, che obbligano l'utente a pensare ed essere creativo.
Una scelta fra alcune opzioni puo` accontentare molti (non tutti, sicuramente).

[ferra.s]

ho sistemato il css e tolto div inutili.

lasciando da parte per adesso il problema delle immagini, che ci devo lavorare sopra un po', mi resta il problema del footer:
se visualizzo la pagina senza parametri sembra che il footer sia a metà della pagina, in realtà è sotto le colonne, nella posizione esatta, ma quello che si vede sotto è il riempimento del body, io non ho trovato altre soluzioni per riempire le tre colonne in maniera omogenea, perchè sia container che containerHinner restano ad altezza 0.

ciao e grazie...

[Mich_]

In effetti la struttura ora e` molto piu` semplice, sia da capire che per sistemare lo stile.

Ci sono ancora degli errori semantici: le liste vanno rese con i tag <ul> e[*], e mi riferisco sia alla lista di link in alto a destra, sia alla lista a sinistra.
Nel primo caso dovrai mettere i float:left in ciascun[*], nel secondo no.

Il "menu" a sinistra potrebbe anche essere reso con delle liste innestate (quella esterna contiene solo allestimenti e stand, quelle interne i link azzurri). Le liste andranno poi opportunamente formattate.


Per quanto riguarda il layout generale: stai facendo un misto di tecniche che non vanno molto d'accordo. Mescoli posizionamenti diversi.
Il tutto si puo` realizzare senza usare l'attributo position: ottieni una cosa molto piu` flessibile e robusta rispetto al problema cross-browser e risoluzioni diverse.
In fondo il layout si puo` schematizzare con:
header (a sua volta diviso in: banda nera, scritta Albi, allestimento stand, prodotti/link)
due (o tre) colonne (una con il "menu" l'altra con le immagini)
footer (la scritta dell'ultima riga)

Nel caso due colonne, la colonna a destra sara` a sua volta divisa in due colonne: a sinistra gli schemi, a destra le foto; nel caso tre colonne, schemi e foto saranno due colonne allo stesso livello logico del menu (la scelta dipende dalla semantica del layout, che io non conosco).

[ferra.s]

Ci sono ancora degli errori semantici: le liste vanno rese con i tag <ul> e[*], e mi riferisco sia alla lista di link in alto a destra, sia alla lista a sinistra.
Nel primo caso dovrai mettere i float:left in ciascun[*], nel secondo no.

Il "menu" a sinistra potrebbe anche essere reso con delle liste innestate (quella esterna contiene solo allestimenti e stand, quelle interne i link azzurri). Le liste andranno poi opportunamente formattate.

semplicemente dovevo ancora farlo.

Il tutto si puo` realizzare senza usare l'attributo position

ok, si potrà anche fare, ma non ho capito come.
se prendiamo per esempio i div che mi hai detto di mettere dentro header (banda nera, scritta Albi, allestimento stand, prodotti/link), come faccio a farli larghi 726px e a metterli centrati senza usare position:relative e margin: 0 auto?
e per avere un colore di sfondo diverso per ogni blocco che si estende oltre la larghezza del div a tutta pagina?

altro problema: il footer si posiziona subito sotto le 3 colonne, ma a me serve che dietro le colonne ci sia un'immagine di sfondo ripetuta verticalmente e centrata --> link,
a cosa lo metto lo sfondo visto e che sia container sia containerHinner restano ad altezza 0? se metto lo sfondo al div si vede anche sotto al footer, non è possibile far restare allora il footer sempre in fondo (ma comunque dopo le colonne se queste sono lunghe più di una schermata) ?
oppure avere un div che si estende fino alla fine della pagina con sfondo nero subito dopo il footer?

[Mich_]

Provo a "buttar giu`" uno schema. Parto dalla pagina http://www.albisnc.com/allestimenti.asp?prodotto=Milano che vedo in questo momento, ma mi permetto di modificare alcuni blocchi.

<body>
<div id="header">
  <div id="nero"> </div>
  <div id="logoHinner">
            <div id="logo">[img]image/logo.gif[/img]
            </div>
  </div>
  <div id="titleHinner">
    <h1>Allestimento Stands</h1>
  </div>
  <div id="linkHinner">
    <p id="linksx">Prodotti</p>
    <ul id="linkdx">[*]Azienda |[*]Dove Siamo |[*]Contatti |[*]Link |[*]Home[/list]
  </div>
</div>

<div id="containerHinner">
  <ul id="menu">[*]Allestimenti<ul>[*]Studio TV[*]Bauli[*]Showroom[/list][*]Stands<ul>[*]Madrid[*]&drquot;Milano[*]Francoforte[*]Bruxelles[*]Barcellona[/list][/list]

  <div id="schemi">
    <p align='left'>Milano 2005</p>
    

[img]icone/milano_a.jpg[/img]</p>
    

[img]icone/milano_b.png[/img]</p>
    

[img]icone/milano_c.png[/img]</p>
  </div>
  <div id="foto">
    .... omissis ....
  </div>
</div>

<div id="footerHinner">
  

Albi srl Viale del Lavoro 17  37036 S. Martino B.A. (VR)  p. IVA 01351310238 telefono 045/8799059 fax 045/8796738 e-mail albi@albi.it</p> 
</div>
</body>

Come vedi ho fatto alcune modifiche, togliendo ancora vari blocchi che ritengo inutili.

Ecco la struttura di base del CSS:

* {
  margin: 0; 
  border: 0;
  padding: 0;
}
html {
  height:100%;       /* su questo avrei dei dubbi - forse e` meglio ometterlo */
  width:100%;
  font-size: 100%;
}
body {
  width:100%;
  font-size: 98%;
  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  background: #fff url(../image/sfondobn.gif) repeat-y center center;
}
#nero{
	height: 115px;
	width:100%;
	background-color:#000;
}
#logoHinner{
	width:100%;
	height:56px;	
....
}
#logo { ... } /* qui i position:relative non servono */

....
#containerHinner{
  width: 726px;
  margin: 0 auto;    /* lo sfondo esterno e` quello del body */
  background: #fff url(../image/sfondobn.gif) repeat-y center center;
  font-size:1em;
}
#menu {
  width: 175px;
  float: left;
  /* padding: ti crea differenze tra brwoser: se puoi non usarlo */
  list-style: none;
  ...
}
#menu li {
  lo stile per le scritte nere sottolineate - occorre inserire un margin-left per spostare a dx
}
#menu ul {
  lo stile per la lista
}
#menu a {
  lo stile dei link 
  potrebbe servire:
  display: block;
  width: 100%; height: 100%;
}

#schemi {
  width:201px;
  float:left;
}
#foto {
  float: left
  width: ...
  ...
}

Penso che ora puoi inserire le cose che mancano.
Alcune variazioni fatte le ho messe in bold, perche` le notassi meglio

[ferra.s]

ho provato ed è risultato un disastro, e non capisco il perchè fare il containerHinner con all'interno la lista del menu libera senza un div attorno.

su FF andava anche, ma su IE no, sarà stato un problema di padding ma non ho indagato.

non ho indagato perchè il passare dalle 3 colonne affiancate alla tua proposta non mi risolveva il problema dello sfondo, il contenitore su FF (non su IE) rimane sempre ad altezza 0 e sotto il footer mi rimaneva bianco, cioè lo sfondo del body (stesso problema di prima, che vedevo l'immagine).
Se metto il body con sfondo nero non vedevo le colonne di lunghezza omogenea.

avevo anche un problema con la lista a sx con il secondo ul dentro il li, non riuscivo a togliere l'underline dalle voci indentate.

qui puoi vedere la prova

ciao