barre de navigation verticale

[yelen]

bonjour a tous;
voilà, je commence la réalisation de mon site.
j'en suis encore au stade de la presentation, notement en ce qui concerne une
éventuelle bare de navigation verticale calé a gauche.
ma barre est divisée en plusieurs menus, classiquement.

j'ai donc essayer de placer d'abort mes images, et éventuellement les replacer avec des div, pour les ajuster;
puis de placer mes tableaux(avec des divs) par dessus.

mais comme les menus sont de taille differente, et que j'utilise une image de base, je dois etirer cette image. donc je dois aussi separer le corp du menu de son entète et de sa fin (sinon ils sont aussi étirer) . l'image est divisée en 3 parties, plus un tableau.. si je veux rajouter une ligne dans un menu je dois tout décaler a la main ce qui se trouve en dessous ..

bref, je doute que ma technique soit la bonne! j'aimerai bien un peut d'aide sur ce coup là. merci

[SB]

C'est sure que ce n'est pas la bonne technique, même si je n'ai rien compris à ce que tu voulais faire.
Je pense qu'un exemple serait plus parlant. Tu pourrais donner l'adresse de ton site même s'il n'est pas fini qu'on voit ce que tu as déjà fait et ce que tu voudrais faire ?

[yelen]

salute,
merci d'avoir repondu,

c'est exactement le même principe que les barres de naviguation a l'acceuille de Geckozone.
je parle des barres qui sont à gauche et a droite.
faut-il vraiment une image pour chaques sous menus dont la hauteur est differente? + tableau par dessu?
si ma page est très longue, et que je souhaite un motif, ou une image de fond a l'endroit de cette bare(comme ici aussi a l'acceuille: il s'agit d'un fond gris a gauche et a droite quand le menu se termine), comment dois-je m'y prendre?

en fait j'arrive a faire ce que je veux, mais de manière très laborieuse. et je ne voudrait pas que mon site(pas encore en ligne) mette des heures a s'afficher parce-que je ne m'y suis pas pris de la bonne manière.
++

[calimo]

Place d'abord le texte, tu réfléchira aux images ensuite.

Basiquement tu n'as pas besoin de mettre les images dans ton code HTML, tu peux les mettre en arrière-plan de ta CSS, ce sera plus propre et plus facile. Fait une liste non ordonnée toute simple

Code : Tout sélectionner

<ul>
<li><a href="">page1</a></li>
<li><a href="">page2</a></li>
</ul>

et ensuite tu t'occupera de la styler. Si tu veux mettre un titre à tes catégories, tu peux mettre un hx juste avant la liste (et éventuellement entourer le titre dans un div, mais ce n'est pas nécessaire) ou inclure ce hx dans le premier élément de la liste auquel tu aura attribué une classe spéciale.

Code : Tout sélectionner

<ul>
<li class="titre"><h4>Catégorie</h4></li>
<li><a href="">page1</a></li>
<li><a href="">page2</a></li>
</ul>

ou

<h4>Catégorie</h4>
<ul>
<li><a href="">page1</a></li>
<li><a href="">page2</a></li>
</ul>

Avec ce code tu peux faire tous les menus que tu veux

[nomade]

Je précise - au cas où - que par "hx", Calimo parle d'une balise de titre type <h1>, <h2>, ...

[Invité]

oki,
j'ai bien compris pour les listes, c'est très pratique c'est vrai. merci.
donc je place mes listes et ensuite mes images, avec la css??! je li partout que la css ne sert qu'a la mise en forme..
et puis surtout je voulais savoir coment placer mes images de manière souple si elles sont en trois parties imbriquées(ne parraissant n'être qu'une seule image) :une pour la tête ou le titre; une pour le corp qui contient la liste avec les liens; une pour la fin.

j'ai aussi édité le source de l'acceuille de CCM pour apprendre et comprendre comment eux on fait leurs menus. j'ai reussi a déchiffrer qu'ils utilisent des tableaux, et non des listes, avec un fondcolor pour chaques cellules. de cette manière, l'image du titre du menu + l'image de son corp + les liens sont dépendants du même objet, ce qui doit faciliter la maintenance.

mais lors-ce que je souhaite my prendre de cette manière, les images des cellules ne s'imbrique pas dans mon tableau. il y a un ecart blanc que je ne parvient pas a virer!

ca yest j'ai trouvé!! en fait c'est très simple!!! : Dans un sens genéral, je veux pouvoir découper une image en plusieurs parties, et la recomposer dans un tableau en rajoutant des liens dans les cellules! lol bonne solution pour un menu?

