Layout fluido particolare

[Emiliano.Presti]

Ragazzi buongiorno a tutti...
Mi trovo di fronte ad un problema nuovo che mi sta mettendo un tantino in difficoltà.

All'interno di un contenitore, mi trovo a CICLARE dei blocchi[*] a larghezza fissa di 300px.
La struttura del codice è questa:

<div class="wrapper>
    <ul>
        <?php for(...): ?>[*]...
        <?php endfor; ?>[/list]
</div>

Wrapper è un contenitore fluido, con min-width : 960px e max-width: 1100px.
Ecco, io vorrei che ogni elemento[*] sia equidistante dall'altro. Il margine che essi devono avere, deve essere anch'esso fluido e deve ovviamente dipendere da "Wrapper".
In pratica, a 1100px, il margine tra i tre[*] deve essere dilatato e sempre uguale.
Il margine minimo deve essere raggiunto a 960px.

Ho provato con i MARGINI PERCENTUALI e accade perfettamente quello che voglio, ma il margine assegnato in proporzione ai 960px è comunque troppo e l'ultimo[*] collassa perchè wrapper diventa 960px, troppo stretto per contenere i tre[*]. Il margine di ogni[*] è del 9% escluso l'ultimo per ogni riga, dove il margine viene azzerato.

Sapete, io ho risolto il problema per altre pagine, con dei DIV e con la larghezza percentuale, ma in questo caso, son il ciclo for nel mezzo, non si può proprio applicare la mia idea.

Premesso che io sia riuscito a spiegare il problema bene, c'è qualcuno che può aiutarmi?
Davvero, mi sono bloccato!

Grazie anticipatamente.
:-)

[Mich_]

Soluzione teorica (nel senso che non ho mai provato, ma i sacri testi dicono che funziona).

Premesse (che mi pare non hai specificato):
1. i vari[*] devono stare tutti sulla stessa riga (devono avere display:inline, oppure display:inline-block); purtroppo non possono essere float, perche` in tal caso il margin:auto non funziona;
2. deve esserci dello spazio che avanza, tra la somma di tutte le larghezze dei[*] e lo spazio totale del contenitore.

Mertti margin-left:0; nel promo elemento, margin-right:0; nell'ultimo e metti margine automatico in tutti gli spazi intermedi.
Ad esempio:

HTML:
<div class="wrapper>
    <ul>
        <li class="primo">...[*]...[*]...[/list]
</div>

CSS:
#wrapper {
  min-width: ...;
  max-width: ...;
}
#wrapper ul {
  width: 100%;
}
#wrapper li {
  margin: 0 0 0 auto;
}
#wrapper li.primo {
  margin: 0;
}

[Emiliano.Presti]

Ciao e grazie per la risposta...

Ogni[*] deve stare sulla stessa riga, quindi deve necessariamente "flottare" purtroppo.
Lo spazio che avanza tra i vari[*], è facoltativo. Ciò che è importante è ceh poi entrano in wrapper con larghezza minima 960px.

Può essere applicata lo stesso la tua idea?

[Emiliano.Presti]

Ragazzi rinnovo il mio appello...

Come soluzione "accomodante" ho usato jquery.

Praticamente gli ho detto che "se html.size < 961" jquery aggiunge una classe al box.
Tramite quella classe modifico il margine da "%" a statico (30px).

In questo modo i box ci entrano e non collassano.
Diciamo che la soluzione mi piace e non mi piace.
C'è un piccolo stacco (poco visibile) al passaggio di classe, ma vorrei se tutto si risolvesse con i css.

Qualcuno ha qualche idea illuminante?
Per favore...

[Mich_]

Originariamente inviato da Emiliano.Presti
Ciao e grazie per la risposta...

Ogni[*] deve stare sulla stessa riga, quindi deve necessariamente "flottare" purtroppo.

In realta` per stare sulla stessa linea ci sono due modi: float (per oggetti di tipo block) e inline (per oggetti senza dimensioni proprie).
Nei browser conformi esiste poi inline-block, che si comporta come il vecchio inline di IE: accetta le dimensioni, ma li tratta come inline.
Se usi i float non puoi dare margini automatici. Se invece usi inline-block la cosa e` possibile.
Esiste un residuo di problema per il vecchio IE6 (e forse il 7, non ricordo). In tal caso occorre ancora operare con i commenti condizionali, definendo inline (al posto di inline-block)

Lo spazio che avanza tra i vari[*], è facoltativo. Ciò che è importante è ceh poi entrano in wrapper con larghezza minima 960px.

Il calcolo che la somma delle larghezze non superi il contenitore devi farlo lato server (o event. con JS, come fa jquery); il CSS non e` in grado di farlo (nelle versioni attuali: la 2 e la 3).

