Menu graphique en css

Hello,
Je reviens vers toi car malgré une bonne grosse bataille je n'arrive pas à supprimer le décalage de 16 px entre mon header et mon menu, j'ai essayer des margin bottom et top dans tous les sens mais rien à faire ça ne change rien.
Encore plus surprenant, j'ai suivi tes conseils en mettant des border de 1 px à mes div. conteneur, footer, menu et header pour voir laquelle couillait, et là miracle quand je fais aperçu dans le navigateur (via dreamwever...) toutes mes div sont parfaitement positionnées, plus le moindre déallage, et lorsque j'enlève mes borders,.... et ben le fameux décalage revient !!!! ça va me faire déboulonner dans pas longtemps cette histoire le css serait-il contre moi ???

De plus, une autre petite question, je n'arrive plus à travailler en mode fractionné (code et creation sous dreamweaver, et une favicon d'opéra apparait pour ma page index, saurais-tu m'expliquer tout ça;-)

Allez je te remercie d'avance pour ton aide, et si je peux te rendre un service en échange n'hésite pas à demander....

Hello,
Je reviens vers toi car malgré une bonne grosse bataille je n'arrive pas à supprimer le décalage de 16 px entre mon header et mon menu, j'ai essayer des margin bottom et top dans tous les sens mais rien à faire ça ne change rien.
Encore plus surprenant, j'ai suivi tes conseils en mettant des border de 1 px à mes div. conteneur, footer, menu et header pour voir laquelle couillait, et là miracle quand je fais aperçu dans le navigateur (via dreamwever...) toutes mes div sont parfaitement positionnées, plus le moindre déallage, et lorsque j'enlève mes borders,.... et ben le fameux décalage revient !!!! ça va me faire déboulonner dans pas longtemps cette histoire le css serait-il contre moi ???

De plus, une autre petite question, je n'arrive plus à travailler en mode fractionné (code et creation sous dreamweaver, et une favicon d'opéra apparait pour ma page index, saurais-tu m'expliquer tout ça;-)

Allez je te remercie d'avance pour ton aide, et si je peux te rendre un service en échange n'hésite pas à demander....

@SG40Tu pourrais me repasser le code ?

Une favicon d'Opera ?? À la place de ton favicon ou directement sur la page ?

@le hollandais volantla favicon apparaît dans la barre d'adresse lors de l'aperçu sous safari, moi je n'ai pas encore mis la mienne....
tiens pour le code :

- html:
<!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>Deamouv</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" href="design.css" />
<link href="styles/monstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="conteneur">
<div id="header"></div>

<div id="menu">
<ul>
<li class="acceuil"><a href="index.html"><img scr="IMG_TRANSP" alt="Acceuil"></a></li>
<li class="services"><a href="index.html"><img scr="IMG_TRANSP" alt="Services"></a></li>
<li class="actus"><a href="index.html"><img scr="IMG_TRANSP" alt="Actus"></a></li>
<li class="photos"><a href="index.html"><img scr="IMG_TRANSP" alt="Photos"></a></li>
<li class="contact"><a href="index.html"><img scr="IMG_TRANSP" alt="Contact"></a></li>
</ul>
</div> <!-- FIN DIV "menu" -->

<div id="corps">on, la page blanche c'est bien joli, mais votre site web risque d'avoir un succès mitigé si vous le laissez comme ça

La première étape pour "remplir" votre site, c'est d'écrire du texte dedans... lui donner du contenu quoi. Nous allons voir qu'écrire du texte est très simple, mais il faut séparer les différents types de texte.
En effet, nous allons voir successivement dans ce chapitre :
Comment rédiger des paragraphes
La façon dont fonctionnent les titres
Comment donner de l'importance à certains mots de son texte
Et enfin, nous verrons quelques balises un peu plus "rarement" utilisées, mais que vous devez connaître au cas où vous en auriez besoin un jour.

Motivés ? Allez, vous allez voir c'est pas compliqué
on, la page blanche c'est bien joli, mais votre site web risque d'avoir un succès mitigé si vous le laissez comme ça La première étape pour "remplir" votre site, c'est d'écrire du texte dedans... lui donner du contenu quoi. Nous allons voir qu'écrire du texte est très simple, mais il faut séparer les différents types de texte. En effet, nous allons voir successivement dans ce chapitre : Comment rédiger des paragraphes La façon dont fonctionnent les titres Comment donner de l'importance à certains mots de son texte Et enfin, nous verrons quelques balises un peu plus "rarement" utilisées, mais que vous devez connaître au cas où vous en auriez besoin un jour. Motivés ? Allez, vous allez voir c'est pas compliqué

</div> <!-- FIN DIV "corps" -->

<div id="footer">
Nawak Copyright - Tous droits réservés © 2008-2009
</div> <!-- FIN DIV "footer" -->
</div> <!-- FIN DIV "conteneur" -->
</body>
</html>

- pour le css avec les border à mes div.

@charset "UTF-8";
/* CSS Document */

body
{
background-color: #fffff;
}

#header
{
background-image: url("../images/header.jpg");
width: 876px;
height: 185px;
border: 1px solid blue;
}

