Margins non identifiées...

12 janvier 2006 à 20:00:00

Salut,
J'ai un petit problème de margins qui apparaissent sous Firefox, alors qu'elles sont déclarées à 0px...
Sous IE, pas de problème...

Si vous pouviez jetter un oel :
la page

/* CSS Document */

body{
width:754px;
margin:auto;
/*margin-top:20px;
margin-bottom:20px;*/
background-image:url(images/fond-diago.gif);
font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size:12px;

}

/* Header */

#header{
height:200px;
width:754px; /* 6px pour la bordure */
background-color:#FFFFFF;
text-align:center;
margin:0 0 0 0;

border-left-width:3px;
border-left-color:#FFCC00;
border-left-style:solid;

border-right-width:3px;
border-right-color:#FFCC00;
border-right-style:solid;

}

/* Menu */

#menu-haut{
width:754px; /* 6px pour la bordure */
height:36px;
background-image:url(images/barrerub.gif);
background-repeat:repeat-x;
margin:0px;

border-left-width:3px;
border-left-color:#FFCC00;
border-left-style:solid;

border-right-width:3px;
border-right-color:#FFCC00;
border-right-style:solid;
}

#menu-haut li{
display:inline;
color:#0099FF;
font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#corps{
background-color:#FFFFFF;
width:734px; /* 6px pour la bordure, 10 pour le padding left, et 10 pour le padding right */

text-align:justify;

margin:0px;

padding-left:10px;
padding-right:10px;
padding-top:20px;
padding-bottom:20px;

border-left-width:3px;
border-left-color:#FFCC00;
border-left-style:solid;

border-right-width:3px;
border-right-color:#FFCC00;
border-right-style:solid;
}

#footer{
background-color:#FFFFFF;
width:754px;

text-align:center;

margin:Opx;

border-left-width:3px;
border-left-color:#FFCC00;
border-left-style:solid;

border-right-width:3px;
border-right-color:#FFCC00;
border-right-style:solid;
}

Merci

strucky

12 janvier 2006 à 21:03:53

Salut !

Pourquoi mettre <ul> dans un <div>, c'est pas utile, en plus tu aurais trouvé le pourquoi de cette marge.

Comme ça, ce serait mieux

Sinon pour la marge :

ul{
margin: 0;
}

Miccagrassu

12 janvier 2006 à 21:27:23

Hum oui, pour le menu c'est tout de suite mieux, merci

Par contre j'ai encore une marge indésirée entre le corps et le pied, et le pied et le bas de la page

JulFisher

12 janvier 2006 à 21:29:47

Le <hr /> a une marge par défaut. Il faut l'enlever.
http://julfisher.free.fr/divers/aides_xhtml_css/xhtml.html#separateur

ul{margin: 0;}
hr{margin-top: 0;}
#footer p{margin: 0}

Pour le menu-haut, mets une hauteur de 34 px

height:34px;

Ca éviter l'espace entre le menu-haut et le corps (enfin je sais pas, peut-être que c'est voulu :lol:

Miccagrassu

13 janvier 2006 à 12:39:46

Bon pour le hr c'est ok,
après, pour la hauteur du menu en 34px, le problème est que mon image de fond fait 36px, mais je viens de vérifier et j'ai un pixel ou deux transparents en bas, d'où le petit écart :euh:

Par contre pour le bas, ce n'est pas sur le <p> que le problème de la marge s'applique, mais sur le fond de mon body, qui devrait être collé au bas du navigateur ( je viens de voir que le résultat attendu est celui de ton site, Julfisher).

Sinon, j'ai voulu modifier un peu le menu haut, et mettre des boutons pour les liens...
Et là,problème, mes boutons sont en colonne, et je les voudrais en ligne (d'où le display:inline;)

#menu-haut{
width:754px; /* 6px pour la bordure */
height:36px;
display:block;
/*background-image:url(images/barrerub.gif);*/
background-repeat:repeat-x;
margin:0px;
vertical-align:middle;

border-left-width:3px;
border-left-color:#FFCC00;
border-left-style:solid;

border-right-width:3px;
border-right-color:#FFCC00;
border-right-style:solid;
}

#menu-haut li{
display:inline; /* Pour ne pas avoir une liste 'verticale' */
color:#0099FF;
font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

/* Liens du Menu du haut */

#menu-haut li a{

/* Bouton */
background-image:url(images/bouton.gif);
background-repeat:no-repeat;
display:block;
width:92px;
height:36px;

/* Lien */
text-align:center;
color:#0099FF;
text-decoration:none;
}

Une idée ? Merci

JulFisher

13 janvier 2006 à 16:20:26

#menu-haut li a{

/* Bouton */
background-image:url(images/bouton.gif);
background-repeat:no-repeat;
display:block; /* <========================== */
width:92px;
height:36px;

/* Lien */
text-align:center;
color:#0099FF;
text-decoration:none;
}

Miccagrassu

13 janvier 2006 à 18:09:14

Euh...

Il faut que je le supprime ?

JulFisher

13 janvier 2006 à 18:27:15

T'es faignant au point de ne pas avoir essayé ?

Oui, car une balise définie en type block se met automatiquement à la ligne. Après, vu l'effet, tu devras jouer sur la padding et le positionnement relatif :

#menu-haut li{
display:inline;
color:#09f;
background:url(images/bouton.gif) no-repeat;
margin: 0;
padding: 10px 28px;
position: relative;
top: 12px;
font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#menu-haut li a{
text-align:center;
color:#09f;
text-decoration:none;
}

Miccagrassu

15 janvier 2006 à 23:09:40

Fainéant oui, mais j'avais quand même essayé

! Mais ça ne résolvait pas le problème car les images de fond ne s'affichaient pas.

En tout cas, le code que tu m'as donné en dernier marche plutôt bien, j'ai juste eu quelques petites modifications à faire.
Mais je ne comprends pas à quoi sert le 'top'. Ca ne fonctionne pas comme un padding ?

En tout cas merci !

ps: et pour le bas de page, tu aurais une idée ?

JulFisher

16 janvier 2006 à 19:28:45

Déjà,

padding: 20px 10px;

égal

padding-left:10px;
padding-right:10px;
padding-top:20px;
padding-bottom:20px;

http://julfisher.free.fr/divers/aides_xhtml_css/css.html#contours

Ensuite, pour le footer :

#footer p {margin: 0;}

Ce que je t'avais déjà indiqué précédemment

Miccagrassu

16 janvier 2006 à 22:38:53

Et que j'ai testé ! Sans que ça marche

EDIT: Pas taper :euh:

Erreur de frappe dans mon code, qui une fois changée marche parfaitement :honte: