Layout a 2 colonne, con navigazione a destra

**Horus-Ra** · 16-01-2007, 13:17

Devo creare (almeno come base) un semplice sito con una colonna di navigazione a destra. Quando l'ho fatto sulla sinistra non ho avuto problemi, ma questo non riesco a farlo andare e dopo averci sbattuto la testa (con conseguenti imprecazioni) ho deciso di affidarmi al forum

Questo il css interessato:

Codice PHP:


div#container{width: 1000px;margin: 0px auto;background: e9eaec;text-align: left;border: 1px solid #006699;padding: 5px;}

div#header{height: 50px;line-height: 20px;padding: 0 0%;background: #fff}

div#nav{float: right;width: 240px;padding: 10px 0px;border: 1px solid green}



div#content{margin: 10px 240px 0 0;padding: 60px 5px;width: 710px;border: 1px solid black}

div#content p{line-height:1.3}



div#footer{clear: right;background: #fff;color: #4E768A}

div#footer p{padding: 10px 0;text-align: center;font-size: 80%}

Questa invece la disposizione dei vari div nelle pagine:
container{
header
content
footer
nav
}

La barra di navigazione ho dovuto metterla sotto perchè in altre posizione "inglobava" i div sottostanti (per esempio il content appariva dentro il nav). Adesso sono tutti in ordine tranne il nav: appare a destra, ma sotto il sito e al di fuori del container... perchè non è al suo posto?

**pictor** · 16-01-2007, 13:41

Perchè porco cane sti CSS non si capisce mai che criteri usano per funzionare!

Anche io ho un problema con i layout... ed è da impazzirci.

Comunque hai già provato a mettere anche il #nav con float:left?
In questo modo dovrebbe starti attaccato alla destra del contenitore.

Anzi, ora che ci penso dovresti mettere float:left pure al container, credo (altrimenti a sinistra ti ci va il menu). Anzi... credo tu debba metterlo SOPRATTUTTO al container.

Però non c'hai detto dove appare il nav.

Sperò che ti sia d'aiuto.... (sperando che poi qualcuno aiuti mi

)

Ciao

**pikkio74** · 16-01-2007, 14:04

Se ti può essere d'aiuto puoi prendere come spunto questo codice:
http://blog.html.it/layoutgala/LayoutGala35.html

**cortex** · 16-01-2007, 14:21

se capisco il problema,

inserisci il float anche nel content :imho dovrebbe funzionare

**Horus-Ra** · 16-01-2007, 15:41

Niente da fare... Ho messo il float:left nel content, ma non cambia nulla.
Credo che il problema stia proprio dentro il nav. Ma se non gli metto il float:right ovviamente non viene impaginato dove voglio (cioè a destra).
Ho seguito anche l'esempio che mi ha linkato pikkio74: in pratica è quello che ho fatto io, ora che ho messo il float nel content...
Bho, non so che fare

**pikkio74** · 16-01-2007, 15:44

Se hai seguito anche l'esempio il problema non può che essere nel codice XHTML...se vuoi postare il link posso darci un'occhiata ;-)

**Horus-Ra** · 16-01-2007, 16:05

Per adesso lo sto costruendo in locale ed è solo la base, quindi è difficile che l'html sia sbagliato (spero)

Comunque questo è il body:

Codice PHP:


<BODY>



<div id="container">





     <div id="header">

     

          

Prova header</p>

          

     </div>



     <div id="content">

     

          

Prova contenuto</p>



     </div>





     <div id="footer">

     

          

Prova footer</p>



     </div>

     



     <div id="nav">

     

          <table width="100%" cellpadding="3" cellspacing="0" border="0">

                 <tr>

                     <th>Inserimenti</th>

                 </tr>

                 <tr>

                     <td>

                         

Prova barra laterale destra.</p>

                     </td>

                 </tr>



     </div>







</div>



</BODY>

Questo invece è il css minimale modificato con i vostri consigli:

div#container{width: 1000px;margin: 0px auto;background: e9eaec;text-align: left;border: 1px solid

#006699;padding: 5px;}
div#header{height: 50px;line-height: 20px;padding: 0 0%;background: #fff}
div#nav{float: right;width: 240px;padding: 10px 0px;border: 1px solid green;}

div#content{float: left;margin: 10px 0 0 0;padding: 60px 5px;width: 710px;border: 1px solid black}
div#content p{line-height:1.3}

div#footer{clear: both;background: #fff;color: #4E768A}
div#footer p{padding: 10px 0;text-align: center;font-size: 80%}

PS: grazie per l'aiuto

**pikkio74** · 16-01-2007, 16:22

Con il css fornito devi usare questo codice XHTML ;-)

Codice PHP:


<BODY> 



<div id="container"> 



     <div id="header"> 

      

          

Prova header</p> 

           

     </div> 

     

     <div id="nav"> 

      

          <table width="100%" cellpadding="3" cellspacing="0" border="0"> 

                 <tr> 

                     <th>Inserimenti</th> 

                 </tr> 

                 <tr> 

                     <td> 

                         

Prova barra laterale destra.</p> 

                     </td> 

                 </tr> 

            </table>



     </div> 



     <div id="content"> 

      

          

Prova contenuto</p> 



     </div> 





     <div id="footer"> 

      

          

Prova footer</p> 



     </div> 

      

</div> 



</BODY>

**Horus-Ra** · 16-01-2007, 16:33

Porc... non avevo chiuso la tabella! Quindi l'errore stava proprio nel codice html...
Grazie, Pikkio, sei stato fondamentale

[OT] Ho dato un'occhiata al link nella tua firma (sono appassionato di astronomia): interessante, anche se ho dato una letta superficiale

**pikkio74** · 16-01-2007, 16:39

il tag table non era chiuso ma non era quello il problema. Il div nav ora viene prima del content, e il flusso è corretto.

Comunque se vuoi fare una cosa corretta ti conviene creare un ulteriore div (il classico wrapper) che sia il contenitore di "nav" e "content". In questo modo puoi anche fare uno style switcher solo via css senza agire sull'html.

Ci sono un bel pò di articoli qui su html.it

ps: grazie della visita ;-)

Discussione: Layout a 2 colonne, con navigazione a destra

Strumenti discussione

Ricerca discussione

Visualizza

Layout a 2 colonne, con navigazione a destra

Permessi di invio