#corps
{
background-image: url("../images/corps.jpg");
background-repeat: repeat-y;
width: 816px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
text-align:justify;
}

#footer
{
background-image: url("../images/footer.jpg");
width: 876px;
height: 81px;
border: 1px solid red;
text-align:center;
font-size: 12px;
color:#0000CC;
padding-top: 20px;
}

#conteneur
{
margin: auto;
margin: auto;
width: 876px;
border: 1px solid blue;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
voici tout ce qui concerne le menu */

#menu
{
background-image: url("../images/menu.jpg");
width: 876px;
height: 127px;
border:1px solid red;
text-align:center;
font-size: 16px;

padding-top: 0;
padding-left: 0;
}

#menu ul
{
margin-top: 0px;
padding-left: 0px;
}

#menu ul li
{
/* ici, les "li" seront mis cote à cote. Ceci grace au "float" et à la largeur fixe. */

width: 115px;
height: 64px;

float: left;
list-style-type: none;
}

#menu ul li.acceuil
{
background: url(../images/accueil.png) no-repeat top left;
}
#menu ul li.services
{
background: url(../images/services.png) no-repeat top left;
}
#menu ul li.actus
{
background: url(../images/actus.png) no-repeat top left;
}
#menu ul li.photos
{
background: url(../images/photos.png) no-repeat top left;
}
#menu ul li.contact
{
background: url(../images/contact.png) no-repeat top left;
}

#menu ul li.acceuil:hover
{
background: url(../images/accueilvol.png) no-repeat top left;
}
#menu ul li.services:hover
{
background: url(../images/servicesvol.png) no-repeat top left;
}
#menu ul li.actus:hover
{
background: url(../images/actusvol.png) no-repeat top left;
}
#menu ul li.photos:hover
{
background: url(../images/photosvol.png) no-repeat top left;
}
#menu ul li.contact:hover
{
background: url(../images/contactvol.png) no-repeat top left;
}

#menu a
{
color: red;
display: block;
width: 115px;
height: 64px;

text-decoration: none;

/* ci dessous, les marges ne sont plus nescéssaire : mieux vaut appliquer une marge sur le "#menu" */
/* si c'est pour séparrer chaque bouton par une marge, appliques un "margin" sur les "#menu li" */

/* margin-left: 10px;
margin-right: 10px;*/

line-height: 64px;
vertical-align: middle;
}

#menu a:hover
{
text-decoration: underline;
}

#menu li a img
{
border: none;
}

merci :- )

@sg 40oO Voilà qui est pour le moins déconcertant…

J'ai repéré une petit erreur au début : dans le "body" (du css) : c'est "background-color: #ffffff;" avec 6 "f". Il en manquait un, mais ça ne résout pas le problème. Le code est sans erreurs sinon…

J'ai trouvé la nature du problème. À la place des bordures temporaires, j'ai mis des couleurs de fond. On voit donc que c'est le menu qui est décalé par rapport au header. Une espace se crée entre les deux (une marge extérieur donc). Le problème apparaît avec Firefox et Chrome, mais pas avec Opera.

J'ai une solution, assez "bourrin", mais tout à fait « légale » : il s'agit de déclarer au début de la feuille de style un "css reset".
Il faut savoir que chaque navigateur associe des css par défaut à chaque élément. Par exemple, les liens dans une page web sont en bleu. C'est le cas "par défaut". Si tu veux les mettre en rouge, tu dois les déclarer en rouge (color: red;).

Outre les liens, chaque élément est ainsi stylisé par des css, et notamment au moyen de marges (padding et margin).
Chaque navigateur utilise ses propres marges ce qui lors d'un desing est assez ennuyeux pour un positionnement « au pixel près » (crois-moi :D).
Du coup, ce que la plus part des designers font, c'est créer un "css reset". Il s'agit tout simplement de mettre un tout petit code css qui déclare des bordures et des marges nulles à tous les éléments, comme ceci :

* {
   border: none;
   margin: 0;
   padding: 0;
   outline: 0;
}

L'élement "*" signifie tous les élements. Bien sûr, le fait de tout mettre à zéro, ne nous empêche pas de déclarer par exemple une bordure ou une marge plus loin dans le CSS. Ceci est le "reset" : il met tout à zéro avant de commencer la construction.
Juste un truc : ce code là (le reset que j'ai présenté là) est déprécié par le W3C (l'organisation des standards du web).

Il préfèrent (à juste titre) de ne pas utiliser les "*" mais de déclarer chaque élément à la place. On mettra donc plutôt :

html, body, div, a, p, b, i, table, tr, td, input, object, ul, ol, li, img, h1, h2, h3, h4, h5, h6, a, span {
   border: none;
   margin: 0;
   padding: 0;
   outline: 0;
}

Cela revient au même, mais disons que « c'est mieux ». Voilà ! Avec ça, la marge a disparue !

Et voilà les fichiers : http://www.cijoint.fr/cjlink.php?file=cj201002/cijtFDgdBs.zip

@le hollandais volantje te tire mon chapeau, tu me sort une belle épine du pied merci infiniment, c'est dommage que je puisse pas de rendre la pareil étant donné mon niveau, mais je vais bosser et ptète qu'un jour....