Atroce Dubbio Su Due Float Messi Accanto

[dori88]

Ciao ragazzi eccomi ancora qui.... si vede che sto studiando vero..??
Allora sono arrivata a realizzare un layout a due colonne di cui la prima non liquida e l'altra liquida...

Bene il libro fa strane cose... imposta un margine negativo pari a meno la larghezza di quella fissa , la prima la fa float a sx e l'altra a dx.... Insomma al momento non voglio soffermarmi su questo..

Io credo, o meglio credevo di poterlo fare in un altra maniera, ma c'è un problema...


codice

<div id="contenitore"> 
<div id "coonnal1"> 

 contento colonna 1 </p> </div>
<<div id "colonna2"> 

 contento colonna 2 </p> </div>
</div> 

css

#contenitore{
width:100%;
overflow:hidden;
}

#colonna1{
...
background...
width:200px;
float:left
}

#colonna2{
...
background...
width:100%;
float:left
} 

Bene, perchè facendo così i due float non vengono posti l'uno accanto all'altro??!! Ho studiato nel libro che quando si mettono due float acanto questi si dispongono accanto affinche ci sia ancora spazio nella iga alrimenti, uno sotto l'altro, invece qui #colonna2 va a coprire #colonna1..
Perchè??? Quetso è quello che vi chiedo!

P.S.
Inoltre..:
Il libro fa in colonna2 float:right e poi fa un margin-left:-200 px....
ma perchè meno 200? E' il meno che non capisco, proprio perchè la colonna 2 copre la uno io andrei a mettere +200 e non -200...

Cmq intanto mi piacerebbe capire perchè non vengono mesi accanto, e poi parlare delle eventuali soluzioni..

Grazie sempre, site un valido aiuto per una povera ragazza che sta studiando anche in estate....

[ResianTaxidrive]

Non so se magari hai copiato male ma hai scritto

<div id "coonnal1">

forse è un errore di sintassi

[dori88]

Non ho fatto copia incolla ho scritto direttamente sul forum, nel file è scritto bene..

[Mich_]

Attenzione Dori, che posti molti errori nei tuoi codici: probabilmente sono erorri di trascrizione, ma il dubbio resta sempre: quando posti ti conviene fare copia-incolla.

Comunque in questo caso la sintassi non c'entra: i due blocchi non si affiancano perche` non ci stanno.
Se il blocco a sin e` largo 200px e quello destro e` largo 100% (si intende del contenitore), e` chiaro che il tutto non ci sta dentro il 100%.

Per quanto riguarda i margini negativi, e` una tecnica che viene usata in qualche caso, ma a mio parere non e` da abusarne. E per loro natura intrinseca i CSS si prestano ad ottenere cose analoghe o uguali mediante tecniche diverse (anche molto diverse): non e` detto che vadano eben in tutte le condizion, per cui sta all'eseprienza poi usare la tecnica migliore nei casi specifici.

Nel sito di HTML.it ho visto vari articoli sui margini negativi: di uno ho tenuto traccia (Margini negativi), gli altri credo che li trovi con una ricerca all'interno degli articoli.

