1. ✅ Apprenez une METHODE qui marche pour votre SEO ! Formation à distance avec Olivier Duffez et Fabien Facériès + aide pour prise en charge du financement
    Rejeter la notice

[css] Petit souci pour le menu du jour!

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par yoh666, 29 Août 2010.

  1. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    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:
    [​IMG]

    Voici avec le padding 1:
    [​IMG]

    c'est une histoire de padding ou je me trompe?
    Merci
     
  2. smorge
    smorge WRInaute occasionnel
    Inscrit:
    17 Juin 2009
    Messages:
    442
    J'aime reçus:
    0
    Je crois pas que padding accepte le 1 tout seul, essaie padding : 1px;
     
  3. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 583
    J'aime reçus:
    0
    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
    }
     
  4. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    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: :|
    [​IMG]
     
  5. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    ok ça fonctionne, c'est décalé dans la mise en page mais nickel dans le navigateur.
    merci beaucoup
     
  6. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 057
    J'aime reçus:
    294
    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/
     
  7. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    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?
     
  8. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    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.
     
  9. franckM
    franckM WRInaute impliqué
    Inscrit:
    15 Novembre 2007
    Messages:
    808
    J'aime reçus:
    0
    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
     
  10. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    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
     
  11. franckM
    franckM WRInaute impliqué
    Inscrit:
    15 Novembre 2007
    Messages:
    808
    J'aime reçus:
    0
    Et bien ça pourrait être ça par exemple:
    Et pour ton CSS par exemple:
    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.
     
  12. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    t'es super sympas merci beaucoup je vais tester ça!
     
  13. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 583
    J'aime reçus:
    0
    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;
    }
     
  14. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    cool merci beaucoup ça fonctionne!! :wink: mais pas sous IE pour la méthode de frank M
     
  15. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 583
    J'aime reçus:
    0
    Le CSS est très plaisant à apprendre (et à utiliser), continue à explorer :)
     
  16. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    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.
     
  17. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 583
    J'aime reçus:
    0
    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]-->
     
  18. franckM
    franckM WRInaute impliqué
    Inscrit:
    15 Novembre 2007
    Messages:
    808
    J'aime reçus:
    0
    Qu'est ce qui ne marche pas sous IE ? car l'exemple en lui même marche aussi bien sur Firefox que sur IE.
     
  19. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
  20. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    merci guicara maintenant je sais ce que c'est un hack css mais j'ai tester ça ne résoud pas le problème :|
     
  21. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 583
    J'aime reçus:
    0
    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) ?
     
  22. franckM
    franckM WRInaute impliqué
    Inscrit:
    15 Novembre 2007
    Messages:
    808
    J'aime reçus:
    0
  23. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    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é
     
  24. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 583
    J'aime reçus:
    0
    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).
     
  25. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    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?
     
  26. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 583
    J'aime reçus:
    0
    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
     
  27. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    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:
     
  28. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 583
    J'aime reçus:
    0
    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.
     
  29. franckM
    franckM WRInaute impliqué
    Inscrit:
    15 Novembre 2007
    Messages:
    808
    J'aime reçus:
    0
    +1 il nous faudrait une page du site pour pouvoir voir clairement. Il doit y avoir des styles qui se chevauchent.
     
  30. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    arf on s'est croisé les messages, j'ai modifié le précédent ^^
     
  31. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    +1
     
  32. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 583
    J'aime reçus:
    0
    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.
     
  33. yoh666
    yoh666 Nouveau WRInaute
    Inscrit:
    30 Juillet 2010
    Messages:
    28
    J'aime reçus:
    0
    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... :|
     
Chargement...
Similar Threads - [css] souci menu Forum Date
[CSS] Alignement de cadre. Développement d'un site Web ou d'une appli mobile 24 Mai 2013
[CSS] Aligner une image à coté d'une div en display:table-cell ? Développement d'un site Web ou d'une appli mobile 2 Mai 2012
[CSS] Alignement vertical du texte Développement d'un site Web ou d'une appli mobile 20 Avril 2011
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010
[CSS] Comment faire apparaître le sous-menu ? Développement d'un site Web ou d'une appli mobile 22 Juillet 2010
Soucis de description dans les resultats google Problèmes de référencement spécifiques à vos sites 10 Juin 2020
Souci avec le code APE Droit du web (juridique, fiscalité...) 2 Août 2019
Résolu Souci de redirection censées éviter contenu dupliqué Débuter en référencement 31 Juillet 2019
WordPress Soucis 404 suite changement structure permaliens Référencement Google 18 Juin 2019
Souci de plantage en mode édition. WP et Xen Foro Administration d'un site Web 17 Juin 2019