div senza contenuti

**yag** · 28-05-2006, 13:19

salve vorrei sapere se esiste il modo di avere un div con dentro altri div
ma senza testo ed mantenere il colre di sfondo del div padre

esempio

<DIV style="height:100%;clear:both;background-color:green;">

<DIV style="font-size:14px;width:100px;float:left;"> ciao </DIV>
<DIV style="font-size:14px;width:100px;float:left;"> bello </DIV>
<DIV style="font-size:14px;width:100px;float:left;">ddd</DIV>

</DIV>

su ie va su moz / firefox ho notato che deve esserci per forza un carattere

**res_foto** · 28-05-2006, 15:38

Crea un foglio css esterno che lo chiamiamo prova.css:

body{
width: 100%;
}
div#padre{
color: Black;
background-color: Green;
width:100%;
font-size: 14px;
}
div#figlio1, div#figlio2, div#figlio3{
background-color: inherit;
color: inherit;
float: left;
width: 32%;
}

il codice html:

<head>
<link rel="stylesheet" type="text/css" href="prova.css" />
</head>
<body>
<div id="padre">
<div id="figlio1">Ciao</div>
<div id="figlio2">bello</div>
<div id="figlio3">ddd</div>
</div>
</body>
</html>

Fammi sapere se tutto va bene

**yag** · 28-05-2006, 15:46

Originariamente inviato da res_foto
Crea un foglio css esterno che lo chiamiamo prova.css:

body{
width: 100%;
}
div#padre{
color: Black;
background-color: Green;
width:100%;
font-size: 14px;
}
div#figlio1, div#figlio2, div#figlio3{
background-color: inherit;
color: inherit;
float: left;
width: 32%;
}

il codice html:

<head>
<link rel="stylesheet" type="text/css" href="prova.css" />
</head>
<body>
<div id="padre">
<div id="figlio1">Ciao</div>
<div id="figlio2">bello</div>
<div id="figlio3">ddd</div>
</div>
</body>
</html>

Fammi sapere se tutto va bene

si va pensavo che inherit era implicito

**yag** · 28-05-2006, 16:02

Originariamente inviato da res_foto
Crea un foglio css esterno che lo chiamiamo prova.css:

body{
width: 100%;
}
div#padre{
color: Black;
background-color: Green;
width:100%;
font-size: 14px;
}
div#figlio1, div#figlio2, div#figlio3{
background-color: inherit;
color: inherit;
float: left;
width: 32%;
}

il codice html:

<head>
<link rel="stylesheet" type="text/css" href="prova.css" />
</head>
<body>
<div id="padre">
<div id="figlio1">Ciao</div>
<div id="figlio2">bello</div>
<div id="figlio3">ddd</div>
</div>
</body>
</html>

Fammi sapere se tutto va bene

Però ad esempio prova questo

codice:

<DIV    style="height:100%;width:400px;clear:both;color:white;background-color:#999999;">
<DIV    style="font-size:14px;width:100px;height:100%;float:left;color:inherit;background-color:inherit;"> ciao  ciao  ciao  ciao  ciao  ciao  ciao  ciao  ciao  ciao </DIV>

<DIV    style="font-size:14px;width:100px;height:100%;float:left;color:inherit;background-color:inherit;"> bello </DIV>

<DIV    style="font-size:14px;width:100px;height:100%;float:left;color:inherit;background-color:inherit;"></DIV>

<DIV    style="font-size:14px;width:100px;height:100%;float:left;color:inherit;background-color:inherit;"></DIV>
</DIV>

su IE e Mozilla vedi che

**res_foto** · 28-05-2006, 16:53

alcune considerazioni:

1.L'attributo height deve essere usato con misure assolute, ad esempio 100px, e non con relative, altrimenti hai dei problemi di cross-compatibilità. Poi viene attribuito al div "padre". Ma questa è una soluzione approssimativa. Meglio di non usarla.

2.Allora che fare? Per primo devi sapere quante collone ti servono, usare meglio i float, ed evitare
i div vuoti. A cosa servono? Ma se insisti inserisci il tag
.

3. Ovviamente il discorso è troppo lungo. Per questo ti consiglio il seguente tutorial:
http://css.html.it/articoli/leggi/53...e-tutto-float/

**yag** · 28-05-2006, 17:03

Originariamente inviato da res_foto
alcune considerazioni:

1.L'attributo height deve essere usato con misure assolute, ad esempio 100px, e non con relative, altrimenti hai dei problemi di cross-compatibilità. Poi viene attribuito al div "padre". Ma questa è una soluzione approssimativa. Meglio di non usarla.

2.Allora che fare? Per primo devi sapere quante collone ti servono, usare meglio i float, ed evitare
i div vuoti. A cosa servono? Ma se insisti inserisci il tag
.

3. Ovviamente il discorso è troppo lungo. Per questo ti consiglio il seguente tutorial:
http://css.html.it/articoli/leggi/53...e-tutto-float/

Dunque quei tut li conosco già

ti espongo il problema ho una riga (un div vuoto)
con dentro tre colonne (tre div) ogni div o non può avere dati
il ciclo si ripete (una sorta di griglia)

>1.L'attributo height deve essere usato con misure assolute, ad esempio 100px, e non con >relative, altrimenti hai dei problemi di cross-compatibilità. Poi viene attribuito al >div "padre". Ma questa è una soluzione approssimativa. Meglio di non usarla.
Ne sei sicuro ?
Cmq ho usato quello perchè sto facendo delle prove (per per dire ad mozilla adattati al contenuto)

hai qualche idea per il mio problema ?

**yag** · 28-05-2006, 17:15

Originariamente inviato da yag
Dunque quei tut li conosco già

ti espongo il problema ho una riga (un div vuoto)
con dentro tre colonne (tre div) ogni div o non può avere dati
il ciclo si ripete (una sorta di griglia)

>1.L'attributo height deve essere usato con misure assolute, ad esempio 100px, e non con >relative, altrimenti hai dei problemi di cross-compatibilità. Poi viene attribuito al >div "padre". Ma questa è una soluzione approssimativa. Meglio di non usarla.
Ne sei sicuro ?
Cmq ho usato quello perchè sto facendo delle prove (per per dire ad mozilla adattati al contenuto)

hai qualche idea per il mio problema ?

rimetto un pò di markup

codice:

<DIV    style="width:400px;clear:both;color:white;background-color:#661011;">
<DIV    style="font-size:14px;width:100px;float:left;color:inherit;background-color:inherit;">col1</DIV>
<DIV    style="font-size:14px;width:100px;float:left;color:inherit;background-color:inherit;"> col2</DIV>

<DIV    style="font-size:14px;width:100px;float:left;color:inherit;background-color:inherit;"></DIV>

<DIV    style="font-size:14px;width:100px;float:left;color:inherit;background-color:inherit;"></DIV>
<div style='height:20px;overflow:hidden;clear:both'>--</div></DIV>
</DIV>

ecco così funziona tutto quello diciamo che fa funzionare il tutto è

questa linea

codice:

<div style='height:1px;overflow:hidden;clear:both'>--</div></DIV>

ho messo i trattini per far capire...

serve solo per moz

**res_foto** · 28-05-2006, 17:24

Se invece metti
al posto dei trattini, ti trovi a definire un altro elemento.
Forse ti conviene definire il bacground del body o usare i blockquote per eviatre degli stategemi.
Non dimenticare che firefox interpreta in assoluto i css.
L'IE al contario è il problematico...

Cmq funziona anche come dici te.

**yag** · 28-05-2006, 17:28

Originariamente inviato da res_foto
Se invece metti
al posto dei trattini, ti trovi a definire un altro elemento.
Forse ti conviene definire il bacground del body o usare i blockquote per eviatre degli stategemi.
Non dimenticare che firefox interpreta in assoluto i css.
L'IE al contario è il problematico...

Cmq funziona anche come dici te.

In effetti funziona anche se faccio <br clear='both'> ma è deprecato e non voglio usarlo
da quel che so quello è un hack per firefox appunto cercavo soluzione...

Il blockquote può contenere div ?

p.s
vorrei validare strict

**res_foto** · 28-05-2006, 17:43

il blockquote è un elemento.
quinidi lo definisci generalmente
ad esempio: blockquote {...}
o per il relativo div
ad esempio: div#relativo blockquote {...}

Per la validazione non importa s'è strict o transitional.

usa i css esterni (ce ne stanno tantissimi vantaggi) e vedrai che la validità di html è gioco da ragazzi.
Per la compatibilità dei css il discorso è più lungo e per quello che mi riguarda faccio tantissime prove con i 4 browser più famosi. Quello che mi fa inervosire è IE...

Discussione: div senza contenuti

Strumenti discussione

Ricerca discussione

Visualizza

div senza contenuti

Permessi di invio