Nota personale:
I CSS vanno (nell'ordine) studiati, applicati, digeriti; ma la cosa non si puo` fare tutto d'un colpo: e` come mangiare: non e` che puoi la domenica mangiare per tutta la settimana e poi stare a digiuno; la stressa cosa con lo studio: ogni capitolo va studiato, applicato, digerito, ri-applicato e poi si puo` passare al cap. successivo, perche` mangiarne un altro senza aver digerito il primo serve poco.
Io personalmente credo che dovresti lasciar perdere il Tomo per un po'; e guardarti in giro, ad esempio vedi i siti di layout (alcuni sono citati nei "link utili"): prova a vedere le tecniche applicate li`, alla luce del tuo studio: sono convinto che impari di piu` che non lo studio sistematico di un libro che per sua natura mette in campo tutte le tecniche possibili, anche se poco utilizzate.

E tieni presente che il tomo puo` tornarti utile anche quando dovrai fare qualcosa di particolare: l'importante e` sapere dove trovare qualcosa, non necessariamente sapere tutto ed aver fatto esperienza con tutto.

[dori88]

Per quanto riguarda lo studio, premetto che non sto studiando per università scuola o quant'altro ma solo perchè mi piace e volevo imparare... Ad. es. ho già fatto miei (nel senso che saprei ricrearle ) i layout a due colonne fisse e i layout a due colonne liquide... Il problema è giunto ora nel momento i cui sono arrivata al layout con due colonne di cui una liquida e l'altra non.
Cmq non sto guardando solo il libro ma anche le varie guide...


Per quanto riguarda il discorso che va a capo perchè i 200 px sono una cosa in piu' rispetto al 100%, era proprio sfruttando i margini negativi che volevo affiancarli.. Per es. questo codice preso dai tutorial funziona:

div#box1{float: left; width: 100%;margin-right: -200px}
div#box1-content{margin-right: 200px}
div#box2{float: right;width: 200px} 

Mentre in quello che ho fatto io, in pratica volevo cambiar l'ordine delle colonne

#sfondo{
width:100%;
overflow:hidden;
}

#col1{
background:#CCCC66;
float:rigth;
width:100%;
margin-left: 200px;
}



#col2{
background:#00FFFF;
width:200px;
float:left;
} 

Non funziona.. perchè si sovrappongono? Credo di aver seguito la stessa logica dell'esempio sopra..

[Mich_]

Prova anceh a cambiare l'ordine degli oggetti nell'HTML.

[dori88]

Questo è quello che si ottiene cambiando:
cambiando

Questo è quello che si ottiene non cambiando:
noncambiando


P.s. per cambiare l'ordine intendi scambiare col1 con col2 giusto? Io ho fatto così...


Ti prego è da stamattina che cerco di fare un cavolo di allineamento ma non ne riesco a venifre a capo...
Il libro per quanto riguarda questo argomento l'ho abbandonato perchè fa una cosa assurda, io invece mi vorrei rifare all'es. del forum molto più semplice:

Guarda cosa fa il libro:

#col1{
float:left;
width:200px;
position:relative;
z-index:10
}

#col2{
float:right;
width:100%;
margin-left:-200px
}

#colonna2-p{
margin-left:200px
} 

In pratica, mentre nell'es. sul foum viene spostato il margine per liberare ello spazio (quello che ho cercato di fare anch'io) qui viene spostato ma in un punto in cui già c'era.. (o no? sono indeciso su questo punto..) solo che tramite z-index viene messo dietro... Non capisco...

[Mich_]

Se introduci i posizionamenti aumenti la confusione: sono una delle cose piu` difficili da capire e soprattutto da usare.
Ecco due articoli che li spiegano: finche` non sono digeriti completamente non puoi usare i posizionamenti:
I posizionamenti assoluti
Capire i posizionamenti relativi

[dori88]

In questo caso veramente ho capito di cosa si tratta.
e' presente position:relative ma senza assegnare lo spostamento solo per potere assegnare z-index..
Quello che non capisco è perchè non fa come nell'esempio del forum in cui crea lo spazio per poi andarci inserire l'altro box... E' per questo che ho seguito di seguire la strada dell'esempio visto suli libro...


Pero' non capisco perchè il mio non vada..

[dori88]

In questo caso veramente ho capito di cosa si tratta..
e' presente position:relative ma senza che sia presente lo spostamento solo per potere assegnare z-index..
Quello che non capisco è perchè non fa come nell'esempio del forum in cui crea lo spazio per poi andarci inserire l'altro box... E' per questo che ho scelto di seguire la strada dell'esempio visto suli libro...


Pero' non capisco perchè il mio non vada.. Tu riesci a vedere l'errore?