Problême de CSS "margin" et "padding"

4 juillet 2006 à 13:47:32

Bonjour à tous, je tiens particulièrement à remercier Mateo21 pour ces tutoriaux complets et ce forum, qui sont vraiment une excellente initiative.

Voici mon problème:
J'ai téléchargé un kit graphique pour faire mon site web, afin d'avoir une bonne base.
J'ai ensuite voulu changer le menu, à l'aide CSS Tab Designer, et j'ai reussi à l'implanter, seulement je n'arrive pas à l'aligner correctement.
En effet, sous Firefox, tout va bien, mais sous IE : catastrophe!

Voici des screenshots pour illustrer:

Ca c'est le kit graphique téléchargé, sans aucune modif.

Ca c'est avec mon joli menu

sous Firefox

Et là c'est sous IE

Ca c'est mon html:

<div class="centre">
<ul id="tabsH">
<li id="current"><a href="index.html"><span>Home</span></a></li>
<li><a href="videos.html"><span>Vidéos</span></a></li>
<li><a href="crew.html"><span>Crew</span></a></li>
<li><a href="features.html"><span>Features</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
<li><a href="liens.html"><span>Liens</span></a></li>
</ul>

[...]

</div>

Et ça c'est mon CSS...

#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("images/tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("images/tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 10px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

#tabsH #current a {
background-position:0% -42px;
}
#tabsH #current a span {
background-position:100% -42px;
}

Donc je n'arrive pas à resoudre ce probleme, pouvez-vous m'aider s'il vous plait? Si vous voulez le html ou le CSS en entier, dites le moi!
Merci

Anonyme

4 juillet 2006 à 14:49:42

regarde au niveau du CSS pour l'image qui dépasse !

CrAiG69

4 juillet 2006 à 16:53:08

J'ai cherché mais je trouve pas, c'est pas moi l'auteur de ce CSS, donc j'ai du mal un peu à le comprendre des fois...

Là je suis bloqué :'(

alors si quelqu'un voit pourquoi ça serait cool

(Par exemple là je vois pas à quoi servent les balises "span", vu qu'il n'a pas mis de "class" ni de "id" dedans, comme nous l'a dit mateo21 dans son tuto).

Bilbou

4 juillet 2006 à 20:20:07

Hop !

Montre-nous tes deux codes complets !

CrAiG69

4 juillet 2006 à 20:57:47

Ok voici voila les deux codes :

PS: Le dossier zip avec html+CSS+images (faire le clic droit ): ici

<!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">
<head>
<title>
The Site
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="description" content=" " />
<meta name="keywords" content=" " />
<link rel="stylesheet" type="text/css" href="reeve.css" />
</head>
<body>
<div class="conteneur">
<div class="haut">
<div class="haut_intro">
</div>
</div>

<div class="centre">
<ul id="tabsH">
<li id="current"><a href="index.html"><span>Home</span></a></li>
<li><a href="videos.html"><span>Vidéos</span></a></li>
<li><a href="crew.html"><span>Crew</span></a></li>
<li><a href="features.html"><span>Features</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
<li><a href="liens.html"><span>Liens</span></a></li>
</ul>
<div class="gauche">
<div class="haut_gauche">
<img src="images/box.gif" class="imagegauche"/>
<div class="newsletter">
<input name="ESSAIS" type="text" />
</div>
<img src="images/ok.gif" class="imagegauche2"/>
</div>
<div class="spacer2">
</div>
<h2>LIENS</h2>
<h3>kits graphiques</h3>
<p>
Des kits graphiques full css à télécharger gratuitement.
</p>
<p>
<a href="http://www.zwatla.com/" class="class1">www.zwatla.com</a>
</p>
<h3>
<a href="http://www.sgfx.info/">Design à Bruxelles</a></h3>
<p>
Studio indépendant de design et de création à Bruxelles.
</p>
<p>
<a href="http://www.sgfx.info/" class="class1">www.sgfx.info</a>
</p>
<h3>Violoniste</h3>
<p>
Site de la violosite Belge Elisabeth Deletaille
</p>
<p>
<a href="http://www.violoneli.com" class="class1">www.violoneli.com</a>
</p>
</div>

<div class="droite">
<h1>Kit graphique gratuit</h1>
<p> Bienvenue sur le kit graphique en libre téléchargement 'On a reeve, Under the trees' de Zwatla designé par le gégnalisime Ksa
de
<a href="http://www.sgfx.info" class="class3">Stratigraphics</a>, Agence de création graphique située à Bruxelles (1000).
</p>
<p>
Ce kit graphique est livré avec tous les fichiers nécessaires à sa modification. Il est donc facilement personnalisable.
</p>
<p>
Attention, quelques notions de base concernant les feuilles de style (css) sont indispensables pour transformer ce kit en site personnel et personnalisé...
</p>
<p>
Pour voir tous les kits graphiques css de zwatla, retournez sur la page
<a href="http://www.zwatla.com/kits_graphiques.html" class="class3">kits graphiques</a>
</p>
<p>
Ce kit est livré avec 5 pages afin de vous faciliter le travail. Le menu est en texte (ce n'est pas une image) vous pouvez donc le modifier ultra rapidement ce qui vous permet d'employer ce kit sans grande modification.
</p>
<p>
Quelques liens traintant des feuilles de styles qui pourront vous aider dans vos projets :
</p>
<p>
<a href="http://www.alsacreations.com " class="class3">www.alsacréations.com </a> :
aide aux webmasters pour créer des sites web grâce aux CSS et XHTML.
</p>
<p>
<a href="http://www.cybercodeur.net/weblog/presentations/seybold/index.html" class="class3">www.cybercodeur.net </a>
: les tableaux HTML ont été créés pour une raison : présenter des données tabulaires...
</p>
<p>
<a href="http://www.accessibilite.info" class="class3">www.accessibilite.info</a>
: Digne successeur du HTML, le XHTML est le premier pas à accomplir vers le Web de demain : à la fois compatible avec les navigateurs d'hier et avec le XML, sa rigueur en fait un puissant langage de structration de contenu, laissant le soin de la présentation aux CSS...
</p>
</div>

<div class="spacer">
</div>
</div>

<div class="bas">
<p>
Copyright 2005 | designed by
<a href="http://www.sgfx.info">ksa</a>
| XHTML - CSS by
<a href="http://www.zwatla.com">krek</a>
</p>
<div class="spacer">
</div>
</div>

</div>

</body>
</html>

html, body {
margin: 0;
padding: 0;
height: 100%
}

body {
margin: 0;
padding: 0;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 0.8em;
background: #FAF6C7 url(images/bgall.jpg) repeat-x ;
text-align : center ;
color : #fff}

.conteneur {
width:776px;
background-color: #000;
margin-left:auto;
margin-right:auto;
text-align : left;
height:100%;
background: url(images/centre2.gif) no-repeat ;}
html>body .conteneur {height : auto; min-height : 100%; }

.haut{
width:724px;
height: 217px;
text-align : left;
margin-left :25px;
background: url(images/top.jpg) no-repeat ;
} html>body .haut{
width : 723px; }

#tabsH {
float:left;
width:100%;
background:url("images/menu_fd.gif") no-repeat left top;
background-position:0px 100%;
   font-size:93%;
padding :0 0 0 160px; /* Ici rentrer la valeur adequat en 4° position pour centrer le menu*/
   line-height:normal;
   font-weight: bold;
}

#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("images/tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("images/tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 10px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

#tabsH #current a {
background-position:0% -42px;
}
#tabsH #current a span {
background-position:100% -42px;
}

