Votre question

[résolu]Problème sous firefox avec ma feuille de style css

Tags :
  • Graphisme
  • Programmation
Dernière réponse : dans Programmation
7 Juin 2006 20:21:42

Bonjour,

J'ai un problème avec mon graphisme, sous Ie et maxton, tous va bien mais sous firefox, les boutons du menu ne sont pas décalés là ou il devraient l'être...

Voici l'adresse de mon site:
http://www.mondedelanuit.info

et ma feuille css:
Citation :
body {
background-color:#4c4c4c; /*Couleur de fond de la page Web*/
color:#000000; /*Couleur du texte*/
font-family:Verdana, Arial, Helvetica, sans-serif; /*Polices d’écriture*/
font-size:11px; /*Taille d’écriture*/
padding:0; /*Pour que la page n’ai aucune marge*/
margin:0; /*Pour que la page n’ai aucune marge*/
}

#contenu {
width:800px; /*Largeur du design*/
margin:0 auto 0 -400px; /*Marges du design ( la 4eme marge représente la moitié de la largeur du div*/
position:absolute;
top:25px; /*25px entre le coin supérieur de l’écran et le design*/
left:50%; /*50% de marge ( cela centrera le design )*/
background-image:url('./images/background.jpg'); /*Motif si il y’en a un*/
background-repeat:repeat; /*Duplication du motif sur les axes x et y*/
border:0px solid #000000; /* Bordure encadrant le design */
}

#menu_gauche {
background-image:url('./image/menu_fond.jpg') ;
background-repeat:repeat-y ;
width:218px;
float:left;
margin-top:13px;
margin-left:7px !important;
margin-left:3px;
}

#fondtexte {
background-image:url('./image/texte_fond.jpg') ;
background-repeat:repeat-y ;
width :555px ;
float :right ;
margin-top :11px ;
margin-right: 14px !important;
margin-right:7px;
}

#texte {
width :459px ;
float :right ;
margin-right: 56px !important;
margin-right: 28px;
}

#fondtexte p {
padding :10px ;
margin-left:40px !important;
margin-left:40px;
}

#footer {
background-image:url('./image/footer.jpg');
width:776px;
height:27px;
float:left;
margin-top:3px;
margin-left:6px !important;
margin-left:3px;
}

p.copyright {
margin-top:6px;
text-align:center;
color:#000066;
font-size:9px;
font-family:Verdana;
}

p.copyright a {
color:#666666;
text-decoration:underline;
font-weight:bold; /* texte en gras */
}

p.copyright a:hover {
color:#FFFFFF;
}

/* Reglages personnels : */
ul , li { margin:0; padding:0; list-style-type:none; text-align:center; } /* Pas de marges automatique dans les listes, ni de puces */

a { color:#5E0000; text-decoration:none; }/*Paramètres des liens*/
a:hover { color:#64A2EC; }/*Paramètres des liens quand le pointeur est sur ceux-ci*/

h1 { text-align:center; margin:0; font-family: Monotype Corsiva; }/*Le texte des balises h1 est centré ( car il est souvent utilisé pour les titres), et cette balise n’a plus de marge automatique */
p { margin:0; padding:0; }/*Pas de marges automatiques sur les <p> */

div.clear { clear:both; }/*Nous verrons ceci un peu plus tard. */
img { display:block ; border:0; }/*Aucune bordure sur les <img>*/


Merci d'avance si vous pouvez m'aider, je ne vois pas du tout d'où vient le problème et je commence à desespérer :-(

Autres pages sur : resolu probleme firefox feuille style css

a c 145 L Programmation
7 Juin 2006 21:04:03

déjà des erreurs:
ne met pas div#contenu mais plutôt #contenu (et pareil pour les autres)
Ensuite, il y a des espaces entre tes <li> et tes images, ainsi qu'entre tes images et tes </li>

Et ton menu gauche, ne le met pas en class mais en id (définition avec #menu_gauche et appel avec <div id="menu_gauche">)
7 Juin 2006 21:45:54

Merci beaucoup!!!!

J'ai corrigé ces erreurs, mais le problème persiste...
J'ai mis la nouvelle feuille a la place de l'ancienne, et mes fichiers corigés en ligne.

J'ai essayé de mettre du texte dans le menu et celui ci est bien centré :-?
Donc le script marche, mais pas pour mes images :-(

Contenus similaires
8 Juin 2006 07:40:53

faut juste changer le padding

ul , li {
margin:0px;
padding-left:24px;
list-style-type:none;
text-align:center;
}

et ton menu est centré.
8 Juin 2006 10:00:07

Bonjour,

J'ai essayé la modif et ca marche sous ff!!...mais plus sous IE :-? :-?

J'ai tenté de résoudre le probléme en modifiant cette petite partie du css:

Citation :
#menu_gauche {
background-image:url('./image/menu_fond.jpg') ;
background-repeat:repeat-y ;
width:218px;
float:left;
margin-top:13px;
margin-left:7px !important;
margin-left:3px;
voice-family: "\"}\"";
voice-family: inherit;
width: 120px; }
.ie5debug {
}


Et ca marche!! Tout est bien à sa place!!
Mais... Il me manque le bord de mon menu sur la droite avec Firefox...

J'ai mis la nouvelle version en ligne sur le lien du début.
J'ai aussi un probléme pour espacer les boutons du menu sous firefox :-(

Encore merci pour vos reponses, je dois plus être trop loin de la soluce...
8 Juin 2006 10:42:11

Bon, premier problème réglé:

J'avais un css qui marché pour IE et un qui marché pour firefox, j'ai donc fais 2 css différents pour chaque navigateur, c'est pas trop la classe mais ca marche :-D :-D .

Pour que ca fonctionne, voila le code à rajouter entre les <head> dans la pages html:

Citation :
<link rel="stylesheet" type="text/css" href="./style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="./IEstyle.css" />
<!endif-->


Avec IEstyle et style les 2 fichiers css.


Et second probléme d'espacement des boutons du menu resolu avec... des <br>...


Si quelqu'un a une solution plus classe, je suis preneur!


Merci a tous!
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS