Webmaster Hub > Besoin d'aide pour programmer un menu horizonta

Version complète: sur le forum Webmaster Hub : Besoin d'aide pour programmer un menu horizonta

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Trung

lundi 11 août 2008 à 18:14

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

lundi 11 août 2008 à 20:25

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

lundi 11 août 2008 à 21:29

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

lundi 11 août 2008 à 22:36

Tu as regardé un peu le tuto sur le site ?
Ton site est déjà commencé ?

Le HTML devrait ressembler à :

CODE

etc.

Le CSS :

CODE

.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

mardi 12 août 2008 à 22:54

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

iNCiTE Web

mercredi 13 août 2008 à 08:52

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 :

CODE

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 :

CODE

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

mercredi 13 août 2008 à 10:54

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:

CODE

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:

CODE

<!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

iNCiTE Web

mercredi 13 août 2008 à 12:04

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 :

CODE

<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

mercredi 13 août 2008 à 13:57

bonjour,
essaie une image comme ceci :

hauteur 112
largeur : total des largeurs de tes petites images

CODE

#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;
}

CODE

<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

mercredi 13 août 2008 à 16:40

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

mercredi 13 août 2008 à 17:07

Un petit

CODE

margin-top: 10px

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

Et pour les dépassements :

CODE

padding: auto 10px

Trung

mercredi 13 août 2008 à 18:09

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

mercredi 13 août 2008 à 18:16

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.