Posizione DIV sbagliati

[Nayaril]

...dal thread http://forum.html.it/forum/showthrea...readid=1385786




Ottimo!

Ti ringrazio, togliendo i position tutto va meglio,
ho modificato anche il display da inline a fload e il risultato è il medesimo,
solamente che ora il menu non funziona piú come prima.

http://www.lightimage.ch/GS_prova/2/index2.html

Qualcuno ha un un suggerimento? probabilmente ho dimenticato una parte di codice...
risultato: http://www.lightimage.ch/GS_prova/gs_risultato.jpg

CSS:


body {
background-color:#a6bf79;
color:#000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 10px 10px;
padding: 0px;
}
.clear{clear:both;}
{
margin: 0px;
padding: 0px;
}
#container {
margin: 0px auto;
text-align: left;
width: 717px;
height: auto;
}
a{
font-size:12px;
}
p{
margin: 15px 0px;
}
/********************** Header ***************************/
#header {
margin: 0px 0px 0px 0px;
background-image:url(images/header_su.jpg);
width:717px;
height:186px;
}
#header_slide {
margin: 0px 0px 0px 0px;
background-image:url(images/slide1.jpg);
width:717px;
height:165px;
}
#header ul{
background-color:#85a157;
width:711px;
border: 3px solid #FFFFFF;
margin: 0px 0px 0px 0px;
height:22px;
padding:5px 0px 0px 0px;
text-align:center;
}
#header li{
float: left;
}
#header ul a{
text-decoration:none;
color:#FFFFFF;
margin: 0px 15px;
}
#header ul a:hover{
text-decoration:underline;
color:#28556b;
clear:both;
}

/********************** Content ***************************/
#content {
background-image:url(images/content_bg.gif);
width:717px;
}
img{
border-width:0px;
}
h1{
color:#000000;
font-size:14px;
margin: 20px 0px 20px 0px;
}

h2{
color:#85a157;
font-size:14px;
text-align:center;
width:200px;
margin: 10px 0px 15px 0px;
}
#left {
float:left;
width:663px;
margin-left:27px;
padding: 0px 10px 30px 0px;

}
#left a{color:#28556b;}
#left a:hover{color:#c77e0c; clear:both;}
#photos a{
margin-right:14px;
}
#right {
float:right;
width:210px;
padding: 0px 20px 20px 20px;
margin-top:10px;
border-left: #FFF 2px solid;
}
#right a{
color:#c77e0c;
}
#right a:hover{
color:#85a157;
clear:both;
}
/********************** Footer ***************************/
#footerline {
clear:both;
background-image:url(images/footer_bg.gif);
font-size:1px;
height:10px;
}
#footer {
width:717px;
text-align:center;
padding: 20px 0px;
}

HTML:
vedi sorgente pagina

Grazie mille

[Mich_]

Anzitutto ci sono errori di HTML. Ti conviene passare dai validatori che li trovano (quasi) tutti.
Non si possono dare due id uguali ad oggetti diversi.
E non ha senso dare due id ad uno stesso oggetto (che poi alcuni browser non lo accettano).

Ai vari[*] dovrai dare una dimensione (altrimenti si schiacciano a sinistra), oppure dei padding opportuni (magari da inserire dentro gli <a>, se vuoi un bell'effetto).
E gli <a> all'interno dei[*] dovranno avere:
display: block;
width: 100%;
height: 100%;
E a quel punto puoi giocare con lo sfondo degli <a> all'hover, in modo da far risaltare dove e` posizionato il mouse.

Comunque ci sono ottime raccolte di menu in rete. Tra i "link utili" ci sono alcune risorse selezionate (a me piacciono quelli di CSSplay): il tuo e` un menu orizzontale semplice: probabilmente ce ne sono piu` di uno in quella raccolta.


PS: quando posti il codice, usa il bottone # sopra l'area del testo, altriemnti si perde la formattazione e risulta difficile da leggere.

[Nayaril]

Grazie mille!
sei stato veramente gentilissimo, ho imparato molte cose nuove e trovato risorse online che ti aiutano!

Grazie ancora!

Saluti
Nayaril