18041 sujets

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

Rollover Spécial

Bonsoir,

J'ai réussi grace à un de vos Tutorial à créer mon menu avec Rollover en style CSS mais j'ai un léger souci...

Je souhaite un menu Horizontal qui contient 5 onglets différents qui doivent être collés les un aux autre (pour faire une barre continue).

Le Tutorial explique trés bien comment réaliser cela, mais il le fait avec les 5 même images de même taille.

Je l'ai donc modifier avec mes maigres connaissance et voici ce que j'obtiens www.cder-immo.fr

Pas trés jolie...

Déja j'aimerai savoir comme l'éloigner de X pixel du header et de Y pixel du corps ?

Ensuite, vous remarqué que j'ai des petit pixel blanc cela est du a quoi ?

Voici mon CSS :

a écrit :
body
{
width: 780px;
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 */
background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc Smiley langue */
}

/* L'en-tête */

#en_tete
{
width: 771px;
height: 150px;
background-image: url("images/banniere.png");
background-repeat: no-repeat;

}
#menuh {
padding:0;
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 */
text-align:center;
width:780px;
margin:auto;
}

#menuh ul {
float:left;
list-style-type:none;
display:block;
padding:0;
margin:0;
}

#menuh ul li {
float:left;
display:block;
margin:0;
padding:0;
}

#menuh a {
color:#FFD1CB;
text-decoration:none;
display:block;
float:left;
margin:0px ;
height:41px;

}

#menuh #un {
width:150px;
height: 41px;
background-image: url("images/bouton1.gif");
background-repeat: no-repeat;}

#menuh #deux {width:153px;
background-image: url("images/bouton2.gif");
background-repeat: no-repeat;}

#menuh #trois {width:158px;
background-image: url("images/bouton3.png");
background-repeat: no-repeat;}

#menuh #cat {
width:157px;
background-image: url("images/bouton4.gif");
background-repeat: no-repeat;
}

#menuh #sink {

width:153px;
background-image: url("images/bouton5.png");
background-repeat: no-repeat;}

#menuh #un:hover {
width:150px;
background-image:url("images/bouton1_p.gif");
height:41px;
background-position:0px

}

#menuh #deux:hover {
width:153px;
background-image:url("images/bouton2_p.gif");
height:41px;
background-position:0px
}

#menuh #trois:hover {
width:158px;
background-image:url("images/bouton3_p.png");
height:41px;
background-position:0px
}

#menuh #cat:hover {
width:157px;
background-image:url("images/bouton4_p.gif");
height:41px;
background-position:0px
}

#menuh #sink:hover {
width:153px;
background-image:url("images/bouton5_p.gif");
height:41px;
background-position:0px
}

#corps
{
width: 771px;
height: 612px;
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
background-image: url("images/corps.png");
background-repeat: no-repeat;
}

#pied_de_page
{
width: 771px;
height: 40px;
text-align: center;
background-image: url("images/footer.png");
background-repeat: no-repeat;
}


Et mon HTML :

a écrit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bienvenue sur CDER</title>
</head>

<body>

<div id="en_tete">
<!-- Ici on mettra la bannière -->
</div>

<div id="menuh">
<ul>
<li><a href="#" id="un">&nbsp;<span>Accueil</span></a></li>
<li><a href="#" id="deux">&nbsp;<span>forum</span></a></li>
<li><a href="#" id="trois">&nbsp;<span>news</span></a></li>
<li><a href="#" id="cat">&nbsp;<span>contact</span></a></li>
<li><a href="#" id="sink">&nbsp;<span>liens</span></a></li>
</ul>
</div>


<div id="corps">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer condimentum ornare purus. Etiam ut risus nec tellus lacinia tincidunt. Sed auctor leo vel tellus laoreet mattis. Vivamus volutpat fermentum ante. Quisque nonummy. Cras justo pede, pharetra nec, consectetuer quis, blandit at, nisl. Nunc sed nibh. Vestibulum et nisl ut pede bibendum posuere. Fusce ullamcorper mauris in est. In hac habitasse platea dictumst. Cras vehicula porttitor odio. Vivamus eget metus. Phasellus bibendum massa vitae ligula.

Cras posuere. Etiam in nisi ut justo aliquam laoreet. Suspendisse eget nisi. Sed ut augue. Vivamus lectus. Morbi tellus. Duis tempus malesuada tortor. Ut orci. Nulla et enim ac diam aliquet nonummy. Mauris nisl elit, aliquet at, tempus sagittis, scelerisque vel, nisl. Donec nec nulla. Donec ullamcorper. Aliquam odio libero, volutpat quis, aliquet in, cursus ac, ante. Sed nonummy, tellus eget accumsan gravida, sapien nulla placerat justo, id mollis nibh lorem eu nulla.
</div>

<div id="pied_de_page">
<p>Copyright "CDER Corporation" 2007, tous droits réservés</p>
</div>

</body>
</html>



Merci de vos réponses Smiley smile
Modifié par Cocopop (10 Aug 2007 - 03:24)
Personne ne peu m'aider ?

J'ai juste besoin de savoir comment décoller le menu du corps et de la bannière ?

Merci de vos réponses Smiley smile
Bonjour,

On peut essayer.

Regarde ce que tu fais
#menuh {
  padding:0;
  [b]margin-top: 20px;[/b] /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
  [b]margin-bottom: 20px;[/b] /* Idem pour le bas du navigateur */
[#orange]Tu définis des marges h & b à 20px…[/#]
  text-align:center;
  width:780px;
  [b]margin:auto;[/b]
[#orange]… puis tu les détruis[/#]
  }
Alors, comment t'y prendrais-tu ?

Les pixels blancs sont dans les images.
bouton2-début-fin.gif (zoom=2000%)


+ Plutôt que {citer}, c'est du {code} que tu nous montres (-;
Modifié par Gihef (10 Aug 2007 - 16:08)
Sujet clos
Aller à