Div e CSS ubriachi...

[Nayaril]

Salve a tutti,

avrei un problemino con i Div che mi vanno a spasso,
il sito che sto facendo per una piccola associazione umanitaria dovrebbe risultare cosi:
http://www.lightimage.ch/GS_prova/gs_risultato.jpg
ho preso un templates gia strutturato e lo sto modificando.

Il risultato è questo:
http://www.lightimage.ch/GS_prova/2/
l'immagine con la piantina verde e il menu si trovano dietro al testo.

codice CSS usato:

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;
position:relative;
}
#header_slide {
margin: 0px 0px 0px 0px;
background-image:url(images/slide1.jpg);
top:186px;
width:717px;
height:165px;
position:relative;
z-index:2;
}
#header ul{
background-color:#85a157;
width:711px;
border: 3px solid #FFFFFF;
display:block;
top:165px;
position:relative;
margin: 0px 0px 0px 0px;
height:22px;
padding:5px 0px 0px 0px;
text-align:center;
}
#header li{
display:inline;
}
#header ul a{
text-decoration:none;
color:#FFFFFF;
margin: 0px 15px;
}
#header ul a:hover{
text-decoration:underline;
color:#28556b;
}

/********************** Content ***************************/

#content {
background-image:url(images/content_bg.gif);
width:717px;
position:relative;
top:0px;
}
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;
display:inline;
}
#left a{color:#28556b;}
#left a:hover{color:#c77e0c;}
#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;
}

/********************** 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:
lo trovate con la sorgente della pagina.
se serve posso postare il file CSS direttamente.

Qualcuno saprebbe dirmi cosa sbaglio?
Vi ringrazio sin da ora.

Un saluto
Nayaril

[Mich_]

Perche` tutti quei position?
Probabilmente se elimini tuttii posizionamenti (e spostamenti relativi) ottieni un risultato piu` simile a quello che vuoi.

Perche` hai messo il selettore * dopo il body?
I margini definiti in body potrebbero venir ridefiniti dai valori del *

Perche` usi il display:inline nei[*]? Di solito crea problemi. Se e` per affiancare i blocchi e` meglio il float.

E poi vedo che fai uso di float, ma non vedo mai usato il clear (salvo nel footer). In linea di massima ad ogni gruppo di float, deve seguire un clear che "chiuda" il blocco che contiene i float (vedi ad esempio [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float)

[Nayaril]

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

Avresti un suggerimento? probabilmente ho dimenticato una parte di codice...


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;
}

[fcaldera]

riapri dopo aver letto il regolamento in evidenza, grazie.