Buongiorno a tutti e felice 2011.

Riferimento: http://webdesign.html.it/articoli/le...con-php-e-css/

Premesso che non sono un programmatore pur lavorando con i computer ma un semplice appassionato di programmazione sin dai tempi del Commodore Vic20 e che se posso trovarmi un pelo a mio agio tra i "tag" di un linguaggio come php/asp o tra un makefile e l'altro lo stesso non posso dire se per caso mi devo trovare a lavorare con programmi come GIMP col quale al massimo so come ruotare un immagine anche se non sempre ci riesco come vorrei.

Il motivo per cui posto è quindi di carattere puramente estetico ed essendo l'articolo il oggetto un qualcosa dove la parte del leone viene fatta appunto dai css credo che questa sia la sezione giusta.

Devo dire che come tutorial è ben scritto, ben commentato e il codice << anche nella sua semplicità >> è sul serio fruibile tuttavia avrei necessità di apportare una modifica che evidentemente, complice anche l'inesperienza con i css che uso sul serio molto ma molto poco, è oltre le mie capacità.

La modifica in questione è lo spostamento del menù dal lato destro a quello sinistro della pagina ed ho anche trovato il blocco di codice css che si occupa di questo ed è il seguente:

codice:
div#menu{float: right;width:155px;padding-bottom: 20px}

div#menu h4{margin-top: 10px;font-size: 120%;font-weight:lighter;color: #F0F0FF}

div#menu ul{list-style-type: none;margin:0;padding:0}

div#menu li{margin:0;line-height: 1.3}

div#menu a{text-decoration:none;color: #394A5A;padding-left:12px;line-height: 1.6;

    background: url(bullet.jpg) no-repeat top left}

div#menu a:hover{color: #000;text-decoration: underline}
dove la prima regola si incarica appunto di prendere l'id menu del tag <div> e spostarlo a destra grazie alla propità float impostata a right mentre le regole sottostanti si incaricano di prendere gli elementi di tale div e gestirne il comportamento a schermo impostando margini, posizioni, colori e via dicendo.

Il problema è che provando a modificare la posizione dei vari elementi l'impaginazione ne risulta:

1) Spostata in diagonale.
La sola modifica della propietà float da right a left comporta lo spostamento del menù da destra a sinistra attaccandolo completamente alla cornice del template. Provando a modificare gli stili div#menu ul e div#menu li (che sono quelli che racchiudono le voci dei menù) nelle propietà margin o padding il menù si sposta si verso destra ma scendendo in diagonale.

2) Sovrapposta ai contenuti dei vari link.
Il secondo problema è che spostando il menù a sinistra i contenuti dei vari link risultano quasi sovrapposti ad esso. Ad esempio le propietà per la pagina di contatto sono:

codice:
form,fieldset{margin-top:0;margin-left:0;padding: 0;border: 0px solid #000}

form label{float:left;width:80px;line-height:23px;margin-right:5px;text-align:right}

form input,textarea{margin-bottom:5px;border-style:solid;border-color: #8C8C8C #ABABAB #ABABAB #8C8C8C;

    border-width:2px 1px 1px 2px;background: url(../images/inputbk.jpg) repeat-x bottom}

form br{clear:left}

input#submit{margin: 10px 0 0 90px;border: 1px solid #CCC;padding: 0 5px;

background: #E6E6E6 url(../images/buttonbk.jpg) repeat-x center left}
Tuttavia anche facendo fluttuare a destra (float right) con allineamento del testo a sinistra (text-align:left) la propietà form label tutto rimane dove si trova.

Ripeto: Non sono un professionista del settore quindi qualche "base tecnica" mi manca di sicuro e me la cavo bene a programmare anche se ho pochissima esperienza di grafica e css per via del mio scarso senso estetico quindi sicuramente sto sbagliando qualcosa tuttavia mi piacerebbe poter spostare quel menù a sinistra in modo corretto.

Se può essere di aiuto sto usando come sistema operativo una Gentoo Linux 32bit con Firefox 3.6 e ho provato sia la versione binaria che quella compilata da me senza esiti quindi penso non sia un problema di firefox.

C'è qualcuno che mi può aiutare ?

In alternativa conoscete un qualche buon tutorial analogo o simile ?

Grazie in anticipo