5568 sujets

Sémantique web et HTML

Conseils pour le passage d'une interface en xhtml

Bonjour

Je suis étudiant en multimédia. Actuellement je participe dans le cadre d'un projet pédagogique à la réalisation d'un site web. Parmi les membes du groupe je suis le seul à avoir des compétences en xhtml. J'aimerai avoir vos conseils pour passer l'interface suivante en xhtml :

http://images2.pictiger.com/images/0c/ee077645e263949f96f6260e831a0c0c.jpg

Je vous remercie d'avance de votre aide.

Je précise que les images de gauche sur le bandeau seront cliquables (candidat et entreprises).
Modifié par skynicko83700 (19 Jan 2006 - 22:09)
Salut,

Bon alors comme ça, à l'oeil, je dirais :
- 1 header avec
- 1 h1 (avec le titre et le sous-titre dedans), avec une méthode de substitution de la famille FIR/GIR & co (je dis ça car les polices ne sont apparemment pas des courantes)
- 1 liste pour le menu vertical
- 2 liens positionnés, avec substitution texte/image (cause police idem)
- 1 conteneur zone principale avec 3 div : 1 par colonne
et pour la partie centrale, tes news pourraient être faites de dl/dt/dd ou de hn/div/p par exemple
Marvin Le Rouge a écrit :
- 2 liens positionnés, avec substitution texte/image (cause police idem)

Tu parles de quelle partie là ? Parce que si c'est pour un texte qui n'est pas vraiment appelé à bouger, on peut tout simplement mettre une image...

Par exemple, on peut faire ça :
http://web.covertprestige.info/test/01-zone-cliquable-graphique-et-accessible.html

Au passage : j'ai mis un titre à cette page pour remplir le vide, mais je ne sais pas trop si c'est accessible ou pas. En principe oui, tant qu'on n'oublie pas l'attribut alt pour l'image sur laquelle porte le lien.
En tout cas, ça valide (c'est déjà ça !).
Modifié par mpop (20 Jan 2006 - 00:32)
Merci beaucoup pour vos conseils et aussi pour l'exemple pour positionner les images.

Je vais faire une premiere version dans 15 jours et je vous montrerai ce que ça donne.
Testé sur un peu tous les navigateurs récents. Pas de problème particulier (j'avais un peu peur sur le width et height à 100% pour l'élément <a>, mais il semblerait qu'il n'y avait pas de raison).

Note : le but de ce lien à l'intérieur de la div plutôt qu'à l'extérieur (ce qui aurait semblé logique pour faire un lien sur une zone définie par la div) est de rester conforme xhtml 1.0 strict. Il me semble qu'en xhtml 1.0 strict, on ne peut pas imbriquer un élément de type bloc dans un élément de type en ligne.
Pas mal.
Tu as apparemment combiné des dimensions en px (la largeur des colonnes) avec des dimensions en em (la largeur des champs de saisie) : c'est dangereux, l'un explosant l'autre au redimensionnement.
Sinon, j'ai l'impression que tes tailles de polices sont un peu trop grandes (test sous FF).

[HORS-SUJET]Tu as mal mis les balises autour de ton url Smiley cligne [/HORS-SUJET]
Modifié par Marvin Le Rouge (29 Jan 2006 - 10:53)
Par contre j'ai un petit soucis concernant le menu qui se trouve sur le bandeau. J'ai mis des puces devant les intitulés des rubriques.

Cependant j'aimerai que la puce change de couleur et n'apparaisse seulement devant l'onglet qui est en état de survol.
Puis une fois que l'on clique sur un onglet j'aimerai que la puce reste affiché devant celui ci (c'est pour montrer à l'utilisateur sur quel onglet il a cliqué en dernier)

Avez vous une idée ?
J'ai une autre question, quand la partie centrale est plus courte que les colonnes, et bien on voit une démarquation de couleur.
J'aimerai savoir comment faire pour que la partie centrale soit toujours au meme niveau que les colonnes ?
Salut,

Pour l'apparence de la puce lors du survol il te faut définir ça en css après un sélecteur genre 
#bandeau a:hover {...}
(à adapter, j'ai pas regardé comment est fait ton code!)
Pour que la puce reste présente sur la page active, une des solutions est une ligne de style incluse dans le head de chacune de tes pages entre balises <styles text/css> et </style> et non pas dans le fichier css externe commun à l'ensemble de tes pages. Ce style fera apparaître la puce au bon endroit et uniquement pour la page concernée. Voir ex sur un de mes sites. En l'occurence dans cet exemple, c'est pas des puces mais la couleur de fond des items de menus qui est traitée comme ça.

Pour ta 2ième question, sache que le controle vertical (hauteur des colonnes) n'est pas évident en css mais il y a des astuces pour arranger ça, je te recommande les tutos d'ALSA par ex ici et une recherche dans le forum pour retrouver des infos la dessus. Dans les cas désespérés, il faut parfois encore se rabattre sur un tableau!
Bonne continuation Smiley smile
Modifié par zanzibar (31 Jan 2006 - 13:30)
AHhaa une jeunesse de Matane qui cherche comment faire du Web Smiley smile bonne chance! J'ai passé part là moi aussi .. fait de la bonne job sinon forgetj va te botter les fesses.
Sujet clos
Aller à