[Emiliano.Presti]

Allora, ho fatto come mi hai detto tu!
Ecco cosa ho scritto nel CSS:

ul.mode-details{
    width : 100%;
}
ul.mode-details li{
    display: inline-block;
    width : 300px;
    margin-bottom : 20px;
    margin: 0 0 0 auto;
}
ul.mode-details li.first{
    margin-right : 0px !important;
}

Diciamo che i vari[*] rimangono attaccati!
Sbaglio qualcosa?

[Mich_]

A questo punto non so piu` cosa dire.

Unico appunto: nel primo e` il margin-left che deve essere messo a zero; il right gia` lo e` per tutti.

[bionicoz]

Ho un'idea, ma è appunto solo un'idea, e l'ho testata solo con safari firefox e chrome.
Perché non usare text-align:justify?
data la solita struttura di <ul>[*][*][*][/list]
ho partorito il seguente css:

ul{
    display:block;
    min-width:960px;
    max-width:1100px;   
    border: 1px solid blue;
    text-align:justify;}


li{
    display:inline-block;
    margin-top:5px;
    width: 300px;
    text-align:center;
    border:1px solid red;
}

ul:after{
visibility:hidden;
content:"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";}

si, lo so è un po' tricky, soprattutto l'ultima riga del css, se qualcuno ha delle idee migliori per renderlo un po' più grazioso ben vengano.
Diciamo che ho scelto di lasciare pulito l'html e sporcare un po' più il css. (Lo stesso effetto si sarebbe potuto ottenere aggiungendo un elemento qualunque dopo l'ultimo[*]).
Inoltre se i blocchi sono 4,7,10 (ecc, ovvero una riga piena più uno a capo) l'ultimo avrà allineamento a sinistra. Se sono multipli+2 (5,8,11) l'allineamento degli ultimi due sarà uno a destra e l'altro a sinistra.
Visto che un'immagine vale più di mille parole, testate qui: http://jsfiddle.net/bionicoz/7gWzF/
Fatemi sapere se è stato utile,
Bio.

[Emiliano.Presti]

Sai Bio, è proprio quello che volevo, anche se devo capire bene un pò tutta la tua soluzione.

Cosa viene generato dopo after?
IE, supporta tutta questa situazione?
Cosa intendi per HTML SPORCO?
(cioè, che tag verrebbero visualizzati?

Al momento non sono nella mia postazione e non posso provare la tua soluzione nel mio sito.
Di certo è proprio l'effetto che serviva a me.
Sono ottimista.

Grazie!

[bionicoz]

1. con ul:after appendi alla fine dell'ul (ma ancora all'interno) il valore di content (nel nostro caso semplicemente una stringa sufficientemente lunga).
2. purtroppo sono da osx e nn posso controllare. temo che ie7 non supporti lo pseudoelemento :after
3. con html sporco intendo un elemento aggiuntivo privo di significato semantico. Sarebbe semplicemente un ulteriore[*] vuoto dopo tutti gli altri. vedi qui-> http://jsfiddle.net/bionicoz/6R5MX/2/ Questa soluzione dovrebbe però funzionare anche con IE. Appena ho tempo testo meglio, visto che interessa anche a me. (Finora avevo sempre usato javascript)