posizionamento blocchi

**falampi** · 02-09-2008, 17:24

ragazzi, mi spiegate per favore in cosa sbaglio? io non capisco perchè non mi funziona...
questo il css:

Codice PHP:


.container { float:left; width:729px; background-color:#3300CC; }

.header { float:left; width:729px; height:100px; background-color:#CC3300; }

.footer { clear:right; width:729px; height:50px; position:absolute; bottom: 0; background-color:#00FF00; }



.main2 {float:right; width:240px; background-color:#3333CC; }

.box1 {float:left; width:240px; background-color:#996666; }

.box2 {float:left; width:240px; background-color:#6666FF; }



.main1 { float:left; width:489px; background-color:#FF0099; }

.box3 {float:right; width:489px; background-color:#CCFF99; }

.box4 {float:right; width:489px; background-color:#CC0033; }

.box5 {float:right; width:489px; background-color:#3300CC; }

in pratica ho provato a fare questo:
ho definito il contenitore principale largo 729px
ho definito l'header largo uguale
ho definito il footer come nella guida di questo sito, col clear right e il position per farlo stare sotto a qualsiasi cosa
poi ho provato a definire 2 box principali, main1 e main2, uno da 489 che sta a sx, uno da 240 che sta a dx
all'interno di questi box principali, ho messo i box dei contenuti

quando passo a scrivere l'html, faccio questo:

Codice PHP:


<body>

<div class="container">

    <div class="header"></div>

        <div class="main1">

            <div class="box3"></div>

            <div class="box4"></div>

            <div class="box5"></div>

        <div class="main2">

            <div class="box1"></div>

            <div class="box2"></div>

        </div>

        </div>

<div class="footer"></div>

</div>

</body>

eppure non vedo quello che vorrei....perchè? qualche anima pia mi spiega cosa sbaglio?

**falampi** · 02-09-2008, 17:36

aggiungo che ho anche provato a fare così:

Codice PHP:


html, body { width:760px; margin: 0 auto 0 auto;}

.container { float:left; width:729px; background-color:#3300CC; }

.footer { clear:right; width:729px; height:50px; position:absolute; bottom: 0; background-color:#00FF00; }

.header { float:left; width:729px; height:100px; background-color:#CC3300; }

.main2 {float:left; width:240px; background-color:#3333CC; }

.box1 {float:left; width:240px; background-color:#996666; }

.box2 {float:left; width:240px; background-color:#6666FF; }



.main1 { float:left; width:489px; background-color:#FF0099; }

.box3 {float:left; width:489px; background-color:#CCFF99; }

.box4 {float:left; width:489px; background-color:#CC0033; }

.box5 {float:left; width:489px; background-color:#3300CC; }

e così:

Codice PHP:


<body>

<div class="container">

    <div class="header">bla bla bla</div>

        <div class="main1">

            <div class="box3">bla bla bla</div>

            <div class="box4">bla bla bla</div>

            <div class="box5">bla bla bla</div>

        <div>

        <div class="main2">

            <div class="box1">bla bla bla</div>

            <div class="box2">bla bla bla</div>

        </div>

<div class="footer">bla bla bla</div>

</div>

</body>

ma continuo a non vedere i due box che dovrei vedere a destra dentro il box che li dovrebbe contenere ma li vedo sotto al main... uffa

**falampi** · 02-09-2008, 18:05

non so come, ma tanto ho smanettato che ho fatto questo:

Codice PHP:


html, body { width:760px; margin: 0 auto 0 auto;}

.container { float:left; width:729px; }

.footer { float:left; width:729px;    height:50px; background-color:#00FF00; }

.header { float:left; width:729px; height:100px; background-color:#CC3300; }

.main2 { float:left; width:240px; background-color:#000000; }

.box1 { float:right; width:240px; background-color:#996666; }

.box2 { float:right; width:240px; background-color:#6666FF; }



.main1 { float:left; width:489px; background-color:#FF0099; }

.box3 { float:left; width:489px; background-color:#CCFF99; }

.box4 { float:left; width:489px; background-color:#CC0033; }

.box5 {    float:left;    width:489px; background-color:#00FF00; }

e questo x l'html:

Codice PHP:


<body>

<div class="container">

    <div class="header">qui ci va l'header</div>

        <div class="main1">

            <div class="box3">questo è il primo box

            </div>

            <div class="box4">questo è il secondo

            </div>

            <div class="box5">questo è il terzo

            </div>

        </div>

        <div class="main2">

            <div class="box1">questo è il primo a destra

            </div>

            <div class="box2">questo è il secondo a destra

            </div>

        </div>

    <div class="footer">questo è il footer

    </div>

</div>

</body>

e... funziona!

come ho fatto non lo so ancora... :master:
cmq l'importante era riuscirci...
grazie lo stesso a tutti!

**Myaku** · 02-09-2008, 19:07

a parte che usare degli id sarebbe più opportuno, visto che i nomi riportati sul codice sono univoci ... secondo me devi capire un attimino meglio la "logica" dei float

da quanto mi pare di intuire dai codici che hai postato, l'hai fatta parecchio più complicata del necessario ...

prova a vedere layoutgala, potrebbe esserti utile. Nonchè, se non l'avessi già visto, il capitolo relativo ai float sulla guida di base su css.html.it

**falampi** · 02-09-2008, 20:39

Originariamente inviato da Myaku
...il capitolo relativo ai float sulla guida di base su css.html.it

io l'ho visto, ma non è che ci ho capito molto...
che i float sono il mio problema l'avevo intuito...

cmq sto vedendo ora anche su alcuni libri in inglese che ho (html xhtml & css bible) vediamo se ci capisco qualcosa lì...

grazie cmq x le dritte

Discussione: posizionamento blocchi

Strumenti discussione

Ricerca discussione

Visualizza

aiuto su posizionamento blocchi (auto-risolto)

Permessi di invio