Besoin d'aide pour programmer un menu horizonta

Trung · 11 Août 2008

Bonjour à vous,

Voilà, je suis totalement débutant en conception de site web mais je fais beaucoup de webdesign, donc je fais le graphisme mais je n'ai aucune idée concernant la structuration d'un site.

C'est pour cela que je fais appel à vous, en espérant que vous puissiez m'aider =)

En fait je veux faire la barre de navigation horizontale juste en dessous de la bannière de mon site, et je veux que cela soit entièrement géré par des images cliquables, voici la barre en question dont je suis l'auteur:

Je voudrais que lorsqu'on clique sur la section, le logo rond rouge et bleu soit à l'endroit ou l'on a cliqué.

Voilà, si vous voulez plus de précisions, n'hésitez pas.

Merci beaucoup de votre aide

**iNCiTE Web** · 11 Août 2008

Tu peux gérer cela avec un rollover pour l'imge sélectionnée ; le tout en CSS et avec un peu de Javascript.

Sommairement tu génères 6 "zones" (div) avec un fond (tu découpes ton image d'origine en 6 parties, + 6 fois chaque avec le logo rond affiché) et tu changes le fond si la souris passe sur la zone.

Lire par exemple le tuto sur alsacreations

Trung · 11 Août 2008

Bonsoir iNCiTE Web,

Tout d'abord merci de m'avoir répondu.

Mais voilà, je ne connais pas grand chose en CSS et en xHTML, même si je comprends ce que tu dis, je ne sais pas comment mettre tout cela en forme..

En tout cas j'ai fais ce que tu as dis en découpant la barre et en faisant 2 versions de chaque:

**iNCiTE Web** · 11 Août 2008

Tu as regardé un peu le tuto sur le site ?

Ton site est déjà commencé ?

Le HTML devrait ressembler à :

<a href="#" class="actu"></a>
<a href="#" class="art"></a>
<a href="#" class="club"></a>

etc.

Le CSS :

.actu { background: url(/actual12.png) no-repeat; width: 110px; height: 56px; display: block; float: left }
.actu:hover { background: url(/actual11.png) no-repeat; width: 110px; height: 56px; display: block; float: left; }

etc.

A noter que IE6 ne comprend pas les :hover quand ce n'est pas un lien, il faudra donc un "hack" Javascript.

Trung · 12 Août 2008

Bonsoir,

Merci pour ces codes, même si je comprends pas tout ce qu'il faut faire..

J'ai lu le tutorial du site mais le but de mon site est qu'il soit accessible à tout le monde, même les internautes utilisant IE donc cette solution ne semble pas me convenir..

J'ai déjà commencé le site mais.. je n'ai quasiment rien fais à part quelques graphisme car une page déjà faite ainsi qu'un fichier CSS m'a déjà été donné et j'utilise NVU pour éditer le site, rien de bien difficile, néanmoins, j'ai les bases du XHTML ainsi que du CSS, c'est à dire que je comprends un peu la structuration (je viens de suivre un tuto sur le net)

Voici la page en question:

Page en question (Actualités)

Je voudrais que la barre en bambou soit placé sur le header centré vers le bas, si vous voyez ce que je veux dire.

Merci d'avance

Modifié 12 Août 2008 par Trung

**iNCiTE Web** · 13 Août 2008

Hello

Je t'ai dit une bêtise, cette solution de menu fonctionne parfaitement avec tous les navigateurs (par ailleurs celle dont je parlais est accessible à tous les navigateurs pour peu que l'on insère un petit bout de code)

Dans ta feuille style.css tu ajoutes :

a.actu { background: url(/actual12.png) no-repeat; width: 110px; height: 56px; display: block; float: left }
a.actu:hover { background: url(/actual11.png) no-repeat; width: 110px; height: 56px; display: block; float: left; }
a.art { background: url(/art10.png) no-repeat; width: 110px; height: 56px; display: block; float: left }
a.art:hover { background: url(/artd10.png) no-repeat; width: 110px; height: 56px; display: block; float: left; }

Avec donc 2 lignes pour chaque bouton, une fois l'image de base avec le :hover là avec l'image + le logo affiché. Tu devrais donc avoir pour ce menu 12 lignes ; évidemment c'est à toi d'adapter ensuite pour mettre les images et les chemins correctes !

Ensuite à l'endroit où tu veux placer le menu, tu insères :

<a href="#" class="actu"></a>
<a href="#" class="art"></a>
<a href="#" class="club"></a>

Etc... tu dois en avoir 6, le nom de la classe tu l'as compris doit correspondre au nom dans la feuille de style.

Trung · 13 Août 2008

Bonjour =)

Alors j'ai fais ce que tu as dit en modifiant le CSS et le Index mais on dirait qu'il y a quelques problèmes:

Il affiche qu'une image sur 2 oO

Quand on passe la souris dessus, le fragment de bambou disparait

Il reste à faire le positionnement de la barre mais je ne sais pas comment m'y prendre '

Voici le lien: Nouvelle page

Voici la partie du code CSS:

