[Résolu] encore un probleme de marge! - help me please par damski - page 1

voilà j'ai un souci avec des marge. Je suis en train de faire un site, et je prend tout le temps comme référence le cours de m@teo et je modifie apres il ne reste souvent rien du code de base mais ça me permet d'avoir une base à pas taper. enfin la question n'est pas là mais j'ai un souci de marge non désirée entre mes div menu et ma div header et ce malgrès des "margin: 0;".
j'ai lu beacoup d'autre posts mais je n'ai pas trouver de solution dans ces derniers un code et une image seront certainement plus parlant:

Citation : xhtml 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
</head>

<body>
<div id="container">


<div id="en_tete">

</div>

<div id="vide1">
</div>



<div id="menu">
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>
</div>
<div id="menu2">
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>
</div>

<div id="vide2">
</div>



<div id="corps">
<h1>Mon super site</h1>

<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>



<div id="pied_de_page">
<p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
</div>
</div>
</body>
</html>

Citation : css

body
{
margin:0;
padding:0;
width: 100%;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: red;
}
#container
{
width: 90%;
height: 100%;
margin: auto;
background-color: yellow;
}

/* L'en-tête */

#en_tete
{
width: 100%;
height: 250px;
background-color: pink;
margin-bottom: 0px;
}

#vide1
{
position: absolute;
width: 120px;
height: 150px;
background-color: green;
}

/* Le menu */

#menu
{
margin-top: 0px;
position: absolute;
width: 120px;
margin-left: 120px;
}

#menu2
{
margin-top: 0px;
position: absolute;
width: 120px;
margin-left: 240px;
}

#vide2
{
position: relative;
width: auto;
height: 150px;
margin-left: 360px;
background-color: green;
}

.element_menu
{
margin: 0;
height: 150px;
background-color: #626262;
}

/* Quelques effets sur les menus */

.element_menu h3
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
padding: 0px;
padding-left: 20px;
margin: 0px;
}

.element_menu a
{
color: #B3B3B3;
}

.element_menu a:hover
{
background-color: #B3B3B3;
color: black;
}

/* Le corps de la page */

#corps
{
padding: 5px;
color: #B3B3B3;
background-color: pink;
}

#corps h1
{
color: #B3B3B3;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
height: 30px;

background-image: url("images/titre.png");
background-repeat: no-repeat;

padding-left: 30px;
color: #B3B3B3;
text-align: left;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
padding: 5px;
text-align: center;
color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
}

une image: Image utilisateur

damski

11 janvier 2006 à 23:49:14

strucky

12 janvier 2006 à 0:05:47

salut !

Tous les éléments de type blocs ont des marges par défaut, donc :

.element_menu h3
{
margin: 0;
}

12 janvier 2006 à 0:13:31

merci c super c'était bien ça

par contre j'ai une autre question:
comment puis-je faire une div (corps avec une largeur redimensionnable selon a résolution de l'écran avec une collone sur la droite avec une largeur fixe cette fois?

encore un probleme de marge!

help me please

encore un probleme de marge!

Supprimer

Modérer

Signaler le message aux modérateurs