18078 sujets

Questions générales et questions de débutants

[nouveau probème] Petit souci CSS avec un menu

Bonjour,

c'est mon tout premier post sur le forum, et pour commencer, je tiens à remercier l'équipe d'alsacreations pour la qualité du site, son contenu, sa philosophie ... bref pour faire avancer les choses dans le bon sens Smiley smile

Je suis en train de revoir le design d'un de mes sites, je me suis inspiré du design "en 5 étapes". L'inconvénient avec les débutants, c'est que l'on a plein de questions!

J'aimerai améliorer le menu, car mon site est en 3 langues. Je souhaite ajouter des petits drapeaux pour chaque langue. Rien ne vaut une image, donc voici ce à quoi devrait ressembler mon site:
http://www.expat-blog.com/ecrans/nouveau.gif

Bon dans l'image ci dessus j'ai triché en mettant plein d'espaces pour décaler mes drapeaux Smiley confused

Comment puis-je faire pour intégrer ces images à mon menu?

Merci d'avance pour votre aide!

A bientôt,

Jules
Modifié par Jules- (30 Dec 2005 - 11:11)
Merci je teste ça de suite!

J'avais parcouru le tutoriel mais je manque vraiment de mise en pratique. Mais je m'y mets Smiley cligne
Juste une ch'tite question: je declare trois blocs avec mes trois drapeaux en background. Comment faire pour les rendre cliquable (sans texte)?
Désolé d'avoir posté si vite je crois que j'ai trouvé, en ajoutant cela ca fonctionne:

.langEN a
{
width: 34px ;
height: 24px ;
display: block ;
position: relative ;
}
.langEN a span
{
display: none ;
}

Je me suis inspiré de la technique utilisée dans le header du "design en 5 étapes".

mais une interrogation: cacher du texte de cette manière, ca n'est pas déconseillé pour le référencement du site? (vraiment aucun risque?)
Jules- a écrit :
mais une interrogation: cacher du texte de cette manière, ca n'est pas déconseillé pour le référencement du site? (vraiment aucun risque?)


Pourquoi faire compliqué ? Smiley biggol 

<a href="page_france.htm">
<img src="france.gif" alt="Français" />
</a>

Modifié par chmel (13 Dec 2005 - 01:08)
En fait j'ai besoin d'un peu plus d'explications car ca ne fonctionne pas bien du tout ... je m'explique:

voilà le code html correspondant à mon menu:
<ul id="menu">
<li><a href="directory.htm">Directory</a></li>
<li><a href="blog.htm">Free Blog </a></li>
<li><a href="pictures.htm">Pictures</a></li>
<li><a href="resources.htm">Resources</a></li>
<li><a href="forum.htm">Forum</a></li>
</ul>

Est ce que je dois ajouter mes drapeaux avant le </ul> ou aprés? Et sous quelle forme? J'ai essayé avec du code basé sur le conseil de chmel ca ne marche pas du tout sous IE ... Smiley decu

Je suis perdu là, mais quand j'aurais compris je suis sûr que je me dirai "ah oais c'est trop simple en fait!"
Bonjour,

Je suis nouveau et novice, mais comme c'est pour aider.

J'ai vu ou lu, que l'on peut faire une seule image et definir des liens différent suivant l'endroit ou tu cliques, c'est peut être une idée à voir. Tu crée une seule image avec tes trois drapeaux et tu détermine la position de tes liens.

J'espère que j'ai pas écrit une grosse bétise, au cas où désolé.

Amitiés.
Bonsoir,

Jules- a écrit :
Est ce que je dois ajouter mes drapeaux avant le </ul> ou aprés? Et sous quelle forme? J'ai essayé avec du code basé sur le conseil de chmel ca ne marche pas du tout sous IE ... Smiley decu

Je suis perdu là, mais quand j'aurais compris je suis sûr que je me dirai "ah oais c'est trop simple en fait!"


Ah, que ce serait simple si, si, si... CSS2.1 était correctement implémenté par IE et FF !

Comme ce n'est pas le cas, c'est un petit peu compliqué. Ici, au plus direct :
- placer les images à la suite dans un simple <div><a ...><img...> <a...><img...> etc.</div>
- placer ce div avant la liste ul dans le code HTML
- faire flotter le div à droite
- commencer à débuguer.
Merci pour ton conseil, j'ai jeté un coup d'oeil à plusieurs sites donnant pas mal d'exemples de menu mais je n'y ai pas trouvé mon bonheur (peut-etre que j'essaie de faire qq chose d'assez compliqué en CSS? avec des tableaux je sais comment faire ça en 2 sec mais j'aimerai ne pas les utiliser)

Je ne sais pas si définir des zones cliquables est la meilleure solution ... qu'est ce que les specialistes en pensent?
Merci Laurent je vais tester ça ... qu'entends-tu par "commencer à debugger"? (c'est jamais tres rassurant comme expression Smiley confused )
Okie ca marche super sur Firefox mais par contre j'ai un léger problème sous IE (comme par hasard), avec un léger décalage sans fond entre les drapeaux... ca donne ça:

http://www.expat-blog.com/ecrans/flags.gif

J'ai bricolé mes padding, margin, background color ... rien à faire. Peut-etre que qq'un connait une petite astuce?
J'ai posté un peu vite, avec une image de fond dans le div (la meme image de fond quand dans mon menu) je n'ai plus les espaces entre les drapeaux. Par contre j'ai un espace blanc (sous IE) entre le menu et le div ...
Ah... Le débugage commence, apparemment Smiley cligne

Hum... si ta liste <ul> n'est pas flottante, il s'agit peut-être bien d'un three pixel jog. Auquel cas, tu ne peux sans doute le dissimuler en appliquant ta couleur d'arrière-plan à un conteneur englobant le tout.

N'hésites pas à donner une url (ou, à défaut, le code HTML et CSS) : il sera plus facile de t'aider.
Super l'idée d'un conteneur de plus haut niveau Laurent, ça fonctionne parfaitemment! Merci beaucoup pour ton aide! Smiley smile

Chouette je vais pouvoir avancer la mise à jour du style de mon site, pour l'instant il ressemble à ça: expat blog il ressemblera bientôt à ce que j'ai montré un peu plus haut Smiley cligne
Pour améliorer la navigation sur mon site, et en m'inspirant d'Alsacreations, je souhaite ajouter une sorte de reminder à droite, donc j'utilise un cadre float:right ...

Ca passe tres bien sous firefox mais IE positionne le cadre à la suite de mes petits drapeaux ... Ca donne ça (j'ai mis une petite flèche):

http://www.expat-blog.com/ecrans/decalage.gif

Existe t-il une instruction qui fasse office de "break"?

J'ai mis en ligne la page ici: http://www.expat-blog.com/expat-blog2/blog2.htm

la feuille CSS est ici: http://www.expat-blog.com/expat-blog2/expat6.css

Merci d'avance pour votre aide!

Julien
Sujet clos
Aller à