Discussione:
|HTML| div float left e ridimensionamento automatico
(troppo vecchio per rispondere)
Scirlock Holmes
2006-05-19 08:00:18 UTC
Permalink
ciao, stavo facendo un layout su più colonne
volevo usare solo i div...
per esempio div contenitore di 700 pixel
e sotto i vari div
c'è però un punto dove ho delle voci allineate orizzontalmente
con la proprietà float left
mettiamo che sono 5 voci, di dimensioni variabili in base al contenuto
(titolo testuale)
come faccio a fare in modo che cmq, i div left si ridimensionino in
modo da espandersi riempiendo tutto il div contenitore?

se non metto dimensioni ho 5 div che arrivano fino ad un certo punto
se metto le dimensioni minime e ho un div più lungo e uno più corto, il
corto non diventa giustamente più piccolo x fare spazio al grande

se metto la dimensione percentuale x ogni div, quando c'è un div più
lungo, mi va a capo il testo

con la tabella ci riuscirei senza problemi, ma coi div per il momento
no :)
Scirlock Holmes
2006-05-19 08:03:57 UTC
Permalink
Ciao *Scirlock Holmes*, non mi ricordo nulla di quello successo l'altra
Post by Scirlock Holmes
ciao, stavo facendo un layout su più colonne
volevo usare solo i div...
per esempio div contenitore di 700 pixel
e sotto i vari div
c'è però un punto dove ho delle voci allineate orizzontalmente
con la proprietà float left
mettiamo che sono 5 voci, di dimensioni variabili in base al contenuto
(titolo testuale)
come faccio a fare in modo che cmq, i div left si ridimensionino in
modo da espandersi riempiendo tutto il div contenitore?
se non metto dimensioni ho 5 div che arrivano fino ad un certo punto
se metto le dimensioni minime e ho un div più lungo e uno più corto, il
corto non diventa giustamente più piccolo x fare spazio al grande
se metto la dimensione percentuale x ogni div, quando c'è un div più
lungo, mi va a capo il testo
con la tabella ci riuscirei senza problemi, ma coi div per il momento
no :)
magari così è più chiaro :)

<html>
<head>
<title>Untitled</title>
<style type="text/css">
.guscio
{
width: 740px;
text-align: left;
background-color: #CC9999;
}
.cella
{
background-color: #999999;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
padding: 2px 2px 2px 2px;
border: 1px solid White;
float: left;
text-align: center;
}
</style>
</head>

<body>

<center>
<div class="guscio">
<div class="cella">ccc dgfd gfd gf dgf dgfd fg gf gfdgf dgf ddfgdfg
fgdgf dg</div>
<div class="cella">ddd</div>
<div class="cella">aaa</div>
</div>
</center>

</body>
</html>
m.siviero
2006-05-19 09:18:46 UTC
Permalink
ciao.
non vedo molte vie d'uscite in realtà nel senso che la soluzione
migliore sarebbe quella di mettere width: in percentuale (stando un
punto in meno della percentuale matematica: es. 3 div = 32%, 4 div =
24%, 5 div = 20%). Ed è inevitabile che il testo lungo ti vada a capo.

Se il tuo obiettivo è quello di vedere il primo div sempre più largo
degli altri potresti provare ad associargli un id (anche assieme al
class="cella" che già hai) ed attribuirgli una dimensione fissa con il CSS.

Okkio che il tag <center> è deprecato da diversi anni. Usa aling:center
nel CSS per il tag body e poi align:left o justify per gli elementi
sottostanti.

Qualche idea:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
body
{
width: 100%;
text-align: center;
}
.guscio
{
width: 740px;
margin: 0 auto;
text-align: center;
background-color: #CC9999;
}
.secondo_guscio
{
width: 100%;
padding: 0 4%;
text-align: center;
}
.cella
{
background-color: #999999;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
padding: 2px 2px 2px 2px;
border: 1px solid White;
float: left;
text-align: center;
width: 22%;
}
#quello_largo
{
width: 400px;
}
</style>
</head>

<body>

<div class="guscio">
<div class="secondo_guscio">
<div id="quello_largo" class="cella">ccc dgfd gfd gf dgf dgfd fg gf
gfdgf dgf ddfgdfg
fgdgf dg</div>
<div class="cella">ddd</div>
<div class="cella">aaa</div>
</div>
</div>


</body>
</html>

Per aiutarsi a progettare layout c'è
http://www.csscreator.com/version2/pagelayout.php che ti permette di
generare pagine valide e ben formate con XHTML e i CSS. Lì c'è anche
http://www.csscreator.com/menu/multimenu.php per creare barre con i menu.
Post by Scirlock Holmes
con la tabella ci riuscirei senza problemi, ma coi div per il momento
no :)
Non lasciarti prendere dal lato oscuro della Forza!

Ciao
Scirlock Holmes
2006-05-19 09:36:27 UTC
Permalink
Ciao *m.siviero*, non mi ricordo nulla di quello successo l'altra
Post by m.siviero
Se il tuo obiettivo è quello di vedere il primo div sempre più largo
degli altri potresti provare ad associargli un id (anche assieme al
class="cella" che già hai) ed attribuirgli una dimensione fissa con il CSS.
ehm no, il mio obbiettivo è quello di avere un menù in alto dinamico
dove posso mettere link di dimensione variabile, ma che cmq mi si
spalmi su tutta la lunghezza del template, e che ovviamente non vada a
capo
Post by m.siviero
Okkio che il tag <center> è deprecato da diversi anni. Usa aling:center
nel CSS per il tag body e poi align:left o justify per gli elementi
sottostanti.
e questo mi dispiace il center era così breve, come il <b> e tanti
altri :p
grazie per il codice, però come vedi, non si occupa tutta la testata
colorata
Post by m.siviero
Per aiutarsi a progettare layout c'è
http://www.csscreator.com/version2/pagelayout.php che ti permette di
generare pagine valide e ben formate con XHTML e i CSS. Lì c'è anche
http://www.csscreator.com/menu/multimenu.php per creare barre con i menu.
grazie, non li conoscevo, ora li guardo
Post by m.siviero
Post by Scirlock Holmes
con la tabella ci riuscirei senza problemi, ma coi div per il momento
no :)
Non lasciarti prendere dal lato oscuro della Forza!
la tentazione è molto forte, soprattutto se non c'è soluzione coi div :)
Agostino De Matteis
2006-05-19 11:46:46 UTC
Permalink
Post by Scirlock Holmes
ehm no, il mio obbiettivo è quello di avere un menù in alto dinamico
dove posso mettere link di dimensione variabile, ma che cmq mi si spalmi su tutta
la lunghezza del template, e che ovviamente non vada a capo
Se ho capito bene quello che vuoi fare, probabilmente la soluzione e' di
ridimensionare le div da javascript.

'bye
Scirlock Holmes
2006-05-19 14:24:08 UTC
Permalink
Ciao *Agostino De Matteis*, non mi ricordo nulla di quello successo
Post by Agostino De Matteis
Post by Scirlock Holmes
ehm no, il mio obbiettivo è quello di avere un menù in alto dinamico
dove posso mettere link di dimensione variabile, ma che cmq mi si spalmi su tutta
la lunghezza del template, e che ovviamente non vada a capo
Se ho capito bene quello che vuoi fare, probabilmente la soluzione e' di
ridimensionare le div da javascript.
'bye
ehm volevo fare una cosa abbastanza accessibile, se no a quest'ora con
le tabelle avevo già fatto 10 siti :)

però mi sembra strano ci siano queste difficoltà, non mi sembra una
casistica rara
--
Vuoi postare velocemente?
http://x-privat.org
Agostino De Matteis
2006-05-19 15:21:08 UTC
Permalink
Post by Scirlock Holmes
Post by Agostino De Matteis
Se ho capito bene quello che vuoi fare, probabilmente la soluzione e' di
ridimensionare le div da javascript.
ehm volevo fare una cosa abbastanza accessibile, se no a quest'ora con
le tabelle avevo già fatto 10 siti :)
In teoria non dovrebbe dare problemi di accessibilita', se javascript non
e' abilitato l'unica cosa che cambia e' che non hai le div che si estendono
per tutta la larghezza del contenitore.
Post by Scirlock Holmes
però mi sembra strano ci siano queste difficoltà, non mi sembra una
casistica rara
Se al posto di HTML fosse stato XUL la cosa era facilmente risolvibile
(attributi flex e qualche elemento spacer se necessario) :-)

'bye

Andrea Zani
2006-05-19 10:30:40 UTC
Permalink
Post by Scirlock Holmes
c'è però un punto dove ho delle voci allineate orizzontalmente
con la proprietà float left
mettiamo che sono 5 voci, di dimensioni variabili in base al contenuto
(titolo testuale)
come faccio a fare in modo che cmq, i div left si ridimensionino in
modo da espandersi riempiendo tutto il div contenitore?
Qui è spiegato come evitare questo problema:
http://positioniseverything.net/easyclearing.html

Si basa tutto sull'inserimento di css che correggono questo bug. Vedi il
punto con questo css:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}

Ciao
--
AZ [Microsoft - .NET MVP]
Mia Home page: http://ciclismo.sitiasp.it
Asp.Net community: http://www.aspitalia.com
Il mio blog: http://blogs.aspitalia.com/az
Scirlock Holmes
2006-05-19 13:48:32 UTC
Permalink
Ciao *Andrea Zani*, non mi ricordo nulla di quello successo l'altra
Post by Andrea Zani
http://positioniseverything.net/easyclearing.html
mmm non so se ho capito bene
questo fix serve ad impedire che il testo sfori, giusto?
il mio problema è far riempire gli spazi vuoti anche quando non c'è
abbastanza testo
nell'esempio corrente, se tolgo un po' di testo, si accorcia in altezza
il div e si vede lo sfondo
come posso farlo di larghezza dinamica senza legare la cella al suo
contenuto?
ovvero, non voglio dovergli dire che la cella 3 ha meno roba e che
quindi è larga X pixel, mentre l'altra con più testo è larga Y pixel
--
Vuoi postare velocemente?
http://x-privat.org
Continua a leggere su narkive:
Risultati di ricerca per '|HTML| div float left e ridimensionamento automatico' (Domande e Risposte)
5
risposte
tabelle che vanno sotto le immagini (HTML,web editing)?
iniziato 2010-11-29 16:23:54 UTC
programmazione e design
Loading...