Colonna secondaria più lunga...

[ivanisevic82]

Ciao ragazzi, nel template che sto costruendo ho provato a fare la colonna secondaria più lunga della principale, ma ciò comportà un evidente problema:

http://www.ivanisevic82.com/pages/glass.php

Non so come risolvere: il blocco centrale del sito (tra il menu e il footer) comprende due elementi (il content e la colonna secondaria, con float right).
Dato che questi elementi devono avere uno sfondo comune, li ho "reacchiusi" in un div (#MiniContainer) a cui ho dato lo sfondo da ripetere verticalmente...

Ma perchè lo sfondo si ripete SOLO fino alla fine del content e non fino alla fine della colonna secondaria, se da css è attribuito all'intero contenitore di questi due elementi?

Grazie per il supporto!

[essezeta]

io vedo tutto correttamente...

il bg arriva fino in fondo... a parte addirittura dal top del body...

[ivanisevic82]

Aspetta, questo succede perchè avevo apportato una modifica, ho spostato il background da "miniContainer" a Container.

Prima mi rimaneva scoperta la colonna col float.

Adesso invece copre tutto, ma adesso TROPPO.

Infatti dovrebbe partire dopo il menu.

Ho provato a usare: background-position: 0px 100px;

Però non so perchè non funziona.

Qual'è la migliore soluzione da adottare?

Vuoi che lo risporto com'era prima in modo da poter studiare il problema da entrambi i punti di vista?

Perchè lo sfondo applicato a un div che contiene due div (content e colonna secondaria con float a destra) non copra anche la colonna secondaria con float, se questa è più lunda del content?

[ivanisevic82]

Seguendo la guida di html.it ho visto che in questi casi si aggira il problema attribuendo lo sfondo al container. In questo modo TUTTO è "coperto" da questo sfondo, ma non si vede perchè gli altri elementi (header, menu, footer...) gli stanno sopra.

In questo caso però non posso permettermi una simile soluzione, perchè avendo usato png trasparenti, se applico lo sfondo a TUTTO il container, si soprappone con gli altri elementi trasparenti.

Quindi le strade sono due:

- O applico lo sfondo al container, ma lo faccio iniziare da un certo punto in poi (usando "background-position: 0px 100px;" - che però non mi funziona, chissà perchè...);

- Oppure applico questo sfondo a un div che contenga sia il content che la colonna secondaria col float. Anche questa soluzione l'ho provata, ma lascia metodicamente senza sfondo la parte col float.

Soluzioni?

[essezeta]

- Oppure applico questo sfondo a un div che contenga sia il content che la colonna secondaria col float. Anche questa soluzione l'ho provata, ma lascia metodicamente senza sfondo la parte col float.

provato a far seguire i due box da un elemento clear:both?
dovrebbe andare...

prima di chiudere MiniContainer metti
<hr style="clear: both; margin:0; visibility:hidden"/>

ho testo con firebug e funziona...

poi ti consiglio queste risorse:
http://blog.html.it/layoutgala/indexIta.html

ciao

[ivanisevic82]

Ti ringrazio per il supporto ma forse non ho capito bene perchè non mi funziona...

Tu dici che dovrei fare così?

<div id="MiniContainer" hr style="clear: both; margin:0; visibility:hidden">

<div id="Colonna">
</div>

<div id="content">
</div>

</div>

E il clear: both dovrei aggiungerlo ulteriormente anche al css degli elementi "content" e "colonna"?

In entrambi i casi c'è qualcosa che non và...forse è meglio che mi scrivi direttamente il codice, per chiarezza.

Grazie mille!

[essezeta]

non hai capito una mazza... come dicono a oxfòrd...



fai così...

<div id="MiniContainer">

<div id="Colonna">contenuto</div>

<div id="content">contenuto</div>

<hr style="clear: both; margin:0; visibility:hidden"/>

</div>


ciao

mi spetta una

[ivanisevic82]

Essì, non avevo capito proprio niente!

Tra l'altro non ho neanche capito su cosa si basa questa soluzione, ora vado a studiare un pò questo "hr" ...

Grazie, sei stato gentilissimo e utilissimo!