[css] Petit souci pour le menu du jour!

[yoh666]

Bonjours à tous,

Je bloque depuis pas mal de temps sur ma page de style pour mon menu horizontal tirer de ce tuto:
http://css.mammouthland.net/menu-horizontal-en-css.php

Le problème est que je n'arrive pas à décaler mes blocs comme je l'entend, quand je met le padding à 0 tous mes blocs ce collent à gauche et quand je met 1 ils ce décalent de 1cm du bord seulement j'aimerai pouvoir les régler au pixel près.

Voici ce que j'ai pour mon menu "bandeau_liens" dans ma feuille de style:

Code: Tout sélectionner

div#bandeau_liens {
   width:980px;
   height:25px;
   text-transform: capitalize;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 14px;
   color: #FFF;
   font-weight: bolder;
   background-image: url(background_bandeauliens.jpg);
   }
   ul {
   padding:1;
   margin:0;
   list-style-type:none;
   }
   li {
   float:left;
   border-left:1px solid white;
   }
   ul li a {
   display:block;
   float:left;   
   width:150px;
   line-height:25px;
   text-decoration:none;
   text-align:center;
   }
   ul li a:hover {
   background: url(background_liens2.jpg) repeat-x;
   color:white;
   }

Voici ce que ça donne en image avec le padding 0:


Voici avec le padding 1:


c'est une histoire de padding ou je me trompe?
Merci

[smorge]

ul {
padding:1;
margin:0;
list-style-type:none;
}

Je crois pas que padding accepte le 1 tout seul, essaie padding : 1px;

[guicara]

Comme il s'agit d'une liste (ul), j'aurais plutôt tendance à utiliser la propriété "margin". Pour rappel : "margin" = marge extérieur, et "padding" = marge intérieur. Par défaut les liste ul affectent un padding. Généralement qu'on on supprime l'affichage de "list-style", on ramène cette marche à 0, et on affecte par la suite un margin.

Donc ce que je ferais :

Code: Tout sélectionner

ul {
   padding: 0;
   margin-left: 15px; // A adapter
}

[yoh666]

j'ai appliqué l'astuce de guicara avec 31px et j'ai réussi à le caler tip top, part contre ça l'a descendu, quelqu'un saurait me dire pourquoi?
voici ce que ça donne, je n'arrive pas à le remonter pour qu'il soit au dessus du fond:

[yoh666]

ok ça fonctionne, c'est décalé dans la mise en page mais nickel dans le navigateur.
merci beaucoup

[spout]

Prochaine fois que tu fais un design, pour éviter les problèmes, il faut passer par un CSS reset:
le plus barbare:

Code: Tout sélectionner

* {padding:0;margin:0}


Ou plus propre/complet:
http://meyerweb.com/eric/tools/css/reset/

[yoh666]

ok mais je suis débutant et je comprend pas l'effet attendu ni comment mettre en place le reset css.

Un dernier souci ce soumet au design de mon site, j'aimerai mettre un deuxieme menu horizontal en bas de ma page avec un fond différent et un a:hover différent également, cependant les éléments du deuxieme menu horizontal prennent le dessus sur celui en entête dans ma feuille de style, comment faire pour éviter cela?

[yoh666]

eh oui il est 1h55 toujours pas trouver comment mettre 2 a:hover sur la même feuille de style au passage de la souris sans que l'un n'influ sur l'autre.

voici un extrait de mon code html:

Code: Tout sélectionner

<ul>
<li><a href="calendrier.html">calendrier</a></li>
</ul>

code entier CSS suivant actuce (menu) du 1er post:

Code: Tout sélectionner

div {
   text-align:center;
   }
div#global{
   margin:0 auto;
   width:980px;
   }
div#bandeau {
   width:980px;
   height:220px;
   background-image: url(images/plage_vacances.jpg);
   background-position:25px;
   background-repeat: no-repeat;
   color: #900;
   }
div#bandeau_liens {
   width:980px;
   height:25px;
   text-transform: capitalize;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 14px;
   color: #FFF;
   font-weight: bolder;
   background-image: url(background_bandeauliens.jpg);
   }
   ul {
      padding:0;
      margin-left:31px;
   list-style-type:none;
   }
   li {
   float:left;
   border-left:1px solid white;
   }
   ul li a {
   display:block;
   float:left;   
   width:152px;
   line-height:25px;
   text-decoration:none;
   text-align:center;
   }
   [color=#FF0000]ul li a:hover {
   background: url(background_liens2.jpg)repeat-x;
   color:white;
   text-align:center;
   }[/color]
div#contenu {
   float:left;
   width:980px;
   height:400px;
   background-image:url(background.jpg);
   }
