28172 sujets

CSS et mise en forme, CSS3

Probleme affichage [resolu]

Bonjour,

je suis entrain de creer un site web et je me retrouve avec un soucis d'affichage.
j ai consulter les different billet relatif a ce sujet et je n arrive pas a trouver la solution.
le probleme d affichage se situe entre ie et firefox tout va bien sur firefox mais sur ie c est un peu le delire.

pouvez vous me donner un coup de main svp?

merci d avance

Gilles
Modifié par Gilles40 (18 May 2009 - 16:45)
voici le html

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<title>C'LAMOUR</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>



</head>


<body>

<div id="page">
<div id="conteneur">

<div id="header">
<ul id="menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="index.html">Collection</a></li>
<li><a href="index.html">Bijoux</a></li>
<li><a href="index.html">Sacs</a></li>
<li><a href="index.html">Tailles</a></li>
<li><a href="index.html">Boutique</a></li>
</ul>
</div>


<div id="contenu">
<div id="contenu1">
<div id="texte1">Accueil</div>
<div id="cadre1"></div>
</div>

<div id="contenu2">
<div id="texte2">Aper&ccedil;u des cr&eacute;ations...</div>
</div>

</div>

</div>
</div>
</body>
</html>


et le css

body{
text-align:center;
margin:10px;
}

#page {
padding: 0px;
width: 980px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background: url(Theme/fond.jpg) no-repeat center;
}

#conteneur {
width: 650px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
text-align:left;
font-family: "Goudy Old Style";
}

#header {
position:relative;
margin: 0px;
padding: 0px;
height: 173px;
width: 650px;
background: url(Theme/header.gif);
}

#menu{
position:absolute;
width:650px;
bottom:0;
left:0;
padding:0;
margin:0;
}

ul#menu li{
float:left;
margin-left: 7px;
text-align: center;
list-style-type: none ;
}

ul#menu li a{
width: 100px;
line-height: 26px;
font-size: 12pt;
letter-spacing: 0px;
color: #fff;
display: block;
text-decoration: none;
}

ul#menu li a:hover{
font-weight:bold;
}

#contenu{
padding:0;
width:650px;
}

#contenu1{
position:relative;
background:url(theme/fond2.png);
height:394px;
margin:10px 0 0 0;
border-left:solid red 1px;
border-bottom:solid red 1px;
border-right:solid red 1px;
}

#texte1{
width:622px;
height:20px;
padding:12px 0 0 0;
margin: 0 0 0 27px;
font-size:14pt;
font-weight:bold;
color:red;
text-align:left;
}

#cadre1{
width:399px;
height:299px;
position:absolute;
background:url(theme/presentation.jpg)no-repeat center;
margin-top: 35px;
margin-left:125px;
}

#contenu2{
background:url(theme/fond3.png);
height:269px;
margin:10px 0 0 0;
border-left:solid red 1px;
border-bottom:solid red 1px;
border-right:solid red 1px;
}

#texte2{
width:622px;
height:20px;
padding:5px 0 0 0;
margin: 0 0 0 27px;
font-size:14pt;
font-weight:bold;
color:red;
}
Ben écoute, sans les images j'ai exactement la même chose sur IE7 et Firefox3.

Donc d'une part, si tu pouvais nous mettre un exemple en ligne, qu'on ait un résultat avec image ça serait pas mal.
D'autre part si tu pouvais nous préciser la version d'IE ...
c est pas ie7 mais ie6

j ai essayer aussi sur ie7 et ca fait la meme chose

Gilles
Modifié par Gilles40 (18 May 2009 - 12:17)
yessssssssssss, j ai trouvé, j ai retirer le no-repeat et le center dans l image du #cadre1 et la ca fonctionne mais je ne comprends pas pourquoi.

Gilles
En fait, c'est plus le fait qu'il manque un espace entre l'URL et le no-repeat qui provoque le problème.
Sujet clos
Aller à