28172 sujets

CSS et mise en forme, CSS3

Bonjour,

voilà je viens de remettre un site à jour seulement voilà
tout fonctionne sur firefix chrome et safari sauf sur IE ou les div sont completement eparpillées

voici le lien du site www.meublesloizeau.com



et les styles








header {
	width: 1024px;
	margin-left: -512px;
	left: 50%;
	position: fixed;
	z-index: 1;
	height: 136px;
	background: url(images/fond_head.png) no-repeat;
	padding-top: 15px;
	}
nav {
	float: left;
	height: 300px;
	width: 264px;
	display:inline;
	position: fixed;
	padding-top:0px;
}
section {
	width: 500px;
	margin-right: 250px;
	float: right;
	text-align: left;
}



#milieu {
	height: 500px;
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 156px;
}
body {
	margin: 0px;
	background: url(images/wallpaper.jpg) repeat;
}


footer {
	background: url(images/wood.jpg);
	height: 300px;
	position : fixed;
	top: 85%;
	width: 2006px;
	margin-left: 50%;
	left: -1003px;
	z-index:1;
}


#gauche_bas {
	position: absolute;
	right: 1250px;
	top: -200px;
}
#cage {
	
	position: absolute;
	right: 650px;
	top: -130px;
}
#chaise {
	position: absolute;
	right: 380px;
	top: -130px;
	
}
#tapis {
	
	
	position: absolute;
	right: 750px;
	top: -4px;
}



#logo {
	float: left;
	position: absolute;
}
#bd {
	float: right;
	position: absolute;
	top: 0px;
	right: 0px;
	
	
}
h1 {
	float: left;
	position: absolute;
	left: 280px;
	font: 2em Georgia, "Times New Roman", Times, serif;
	color: #948177;
	text-shadow:  #FFF 1px 1px 1px; 
	margin-top: 46px;
	
}
#label {
	background: url(images/label.png);
	height: 200px;
	width: 200px;	
	
}


nav a{
	color: #948177;
	text-decoration: none;
	letter-spacing: 1px;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-shadow:  #FFF 1px 1px 1px; 
	
}

nav li{
	
	text-align: right;
	padding-right: 30px;
	padding-top: 10px;
	
}

nav li li{
	
	text-align: right;
	padding-right: 10px;
	padding-top: 0px;
	
}

nav ul li a{

	font-size: 120%;	
}

nav ul li ul li a{

	font-size: 90%;	
}

nav ul {

	list-style-type: none;
}

nav a:hover{
	color: #42210B;
	
}
p {
	color: #42210B;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-shadow:  #FFF 1px 1px 1px;
	text-align: left;
}





div#galerie 
{ 
    width: 500px ; 
    background: #eed ; 
    border: 1px solid #dcb ; 
    padding: 0px ; 
    margin: 0px 0px ; 
    text-align: center ; 
    font: 0.9em Georgia, serif ; 
} 
 
 
 div#galerie2 
{ 
    width: 500px ; 
    background: #eed ; 
    border: 1px solid #dcb ; 
    padding: 0px ; 
    margin: 0px 0px ; 
    text-align: center ; 
    font: 0.9em Georgia, serif ; 
}
ul#galerie_mini 
{ 
    margin: 0 ; 
    padding: 0 ; 
    list-style-type: none ; 
} 
 
ul#galerie_mini li 
{ 
    float: left ; 
} 
 
ul#galerie_mini li a img 
{ 
    margin: 2px 4px ; 
    border: 1px solid #dcb ; 
} 
 
dl#photo 
{ 
    clear: both ; 
    margin: 0 auto ; 
} 
 
dl#photo dt 
{
	font: italic 1em/1em Georgia, serif;
	color: #dcb;
} 
 
dl#photo dd 
{ 
    margin: 0 ; 
} 
 
dl#photo img 
{ 
    border: 1px solid #dcb ; 


} 




#mac {
	position: absolute;
	right: 1400px;
	top: -150px;
}
#plan {
	position: absolute;
	right: 1275px;
	top: -200px;
}
#pencils {
	position: absolute;
	right: 1100px;
	top: -80px;
}
.numeros {
	font-size: xx-large;
	font-style: oblique;
	text-align: center;
}
#images_gallerie img {
	margin-top: 30px;
	margin-bottom: 35px;
}
#milieu a {
	text-align: center;
}
#contemporain1 {
	position: absolute;
	right: 1250px;
	top: -168px;
	
}
#oiseau1 a {
	border-width: 0px;
	border-style: 0;
	list-style: url(none) none;
}
a {
	color: #6B5E54;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#style1 {
	
	
	position: absolute;
	right: 1250px;
	top: -230px;
}


#style2 {
	
	position: absolute;
	right: 400px;
	top: -100px;
}
#oiseau1 {
	position: absolute;
	right: 1062px;
	top: -400px;
	text-decoration: none;
	border-width: 0px;
}
#oiseau2 {
	
	position: absolute;
	right:800px;
	top: -400px
}
#table_contact {
	position: absolute;
	right: 1250px;
	top: -165px;
}
#copeaux {
	
		position: absolute;
	right: 400px;
	top: -60px;
}


#news {
	
	position: absolute;
	right: 600px;
	top: -80px;
}
#centré p {
	text-align:center
}
#diapo {
	height: 560px;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	padding-top: px;
	cursor: main;
}
#FlashID {
	margin-right: auto;
	margin-left: auto;
	height: 560px;
	width: 800px;
}
#strong {
	font: 2em Georgia, "Times New Roman", Times, serif;
	text-shadow:  #FFF 1px 1px 1px;
	color: #42210B;

}
[code=css]

Modifié par anaisl (28 Jan 2011 - 17:56)
Bonjour, tu utilises des éléments de html5 tels que : <header>, <section>, <nav>, <footer> avec le mauvais doctype...

De plus, IE ne reconnaît pas ces éléments et tu dois régler le problème avec javascript.

Un peu de lecture pour mieux comprendre : Osez HTML5