Aiuto per layout - vedere allegato

[orsone]

Quello che vorrei fare è nell'allegato. Non riesco ad allineare a sinistra la barra di navigazione o meglio ci sono riuscito ma se cambio la risoluzione dello schermo mi si scompagina tutto. Qualcuno può aiutarmi? Lo so che forse è una stupidata ma ho appena iniziato con i Css.

Grazie a tutti.

[Myaku]

senza vedere il codice non posso essere molto precisa.
comunque, se stai lavorando con larghezze fisse, hai messo tutto il layout all'interno di un div padre?

[orsone]

Allora, innanzitutto grazie ecco il codice uno dei tanti che ho provato.L'unico che mi soddisfaceva usava delle posizioni assolute ma non si adattava alla risoluzione degli schermi.

<div id="root">

<div id="testata">[img]immagini/intestazione/intestazione.jpg[/img]</div>


<div align="center" id="navigazione">

<ul>
[*][img]immagini/navigazione/home.jpg[/img]
[*][img]immagini/navigazione/chisiamo.jpg[/img]
[*][img]immagini/navigazione/dovesiamo.jpg[/img]
[*][img]immagini/navigazione/storiaecucina.jpg[/img]
[*][img]immagini/navigazione/menu.jpg[/img]
[*][img]immagini/navigazione/ricette.jpg[/img]
[*][img]immagini/navigazione/vino.jpg[/img]
[*][img]immagini/navigazione/note.jpg[/img]
[/list]
</div>
<div id="destra"></div>

<div id="main"></div>



CSS:


/* CSS Document */

html,body {background:url(../sfondo/sfondo.jpg); margin:0; padding:0;}

div#root
{
width:979px;
}


div#testata
{
margin-left:15%;
}

div#navigazione
{width:150px;

margin-top:2px;
margin-left:14%;
border:thick solid; border-width:thin;
}

div#navigazione ul
{float:right;
margin:0px;
padding:0px;
list-style-type:none;
}

div#main
{float:right;
margin-top:0px;
border:thick solid; border-width:thin;
/*top:117px; left:24%;*/
width:627px;
}

p.storia
{
text-align:justify;
}


div#destra
{

border:thick solid; border-width:thin;
width:170px;
}



Comunque viene una schifezza!!

Se puoi aiutarmi ti ringrazio veramente tanto.

Ciao

[Myaku]

quando posti il codice, dovresti usare il tag code altrimenti non ci si capisce niente. E, in casi come questo dove ti limiti a dire che "viene una schifezza" o che ti si "scompagina tutto", il codice è meglio che sia completo (DTD e tutto il resto).

Da quello che hai postato, mi sembra che manchi la chiusura del div "root" (verifica, visto che il codice non l'hai postato tutto).
Secondo, align center non si dovrebbe usare. La presentazione lasciala ai css
Altra cosa, hai usato i float ma non vedo l'elemento con il clear
Verifica anche che sia l'(x)html che il css siano validi

[pr0v4]

Confermo tutto quello che ti ha detto Myaku, ed in piu' aggiungerei:
Per sostituire l'utilizzo di align ti suggerisco di utilizzare la proprieta' css text-align, e impostando successivamente l'allineamento dove preferisci.

Inoltre volevo suggerirti di inserire un box contenutore che conterra' i div che rappresentano il corpo del tuo sito in questo modo:

<div id="content">
    <div id="navigazione"></div>
    <div id="destra"></div>
    <div id="main"></div>
</div>

La meglio di tutti sarebbe inserire i contenuti sopra alle colonne di navigazione; in questo modo chi utilizza un browser testuale o gli stessi crawler dei motori di ricerca, possono leggere tranquillamente prima i contenuti e successivamente i link.

Quindi in html si direbbe:

<div id="content">
     <div id="main"></div>
     <div id="navigazione></div>
     <div id="destra"></div>
</div>

Ed in CSS:

div#main{
   margin: 0 150px;
}
div#navigazione{
   float:left;
   width: 150px;
}
div#destra {
   float: right;
   width: 150px;
}

Ovviamente ti ho soltanto fatto degli esempi, e nn ho avuto neanche il tempo di provarli, ma se vuoi un suggerimento; leggiti meglio le guide che html.it ha realizzato, come realizzare layout in CSS e anche quelle che parlano dei margini negativi che hanno un'ottima compatibilita' cross browser!

[orsone]

Scusate non avevo letto le regole del forum e non sapevo alcune cose.
Grazie per l'aiuto, sono ancora un pò in alto mare ma sto sbracciando e grazie alle vostre indicazioni arriverò a riva :-)

[pr0v4]

Tu continua a fare esperimenti, e se talvolta incontri ancora qualche problema, siamo sempre qui per darti una mano!