28220 sujets

CSS et mise en forme, CSS3

Bonjour!

J'étais un ancien programmeur avec des tables. J'ai été complètement transformé en programmeur CSS Smiley smile Cependant, jusqu'à présent, je n'avais fait que des sites web simple avec un header, menu textuel, centre et footer. Je suis maintenant confronté à un site qui me donne le gout de retourné au table.

Dans l'image ci-dessous, vous verrez le menu. J'ai découpé comme ca, mais je ne sais pas trop comment m'y prendre pour programmer ce menu graphique. Dois-je placer individuelle chaque "image-lien" à l'aide de coordonnée en pixel ou y a t'il un moyen plus simple?

Je n'attend pas de vous du code, à moins que ce soit absoluement nécessaire pour expliquer, mais plutot un avis pour savoir comment attaquer ceci. Je vous remercie infiniment en avance!

Jaff upload/2595-comprendre.jpg
connecté
Administrateur
Hello Jaff,

Un menu gaphique est un menu comme les autres, c'est à dire une liste de liens. La seule différence est que ces liens ont un arrière-plan sous forme d'image.

Il suffit donc de baliser ton menu à l'aide des éléments de liste (ul, li), puis de les mettre en forme à loisir à l'aide des CSS.

Tu trouveras à cette adresse un PDF regroupant plusieurs tutoriels qui expliquent comment réaliser un menu en CSS.

La Galerie de menus CSS te donneras de bonnes indications aussi : tu remarqueras que le code HTML est pratiquement le même pour chaque menu, seul la mise en forme (CSS) change.

Bonne chance Smiley smile
Jaff a écrit :
Bonjour!

J'étais un ancien programmeur avec des tables. J'ai été complètement transformé en programmeur CSS Smiley smile


"programmeur" ne me semble pas adapté et correct pour qualifier quelqu'un qui conçoit (design) une page Web (HTML/XHTML) avec des langages à balises (Markup) ou de règles de style.

Concepteur (designer) ou intégrateur est un terme plus approprié non ? Smiley cligne
Pour ce qui est du terme programmeur, j'ai utilisé ca comme ca! J'avoue que faire du CSS et du html n'est pas vraiment de la programmation puisque il n'y pas de "if", "else", "switch" ou autre fonction. Cependant, j'ai dit ca car je fais aussi du PHP ainsi que plein d'autres language de programmation.

Pour revenir au sujet, je sais comment mettre un fond et mettre du texte par dessus.. Cependant, ce n'est pas du texte si vous regardez comme il faut, mais bien une image. Je veux que l'image elle même fasse le lien car c'est du texte un peu croche avec une police spéciale et je ne veux pas la faire télécharger aux visiteurs. Je ne sais pas si je m'Exprime comme il faut, n'hésitez pas à poser des questions!
Merci d'avance pour vos idées

Jaff
Salut Jaff, Raphaël t'a proposé de jetter un oeil aux tutos, en faisanst référence à une technique de remplacement du texte par des images. Avec cette technique, côté visuel, on voit l'image, côté code, on a des liens avec du texte "en dur".