[css] Petit souci pour le menu du jour!

yoh666 · 29 Août 2010

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:

Voici avec le padding 1:

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

smorge · 29 Août 2010

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

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

guicara · 29 Août 2010

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
}

yoh666 · 29 Août 2010

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 · 29 Août 2010

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

spout · 29 Août 2010

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

Code:

* {padding:0;margin:0}

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

yoh666 · 29 Août 2010

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 · 30 Août 2010

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.

franckM · 30 Août 2010

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 · 30 Août 2010

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 · 30 Août 2010

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 · 30 Août 2010

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

guicara · 30 Août 2010

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;
}

yoh666 · 31 Août 2010

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

guicara · 31 Août 2010

yoh666 a dit:
cool merci beaucoup ça fonctionne!! c'est le pied :wink:

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

yoh666 · 31 Août 2010

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.

guicara · 31 Août 2010

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]-->

franckM · 31 Août 2010

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.

yoh666 · 31 Août 2010

bin sous IE au passage de la souris ya rien qui ce passe chez moi. apparement IE à du mal avec la balise hover

http://www.javascriptfr.com/forum/sujet-HOVER-CSS-MARCHE-PAS-SOUS-IE_508735.aspx

le souci c'est que j'ai pas de tableau et je sais pas ou mettre l'exemple donner ci-dessus

yoh666 · 31 Août 2010

merci guicara maintenant je sais ce que c'est un hack css mais j'ai tester ça ne résoud pas le problème :|

guicara · 31 Août 2010

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) ?

franckM · 31 Août 2010

yoh666 a dit:
bin sous IE au passage de la souris ya rien qui ce passe chez moi. apparement IE à du mal avec la balise hover

http://www.javascriptfr.com/forum/sujet-HOVER-CSS-MARCHE-PAS-SOUS-IE_508735.aspx

le souci c'est que j'ai pas de tableau et je sais pas ou mettre l'exemple donner ci-dessus

La balise hover ne devrait pas avoir de problème.

yoh666 · 31 Août 2010

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é

guicara · 31 Août 2010

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).

yoh666 · 31 Août 2010

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?

guicara · 31 Août 2010

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

yoh666 · 31 Août 2010

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:

guicara · 31 Août 2010

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.

franckM · 31 Août 2010

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.

yoh666 · 31 Août 2010

arf on s'est croisé les messages, j'ai modifié le précédent ^^

yoh666 · 31 Août 2010

franckM a dit:
+1 il nous faudrait une page du site pour pouvoir voir clairement. Il doit y avoir des styles qui se chevauchent.

+1

guicara · 31 Août 2010

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.

yoh666 · 31 Août 2010

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... :|