28112 sujets

CSS et mise en forme, CSS3

[RESOLU]Positionnement catastrophique sous FF 3.6 et IE 8

Bonjour,

désolé de squatter incessamment cette rubrique ^^

je commencais tranquillement à "csser" le site
quand j'ai eu l'idée de regarder ce que cela donnait
sur une version antérieure de navigateur web...

et pam la grosse claque....

pour bien rire, à regarder d'abord sur une derniere version de webbrowser
et ensuite une ancienne.
le site en cours


j'avoue ne pas trop comprendre pourquoi, j'obtiens une chose
si catastrophique

et comme d'habitute, tellement la tete dans le guidon
que je ne vois pas où je loupe le tout

le html


<!doctype html>
<html lang="fr">
<head>

<meta charset=UTF-8>

<title>auto-école du chêne</title>

<link rel="stylesheet" media="screen" href="ecran.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


</head>


<body>

<div id="container">
<div id="corps">
	<header id="header">
		<div id="logo"><img src="images/logo.png"/>
		</div>
			<nav id="menu">
				<ul>
					<li><a href="#home">accueil</a></li>
					<li><a href="#inscriptions">inscriptions</a></li>
					<li><a href="#forfaits">forfaits</a></li>
					<li><a>code en ligne</a></li>
					<li><a>infos/contact</a></li>
				</ul>
			</nav>
	<blockquote id="citation">‘‘ roulez au vert avec l’auto-école du chêne ,,</blockquote>
	</header>
	
	<section id="home">
		<h1 class="accueil">accueil</h1>
		
		<article id="bienvenue">
			<div class="image">
		<img src="images/bienvenue.png" width="194px"/>
			</div>
			<div class="pres">
				<h1>Qui sommes-nous ?</h1>
				<p>Fort de notre expérience, l'auto-école du Chêne vous propose de vous accompagner jusqu'à la réussite de votre examen de Code et de Conduite.</p>
			
			</div>
		</article>
	
	
	
	
	
	
	
	</section>
	
	





</div>



<aside id="side"></aside>


</div>




</body>

</html>





le css 


* {margin: 0; padding: 0;}

::selection {
background: #12bae0;
color: #fff;
opacity:1;
}



body, html

{
padding:0 ;
margin:0 ;

}


body

{
width:100%;



}

@font-face {

    font-family: 'KeffeesatzBold';

    src: url('yanonekaffeesatz-bold-webfont.eot');

    src: url('yanonekaffeesatz-bold-webfont.eot?#iefix') format('eot'),

         url('yanonekaffeesatz-bold-webfont.woff') format('woff'),

         url('yanonekaffeesatz-bold-webfont.ttf') format('truetype'),

         url('yanonekaffeesatz-bold-webfont.svg#webfont6O8kciU2') format('svg');
}   





@font-face {

    font-family: 'Keffeesatz';

    src: url('yanonekaffeesatz-light-webfont.eot');

    src: url('yanonekaffeesatz-light-webfont.eot?#iefix') format('eot'),

         url('yanonekaffeesatz-light-webfont.woff') format('woff'),

         url('yanonekaffeesatz-light-webfont.ttf') format('truetype'),

         url('yanonekaffeesatz-light-webfont.svg#webfontZ9mc2yQz') format('svg');

   



}
@font-face {
    font-family: 'Molot';
    src: url('molot-webfont.eot');
    src: url('molot-webfont.eot?#iefix') format('embedded-opentype'),
         url('molot-webfont.woff') format('woff'),
         url('molot-webfont.ttf') format('truetype'),
         url('molot-webfont.svg#MolotRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


#container
{

width:980px;
height:auto;
margin:0 auto;

}
#corps

{
float:left;}

#header
{
width:781px;
height:174px;
background-image:url(images/header.jpg);
}

#logo
{
position:relative;
float:left;
width:60px;
height:140px;
top:25px;
left:50px;
  -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#logo:hover
{

-moz-transform: scale(1) rotate(5deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1.1) rotate(360deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(5deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(5deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(5deg) translate(0px, 0px) skew(0deg, 0deg);
}

#menu
{position:relative;
width:650px;
float:left;
top:65px;
left:95px;

}

#menu ul {
 padding:0;
 margin:0;
 list-style-type:none;
 
 }
#menu li {
  margin-left:25px;
 float:left; /*pour IE*/
  -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
 }

#menu ul li a {
 display:block;
 float:left;   
font-family:molot;
 color:#9a8d5e;
 font-size:13pt;
text-decoration:none;
 text-align:left;
   -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
 }
 
#menu ul li a:hover,#menu ul li a:focus {
  color:#4bb8d1;
opacity:0.7;
 } 
 
 #citation
 {
 position:absolute;
font-family:Keffeesatzbold;
margin-left:200px;
color:#b3c03e;
font-size:20pt;
 top:130px;
 width:350px;
 }
 
 section#home
 {
 width:781px;
 height:655px;
 background-image:url(images/home.jpg);
 
 }
 
h1.accueil  {
position:relative;
width:50px;
left:40px;
 top:20px;


 font-family:molot;
 color:#9a8d5e;
 font-size:18pt;
 
 }
 
 #bienvenue
 
 {

 position:relative;
top:0px;

 width:200px;
 height:200px;
 
 }
 
 #bienvenue .image
 
 {
 
position:relative;
 left:80px;
 -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
 }
 
 #bienvenue .image:hover
 {
 -moz-transform: scale(1.2) rotate(5deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1.2) rotate(5deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1.2) rotate(5deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1.2) rotate(5deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.2) rotate(5deg) translate(0px, 0px) skew(0deg, 0deg);
z-index:1000;
 }
 
 #bienvenue .pres
 
 {
 position:relative;
display:inline-block;
float:left;
left:78px;
height:auto;
top:-20px;


 -webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
opacity:0.5;
border-radius:20px;
 
 }
 
  #bienvenue .pres h1

{
 font-family:KeffeesatzBold;
 font-size:30px;
 color:#9a8d5e;
 -webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
text-align:center;
}

#bienvenue .pres  p

{
 font-family:Keffeesatz;
text-align:justify;
word-spacing:4px;
}
 #side
 {
 position:relative;
 float:left;
 background-image:url(images/side.jpg);
 width:199px;
 height:828px;
 }

Modifié par waik (09 May 2011 - 09:33)
il semble que j'ai omis une chose très importante

un petit coup de tout cela 

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}


je ne mets pas encore ce sujet en résolu
n'ayant pas encore confirmé si le probleme venait de là

Smiley cligne
Modifié par waik (08 May 2011 - 16:38)
Sujet clos
Aller à