div#pied_page {
   clear:both;
   width:980px;
   height:53px;
   text-transform: capitalize;
   background-image: url(background_pied.jpg);
   font-size: 10px;
   font-family: Verdana, Geneva, sans-serif;
   color: #999;
   }
   ul {
      padding:0;
      margin-left:31px;
   list-style-type:none;
   }
   li {
   float:left;
   border-left:1px solid white;
   }
   ul li a {
   display:block;
   float:left;   
   width:152px;
   line-height:25px;
   text-decoration:none;
   text-align:center;
   }
   [color=#FF0000]ul li a:hover {
   background: url(background_liens3.jpg)repeat-x;
   color:white;
   text-align:center;
   }[/color]
div#copyright {
   width:980px;
   height:48px;
   font-family: "Times New Roman", Times, serif;
   color: #999;
   }

Vous l'aurez compris les fonds des liens au passage de la souris sont identiques alors que j'aimerai qu'ils soient différents.

[franckM]

Bonjour je suis pas sûr d'avoir compris la question: tu veux deux effets de passage différent de la souris à deux endroits différents du site ? il faut que tu fasses des classes composées, genre:

#contenu1 #contenu2 .contenu3 ul il a:hover{...}

#contenu1 #contenu3 .contenu4 ul li a:hover{...}

avec #contenuX des id et .contenuX des classes

Parce que comme tu as fais, tous les passages de liens issus de "ul li" ont la même valeur

Franck

[yoh666]

oui c'est exactement ça, je vais chercher sur ce que tu as marquer car je débute, il me faut un exemple concret. merci

[franckM]

Et bien ça pourrait être ça par exemple:

<div id="conteneur">
<div id="header"></div>
<div id="menu1">
<ul>
<li><a href="test.html">test1</a></li>
<li><a href="test2.html">test2</a></li>
<li><a href="test3.html">test3</a></li>
<li><a href="test4.html">test4</a></li>
</ul>
</div>
<div id="menu2">
<ul>
<li><a href="test.html">test1</a></li>
<li><a href="test2.html">test2</a></li>
<li><a href="test3.html">test3</a></li>
<li><a href="test4.html">test4</a></li>
</ul>
</div>
</div>

Et pour ton CSS par exemple:

#conteneur{width:980px;margin:0}

#header{width:980px;margin:0}

#menu1{
width:980px;
height:220px;
background-image: url(images/plage_vacances.jpg);
background-position:25px;
background-repeat: no-repeat;
color: #900;
}
#menu1 ul {
padding:0;
margin-left:31px;
list-style-type:none;
}
#menu1 li{
float:left;
border-left:1px solid white;
}
#menu1 ul li a {
display:block;
float:left;
width:152px;
line-height:25px;
text-decoration:none;
text-align:center;
}
#menu1 ul li a:hover {
background: url(background_liens2.jpg)repeat-x;
color:white;
text-align:center;
}

#menu2{
width:980px;
height:220px;
background-image: url(images/plage_vacances.jpg);
background-position:25px;
background-repeat: no-repeat;
color: #900;
}
#menu2 ul {
padding:0;
margin-left:31px;
list-style-type:none;
}
#menu2 li{
float:left;
border-left:1px solid white;
}
#menu2 ul li a {
display:block;
float:left;
width:152px;
line-height:25px;
text-decoration:none;
text-align:center;
}
#menu2 ul li a:hover {
background: url(background_liens3.jpg)repeat-x;
color:black;
text-align:center;
}

Dans ce cas précis, je n'ai changé que la couleur du texte et le background dans le a:hover du 2ème menu par rapport au 1er. Mais tu peux faire les changements que tu veux.

[yoh666]

t'es super sympas merci beaucoup je vais tester ça!

[guicara]

eh oui il est 1h55 toujours pas trouver comment mettre 2 a:hover sur la même feuille de style au passage de la souris sans que l'un n'influ sur l'autre.

Bonjour,

Il y a plusieurs manière de procéder. Soit tu attribue un style à un bloc (un div - et les donc éléments de ce div seront affectés par ce style), ou soit tu attribue un style à un élément précis.

Par exemple :

Code: Tout sélectionner

<a href="#" title="" class="bleu">Lien bleu</a>

Dans style.css :
a.bleu {
   color: #00a2ff;
}

Code: Tout sélectionner

<a href="#" title="" class="rouge">Lien bleu</a>

Dans style.css :
a.rouge{
   color: #FF0000;
}

Ou tu peux aussi faire :

Code: Tout sélectionner

<div id="premier">
   <a href="#" title="">Mon lien rouge</a>
</div>

<div id="second">
   <a href="#" title="">Mon second lien blanc</a>
</div>

Et dans le CSS :

#premier a {
   color: #FF0000;
}

#second a {
   color: #FFF;
}

[yoh666]

cool merci beaucoup ça fonctionne!! mais pas sous IE pour la méthode de frank M

[guicara]

cool merci beaucoup ça fonctionne!! c'est le pied

Le CSS est très plaisant à apprendre (et à utiliser), continue à explorer