[Résolu] Positionnement d'un menu

Bonjour à tous !

Je reviens encore une fois (2 fois en 2 jours ...) pour demander votre aide ...

J'ai un header qui est une image en un seul bloc et dans lequel se trouve un menu : http://www.myktools.fr/images/site/header.jpg

Comme vous vous en doutez, je désire mettre des liens pour ce menu ...

J'ai donc voulu suivre ce tuto
Mais le problème c'est que quand je mettez float : left ou display : block ça descendait tout le contenu qu'il y a après

J'ai donc fait comme maintenant : http://myktools.fr mais j'ai un problème ... En utilisation position : absolute, ça ne prend pas compte le centrage de mon design et encore pire la résolution de la personne qui visite le site ...

Quelle solution envisagée pour faire fonctionner ce menu ? Sachant que j'aimerais bien éviter la découpe de chque morceau du menu

Merci d'avance !
Modifié par K20 (07 Nov 2006 - 22:57)

Quelqu'un a trouvé une petite idée ? Car moi toujours pas

Bonjour,

Je crois qu'il y a gourance ... Ce tuto n'est pas fait pour cela enfin pas pour ton cas (design fluide si j'ai bien compris).
Re visite les gabarits de mises en page tu y trouveras sûrement ton bonheur plus simplement.

Hum ok, et c'est où les gabarits de mise en page ?

Merci pour ton aide

Salut K20.

Il y a un petit soucis pour ton menu : les liens sont totalement vides

Ce qui veux dire que tu te fies à l'image d'arrière-plan pour afficher le "contenu" du lien ... Ce qui pose plusieurs problèmes : pour la théorie, tu places une partie du contenu du site (l'intitulé du lien) dans la partie CSS, alors que les feuilles de style ne doivent s'occuper que de la présentation, le contenu devant se trouver dans le code html. Plus concrètement, si pour une raison quelconque ton image est indisponible, ton lien devient inutilisable. Il n'y a aucune alternative au rendu visuel, contrairement à ce qui se passe si tu places l'image en dur dans le code html (où un texte de remplacement est prévu).

Donc, il faut repenser un peu tout ça. Tu vas devoir faire la découpe du menu, mais ce n'est pas si compliqué que ça, si ? Tu dois pouvoir obtenir des images de même dimensions, à première vue ...

Ensuite, tu remets toutes ces images dans une liste :

<ul id="menu">
  <li><a href="accueil.php" title="retour en page d'accueil"><img src="img/accueil.png" alt="Accueil" /></a></li>
  ...
</ul>

On verra ensuite pour le positionnement

C'est ce que j'avais pensais faire au départ mais ça risque d'être galère car ce n'est pas vraiment de la même taille ça encore ça se règle ...
Mais le truc c'est qu'il y a une séparation entre chaque lien (la barre oblique) et elle ne doit pas être cliquable ...

a écrit :
tu places une partie du contenu du site (l'intitulé du lien) dans la partie CSS, alors que les feuilles de style ne doivent s'occuper que de la présentation, le contenu devant se trouver dans le code html

Heu c'est le cas dans mon code non ?
Pour le moment c'est normal que les liens soient vides ^^ car je veux que ça soit bien placé (ou alors on ne parle pas de la même chose )

a écrit :
si pour une raison quelconque ton image est indisponible, ton lien devient inutilisable.

Dans tous les cas le lien sera sur l'image (et de totue façon si l'image ets indisponible tout le site le sera )

Donc ce que tu me conseilles c'est de découper mon menu c'est ça ?
Pourquoi pas, si on m'explique derrière comment bien palcer tout ça

a écrit :
Dans tous les cas le lien sera sur l'image (et de totue façon si l'image ets indisponible tout le site le sera ravi )

Ah ben non. Il peut se passer plein de trucs sur un serveur et tu oublies les visiteurs qui ne veulent ou ne peuvent pas afficher les images (notamment ton ami googlebot !).

a écrit :
tu places une partie du contenu du site (l'intitulé du lien) dans la partie CSS, alors que les feuilles de style ne doivent s'occuper que de la présentation, le contenu devant se trouver dans le code html

Heu c'est le cas dans mon code non ?Pas pour le menu, puisque l'intitulé du lien (=contenu, HTML) apparaît uniquement sur l'image de fond (=décoration, CSS)

Je te conseille effectivement de découper le menu. Personnellement, ça ne me dérangerait pas que la zone cliquable soit étendu sur les séparations en diagonale, mais si tu ne veux pas ... Tu peux alors utiliser toute l'image du menu sans les textes comme arrière-plan de la liste, et n'utiliser que la partie centrale de chaque item, avec le texte comme image en dur dans le lien.

Ok j'ai compris ce que tu veux dire

a écrit :
Tu peux alors utiliser toute l'image du menu sans les textes comme arrière-plan de la liste, et n'utiliser que la partie centrale de chaque item, avec le texte comme image en dur dans le lien.

C'est plutôt ce que je voudrais faire (plus facile pour moi et juste les liens à découper )

Mais après je fais comment pour placer au bon endroit mes boutons car ils ne sont pas exactement au milieu du design je crois ... (ouai je sais j'aurais du )

Merci pour ton aide

Le plus simple, ce serait de déplacer ton menu en tête du div #contenu, à sa place dans la structure de la page.

La liste devrait se placer au bon endroit toute seule .

a écrit :
Le plus simple, ce serait de déplacer ton menu en tête du div #contenu, à sa place dans la structure de la page.

Que veux-tu dire par là ?

Au point de vue de mon code HTML ça donnerait quoi ?

a écrit :
La liste devrait se placer au bon endroit toute seule

ça serait merveilleux

Et bien, tu as 3 colonnes. Quand tu regardes le site, pour moi, le menu est en tête de la 2e colonne, pas dans le header.

Donc dans le code html, je mettrais

<div id="contenu">
  <ul id="menu">
    <li> .... comme tantôt [cligne] ... </li>
    ...
  </ul>
  ...

Edit : la 2e colonne, évidemment, pas la 3e
Modifié par Sopo (06 Nov 2006 - 10:51)

Ok et l'image du header je la mes après ?

Non, tu ne touches pas au header. Simplement, tu diminues sa hauteur pour ne plus afficher le menu

Ok je pense avoir compris
Je finis tout le reste sur le site et je teste ça et je vous tiens en direct dès que c'est fait !

K20 a écrit :
Bon voilà, j'ai fait la découpe, maintenant reste plus qu'à régler la position des images ... Pour le moment c'ets pas trop ça :s

J'ai essayé de mettre ça :

#menu ul li img { display:inline; }

Mais il ne me le met pas en ligne :|

Les images sont en ligne, mais si chacune est contenue dans un <li> qui lui est de type bloc, alors chaque <li> (et donc chaque <img>) ira à la ligne, logiquement.

EDIT : j'ai réussi j'ai mis ça :

#menu li { list-style-type:none; display:inline; }

Par contre c'est pas vraiment au bon endroit ...
Modifié par K20 (06 Nov 2006 - 12:17)