a.actu { 
		background: url(images/bambou/actualites.png) no-repeat; width: 110px; height: 56px; display: block; float: left 
}
a.actu:hover { 
		background: url(/images/bambou/actualitesad.png) no-repeat; width: 110px; height: 56px; display: block; float: left; 
}
a.art { 
		background: url(/images/bambou/art.png) no-repeat; width: 142px; height: 56px; display: block; float: left 
}
a.art:hover { 
		background: url(/images/bambou/artad.png) no-repeat; width: 142px; height: 56px; display: block; float: left; 
}
a.club { 
		background: url(images/bambou/club.png) no-repeat; width: 167px; height: 56px; display: block; float: left 
}
a.club:hover { 
		background: url(/images/bambou/clubad.png) no-repeat; width: 167px; height: 56px; display: block; float: left; 
}
a.calendrier { 
		background: url(/images/bambou/calendrier.png) no-repeat; width: 118px; height: 56px; display: block; float: left 
}
a.calendrier:hover { 
		background: url(/images/bambou/calendrierad.png) no-repeat; width: 118px; height: 56px; display: block; float: left; 
}
a.archives { 
		background: url(images/bambou/archives.png) no-repeat; width: 137px; height: 56px; display: block; float: left 
}
a.archives:hover { 
		background: url(/images/bambou/archivesad.png) no-repeat; width: 137px; height: 56px; display: block; float: left; 
}
a.forum { 
		background: url(/images/bambou/forum.png) no-repeat; width: 111px; height: 56px; display: block; float: left 
}
a.forum:hover { 
		background: url(/images/bambou/forumad.png) no-repeat; width: 111px; height: 56px; display: block; float: left;

Et le Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>





  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">








  <title>Vovinam Việt võ Đạo Fontenay-sous-Bois</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>


<body>



<div id="contenu">
<div id="entete">
<h1><br>




</h1><br>


<a href="#" class="actu"></a>
<a href="#" class="art"></a>
<a href="#" class="club"></a>
<a href="#" class="calendrier"></a>
<a href="#" class="archives"></a>
<a href="#" class="forum"></a>

Je voudrais que la barre soit placée comme ceci:

Merci bien, ça m'a permis d'avancer

Modifié 13 Août 2008 par Trung

**iNCiTE Web** · 13 Août 2008

Visiblement ça déraille partout où tu as mis "/images/..." comme chemin de fichier, et c'est ok quand tu mets "images/...". Il faut bien sûr que tu indiques un chemin correct pour tes images.

Pour le cadrage tu englobes le tout dans :

<div style="text-align: center; width: 822px; margin: auto; padding-left: 20px">ici le code avec les liens</div>

(enfin le mieux c'est de créer un objet dans la feuille de style comme #bandeau avec les propriétés.

tictact · 13 Août 2008

bonjour,

essaie une image comme ceci :

hauteur 112

largeur : total des largeurs de tes petites images

#menubar {
	position: relative;
	height: 56px;
	margin: 0 0 0 0px;
	clear: both;
	background: transparent url(../images/menu.png) left top no-repeat;
}

#menubar ul, #menubar li {
	margin:0;
	padding: 0;
	list-style-type: none;
}

#menubar ul {
	position: absolute;
	height: 56px;
	width: xxxxxpx;
	left: 0px;
}

#menubar li {
	float: left;
}

#menubar li a { /* dimensions et définitions des boutons */
	display: block;  /* mise en block de <a> pour lui donner des dimensions */
	height: 112px;
	width: 1200px;
	text-align: center;
}

#menubar a:hover {
  color: #000000;
  background: transparent url(../images/menu.jpg) top left no-repeat;
}

#menubar a#menu1:hover {
  background-position: -0px -56px;
}

#menubar a#menu2:hover {
  background-position: -110px -56px;
}

#menubar a#menu3:hover {
  background-position: -252px -56px;
}

#menubar a#menu4:hover {
  background-position: -419px -56px;
}

#menubar a#menu5:hover {
  background-position: -555px -56px;
}

<ul>
  <li><a id="menu1" title="actualités" href="http://www.monsite.com/actu.php">Actualités</a></li>
	<li><a id="menu2" title="artsmartiaux" href="http://www.monsite.com/art.php">Arts Martiaux</a></li>
	<li><a id="menu3" title="club" href="http://www.monsite.com/club.php">Club</a></li>
	<li><a id="menu4" title="calendrier" href="http://www.monsite.com/calendrier.php">Calendrier</a></li>
	<li><a id="menu5" title="archive" href="http://www.monsite.com/archives.php">Archives</a></li>
	<li><a id="menu6" title="forum" href="http://www.monsite.com/forum.php">Forum</a></li>
</ul>

exemple, lien en signature

Trung · 13 Août 2008

Merci beaucoup pour ces réponses et codes, je trouve ton code intéressant tictact et je l'utiliserai sûrement si je n'y arrive pas avec la première méthode .

Voici ce que ça donne:

http://creatinox.online.fr/vvd/index.html

Je pense qu'il me reste juste à descendre la barre, mais je ne vois pas comment faire '

Et puis j'ai un problème d'une autre nature qui n'a rien à voir avec le précédent, c'est dans le corps de la page, le texte dépasse la zone désirée, comment restreindre cette zone?

voici un exemple: http://creatinox.online.fr/vvd/2_maitre_fondateur.html

Merci d'avance =D

**iNCiTE Web** · 13 Août 2008

Un petit

margin-top: 10px

dans le style="" du conteneur (div), en adaptant la valeur...

Et pour les dépassements :

padding: auto 10px

Trung · 13 Août 2008

Bonjour, ça a marché pour le positionnement de la barre mais pour les dépassements, j'ai essayé de le mettre à divers endroits, mais cela persiste :/

**iNCiTE Web** · 13 Août 2008

Il faut l'appliquer à #corps dans la feuille de style.

Il y a aussi pas mal de nettoyage dans le code à faire... des <div></div> par exemple

Connexion

Besoin d'aide pour programmer un menu horizonta

Sujets conseillés

Trung

iNCiTE Web

Trung

iNCiTE Web

Trung

iNCiTE Web

Trung

iNCiTE Web

tictact

Trung

iNCiTE Web

Trung

iNCiTE Web

Veuillez vous connecter pour commenter

Parcourir

Activité