.centre{
background: #000 ;
width:725px;
text-align : left;
margin:0 0 0 25px;
}
html>body .centre{
margin: 0 0 0 25px;
width : 725px; }

.haut_intro {float : right ; margin-top : 190px; text-align : right ; width : 300px ;}

.gauche {
float : left;
width : 234px ;
margin-left : 15px;
margin-top : 20px;
background : #fff url(images/bgauche.gif) no-repeat bottom;
color : #6A6F78;
padding-bottom : 100px}
html>body .gauche{margin-left : 30px; }

.droite {
float : left ;
width : 420px ;
margin-left : 20px;
margin-top : 20px;
padding-bottom : 30px;

background : transparent; }
html>body .droite {margin-left : 20px; }

.bas{
background : #000;
width:725px;
text-align : center;
margin-left :25px;}
html>body .bas{ width:725px; }

p {margin : 0 20px 0 20px ; padding : 10px 0 0 0}
.notop {margin : 0 20px 0 20px ; padding : 0}
.para_nomargin {margin : 0 ; paddig : 0; float : none}

.spacer {clear : both ; height : 13px; }
.spacer2 {clear : both ; height : 13px; background-color : #000 }

ul, li {
margin :0;
padding :0 0 0 0 ;
list-style : none ; }

h1 {
font-size : 24px ;
padding : 0 ;
margin : 60px 30px 0 20px ;
color : orange ;
font-style : italic;
background : url(images/h1.gif) repeat-x left bottom ;
height : 50px ;
text-transform : uppercase}

h2 {font-size : 12px ;
color : #fff;
text-indent : 30px ;
height : 20px ;
padding-top : 10px ;
margin : 0;
background : #fff url(images/h2.gif) no-repeat ;
height : 35px}

h3 {font-size : 12px ;
color : #fff;
text-indent : 30px ;
height : 20px ;
padding-top : 2px;
margin : 5px 0 0 0 ;
background : #ccc url(images/h3.gif) no-repeat 6px 5px ;
height : 20px}

h4 {font-size : 12px ;
color : orange; margin : 10px 0 0 20px ; font-weight : normal}

h5 {font-size : 11px ;
color : orange; margin : 10px 0 0 20px ; font-weight : normal ; text-decoration : underline}

.haut_gauche {height : 45px ; background : url(images/box_mail2.gif) no-repeat ;}

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

a.class1 {color : #000; font-weight : bold; text-decoration : underline ; padding-bottom : 20px; display : block}
a:hover.class1 {color : #000; text-decoration : underline}

a.class3 {color : orange; text-decoration : none}
a:hover.class3 {color : orange; text-decoration : underline}

a.class4 {color : #FFF; text-decoration : none; font-weight : bold}
a:hover.class4 {color : #FFF; text-decoration : underline}

input {margin : O; padding : 0 ; margin-top : 0}
.imagegauche {float : left}
.imagegauche2 {float : left; margin-left : 6px; margin-top : 12px}

.newsletter {float : left ; background-color : transparent ; padding : 12px 0 0 0}

div.hr {
height: 13px;
margin : 0 ;
padding : 0;

width : 100px;
background : url(images/point.gif) repeat-x}

div.hr hr {
display: none; padding :0;
}

form {margin-left : 0 ; margin-top : 20px}

.para_form_envoyer {margin-top : 20px}

Bilbou

4 juillet 2006 à 21:18:45

Hep !

C'est étrange...

Essaie de remplacer...

.conteneur {
width:776px;
background-color: #000;
margin-left:auto;
margin-right:auto;
text-align : left;
height:100%;
background: url(images/centre2.gif) no-repeat ;}

Par...

.conteneur {
width:776px;
background-color: #000;
margin: auto;
text-align : left;
height:100%;
background: url(images/centre2.gif) no-repeat ;}

A tout hasard !

CrAiG69

4 juillet 2006 à 21:27:02

Avec IE ça marche toujours pas... Malgré ta modif...

T'es sur que c'est pas plutôt une histoire de padding?

Le bloc s'est décalé à droite quand j'ai décalé le menu à droite, c'est-a-dire:

#tabsH {
float:left;
width:100%;
background:url("images/menu_fd.gif") no-repeat left top;
background-position:0px 100%;
font-size:93%;
padding :0 0 0 160px; /* Ici le 160 tu vois? */
line-height:normal;
font-weight: bold;
}

Voilà après je vois pas...

Bilbou

4 juillet 2006 à 21:29:07

Effectivement !

Quand il n'y avait pas le 160, ça donnait quoi ?

CrAiG69

4 juillet 2006 à 21:38:27

Ca donnait ça:

Sous IE

mais le menu est à gauche :'(

Moi j'ai voulu le décaler à droite avec un margin pour enfin me rendre compte que c'était le padding qu'il fallait bouger (parce que si je bouge le margin, la barre de fond du menu bouge aussi, alors qu'elle reste en place si je bouge que le padding).

T'en pense quoi? o_O

Bilbou

5 juillet 2006 à 10:15:07

Hop !

J'ai vraiment du mal à m'y retrouver dans ton code, avec les pourcentages et tout...

Moi, ce que je ferais, je placerais mon menu dans un div, qui ne contiendrait que lui...

Et pour le centrer, j'appliquerais un width et un margin: auto; (a priori, ton menu n'est pas extensible ?) mais ça influerait sûrement au niveau du reste de la page !

Essaie ce que je te propose, sans garantie...

Sinon, tu utilises un hack, mais je suis pas trop pour ce genre de pratique !

CrAiG69

5 juillet 2006 à 11:59:03

Citation : Bilbou

Moi, ce que je ferais, je placerais mon menu dans un div, qui ne contiendrait que lui...

Bonne idée! J'y avais pensé et après j'ai oublié que j'y avais pensé

J'essaye ça et je te tiens au courant.

C'est quoi un hack? (je sais ce que veux dire hacker, mais là je comprends pas...) :euh:

Bilbou

5 juillet 2006 à 12:05:44

Hop !

Va voir ce tuto !

Je te rappelle que je ne te les conseille pas ! :-°

CrAiG69

5 juillet 2006 à 14:24:34

J'ai pas trop compris le but des hack et comment ça marchait là... o_O

Bref: voici mon nouveau html:

<div id="tabsH">
<ul>
<li id="current"><a href="index.html"><span>Home</span></a></li>
<li><a href="videos.html"><span>Vidéos</span></a></li>
<li><a href="crew.html"><span>Crew</span></a></li>
<li><a href="features.html"><span>Features</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
<li><a href="liens.html"><span>Liens</span></a></li>
</ul>
</div>

Ca m'a donné ça :

C'est pourtant pas bien extraordinaire ce que je voudrais... Un menu centré, normalement c'est pas la fin du monde (enfin je ne crois pas...

)

Bon voilà, je nage. Le mieux ça serait pas de le refaire tranquilou? Hein? Ou alors est-ce que quelqu'un voit le probleme planqué dans ce fichu code??? :'(

Deeder

5 juillet 2006 à 20:57:39

En fait, une manie d'IE consiste à rajouter la taille du padding à la taille du width. Il faut donc assigner une largeur normale à laquelle on soustrait la taille du padding.

Mais, dans ton cas, la taille est exprimée en pourcentage, c'est donc difficile de convertir le tout. Tu peux cependant utiliser un margin-left égal à ton padding sur ton #tabsH ul, ou encore mieux, lui appliquer un margin: auto;.

PS: c'est pas parce que je suis modo qu'il faut m'envoyer un MP à chaque sujet non-réglé hein.

CrAiG69

5 juillet 2006 à 22:43:12

Ok j'essaie ça. Merci Deeder