[CSS] help: settare width automatico a una box

Printable View

30-12-2006, 16.50.49
NoWhere

[CSS] help: settare width automatico a una box

allor.. amo le domande da niubbino, perchè nessuno ha mai il corajo di farle...

qualcuno sa dirmi se é poccibile e come per far si che gli elementi della lista [<li>] dentro il box della lista [<ul>] risultino come quando in un testo allinei in maniera giustificata? - ossia, centrati e allungati per tutta la lunghezza del box in maniera equa

ecco il codicino di esempio

Codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body style="margin: 5em 6em 5em 6em; padding: 0px; background-color: #c0c0c0"> <div style="width: auto; height: 350px; padding: 0px; background-color: #F0FFFF">main try</div> <ul style="width: auto; margin-top: 0,5em; padding: 0px; background-color: #00ffcc; list-style: none"> <li style="width: 100px; float: left; margin-right: 10px; text-align: center; background-color: #ffff00; border: 1px solid #000000">Ttry</li> <li style="width: 70px; float: left; margin-right: 5px; margin-left: 5px; text-align: center; border: 1px solid #000000">try</li> <li style="width: 70px; float: left; margin-right: 5px; margin-left: 5px; text-align: center; border: 1px solid #000000">try</li> <li style="width: 70px; float: left; margin-right: 5px; margin-left: 5px; text-align: center; border: 1px solid #000000">try</li> <li style="width: 100px; float: left; margin-left: 10px; text-align: center; background-color: #ffff00; border: 1px solid #000000">Ttry</li> </ul> <br style="clear: both" /> </body> </html>
30-12-2006, 18.30.29
silverseraph

invece di mettere text-align: center metti text-align: justified
30-12-2006, 20.11.29
NoWhere

Citazione:

Originalmente inviato da silverseraph

invece di mettere text-align: center metti text-align: justified

casomai justify!! ma cmq non é questa la soluzione!! :roll: già provato, il justify praticamente é un quasi similare a left sempre in text-align: a me serve un qualcosa che me lo allunghi per tutta la lunghezza del box, che estenda l'intero ul, ripartendo in maniera equa i li!!
next!:mrgreen:
30-12-2006, 20.36.40
silverseraph

ahh ho capito! scusa... prova con margin-left: 0px; oppure padding-left: 0px;
30-12-2006, 22.41.33
heracleum

Dunque, per quel che so -se ho capito nei dettagli quel che ti serve- di speranze ce ne sono poche se non nulle, sorry.
Ma una cosa mi fa "strano": nel tuo codice d'esempio il testo degli <li> contiene solo una minuscola parola di tre lettere "try"...
ora mi chiedo come farei a testare un "adattamento" del testo a tutta larghezza se gli li contengono solo una parolina?
Perciò chiedo, ma nel caso di "try" vorresti che le lettere si separassero tra loro tipo:
"t.......r.......y" ?
Oppure, come avevo capito all'inizio, come mi sembrava logico e come fa appunto il justify -quando la frase va a capo-, se il testo fosse "tre per due" verrebbe fuori tipo:
"tre....per....due" ?
Penso la seconda.

Ad ogni modo la speranza crolla -per entrambi i casi- visto che tutt'e due gli effetti si possono ottenere con:
1) letter-spacing: (t.......r.......y)
2) word-spacing: (tre....per....due)

PECCATO che -per quanto ne so-, visto che entrambe le proprietà css richiedono un valore che indichi una "lunghezza" (in px, em o altro), non ci sia un VALORE che adatti la spaziatura alla larghezza della riga.
Dovresti dunque tu andare a "tentativi" indicando per ciascun <li> una misura che porti le lettere/parole (non ho ancora capito) a far sfiorare le estremità laterali.
Chiaro?

se vuoi fare qualche test -consiglio di usare l'U.d.M. em- prova cose tipo:
word-spacing: .44em;

comunque niente di automatico.
Poi se qualcuno sa come fare meglio ancora.
30-12-2006, 22.46.16
silverseraph

e se facessi un width: 100%? boh...
31-12-2006, 03.54.29
NoWhere

Citazione:

Originalmente inviato da heracleum

[...]

hera, m'hai incasinato quel casino di idee che avevo in-sù-per-la soluzione!! @_@

allora, credo che delle due possibilità quella che vorrei io rientra nel secondo esempio..
faccio un disegninodel risultato finale..

+----------------------+
|............................... |
|................................| <<-- fate finta che sia un box DIV
|............................... |
+----------------------+
- spazio dato da margin-bottom in DIV o margin-top in UL -
.[___] .... [__] .... [___]. <<--- UL - i rettangolini rappresentano i LI

DIV e UL non hanno width specificato in quanto la loro larghezza vien comandata dal margin laterale del tag BODY

Citazione:

Originalmente inviato da heracleum

PECCATO che -per quanto ne so-, visto che entrambe le proprietà css richiedono un valore che indichi una "lunghezza" (in px, em o altro), non ci sia un VALORE che adatti la spaziatura alla larghezza della riga.

e se specifico un "width: auto" al....?

Citazione:

Originalmente inviato da heracleum

se vuoi fare qualche test -consiglio di usare l'U.d.M. em- prova cose tipo:
word-spacing: .44em;

é scritto corretto o manca uno zero? ?_?
ma io devo allineare, spostare, non so bene come diorlo, cmq devo intervenire sui box LI, non sulla parola.. ho scritto try giusto per, potrebb'essere 'contact' o 'home page'

-

l'unica soluzione per cui devo andarci a manina e ad occhio che mi viene in mente é lavorare col margin laterale dei singoli LI, ottima soluzione, solo che volevo attuare un layout flessibile, quindi se la finestra vien rimpicciolita, o la risoluzione va sotto la 1024px temo che l'effetto sgarri :neutral:
31-12-2006, 04.34.57
heracleum

Ah bene! Avevo capito completamente un'altra cosa. :=D:
Non avevo "parsato mentalmente" il codice html+css quindi pensavo che la lista fosse verticale (come di default) e quel che doveva essere disposto "tipo justify" pensavo fosse il TESTO, le singole parole contenute in ciascun <li> e non gli item stessi posti in orizzontale ;)

Riguardo il:
word-spacing: .44em;
senza lo zero direi che è abbastanza diffusa come pratica e anche validata da w3c, lo specificare .123 anziché 0.123

Insomma una volta capita bene la tua situazione ho pensato: "beh è la tipica situazione da menu orizzontale a cascata fatto con i <li>" che è ormai diventato l'esempio più diffuso sul web degli esempi css. A te non serve la tendina che scende da ciascun <li> ma diciamo che come <ul> (per la menubar) la situazione è identica alla tua. Quindi mi sono cercato su google una ventina di esempi e, come ricordavo, in TUTTI questi benedetti sample le voci poste in orizzontale sono SEMPRE dannatamente allineate a sinistra, o in altri casi hanno una width fissa.
con le buone vecchie table la cosa era gratuita... ma il w3c..
Non è un buon segno, prova a cercarne altri tu.. non si sa mai.