5568 sujets

Sémantique web et HTML

Bonjour à tous,

dans le cadre d'un projet universitaire, je dois intégrer cette interface.

http://reaco.cut-here.net/underscore_accueil.jpg

Le site sera en taille fixe de 990px (cible prévue pour du 1024 de résolution).

J'avais penser partir sur :
- 1 header avec le swhitcher de changement de langue
- 1 conteneur avec : colonne gauche, colonne centrale, colonne de droite
- 1 pied de page tout les droits

Dans cette colonne de gauche, comme vous le voyez le graphiste de l'équipe m'a pas vraiment fait un truc simple lol. Je pensais pour le logo créer un premier div en absolu qui contiendrait le papillon et un div normal pour le cadre.

En fait, je galère vraiment pour tout ce qui concerne les bordures etc.
Comment gérer les traits des colonnes afin qu'ils aillent bien en bas ? (exemple, si j'ai un contenu central très long, j'aimerais tout de meme que mes colonnes de droite et gauche prennent 100% comme sur l'image)

Une fois la colonne de gauche réaliséz, celle de droite sera sur le meme principe, je devrais me dépatouiller.

Enfin, comment etre logique pour la création du menu centrale (en haut au milieu) en terme d'accessiblité ? Dois je créer 3 listes <ul> ?

Merci de votre aide
Modifié par CUT HERE (12 Feb 2006 - 13:38)
Bonjour,

Effectivement pour le menu de gauche ce n'est pas gagné. Il suffit de grossir la police d'une taille avec son navigateur pour que tout soit cassé...

Pour les menus en haut pas de doute c'est bien des listes.
Pour les différents produits des dl (definition lists).

Pour les bordures, qu'as-tu déjà essayé ?
Modifié par EricLB (12 Feb 2006 - 19:02)
http://reaco.cut-here.net/integration/

Cela marche sous IE mais pas mozilla. Comme je vous disais, il faudrait que mes colonnes prennent 100% du cadre conteneur pour les bordures sur le coté

Je te remercie pour le menu du haut, et pour les produits (je voulais confirmation Smiley cligne ) je continue a développer le reste en attendant d'autres conseils parce que là, j'ai beau chercher des astuces, je ne vois pas trop Smiley bawling
Vraiment bien ta page sur les tests.

Effectivement il faut avouer que cela n'est pas de tout repos avec ce firefox et explorer qui ne fonctionne pas pareil, toujours obligé de vérifier dans les 2 pour voir si rien n'est pas parti en cacahouette.
Très bien ce type de tuto... très utile et pédagogique ! merci Mpop
Une idée : si les Alsanautes se mobilisaient pour en développer chacun de son côté sur d'autres thèmes récurrents (voir le nombre de fois où Raphaël est obligé de préciser que le sujet a déjà été traité...) dans un esprit "Alsapedia" et en suivant la même charte graphique ?
Je trouve que ça ne ferait pas doublon avec les tutos d'Alsa... donc pas de concurrence déloyale Smiley biggrin
Merci Smiley cligne .

En fait, je pense avoir fait le plus dur hier. Ce n'est pas la technique (enfin un peu Smiley smile ), mais surtout la base au départ, notre structure.

Je vous ferai part des mes avancements pour vos avis, conseils et tests (j'ai testé aujourd'hui sous IE Mac, je me doutais du résulat mais tanpis !!), Safari MAC, IE 6 PC et FF PC le début marche nickel.

Mais j'ai encore beaucoup de chose à faire.. il ne faut jamais se réjouir trop vite Smiley lol
Re bonjour à tous,

l'intégration se poursuit.
Vous pouvez en voir un aperçu ici

http://reaco.cut-here.net/integration/

Seulement je me rends compte d'une part que j'utilise de nombreux div Smiley decu et surtout que le site en lui même va reposer que sur des listes simples (menu) ou de définitions pour les produits. Et en fait, je m'inquiète un peu en terme de sémantique etc. Il s'agit d'une boutique en ligne je rappelle. Un site peut-il etre bien référencer en ne reposant que sur ce type de contenu (liste) ?

Hum vos avis sur mes questions m'intéresseraient ainsi que des éventuels BUGs sur vos plateformes (testé sous IE PC et FF PC sous un Win XP SP 2 et en résolution 1280*1024 pour le moment; petit rappel, le site est prévu pour des résolutions des 1024 et plus )
Modifié par CUT HERE (21 Feb 2006 - 20:13)