Layout tableless

**fcracker79** · 24-08-2007, 11:02

Salve a tutti,
premetto di essere alle prime armi con css e impaginazioni tableless.
La mia situazione è la seguente:

1 div padre (parent)
2 div contenuti in parent (child1, child2)
2 div contenuti in child1 (nephew1, nephew2)

Il mio obiettivo è:
1. Collocare orizzontalmente nephew1 e nephew2
2. Collocare verticalmente child1, child2
Per far ciò preferirei non ricorrere a posizionamenti manuali,
ma utilizzare ad esempio la proprietà 'clear'.

Sapreste darmi qualche indicazione ?
Riporto l'html che non riesco ad impaginare:

codice:

<html>
<head>
</head>
<style type="text/css">
    #parent {background-color: Red; }
    #child1 {background-color: Green; clear: right; }
    #child2 {background-color: Blue; }
    #nephew1 {background-color: Yellow; float: left; }
    #nephew2 {background-color: Magenta; float: left; clear: right; }
</style>
<body>
<div id="parent">
    Hi! I'm parent
    <div id="child1">
        Hi! I'm child1
        <div id="nephew1">
            Hi! I'm nephew1
        </div>
        <div id="nephew2">
            Hi! I'm nephew2
        </div>
    </div>
    <div id="child2">
        Hi! I'm child2
    </div>
</div>
</body>
</html>

Grazie a tutti per il supporto!

**Room237** · 24-08-2007, 11:05

se ho capito quello che vuoi fare, dovresti mettere una cosa così
#parent {background-color: Red; }
#child1 {background-color: Green; float: left; }
#child2 {background-color: Blue; float: right; }
#nephew1 {background-color: Yellow;}
#nephew2 {background-color: Magenta;}

**fcracker79** · 24-08-2007, 11:20

Grazie!
Sì, è quello che vorrei ottenere.
Purtroppo, però, il mio esempio è solo una semplificazione di una situazione più complicata, ovvero:

codice:

     _______child1_______
    | nephew1 | nephew2 |
    -----------------------------
    | child2 |  child3          |
    |           |                      |

La mia idea era quella di imporre il clear a child1 in modo da
costringere il browser a mandarmi a capo child2.

Grazie ancora!

**Room237** · 24-08-2007, 11:27

allora:
#parent {background-color: Red; }
#child1 {background-color: Green; }
#child2 {background-color: Blue; float: left; }
#nephew1 {background-color: Yellow;float: left;}
#nephew2 {background-color: Magenta;float: left;}

<div id="child1">
Hi! I'm child1
<div id="nephew1">
Hi! I'm nephew1
</div>
<div id="nephew2">
Hi! I'm nephew2
</div>
</div>
<br clear="all" />

i child 2 e 3 possono anche avere classe .child (quindi una unica classe invece che id) e con width e float:left ti fai tutte le colonne che vuoi

**fcracker79** · 24-08-2007, 11:41

Grazie!
Mi hai risolto un mucchio di problemi con questa soluzione!

Discussione: Layout tableless

Strumenti discussione

Ricerca discussione

Visualizza

Layout tableless

Sì, ma...

E' perfetto!

Permessi di invio