[css] Petit souci pour le menu du jour!

Nouveau WRInaute
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:
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:
padding0copie.jpg


Voici avec le padding 1:
padding1.jpg


c'est une histoire de padding ou je me trompe?
Merci
 
WRInaute passionné
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:
ul {
	padding: 0;
	margin-left: 15px; // A adapter
}
 
Nouveau WRInaute
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: :|
capturewiz064.jpg
 
Nouveau WRInaute
ok ça fonctionne, c'est décalé dans la mise en page mais nickel dans le navigateur.
merci beaucoup
 
Nouveau WRInaute
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?
 
Nouveau WRInaute
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:
<ul>
<li><a href="calendrier.html">calendrier</a></li>
</ul>

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

Code:
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.
 
WRInaute impliqué
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
 
Nouveau WRInaute
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
 
WRInaute impliqué
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.
 
WRInaute passionné
yoh666 a dit:
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:
<a href="#" title="" class="bleu">Lien bleu</a>

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

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

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

Ou tu peux aussi faire :
Code:
<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;
}
 
Nouveau WRInaute
j'ai parler trop vite la methode de frank M ne marche pas sous IE mais sous firefox et comme j'utilise firefox je l'ai pas vu tout de suite.
je vais test les autres méthodes.
 
WRInaute passionné
yoh666 a dit:
j'ai parler trop vite la methode de frank M ne marche pas sous IE mais sous firefox et comme j'utilise firefox je l'ai pas vu tout de suite.
je vais test les autres méthodes.
Sache que tu peux affecter un style uniquement pour IE (ou autre navigateur) avec un hack css. Une petite recherche sur Google t'en dira plus. Soit tu intègre le hack dans ta feuille de style ou soit tu passe par un commentaire conditionnel (à insérer cette fois-ci dans la page html) de ce type :

Code:
<!--[if lte IE 6]>
<style type="text/css"> 
#mon-style {

}
</style>
<![endif]-->
 
WRInaute impliqué
yoh666 a dit:
j'ai parler trop vite la methode de frank M ne marche pas sous IE mais sous firefox et comme j'utilise firefox je l'ai pas vu tout de suite.
je vais test les autres méthodes.

Qu'est ce qui ne marche pas sous IE ? car l'exemple en lui même marche aussi bien sur Firefox que sur IE.
 
Nouveau WRInaute
merci guicara maintenant je sais ce que c'est un hack css mais j'ai tester ça ne résoud pas le problème :|
 
WRInaute passionné
Non mais il faut personnaliser le hack CSS !
Et la propriété "hover" marche sur tout les navigateurs. Tu dois mal l'appliquer, peut tu nous copier coller ton code (html et css) ?
 
Nouveau WRInaute
ok
voici le code html:

Code:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<style type="text/css">
<!--
a:link {
	color: #FFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFF;
}
a:hover {
	text-decoration: none;
	color: #CCC;
}
a:active {
	text-decoration: none;
	color: #CCC;
}
-->
</style>

<style type="text/css">
<!--[if gte IE 6]>
#bandeau_liens a:hover {
	background: url(background_liens2.jpg)repeat-x;
	color:white;
	text-align:center;
	}
<![endif]-->
</style>

</head>

<body>
<div id="bandeau_liens">
 		<ul>
			<li><a href="#">Accueil</a></li>
			<li><a href="#">visite</a></li>
			<li><a href="#">tarif</a></li>
			<li><a href="#">situation</a></li>
			<li><a href="#">services</a></li>
			<li><a href="#">contact</a></li>
		</ul>
</div>
</body>

code css:

Code:
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);
	}
	#bandeau_liens ul {
   	padding:0;
   	margin-left:31px;
	list-style-type:none;
	}
	#bandeau_liens li {
	float:left;
 	border-left:1px solid white;
 	}
	#bandeau_liens ul li a {
	display:block;
 	float:left;   
 	width:152px;
 	line-height:25px;
 	text-decoration:none;
 	text-align:center;
 	}
	#bandeau_liens ul li a:hover {
	background: url(background_liens2.jpg)repeat-x;
	color:white;
	text-align:center;
	}

voici ce que j'ai actuellement qui fonctionne impec avec mes 2 hover sous firefox mais pas sous ie pourtant j'ai essayer avec le hack css mais peut être est il mal codé
 
