28172 sujets

CSS et mise en forme, CSS3

Problème diffèrent sous IE et Firefox pour mise en forme d'un site.

Bonjour,

je débute en xhtml et css, et j'ai deux soucis sur la mise en forme d'un site que je suis en train de faire.

Mon premier soucis est sur Firefox, le site fonctionne bien dans son ensemble mais il y a un décalage entre la bannière du site et le background utilisé comme fond pour le menu.

A ouvrir sur Firefox pour voir ce bug, car sur IE, il n'y a pas de bug à ce niveau la, ca fonctionne même bien comme il faut:
http://onebox.verygames.net/test/

Maintenant, le deuxième soucis, est sur IE, c'est le contenu, l'image qui permet d'entrer de sauter des lignes afin de faire un fond qui s'enchaine par rapport aux texte, le problème c'est que sous IE, ca ne fonctionne pas contrairement à Firefox ...

Ce serait sympa si quelqu'un pouvait me sortir de cette galère, car j'ai du mal à avancé avec ces deux problèmes ... Smiley decu

Html:
a écrit :
<?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>OneBox.Fr | CounterStrike:Source</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="conteneur">
<div id="top"></div>
<div id="menu">
<ul>
<li><a href="http://#">ACCUEIL</a></li>
<li><a href="http://#">TEAM</a></li>
<li><a href="http://#">FORUMS</a></li>
<li><a href="http://#">TELECHARGEMENTS</a></li>
<li><a href="http://#">VIDEOS</a></li>
<li><a href="http://#">MATCHS</a></li>
<li><a href="http://#">CONTACT</a></li>
</ul>
</div>
<div id="contenu">
<div id="news">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla erat in neque. Nulla lacinia blandit dolor. Integer et leo congue
tortor pellentesque cursus. Nullam sed quam. Phasellus laoreet pede sit amet risus. Sed dolor sapien, rutrum sed, euismod ac, tristique vitae,
lectus. Maecenas eu odio. Etiam sagittis mattis sem. In sit amet velit ac libero adipiscing consectetur. Proin ut justo nec metus varius commodo.
Aliquam convallis. Duis aliquet iaculis tellus. Donec vestibulum.</p>
<p>Curabitur lacus. Nunc odio. Morbi sagittis feugiat nibh. Aliquam congue dui. Praesent ut velit. Quisque elit pede, dignissim non, condimentum
at, gravida non, dolor. Vivamus ut magna eu nulla luctus dictum. Nulla molestie, massa non blandit viverra, metus sem vehicula justo, quis
condimentum massa lacus quis risus. Nulla sagittis elit vitae metus. Quisque eget pede a eros imperdiet auctor. Nulla ullamcorper bibendum orci.
Etiam viverra. In congue ornare quam. Donec turpis diam, pretium in, fringilla sed, facilisis et, massa. Vestibulum pretium tellus eget ante
interdum tempus. Proin et lectus et purus blandit luctus. Donec fermentum, ipsum porttitor mollis suscipit, ipsum dolor tristique nunc, imperdiet
gravida sem libero vitae ipsum. </p>
<p class="droite">Postée par <a href="http://#">Rafik</a> le dimanche 30 novembre 2008 à 12:34</p>

<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla erat in neque. Nulla lacinia blandit dolor. Integer et leo congue
tortor pellentesque cursus. Nullam sed quam. Phasellus laoreet pede sit amet risus. Sed dolor sapien, rutrum sed, euismod ac, tristique vitae,
lectus. Maecenas eu odio. Etiam sagittis mattis sem. In sit amet velit ac libero adipiscing consectetur. Proin ut justo nec metus varius commodo.
Aliquam convallis. Duis aliquet iaculis tellus. Donec vestibulum.</p>
<p>Curabitur lacus. Nunc odio. Morbi sagittis feugiat nibh. Aliquam congue dui. Praesent ut velit. Quisque elit pede, dignissim non, condimentum
at, gravida non, dolor. Vivamus ut magna eu nulla luctus dictum. Nulla molestie, massa non blandit viverra, metus sem vehicula justo, quis
condimentum massa lacus quis risus. Nulla sagittis elit vitae metus. Quisque eget pede a eros imperdiet auctor. Nulla ullamcorper bibendum orci.
Etiam viverra. In congue ornare quam. Donec turpis diam, pretium in, fringilla sed, facilisis et, massa. Vestibulum pretium tellus eget ante
interdum tempus. Proin et lectus et purus blandit luctus. Donec fermentum, ipsum porttitor mollis suscipit, ipsum dolor tristique nunc, imperdiet
gravida sem libero vitae ipsum. </p>
<p class="droite">Postée par <a href="http://#">Rafik</a> le dimanche 30 novembre 2008 à 12:34</p>
</div>
<div id="navigation">Navigation</div>
<br clear="all"/>
</div>
</div>
<div id="bas"></div>
</body>
</html>



Css:
a écrit :
body{
background: #333333;
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}

#conteneur{
width:1000px;
margin:0 auto;
}

.droite{
text-align:right;
}

a{
text-decoration:none;
color:white;
}
a:hover{
color:#c30000;
}

#top{
height:129px;
background:url(images/top.jpg) no-repeat top center;
font-size:18px;
text-align:center;
line-height:300px;
color:white;
}

#menu{
height:40px;
background:url(images/menu.jpg) no-repeat top center;
}

#menu ul li{
list-style:none;
float:left;
padding:0;
}

#menu ul li a {
font-size:18px;
padding:0 20px;
text-decoration:none;
text-align:center;
line-height:40px;
color:white;
}

#menu ul li a:hover{
color:#c30000;
}

#contenu{
background:url(images/contenu.jpg) repeat-y left;
padding: 0 5px;
font-size:10px;
color:white;
}

#news{
float:left;
width:687px;
}

#news h1{
background:url(images/news_h1.jpg);
display:block;
width:667px;
height:25px;
line-height:25px;
font-size:1em;
font-weight:bold;
padding:0 10px;
}

#news p{
padding:0 15px;
color:#bababa;
}

#navigation{
float:right;
}

.block{
width:160px;
margin:10px 0 0 0;
padding:10px 0 0 10;
}

/*/// Footer ///*/
#bas{
background:url(images/footer.jpg) no-repeat;
width:1000px;
height:23px;
margin: 0 auto;
}


EDIT: Le bug sous Firefox vient apparemment du menu (texte+lien) qui crée un décalage sous Firefox.
Le bug sous IE vient surement du "repeat-y left" qui n'a pas l'air de fonctionner sous IE ... Smiley sweatdrop

Merci d'avance.
Modifié par Rafik10 (04 Dec 2008 - 14:53)
salut pour le menu sous ff c'est un probleme de marge qui peut etre réglé comme suit :
* {
margin:0;
padding:0;
}


a savoir que ie, ff, ... n'ont pas le même modéle de marge et padding par défaut cette règle permet de mettre ceci à 0

pour ie je ne peux pas tester la mais si tu penses que le souci vient de background essayes :

background-image:url('images/contenu.jpg')
background-repeat: repeat-y;
background-position: top left;

Modifié par gok6tm (04 Dec 2008 - 15:10)
Salut gok6tm,

merci pour ta réponsee, ta première solution a réglé mon premier problème, par contre, j'ai essayé ta deuxième solution, ça ne change pas vraiment, j'ai remarqué que dans mon deuxième problème, sur IE, la barre qui est censé se répété apparait qu'une seule fois contrairement à Firefox.

Sinon, sur Firefox c'est parfait, merci gok6tm !!

Existe-t'il une autre technique ou est-ce un bug connu à propos du "repeat-y" sous IE ?

PS: J'ai mis à jour les fichiers du site.
Modifié par Rafik10 (04 Dec 2008 - 18:08)
Administrateur
gok6tm a écrit :
salut pour le menu sous ff c'est un probleme de marge qui peut etre réglé comme suit :
* {
margin:0;
padding:0;
}


a savoir que ie, ff, ... n'ont pas le même modéle de marge et padding par défaut cette règle permet de mettre ceci à 0

Le sélecteur universel (*) est très pratique pour détecter un souci de marge mais il ne faut PAS l'utiliser tel quel sur un site: ça va remettre à zéro les marges de tous les autres éléments sans qu'on s'en doute et probablement introduire des erreurs à d'autres endroits Smiley ohwell
Une fois détecté qu'il y avait un problème de marge, mieux vaut empoigner Firebug et chercher de quelle marge il s'agit. Ça prend pas bien longtemps! Et ensuite rajouter les 2 instructions avec le sélecteur qui va bien (genre #menu ou peut-être quelque chose de plus spécifique)

EDIT: ou pour les adorateurs de la remise à zéro, voir du côté de 'Reset CSS'
Modifié par Felipe (04 Dec 2008 - 22:17)
Administrateur
Rafik10 a écrit :
Existe-t'il une autre technique ou est-ce un bug connu à propos du "repeat-y" sous IE ?

La norme dit que c'est 
left top
et pas "top left" mais dans pas mal de situations les deux passent ...
Sinon le problème ne vient peut-être pas de là et je t'invite à rajouter une couleur de fond à ton instruction background présente pour #contenu ligne 62:
#contenu {
background: pink url(images/contenu.jpg) left center repeat-y;
color: white;
font-size: 10px;
padding: 0 5px;
}

Si tu vois un joli rose, fais signe Smiley cligne
Salit Felipe,

j'ai essayé en mettant ta technique, le problème est toujours la, pas de fond rose, juste une seule barre qui est censé se répéter est affiché, mais merci quand même pour ton aide. Smiley cligne
Avec ce passage dans le styles.css, ca fonctionne bien sous Firefox:

a écrit :
#contenu{
background:url(images/contenu.jpg) repeat-y left;
padding: 0 5px;
font-size:10px;
color:white;
}


J'ai essayé de l'écrire d'une autre façon, mais cette fois ci ça fonctionne bien sous IE et ça bug sous Firefox:

a écrit :
#contenu{
background:url(images/contenu.jpg) repeat-y scroll 0 0;
float:left;
padding: 0 5px;
font-size:10px;
color:white;
}


Ce problème me rend fou, car j'ai du mal à avancer mon site, si je me retrouve au final avec une impasse, n'empêche ça m'a permis de mieux comprendre le xhtml-css. ^^

Si, vous avez la solution afin de faire un css compatible au deux navigateurs sans bug, ce serait pas de refus.

Merci d'avance.
Est-ce qu'il est possible d'avoir plusieurs .css qui s'active par rapport au navigateur ou dans le même .css avec des réglages différents l'un pour IE et l'autre pour FF ?
Je mettrais le fond sur le bloc "conteneur"..., essaye ça:


#conteneur {
background:transparent url(images/contenu.jpg) repeat-y left top;
margin:0 auto;
width:1000px;
}
#contenu{
color:white;
font-size:10px;
padding:0 5px;
}


Enlève

* {

margin:0;

padding:0;

}


Et mets simplement
#menu ul {
margin: 0;
padding: 0;
}


Je ne connais pas
<br clear="all"/>


Je prèfere mettre une balise <hr />

avec dans le css:

hr {
clear: both;
margin: 0;
}


D'ailleurs ton problème vient peut être de là, car le fond qui ne s'affiche pas vient du fait que le clear ne s'effectue pas sous IE.
Modifié par Kyrosr34 (10 Dec 2008 - 23:39)
essaye voir de supprimer ça : 

<?xml version="1.0" encoding="UTF-8"?>


t'en a pas besoin puisque tu utilise XHTML comme de l'HTML (groumph >_<)
Merci pour vos réponses, grâce à vous le problème est réglé, la solution vient de Kyrosr34, avec ça façon d'écrire le conteneur et le contenu.
Administrateur
Rafik10 a écrit :
Est-ce qu'il est possible d'avoir plusieurs .css qui s'active par rapport au navigateur ou dans le même .css avec des réglages différents l'un pour IE et l'autre pour FF ?

Très bonne définition d'un commentaire conditionnel Smiley lol

EDIT: [Résolu] ?
Modifié par Felipe (12 Dec 2008 - 13:20)
Sujet clos
Aller à