Bonjours tout le monde,
Débutant dans le langage Html/css, j'ai rencontré une différence de rendu entre FF , IE8 et Opéra. En effet dans ce dernier j'ai observé un décalage dans mes disposition que je ne retrouve pas sous FF et IE8. J'aimerais comprendre d'où viens cette différence, mon css doit surement comporter des erreurs mais je n'arrive pas à en trouver l'origine.
je vous donne également un liens permettant de voir le décalage qui n'intervient que sous Opéra j'utilise la version 11.01.
zyaw.free.fr
Voila le code html:
Code Css:
Modifié par abidebole (08 Mar 2011 - 11:19)
Débutant dans le langage Html/css, j'ai rencontré une différence de rendu entre FF , IE8 et Opéra. En effet dans ce dernier j'ai observé un décalage dans mes disposition que je ne retrouve pas sous FF et IE8. J'aimerais comprendre d'où viens cette différence, mon css doit surement comporter des erreurs mais je n'arrive pas à en trouver l'origine.
je vous donne également un liens permettant de voir le décalage qui n'intervient que sous Opéra j'utilise la version 11.01.
zyaw.free.fr
Voila le code html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Test de positionnement</title>
<style type="text/css">
@import url(Html_positionnement_test.css);
</style>
</head>
<body>
<div id="conteneur_global"> <!--Cette division contient l'ensemble de la page, je le considére comme mon calque principal-->
<div id="conteneur_central"> <!--cette division, va elle contenir les elements d'interfaces ainsi que le contenus consultable-->
<div id="en_tete">
<ul id="nav_tete">
<li><a href="" >Menu_1</a></li>
<li><a href="" >Menu_2</a></li>
<li><a href="" >Menu_3</a></li>
<li><a href="" >Menu_4</a></li>
</ul>
</div>
<div id="wrap">
<div id="contenus_1" >
<p class="vert">Cras porttitor pellentesque eros, sed vulputate lectus laoreet sit amet. Morbi purus sapien, condimentum vitae tempus sed, malesuada id purus. Phasellus odio felis, imperdiet in rhoncus a, vulputate vel lorem. Sed rhoncus tempus aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum sapien vitae mauris interdum aliquet. Suspendisse pellentesque vulputate mauris, sed sagittis urna porttitor eget. Pellentesque a elit arcu, quis scelerisque odio. Nunc sed neque urna. Integer at turpis nec nisi eleifend pellentesque eget vel quam. Donec fermentum blandit vulputate. Donec et rhoncus nisi. Ut nec mi ante, nec vehicula sapien. Duis ornare posuere suscipit. Suspendisse sed mi vitae dolor tempor sollicitudin. Proin sollicitudin tortor vel quam elementum dignissim. Fusce dictum rhoncus massa. Donec ante risus, lacinia ac condimentum id, hendrerit in risus. Donec aliquam consequat rhoncus. Mauris id nisl nunc.
</p>
<p class="bleu">Cras porttitor pellentesque eros, sed vulputate lectus laoreet sit amet. Morbi purus sapien, condimentum vitae tempus sed, malesuada id purus. Phasellus odio felis, imperdiet in rhoncus a, vulputate vel lorem. Sed rhoncus tempus aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum sapien vitae mauris interdum aliquet. Suspendisse pellentesque vulputate mauris, sed sagittis urna porttitor eget. Pellentesque a elit arcu, quis scelerisque odio. Nunc sed neque urna. Integer at turpis nec nisi eleifend pellentesque eget vel quam. Donec fermentum blandit vulputate. Donec et rhoncus nisi. Ut nec mi ante, nec vehicula sapien. Duis ornare posuere suscipit. Suspendisse sed mi vitae dolor tempor sollicitudin. Proin sollicitudin tortor vel quam elementum dignissim. Fusce dictum rhoncus massa. Donec ante risus, lacinia ac condimentum id, hendrerit in risus. Donec aliquam consequat rhoncus. Mauris id nisl nunc.
</p>
<p class="rouge">Cras porttitor pellentesque eros, sed vulputate lectus laoreet sit amet. Morbi purus sapien, condimentum vitae tempus sed, malesuada id purus. Phasellus odio felis, imperdiet in rhoncus a, vulputate vel lorem. Sed rhoncus tempus aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum sapien vitae mauris interdum aliquet. Suspendisse pellentesque vulputate mauris, sed sagittis urna porttitor eget. Pellentesque a elit arcu, quis scelerisque odio. Nunc sed neque urna. Integer at turpis nec nisi eleifend pellentesque eget vel quam. Donec fermentum blandit vulputate. Donec et rhoncus nisi. Ut nec mi ante, nec vehicula sapien. Duis ornare posuere suscipit. Suspendisse sed mi vitae dolor tempor sollicitudin. Proin sollicitudin tortor vel quam elementum dignissim. Fusce dictum rhoncus massa. Donec ante risus, lacinia ac condimentum id, hendrerit in risus. Donec aliquam consequat rhoncus. Mauris id nisl nunc.
</p>
<p class="orange">Cras porttitor pellentesque eros, sed vulputate lectus laoreet sit amet. Morbi purus sapien, condimentum vitae tempus sed, malesuada id purus. Phasellus odio felis, imperdiet in rhoncus a, vulputate vel lorem. Sed rhoncus tempus aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum sapien vitae mauris interdum aliquet. Suspendisse pellentesque vulputate mauris, sed sagittis urna porttitor eget. Pellentesque a elit arcu, quis scelerisque odio. Nunc sed neque urna. Integer at turpis nec nisi eleifend pellentesque eget vel quam. Donec fermentum blandit vulputate. Donec et rhoncus nisi. Ut nec mi ante, nec vehicula sapien. Duis ornare posuere suscipit. Suspendisse sed mi vitae dolor tempor sollicitudin. Proin sollicitudin tortor vel quam elementum dignissim. Fusce dictum rhoncus massa. Donec ante risus, lacinia ac condimentum id, hendrerit in risus. Donec aliquam consequat rhoncus. Mauris id nisl nunc.
</p>
</div>
<div id="contenus_2">
<p class="vert">Cras porttitor pellentesque eros, sed vulputate lectus laoreet sit amet. Morbi purus sapien, condimentum vitae tempus sed, malesuada id purus. Phasellus odio felis, imperdiet in rhoncus a, vulputate vel lorem. Sed rhoncus tempus aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum sapien vitae mauris interdum aliquet. Suspendisse pellentesque vulputate mauris, sed sagittis urna porttitor eget. Pellentesque a elit arcu, quis scelerisque odio. Nunc sed neque urna. Integer at turpis nec nisi eleifend pellentesque eget vel quam. Donec fermentum blandit vulputate. Donec et rhoncus nisi. Ut nec mi ante, nec vehicula sapien. Duis ornare posuere suscipit. Suspendisse sed mi vitae dolor tempor sollicitudin. Proin sollicitudin tortor vel quam elementum dignissim. Fusce dictum rhoncus massa. Donec ante risus, lacinia ac condimentum id, hendrerit in risus. Donec aliquam consequat rhoncus. Mauris id nisl nunc.
</p>
<p class="vert">Cras porttitor pellentesque eros, sed vulputate lectus laoreet sit amet. Morbi purus sapien, condimentum vitae tempus sed, malesuada id purus. Phasellus odio felis, imperdiet in rhoncus a, vulputate vel lorem. Sed rhoncus tempus aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum sapien vitae mauris interdum aliquet. Suspendisse pellentesque vulputate mauris, sed sagittis urna porttitor eget. Pellentesque a elit arcu, quis scelerisque odio. Nunc sed neque urna. Integer at turpis nec nisi eleifend pellentesque eget vel quam. Donec fermentum blandit vulputate. Donec et rhoncus nisi. Ut nec mi ante, nec vehicula sapien. Duis ornare posuere suscipit. Suspendisse sed mi vitae dolor tempor sollicitudin. Proin sollicitudin tortor vel quam elementum dignissim. Fusce dictum rhoncus massa. Donec ante risus, lacinia ac condimentum id, hendrerit in risus. Donec aliquam consequat rhoncus. Mauris id nisl nunc.
</p>
</div>
</div>
<div id="contenus_3">
<p class="vert">Cras porttitor pellentesque eros, sed vulputate lectus laoreet sit amet. Morbi purus sapien, condimentum vitae tempus sed, malesuada id purus. Phasellus odio felis, imperdiet in rhoncus a, vulputate vel lorem. Sed rhoncus tempus aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum sapien vitae mauris interdum aliquet. Suspendisse pellentesque vulputate mauris, sed sagittis urna porttitor eget. Pellentesque a elit arcu, quis scelerisque odio. Nunc sed neque urna. Integer at turpis nec nisi eleifend pellentesque eget vel quam. Donec fermentum blandit vulputate. Donec et rhoncus nisi. Ut nec mi ante, nec vehicula sapien. Duis ornare posuere suscipit. Suspendisse sed mi vitae dolor tempor sollicitudin. Proin sollicitudin tortor vel quam elementum dignissim. Fusce dictum rhoncus massa. Donec ante risus, lacinia ac condimentum id, hendrerit in risus. Donec aliquam consequat rhoncus. Mauris id nisl nunc.
</p>
<p class="vert">Cras porttitor pellentesque eros, sed vulputate lectus laoreet sit amet. Morbi purus sapien, condimentum vitae tempus sed, malesuada id purus. Phasellus odio felis, imperdiet in rhoncus a, vulputate vel lorem. Sed rhoncus tempus aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum sapien vitae mauris interdum aliquet. Suspendisse pellentesque vulputate mauris, sed sagittis urna porttitor eget. Pellentesque a elit arcu, quis scelerisque odio. Nunc sed neque urna. Integer at turpis nec nisi eleifend pellentesque eget vel quam. Donec fermentum blandit vulputate. Donec et rhoncus nisi. Ut nec mi ante, nec vehicula sapien. Duis ornare posuere suscipit. Suspendisse sed mi vitae dolor tempor sollicitudin. Proin sollicitudin tortor vel quam elementum dignissim. Fusce dictum rhoncus massa. Donec ante risus, lacinia ac condimentum id, hendrerit in risus. Donec aliquam consequat rhoncus. Mauris id nisl nunc.
</p>
</div>
<div id="en_pied">
<ul id="nav_pied">
<li><a href="" target="_blank">Contact_1</a></li>
<li><a href="" target="_blank">Contact_2</a></li>
<li><a href="" target="_blank">Contact_3</a></li>
</ul>
</div>
</div><!--fin div centrale-->
</div> <!-- fin div globlal-->
</body>
</html>Code Css:
/* Reset de certain elements */
* {
margin: 0 ;
padding: 0 ;
}
html {
position: relative;
height: 100%;
font-size: 100.1%;
}
body {
height:100%;
line-height: 1.2em;
overflow-y:scroll;
}
ul, ol{
list-style-type: none;
}
/* Fin du reset */
body {
font-size: 0.75em;
background-color: #F9F9F9;
font-family: Arial, "MS Trebuchet", sans-serif;
}
a{
color: #E8F1F7;
text-decoration: none;
}
/*Le conteneur global mesure 1659*841 pixel*/
#conteneur_global{
width:100%;
}
/*Le conteneur centrale mesure 1327*841 pixel*/
#conteneur_central{
width: 80%;
margin: 0 auto;
background-color: #EDF1F4 ;
}
#en_tete{
width:100%;
background-color: #8FA9BC;
margin: 0 ;
padding: 5px 0;
}
#wrap{
position: relative;
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
}
#contenus_1{
float: right;
width:48.5%;
background-color: red;
margin: 0 ;
padding: 0 10px 0 10px;
}
#contenus_2{
width:48.5%;
background-color: yellow;
margin: 0 ;
padding:0 10px 0 10px;
}
#contenus_3{
width:98.5%;
background-color: green;
margin: 0 ;
padding:0 10px 0 10px;
}
/* Un paragraphe mesure 597*130 pixel */
p{
text-align: justify;
width: 100%;
margin: 0 ;
padding: 0 ;
}
#en_pied{
width:100%;
background-color: #436896;
margin: 0 0;
padding: 5px 0;
}Modifié par abidebole (08 Mar 2011 - 11:19)