Pagina non cresce

[talkoman]

Ciao a tutti ho creato una pagina con un DIV "conteiner" con posizione relativa e al suo interno c'è la testata, il footer e tre colonne...
Mi succede una cosa strana se una delle due colonne laterali cresce più di quella centrale, il footer non si muove e la colonna più lunga si sovrappone al footer...
Come posso rimediare?
Ciau!!

[karedas]

Ciao Talkoman,
prova a dare al footer un attributo "clear:both" dovrebbe così porsi subito dopo i tuoi elementi.

[talkoman]

Ho provato ma non funziona. C'è anche da dire che le due colonne laterali sono con position: absolute
Se vuoi ti do il link e puoi verificare il codice

[karedas]

Allora no, se tu setti le colonne con posizione assoluta è normale che il footer si comporti così.
Devi utilizzare un metodo diverso, se vuoi comunque mostrarci il link vediamo di risolvere insieme

[talkoman]

Eccolo
catanianuoto2000 . it/fin/

[karedas]

Allora,
Purtroppo l'intera struttura del layout è a mio parere errata. Di base ti consiglierei di rivisitarla senza dare ad elementi e zone fondamentali come le due colonne laterali l'attributo "absolute". Gioca magari con i float e le percentuali.

Anche perchè inversamente e come ti dicevo prima ti impossibileterebbe la tua richiesta.

Ciao!

[talkoman]

come si fa?

[talkoman]

Tu come mi consigli di fare?

[talkoman]

Ho seguito la guida proposta in questo stesso sito:
http://www.giorgiotave.it/forum/css/54753-layout-izzatore.html

Mi aiuti ad applicarla per tre colonne?
Cioè invece di avere solo
- sidebar
- main
Vorrei fare:
- menubar
- extrabar
- main
Vanno entrambe prima di main nel codice XHTML?
Inoltre nella guida dice che se voglio la sidebar a destra devo applicare "left-sidebar-wide160" a content, se la voglio a sinistra "left-sidebar-wide160"

E se ne voglio una a destra e una a sinistra?
Grazie per l'aiuto!

[karedas]

Per Extrabar cosa intendi?
Innanzitutto devi avere ben in mente cosa far contenere alla tua "scatola".

Racchiudi tutto il tuo lavoro in un div "container" , dagli una dimensione fissa o dinamica e al suo interno distribuisci tutto il resto.

Ad esempio:

<div id="container">
<div id="testa"></div>
<div id="corpo">
<div id="colonna_sinistra"></div>
<div id="contenuto"></div>
<div id="colonna_destra"
</div>
<div id="piede"></div>
</div>

[talkoman]

Per ExtraBar intendo la colonna di destra, quella dei contenuti extra.
Se io nella Testata, quindi div testa voglio mettere immagini sopra ad altre così com'è ora? Tipo il logo o il modulo di ricerca, come faccio?

[karedas]

Ponendo che nel div testa andremo a mettere loghi, moduli di ricerca, banner, elemento in flash di presentazione e quant'altro, allora dovremo semplicemente inserircelo in questo modo:

...
<div id="testa">
<a href="#"><img src="logo.jpg" alt="logo aziendale della ditta ABC" /></a>
<form method="post" id="search_module">
...
</form>
</div>

[talkoman]

Ma se io ho un'immagine di sfondo e voglio sovrapporre il logo e quant'altro, uso il position:absolute?

[talkoman]

Allora ho fatto così:

Pagina XHTML:

<div id="container" class="fixed1000">
    <div id="testa"></div>
    <div id="corpo">
        <div id="menubar">Contenuto x MenuBar</div>
        <div id="contenuto">
       	  <div id="rivolto"></div>
          Contenuto x Contenuto
       	</div>
        <div id="extrabar">Contenuto x ExtraBar</div>
  </div>
    <div id="foot"></div>
</div>

Codice CSS:

body {  font-size: 62.5% } /* set 1em to 10px */
#container { margin: 0 auto; text-align: left;}
	.fixed1000 { width: 1000px; }

#testa { width: 1000px; height: 194px; background: #ffffff  url("../../images/header.jpg"); margin: 0 auto;}
#corpo { width: 1000px; background: #ffffff url("../../images/body.jpg"); margin: 0px;}
#menubar { width: 151px; float: left; margin: 0px 0px 0px 52px;}
#extrabar { width: 151px; float: right; margin: 0px 52px 0px 0px;}
#contenuto { width: 570px; margin-left: 214px; position: relative;}
#rivolto { position: absolute; width: 79px; height: 64px; margin: 0px 0px 0px 501px; background: #FFFFFF url("../../images/rivolto.jpg") no-repeat;}
#foot{ width: 1000px; height: 80px; margin: 0px auto; background: #ffffff url("../../images/footer.png");}

Però si forma uno spazio bianco tra Testa e Corpo, poi, la extrabar si posiziona sotto Contenuto

[talkoman]

Nada?