merci encore )

[calimo]

oki,
j'ai bien compris pour les listes, c'est très pratique c'est vrai. merci.
donc je place mes listes et ensuite mes images, avec la css??! je li partout que la css ne sert qu'a la mise en forme..

Ben oui, tes images c'est de la mise en forme non ? On parle bien de la mise en forme de ton menu... donc les CSS c'est exactement ce qu'il te faut !

et puis surtout je voulais savoir coment placer mes images de manière souple si elles sont en trois parties imbriquées(ne parraissant n'être qu'une seule image) :une pour la tête ou le titre; une pour le corp qui contient la liste avec les liens; une pour la fin.

Là je dois avouer que j'ai de la peine à saisir... tu parle bien d'un menu comme celui sur le portail de Geckozone ? Dans son cas les images sont placées en arrière-plan et il y a un espacement sur le texte je crois.

j'ai aussi édité le source de l'acceuille de CCM pour apprendre et comprendre comment eux on fait leurs menus. j'ai reussi a déchiffrer qu'ils utilisent des tableaux, et non des listes, avec un fondcolor pour chaques cellules. de cette manière, l'image du titre du menu + l'image de son corp + les liens sont dépendants du même objet, ce qui doit faciliter la maintenance.

Les tableaux ce n'est pas une bonne idée pour faire de la mise en page. Je ne sais pas ce qu'est "CCM" mais il y a de mauvais exemples à ne pas suivre, et je te déconseille de faire ta mise en page en tableaux pour beaucoup de raisons, et notamment celle là

mais lors-ce que je souhaite my prendre de cette manière, les images des cellules ne s'imbrique pas dans mon tableau. il y a un ecart blanc que je ne parvient pas a virer!

Les tableaux c'est la galère, oublie tout de suite

ca yest j'ai trouvé!! en fait c'est très simple!!! : Dans un sens genéral, je veux pouvoir découper une image en plusieurs parties, et la recomposer dans un tableau en rajoutant des liens dans les cellules! lol bonne solution pour un menu?

Non. Surement pas.

[Monique]

Bonjour,

oki,
je li partout que la css ne sert qu'a la mise en forme..

Hum... alors c'est que tu n'as pas encore trouvé les bonnes lectures
Les 2 principales fonctions d'une feuille de style :
- agir sur la mise en forme
- agir sur le positionnement des éléments
Quelques lectures :
- Les feuilles de style Pourquoi ? Comment ?
- CSS débutant
- Openweb
- Alsacréations

Tu y trouveras de nombreux bons exemples à étudier

[Invité]

salut ,

Code : Tout sélectionner

Les tableaux c'est la galère, oublie tout de suite Mort de rire

bien chef!
c'est vrai que beaucoup de gens me l'on dit aussi. Mais c'est tentant de tomber dans le piège ! Donc CSS . maitriser les CSS !!

SB, Calimo, Nomadfe et Monique
je vous remerci encore et vous tiendrait au courant quand le site sera en ligne.

Calimo : CCM : Le celebre www.commentcamarche.net !!
(ducoup je me demande si j'ai bien déodé leur source, si les tableaux c'est vraiment de la m.. bouarf, css de toute manière!)

by!
a++

[calimo]

Bonjour,

oki,
je li partout que la css ne sert qu'a la mise en forme..

Hum... alors c'est que tu n'as pas encore trouvé les bonnes lectures
Les 2 principales fonctions d'une feuille de style :
- agir sur la mise en forme
- agir sur le positionnement des éléments

J'incluais effectivement cette dernière catégorie dans "mise en forme", mais effectivement c'est plus "Mise en page"

Pour quelques exemples de ce qu'il est possible de faire en CSS, va sur le Jardin Zen CSS. Regarde la page avec CSS désactivé, et réactive-les. Tu peux alors naviguer entre les divers styles, tous faits avec le même code HTML. Regarde aussi la liste de tous les designs

Il est possible de faire des choses impressionnantes (toujours avec le même code HTML, si si je te jure !)

Bref, CSS ne se limite pas à changer les polices et les couleurs

Calimo : CCM : Le celebre www.commentcamarche.net !!
(ducoup je me demande si j'ai bien déodé leur source, si les tableaux c'est vraiment de la m.. bouarf, css de toute manière!)

by!
a++

Comme tu as pu le constater, le code est illisible. Ce n'est pas compréhensible pour un simple humain. Et comme tu l'a deviné ce n'est pas un exemple

Je crois que Monique t'a donné tous les liens qu'il faut, n'hésite pas à revenir poser des questions si tu en as encore