[Résolu] Problème couleur de fond de barre de navigation

Bonjour,

Je suis en train de refaire le design de mon site, et j'ai un petit problème sur le "background" de ma barre de navigation.

URL :
http://www.ycw.ie/newsite09/

Je voudrais que la partie gauche du fond de couleur de ma barre de navigation soit invisible, donc avant le jaune de "About us", je souhaiterais que le fond gris n'apparaisse pas :



J'ai tout essayé... sans succès ! Je vous remercie par avance pour votre aide.

Web Traveller
Modifié par web_traveller (03 Nov 2009 - 12:53)

Allo!

Ça serait pas ça le problème?

#mainnav {
background-color:#CCCCCC;
color:#FFFFFF;
float:left;
width:100%;
}

Le background de ton div est gris, et si tu le mets blanc? À moins que je n'ais pas tout compris...

Bonjour Julie,

Merci de ta réponse. En fait je souhaite avoir le fond gris sur la droite, mais pas sur la gauche, d'où mon problème.

Voir image :


Du coup j'ai besoin du width 100% il me semble, non ?

As-tu une solution ? Je pourrais peut-être utiliser un "float", mais j'ai essayé avec de multiples façons et malheureusement à chaque fois ça me déplace tout comme il faut pas...

En te remerciant,

Web Traveller

Ah! j'y avais bien pensé, mais je n'étais pas sûr.

Normal, tu utilise ton background sur ton div qui contient le menu en ul et li... Je vois 2 possibilité, tout dépendant de ce que tu souhaite obtenir.

Option 1:
Tu ajoute un li supplémentaire avant ton premier li About Us...
Ce li n'aura pas de lien, mais aura une largeur correspondant à l'espace gris que tu souhaite caché, le tout avec un fond en blanc. Normalement le li étant placé à l'intérieur du div, devrait caché le gris.

Option 2 (selon moi la meilleur):
Tu rapetisse la largeur de ton div. Le div part du About Us, et tu y ajoute un margin qui correspond à l'espace gris que tu souhaite caché.

Voilà!

Merci Julie.

Je ne souhaite pas utiliser l'Option 1 que tu me proposes, d'un point de vue sémantique ce serait incorrect et je ne veux pas avoir un <li> vide.

L'Option 2 est celle que j'essaie d'accomplir depuis des jours... Malheureusement je ne vois pas comment faire. Le site est de largeur fluide, donc je ne connais pas la largeur de la barre de navigation (différente selon la personne qui regardera le site). C'est pour ça que j'ai width: 100%; dans #mainnav.

Quelqu'un aurait-il la solution ?

Mille merci !

Web Traveller

Tu pourrais peut-être nous montrer le code de ce que tu essaie de faire pour donné une idée. Des fois on a tellement le nez dedans qu'on y voit plus rien!

Voilà le code HTML :

<div id="mainnav">	
            <ul>     
                <li><a href="/aboutus/index.php" id="aboutus_nav">About us</a></li>
                <li><a href="/getinvolved/index.php" id="getinvolved_nav">Get involved!</a></li>

                <li><a href="/programmes/index.php" id="programmes_nav">Programmes</a></li>
                <li><a href="/projects/index.php" id="projects_nav">Projects</a></li>
                <li><a href="/resources/index.php" id="resources_nav">Resources</a></li>
                <li><a href="/links/index.php" id="links_nav">Links</a></li>
            </ul>
        </div>

Et le code CSS :

#mainnav {
	float: left;	
	background-color: #cccccc;
	color: #FFFFFF;
	width: 100%;
}

#mainnav ul {
	padding: 0 0 0 200px;
	margin: 0;
	background-color: #cccccc;
	color: #FFFFFF;	
}

#mainnav ul li {
	display: inline;
}

#mainnav ul li a {
	float: left;
	padding: 0.2em 1em;
	color: #FFFFFF;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;	
	border-right: 3px solid #fff;
}

Ce que je veux accomplir : pas de fond gris à gauche sur la barre de navigation, mais un fond gris à droite (voir image en fichier attaché).



Merci de votre aide.

Si tu enlève ton le gris de ton div

ensuite tu applique un display block à ton ul et lui donne une largeur prédéfini, puis un margin à gauche d'environ l'espace du gris à caché? JE dis bien environ... parce qu'il faut bien tester... là je dis ça un peu à l'aveuglette!

Bonjour,

Comme ca vite fait, j'ai plutôt joué avec ton menu gauche

#sidebar_a_home {
background-color:#FFFFFF;
clear:both;
display:inline;
float:left;
margin:-24px 0 0;
padding:34px 15px 5px 5px;
width:180px;
}

Ca marche sous FF j'ai pas eu le temps de tester sous IE Safari etc...

Bonne journée

EDIT

ou dans le même esprit et sans margin négatif en jouant uniquement sur le menu :

#mainnav {
background-color:#CCCCCC;
color:#FFFFFF;
float:left;
margin-left:200px;
width:100%;
}

avec

#mainnav ul {
background-color:#CCCCCC;
color:#FFFFFF;
margin:0;
padding:0;
}

Bon courage
Modifié par Maki (03 Nov 2009 - 12:18)

Bonjour à tous et merci infiniment pour toutes vos suggestions.

J'ai trouvé la solution en utilisant une image de fond pour la gauche de mon menu. J'ai créé une image de couleur blanche de 200 pixels de large (la largeur que je souhaitais cacher) et 1 pixel de hauteur, et en utilisant cette image en fond sur ma barre de navigation en la répétant verticalement... le tour est joué !!

Voilà ce que j'ai fait :

J'ai remplacé :

#mainnav {
float: left;
background-color: #cccccc;
color: #FFFFFF;
width: 100%;
}

Par :

#mainnav {
float: left;
background-color: #cccccc;
background-image: url(/images/white_bg_navbar.gif);
background-repeat: repeat-y;
color: #FFFFFF;
width: 100%;
}

Merci encore pour toutes vos réponses.

Web Traveller

Ceci ferait un code plus léger:

#mainnav { 
float: left; 
background: #cccccc url(/images/white_bg_navbar.gif)  repeat-y;
color: #FFFFFF; 
width: 100%; 
}

Bonne idée Julie, merci !