18041 sujets

Questions générales et questions de débutants

(résolu)Un espace entre mon menu et mes images

Bonjours a tous.
Voila mon problème.
Je suis débutant et je rencontre un problème au niveau d'une page de mon site.
Je n'arrive pas a trouver la solution pour mettre un espace entre mon menu
qui est horizontal et une série de photos qui est horizontal elles aussi car le menu colle trop aux images.
voici mon HTML et CSS:


<!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>[TerredeCouleurs] - trompe l’oeil peinture murale meuble peint décorative fresque painting - (http://www.terredecouleurs.fr/) </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="terredecouleurs-galerie02.css" />
</head>
<body>
<div id="en_tete">


</div>


<div id="navcontainer">
<ul id="navlist">
<li><a href="terredecouleurs.html">Accueil</a></li>
<li id="active"><a href="#" id="current">Galerie</a></li>
<li><a href="terredecouleurs-peintre.html">Peintre</a></li>
<li><a href="terredecouleurs-contact.html">Contact</a></li>

</ul>

</div>


<div class="thumb">
<a href="mazet.jpg">
<img src="mazet2X2.jpg" alt="Inachis-io" />
</a>
</div>
<div class="thumb">
<a href="#">
<img src="terasse2X2.jpg" alt="Machaon" />
</a>
</div>
<div class="thumb">
<a href="#">
<img src="tortue2X2.jpg" alt="Polyommatus-icarus" />
</a>
</div>
<div class="thumb">
<a href="#">
<img src="mazet2X2.jpg" alt="Inachis-io" />
</a>
</div>
<div class="thumb">
<a href="#">
<img src="terasse2X2.jpg" alt="Machaon" />
</a>
</div>
<div class="thumb">
<a href="#">
<img src="tortue2X2.jpg" alt="Polyommatus-icarus" />
</a>
</div>
<div class="vide">

</div>
<div class="thumb">
<a href="#">
<img src="terasse2X2.jpg" alt="Machaon" />
</a>
</div>
<div class="thumb">
<a href="#">
<img src="tortue2X2.jpg" alt="Polyommatus-icarus" />
</a>
</div>
<div class="vide">
</div>
<div class="vide">
</div>
<div class="vide">
</div>
<div class="vide">
</div>
<div class="vide">
</div>
</body>
</html>
#navcontainer/*et voila le css du menu */
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 70%;
border-bottom: 1px solid #ddd;
}

#navlist
{
width: 60%;
text-align: center;
margin: 0 auto;
padding: 0;
text-indent: 0;
list-style-type: none;
}

#navlist li
{
padding: 0;
margin: 0;
text-indent: 0;
display: inline;
}

#navlist li a
{
letter-spacing: -1px;
text-decoration: none;
color: #8C8283;
font-size: 1em;
padding: 0 2px;
border-top: .5em solid #eee;
}

#navlist li a:hover,#navlist a#current
{
color: #333;
border-top: none;
font-size: 1.5em;
}

#navlist a#current { color: #A84707; }

body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */

}

#en_tete
{
width: 760px;
height: 100px;
background-image: url("banniere-terre-de-couleurs05.png");
background-repeat: no-repeat;
margin-bottom: 30px;
}






img {border:0}

.thumb {
width:106px;
height:81px;
margin:1px;
float:left;
background-color:#D3D3D3;
display:block;
}

.thumb a {
display:block;
}

.thumb a:hover {
position:absolute;
}

/*hack pour permettre le rollover
de gauche à droite avec mozilla*/

body>.thumb a:hover {
position:relative;
}

.thumb a img {
margin:0;
padding:0;
width:106px;
height:81px;
}

.thumb a:hover img {
position:relative;
left:0px;
top:80px;
width:300px;
height:215px;
}
.vide {
width:106px;
height:81px;
margin:1px;
float:left;
background-color:#E4E4E4;
display:block;
}
Modifié par pratoenitalie (22 Sep 2007 - 11:43)
Salut,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour pratoenitalie,

Tu peux ajouter un "margin-bottom:...;" dans "#navcontainer".

D'autre part, à propos de ton message, tu dois aussi éditer la partie CSS comme étant du "code".
Sujet clos
Aller à