Aller au contenu

Besoin d'aide pour programmer un menu horizonta

Trung

Par Trung
dans (X)HTML et CSS

 Partager

Sujets conseillés

Trung

Trung

Posté
Posté

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:

barre_10.png

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

Lien vers le commentaire
Partager sur d’autres sites
iNCiTE Web

iNCiTE Web

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Trung

Trung

Posté
  • Auteur
Posté

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:

actual12.pngactual11.png

art10.pngartad10.png

club11.pngclubad10.png

calend12.pngcalend11.png

archiv10.pngarchiv11.png

forum10.pngforuma10.png

Lien vers le commentaire
Partager sur d’autres sites
iNCiTE Web

iNCiTE Web

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Trung

Trung

Posté
  • Auteur
Posté (modifié)

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é par Trung
Lien vers le commentaire
Partager sur d’autres sites
iNCiTE Web

iNCiTE Web

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Trung

Trung

Posté
  • Auteur
Posté (modifié)

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:

header10.png

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

Modifié par Trung
Lien vers le commentaire
Partager sur d’autres sites
iNCiTE Web

iNCiTE Web

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
tictact

tictact

Posté
Posté

bonjour,

essaie une image comme ceci :

menuclub.png

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

Lien vers le commentaire
Partager sur d’autres sites
Trung

Trung

Posté
  • Auteur
Posté

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

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...