Archives FluxBB.fr

ptit chat

Membre

WIKI:mise en forme et CSS - réflexions diverses

Plutôt que d'actualiser de vieux topics (voir très vieux), je lance une nouvelle discussion sur la partie des astuces CSS du wiki.
Pourquoi cette discussion ?
J'ai remarqué certain truc bizarre et/ou pas forcément très "propre" dont je voudrais connaître le pourquoi du comment par rapport à d'autre solution plus simple et/ou plus "propre".
N'étant pas expert en la matière (loin de là) et souhaitant m'améliorer, c'est pour ça que je lance la discussion.

Bon, l'introduction étant finie, les choses sérieuses !!
[---]
image à la place du titre
Pourquoi est-il proposé de place le logo dans "#brdtitle h1 span" ?
N'aurait-il pas été plus simple de ne le placer que dans "#brdtitle h1" ?

explication : en le plaçant dans "h1 span", il devient obligatoire l'utilisation d'astuce tel que "display: block;" et "text-indent: -200%;". Alors qu'en le mettant "h1", l'utilisation de "display: block;" est inutile et il suffit de faire un "display: none;" sur "h1 span" pour caché le texte (pas obligatoire car certain le garde.

(c'est tous pour le moment)
(je ferais surement des propositions d'ajout rapidement)

Dernière modification par ptit chat (09-08-2007 11:01:34)

---

[img]http://www.mangajutsu.com/site/banns_pub/236_38.jpg[/img]

Morph1er

Membre

Re : WIKI:mise en forme et CSS - réflexions diverses

Salut,

Sémantiquement parlant, les images ne se mettent pas dans des Hx. Seule la seconde solution en CSS est la plus propre.
La première qui consiste à placer une balise dans une balise Hx ne sera peut-être pas considérer comme une erreur dans le validateur syntaxique en ligne mais le sera  sûrement dans le futur.

Les balises Hx servent à définir les titres et sous-titres d'une pages.

---

Annuaire site Emulation roms

ptit chat

Membre

Re : WIKI:mise en forme et CSS - réflexions diverses

en effet, j'avais oublier.

la solution serait alors de le mettre dans "#brdtitle" car le transtypage d'un span en block, n'est pas mieux.

edit : je viens de remarquer que la solution que je propose n'est pas pratique si on souhaite garder l'affichage de la description. à moins de prévoir dans la taille du div, un espace en dessous de la bannière pour la description mais bon, c'est pas mieux

edit 2 : pour le H1, comme il s'agit d'un background, je ne voit pas vraiment où est le problème. Sinon on ne devrait plus mettre de fond pour tous les titre tel que le H2 d'annonce, etc.

Dernière modification par ptit chat (09-08-2007 13:03:48)

---

[img]http://www.mangajutsu.com/site/banns_pub/236_38.jpg[/img]

Mpok

Néo Admin

Re : WIKI:mise en forme et CSS - réflexions diverses

Il n'y a pas de solution "miracle" pour régler le problème des titres en image (sur le plan sémantique ET accessibilité).
Dans certains cas/configurations le "display: none" ou le "text-indent" n'est pas interprêté, si on dé-active les images on devrait pouvoir voir le texte, etc...
Donc, on fait ce que l'on peut en sachant qu'il y aura toujours un point négatif.
Personnellement, je place les textes SOUS l'image, au prix d'un span supplémentaire (et d'un éventuel pbm lors du redimensionnement).
Note : dans le code de punbb, tous les h2 sont "affublés" d'un span.

Morph1er

Membre

Re : WIKI:mise en forme et CSS - réflexions diverses

edit 2 : pour le H1, comme il s'agit d'un background, je ne voit pas vraiment où est le problème. Sinon on ne devrait plus mettre de fond pour tous les titre tel que le H2 d'annonce, etc.

Je n'ai jamais dit le contraire. J'ai dit que l'utilisation de la balise <img> dans un hx n'est pas bon d'un point de vue sémantique.

---

Annuaire site Emulation roms

ptit chat

Membre

Re : WIKI:mise en forme et CSS - réflexions diverses

là, je suis entièrement d'accord

d'ailleurs, j'ai écris une conne*** puisqu'un "display: none;" ne fonctionne pas correctement sous certaine version d'IE. Il faut dans ce cas, rajouter un "visibility: hidden;" voire pire.

Par contre, ne faudrait-il pas enlever du wiki la partie qui explique l'ajout d'une balise <img />  ??

[---]

Et une réflexion sur le system de parsage des message : en dehors des balises B, I, url, img, email, toutes les autres balises (couleurs, alignement, S, ) utilise un <span> pour rendre leurs effets. Ce qui peut conduire à de jolies empilements (imaginez un lien barré en rouge aligné à droite qui serai dans une citation).

Pourquoi ne pas utilisé de classe en lien avec un fichier CSS spécifique.
au dépard on aurais une balise <span class="<?php $balise ?>"> et la balise prendrait une valeur tel que "c_rouge a_droite barre".

Il suffirait d'avoir à coté le CSS qui va bien.

avantage : code plus léger à générer, modification plus simple du BBcode (ajout de balise de titre par exemple).

Vous en pensez quoi ?

---

[img]http://www.mangajutsu.com/site/banns_pub/236_38.jpg[/img]

vin100

Membre

Re : WIKI:mise en forme et CSS - réflexions diverses

edit 2 : pour le H1, comme il s'agit d'un background, je ne voit pas vraiment où est le problème. Sinon on ne devrait plus mettre de fond pour tous les titre tel que le H2 d'annonce, etc.

Je n'ai jamais dit le contraire. J'ai dit que l'utilisation de la balise <img> dans un hx n'est pas bon d'un point de vue sémantique.

c'est faux, c'est parfaitement sémantique et même la méthode la plus conseillée par les meilleurs spécialistes car la plus portable si on veut mettre un titre en image

Morph1er

Membre

Re : WIKI:mise en forme et CSS - réflexions diverses

Seules les images de contenu (qui aide à la compréhension de la page) doivent être dans une balise <img>. Les autres images, nécessaire au design, doivent être dans la CSS.

---

Annuaire site Emulation roms

vin100

Membre

Re : WIKI:mise en forme et CSS - réflexions diverses

Si le titre est dans l'image alors cette image a parfaitement sa place dans la balise <h1></h1> du moment que le texte alternatif est bien renseigné

ocgall

Membre

Re : WIKI:mise en forme et CSS - réflexions diverses

Bonjour,
Je n'arrive pas à mettre une image de 760 large x 112 haut dans mon titre avec la deuxième solution.

/****************************************************************/
/** 11. CUSTOM IMAGE HEADER **/
/****************************************************************/

#brdtitle h1 span {
    display: block;
    background-image: url(chemin/de/mon/image/image.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    height: 112px; /* Hauteur de l'image */
    width: 760px; /* largeur de l'image */
    /*text-indent: -200%;*/
}

J'ai mis mon image dans le dossier courant de style/Oxygene.css ! ... Je ne sais pas, je n'arrive pas à configurer le chemin de l'image.
http://www.ecouflant-acteurs-cite.fr/fo … /index.php
Merci de m'aider ...
@+ ... Salutations ...

---

@+ ... Salutations ...
< il faut toujours apprendre de ses erreurs pour pouvoir les répéter à la perfection >