28172 sujets

CSS et mise en forme, CSS3

Menu avec image en background css

Bonjour,

Voici mon problème :

Je souhaite créer un menu texte et avec une image en background (ex : http://www.chocolats-bouvier.fr)

Mon problème est que je ne veux pas que cette image soit dans le body (comme dans l'exemple) mais en relation avec l'url sur laquelle je suis.

Voila mon problème :
mon image ne s'affiche que de la largeur de mon texte alors que je voudrais que mon image prenne tout l'espace en dessous du menu (940px) et s'alligne à gauche.

upload/24630-Image9.png

Mon CSS :
#access a {
color: #ff7b00;
background-image:url(http://blog-patisserie-jean-luc.fr/wp-content/themes/twentyten-pat/images/bd3.jpg);
background-repeat:no-repeat;
height: 140px;
}

Aidez moi svp je suis vraiment dans la galère.

Merci d'avance !
Bonjour, je ne suis pas certaine de bien comprendre ce que tu cherches à faire.

Dans l'exemple que tu donnes, c'est un slideshow qui se positionne en bas du menu.

Ce que je comprends c'est que tu cherches à mettre une image dans le bloc en bas de ton menu qui serait reliée à tes liens de menu. Autrement dit, quand je suis sur le lien, l'image dans le bloc change ?

Si tu peux nous donner plus de détails et une partie de ta structure html, ça aiderait...
Salut,

Pourrais-tu poster la totalité de ton code, ou mettre un exemple de ta page en ligne?
cela sera plus simple à analyser.
Voila le lien de mon site : http://blog-patisserie-jean-luc.fr/
Je souhaite que lorsque l'on clique sur l'onglet test ou actualité, une image apparaisse en dessous du menu.

en effet tu as raison Mabelle

a écrit :
Ce que je comprends c'est que tu cherches à mettre une image dans le bloc en bas de ton menu qui serait reliée à tes liens de menu. Autrement dit, quand je suis sur le lien, l'image dans le bloc change ?


mamax tu veux mon code html ou css?

juste une précision : je suis sous wordpress. Cela n'affecte en rien le menu puisque je le gère comme une page html classique.
Mon Code CSS pour le menu :

#access {
	background: #350800;
	display: block;
	float: left;
	margin: 0 auto;
	margin-top: -68px;
	width: 940px;
	color: #fff;
	font-weight : bold;
}
#access .menu-header,
div.menu {
	font-size: 12px;
	zmargin-left: 12px;
	width: 928px;
	color: #fff;
}
#access .menu-header ul,
div.menu ul {
	color: #fff;
	list-style: none;
	margin: 0;
}
#access .menu-header li,
div.menu li {
	color: #b4b5b7;
	float: left;
	position: relative;
	text-align: center;
	}
#access a {
	color: #fff; /* =texte menu + hauteur de ligne*/
	display: block;
	line-height: 20px;
	padding: 0 10px;
	width: 90px;
	text-decoration: none;
}
#access ul ul {
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	display: none;
	position: absolute;
	top: 38px;
	left: 0;
	float: left;
	width: 180px;
	z-index: 99999;
	color: #fff;
}
#access ul ul li {
	min-width: 180px;
	color: #ff7b00;
}
#access ul ul ul {
	left: 100%;
	top: 0;
	color: #ff7b00;
}
#access ul ul a {
	background: #2f130e;
	line-height: 1em;
	padding: 10px;
	width: 160px;
	height: auto;
	color: #ff7b00;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #b4b5b7;
	color: #ff7b00;
}
#access ul li:hover > ul {
	display: block;
	color: #ff7b00;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #ff7b00;
	background-image:url(http://blog-patisserie-jean-luc.fr/wp-content/themes/twentyten-pat/images/bd3.jpg);
	background-repeat:no-repeat; 
	float:left;
	width: 90px;
	height: 140px;
}
j'ai pas vu ton html, mais si tu veux que ton image prenne toute la largeur d'un bloc, elle doit etre en "display:block;"

la le problème dans ton css, c'est que tu lui défini une largeur de 90px à ta div qui affiche l'image.

pour le site du chocolatier, l'image est modifiée soit à la main dans le code HTML, soit dynamiquement en JS ou en PHP, en tout cas pas seulement en CSS.
Et comment je peux faire ca en JS ou PHP?
Oui j'ai vu que ma largeur était de 90px.
Le problème et que si je mets une largeur identique à celle de la photo, tout mon menu s'en trouve décalé !
Bonsoir,

Ce qui pourrait marcher pas mal, c'est d'utiliser un pseudo-élément :before et de le positionner en absolu.
Par exemple, pour des images de 940px de large et 80px de haut, de tu aurais un code CSS ressemblant un peu à ceci:
ul#nav {
  position: relative;
  margin: 0;
  padding: 0 0 80px 0;
}
ul#nav > li {
  display:inline-block;
}
ul#nav > li > a {
  display: block;
  padding: 10px 20px;
}
ul#nav > li > a:before {
  display: none;
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  background: url(image à afficher...) no-repeat;
}
ul#nav > li > a:hover:before,
ul#nav > li > a:focus:before {
  display: block;
}

Il faut bien sûr varier l'image de fond pour chaque lien, ou bien utiliser la technique des sprites CSS (plutôt adaptée ici).

À noter: la technique que j'esquisse ci-dessus (et je précise que c'est une esquisse, pas du code fonctionnel à copier-coller...) n'est pas très compliquée, mais mieux vaut avoir de bonnes bases en CSS si on veut la mettre en place.
Modifié par fvsch (07 Feb 2011 - 18:33)
Sujet clos
Aller à