WRInaute passionné
Supprime ça de ton code html (ça prend le dessus sur les autres propriétés) :

Code:
<style type="text/css">
<!--
a:link {
   color: #FFF;
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: #FFF;
}
a:hover {
   text-decoration: none;
   color: #CCC;
}
a:active {
   text-decoration: none;
   color: #CCC;
}
-->
</style>

Et tu n'a pas du comprendre le principe d'un hack CSS. Le but est de mettre entre les commentaires conditionnels un propriété différente et spécifique qui sera interprété par IE. IE sait très bien lire les styles dans ta feuille de style "style.css". Mais par foi il les interprètes mal.

Exemple : margin: 4px; dans ta feuille de style, et pour le hack CSS tu mets : margin: 5px; (IE prendra les 5px, et les autres navigateurs 4px).
 
Nouveau WRInaute
ok je l'ai supprimer et modifier ma feuille css pour avoir le même rendu mais pour le hack css je suis un peu perdu, tu ferai comment pour integrer la balise hover?
 
WRInaute passionné
N'utilise pas de hack CSS c'est plus simple, d'autant plus que dans ton cas tu n'a pas besoin de hack CSS pour un effet hover sur un lien. Je vais te donner plusieurs exemples pour que tu t'en sorte, ce devrait être simple :

Code:
<div id="test">
	<a href="#" title="">Un lien qui appartient au div "test"</a>
</div>
Code:
#test a {
	color: #000;		/* Couleur noir à l'état initial */
}
Code:
#test a:hover {
	color: #FF0000;		/* Couleur rouge au survol */
}

Quelques liens à lire (+ test online) :
- http://www.w3schools.com/css/pr_pseudo_hover.asp
- http://www.w3schools.com/css/tryit.asp?filename=trycss_link
 
Nouveau WRInaute
OKAY j'ai trouver pourquoi ça ne fonctionnait pas sous IE.

cela vient de l'ordre de mes styles du css:

AVANT:
Code:
#bandeau_liens ul li a:hover {
   background: url(background_liens2.jpg)repeat-x;
   color:white;
   text-align:center;
   }

Après l'avoir modifié:
Code:
#bandeau_liens ul li a:hover {
	color:white;
	text-align:center;
	background-image: url(background_liens2.jpg);
	background-repeat: repeat-x;
	}

Tout simplement :evil:
3 jours de perdu à chercher partout des solutions, au moins j'aurai aquis un peu d'expérience.
Un grand merci pour votre patience et votre aide précieuse. :wink:
 
WRInaute passionné
C'est que tu à mal fait quelque chose !
Le mieux serait d'héberger ta page et de nous donner le lien.

PS : A mon avis t'a du donner un style aux lien globaux (sans classe) ce qu'il ne faut pas faire. Si tu donne une couleur général à tes liens, ex : a { color: #000 } et que dans un div tu mette : #test a { color: #FFF } ça ne marchera pas.
 
WRInaute impliqué
guicara a dit:
C'est que tu à mal fait quelque chose !
Le mieux serait d'héberger ta page et de nous donner le lien.

PS : A mon avis t'a du donner un style aux lien globaux (sans classe) ce qu'il ne faut pas faire. Si tu donne une couleur général à tes liens, ex : a { color: #000 } et que dans un div tu mette : #test a { color: #FFF } ça ne marchera pas.

+1 il nous faudrait une page du site pour pouvoir voir clairement. Il doit y avoir des styles qui se chevauchent.
 
WRInaute passionné
yoh666 a dit:
AVANT:
Code:
#bandeau_liens ul li a:hover {
   background: url(background_liens2.jpg)repeat-x;
   color:white;
   text-align:center;
   }

Après l'avoir modifié:
Code:
#bandeau_liens ul li a:hover {
	color:white;
	text-align:center;
	background-image: url(background_liens2.jpg);
	background-repeat: repeat-x;
	}

Je peux t'assurer à 500% que ça ne viens pas de ça (c'est simplement IMPOSSIBLE). Peut importe l'ordre de tes instances dans une classe CSS.
L'erreur venait d'ailleurs. Il faudrait l'identifier.
 
Nouveau WRInaute
ok j'essai de l'identifier mais pas évident une fois qu'on a écrasé son fichier.
j'ai essayé tellement de truc que je m'en rapel plus trop... :|
 
Discussions similaires
Haut