Discussion :

[Erwan31]

en XHTML, je dois faire ca ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="texte">Hello !</div>

Non le div est une division et ne sert donc pas à définir un texte.
Donc <hn>Hello !</hn> (Hn: h1>h6)pour un élément de titrage ou alors <p>Hello !</p> si ce dernier n'introduit rien.
Ca peut être un span si le hello doit par exemple être stylé différemment à l'intérieur d'un paragraphe.

Et comme font est une propriété héritée, spécifier la police et les
paramètres relatifs se fait en général au niveau du body pour que cela agisse
sur tout le document.

[blueice]

Quand je dis oui, c'est sur le principe effectivement c'est de cette façon et on imagine bien qu'il ne va pas faire un div juste pour dire bonjour lol, sinon joli bazar en perspective...

[S-Kayp]

Voilà, j'ai une image à aligner avec du texte au niveau verticale, c'est-à dire que le milieu texte soit aligner avec le milieu de l'image.
Quand je mets align="middle", c'est le haut du texte qui est aligné avec le milieu de l'image, mais en mettant align="absmiddle" c'est bien le milieu du texte qui est aligné avec le milieu de l'image.

Maintenant, en XHTML, il faut remplacer la balise align (devenu obsolète) par du CSS en utilisant par exemple style="vertical-align: xxxx;". Cependant, avec vertical-align, il n'y a pas la propriété absmiddle.

Savez-vous alors comment je peux faire pour régler mon problème d'alignement ?

[Erwan31]

Maintenant, en XHTML, il faut remplacer la balise align (devenu obsolète) par du CSS en utilisant par exemple style="vertical-align: xxxx;". Cependant, avec vertical-align, il n'y a pas la propriété absmiddle.

Oui oublies align qui fait parti des attributs de présentation déconseillés/dépréciés (et non obsolètes).

La méthode à utiliser dépendra de deux facteurs:
> Est-ce que le texte est sur une ou plusieurs ligne?
> Est-ce que le nombre de lignes du texte ou la hauteur de l'image sont des paramètres variables?

[S-Kayp]

Tout ceci est sur une seul ligne et dans un <td> car il s'agit d'un tableau. J'ai du texte, 3 images de même hauteur, et encore du texte.

[Erwan31]

Ah ben alors ça facilite les choses.
Tu n'as qu'à doter les cellules de la rangée d'un vertical-align:middle.
Ceci dit es tu sûr que le tableau soit le choix le plus approprié?

[blueice]

Ceci dit es tu sûr que le tableau soit le choix le plus approprié?

On connaît bien sûr la réponse NON !
Tu devrais aller au fond des choses et zapper les tableaux, sinon je ne vois pas l'intérêt de commencer une telle démarche...

Au cas ou :
Les tableaux ne servent qu'à présenter des données tabulaires et ne sert pas à faire de la présentation...

[S-Kayp]

En fait c'est un tableau parce qu'il s'agit du design de mon site / de l'interface de mon site.

J'ai une partie en haut, un menu à gauche, la partie centrale, un menu à droite, et la partie du bas.

Mon problème est situé dans la partie du bas.

J'ai, en effet, enlevé le align="absmiddle" de la balise image, pour mettre dans la balise <td> le style="vertical-align: middle;". Mais ca ne change rien, c'est toujours le haut du texte qui est aligné avec le milieu des images.

[Erwan31]

On connaît bien sûr la réponse NON !
Tu devrais aller au fond des choses et zapper les tableaux, sinon je ne vois pas l'intérêt de commencer une telle démarche...
Au cas ou :
Les tableaux ne servent qu'à présenter des données tabulaires et ne sert pas à faire de la présentation...

Bonjour Blueice
dans l'idéal oui mais pas forcément, ne pas oublier les tableaux de mise en forme qui peuvent rendre service lorsque
CSS se montre trop limitée ou pas assez robuste (pour le centrage verticale dans certains cas de figure par exemple).
Ceci dit il faut bien sûr privilégier l'utilisation de la mise en forme via div/CSS

@Skayp:
les tableaux tel que tu les utilises ne sont clairement pas appropriés.
Je crois qu'il est que tu te formes sur la mise en page via div/css.

[S-Kayp]

oui, mais si je regarde le code de l'interface du site developpez.com, elle est bien faîte avec des <table>

comment je fais sans <table> pour faire 3 parties : le menu à gauche, la partie centrale, et le menu à droite ?? qui dit "3 colones" dit "table", non ? je ne connais pas d'autre solution.

De toute façon, mon problème n'est pas là, je veux juste pouvoir aligné le milieu d'une image avec le milieu d'un texte, et non pas que le milieu de l'image soit aligné avec le haut du texte !

[blueice]

Developpez.com n'est pas une référence, c'est un forum en grande partie, c'est donc particulier.
Tu as besoin de lecture :
http://www.cybercodeur.net/weblog/pr...old/index.html

La mise en page par tableau n'est pas compliqué du moment que tu penses d'abord au contenu avant de penser à la mise en forme.
Met en place ton contenu et après tu fais la mise en forme, par la suite un simple changement de feuille de style, changera complètement le design du site...(dans les grandes lignes )

[S-Kayp]

OK, je ne savais pas qu'on pouvait faire pareil avec des <div> ce qu'on peut faire avec des <table>. Je ne connais pas tout de la programmation en HTML, mais grâce à ce site, ca m'aide beaucoup (par exemple, pour passer au XHTML).

La plus part des interfaces / design de sites étant fait avec des <table>, je pensais que c'était le plus correct.

En tout cas, mon design est fait avec des <table> : j'utilise un fichier CSS pour la mise en forme. Ensuite, le code de mon design sera dans un fichier PHP, qui sera appelé sur chaque page avec un include. Comme ca, quand je modifirai mon design ou mes menus, ca le changera sur toutes les pages.
Chacun a sa propre conception du codage, et moi c'est comme ca - même si ca ne plait pas à tout le monde .

Je fais d'abord le design de mon site, pour choisir les couleurs de mon interface / des menus, comment seront disposés les menus et la pub etc... je fais le logo de mon site etc ...
Une fois que j'ai tout ca, je peux bosser sur chaque page du site.
Dans mon cas, j'ai ainsi la largeur exacte de ma partie centrale ; si je ne l'avais pas, ca me posserait problème, pour savoir la largeur maximale à ne pas dépasser pour une image ou un cadre, par exemple.

[blueice]

Oui mais non
Tu ne devrais pas faire en fonction du design.
Un titre est un titre
Ton menu peut-être fait à partir de liste
Ton texte sera organisé en paragraphe, etc, etc

A partir de là tu auras une page sans design ou chaque élément sera déclaré correctement, exemple ici :
http://www.csszengarden.com/zengarden-sample.html

Ensuite tu l'habilles avec une CSS et là tu découvriras toute la magie !!
Comme ca :
http://www.csszengarden.com/?cssfile...213.css&page=0

ou comme ca :
http://www.csszengarden.com/?cssfile...211.css&page=0

les exemples ne manquent pas.
Il s'agit toujours du même code source mais avec une feuille CSS différente.

Ensuite, le code de mon design sera dans un fichier PHP, qui sera appelé sur chaque page avec un include. Comme ca, quand je modifirai mon design ou mes menus, ca le changera sur toutes les pages.

Le code de ton design ? Tu n'as pas besoin d'include puisqu'il suffira de changer la CSS pour modifier l'aspect du site.

Par contre l'utilisation des includes te permettra de découper le code html de ta page pour ne pas avoir à te retaper toutes les modifs sur chaque page.
Attention à la gestion des includes et des problèmes de sécurité inhérent.

[Erwan31]

OK, je ne savais pas qu'on pouvait faire pareil avec des <div> ce qu'on peut faire avec des <table>. Je ne connais pas tout de la programmation en HTML, mais grâce à ce site, ca m'aide beaucoup (par exemple, pour passer au XHTML).

Le passage au XHTML est très simple, ce n'est pour l'essentiel qu'une XMLisation de la syntaxe, qui devient de ce fait plus rigoureuse.
Lire les différence avec HTML4
et les appendice B et C

[S-Kayp]

Une fois que je passe ma page à la norme XHTML, les couleurs que j'avais données à la barre de défilement du navigateur ne marchent plus. Si j'enlève le code (<?xml> <!DOCTYPE>) qui déclare ma page en tant que XHTML, la barre de défilement du navigateur retrouve les couleurs que je lui ai données.

Voici le code dans mon fichier CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
body { scrollbar-face-color: gold; scrollbar-highlight-color: white; scrollbar-shadow-color: white; scrollbar-3dlight-color: black; scrollbar-arrow-color: 
black; scrollbar-track-color: Silver; scrollbar-darkshadow-color: black; background-color: #F0F0F0; margin-left: 0; margin-right: 0; margin-top: 0; margin-
bottom: 0; }

Savez-vous d'où vient le problème ?

[Erwan31]

hé hé j'avais eu exactement le même étonnement que toi à mes débuts mais c'est tout à fait normal
Lorsque tu retires le Doctype les navigateurs récents basculent en mode
Quirks (faire une recherche pour les détail), ce qui favorise les implémentations
propriétaires comme les propriétés scollbar-... qui sont issues de Microsoft.

Déjà conserves ton doctype pour rester en mode standard et attribues ces propriétés au niveau de l'élément racine (html) dans ta CSS.
Ne pas oublier le paddin:0 au niveau du body pour Opera.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
html {
	scrollbar-face-color: gold;
	scrollbar-highlight-color: white;
	scrollbar-shadow-color: white;
	scrollbar-3dlight-color: black;
	scrollbar-arrow-color: black;
	scrollbar-track-color: Silver;
	scrollbar-darkshadow-color: black;
	background: #F0F0F0;
}
body {
	padding:0;
	margin:0;
}

Mais en dehors du fait que ces extension CSS propriétaires soient invalidantes
pour ta CSS, les scrollbars colorées c'est has been et ça ne marche que sur IE

[S-Kayp]

OK merci. Ca marche maintenant !

Par contre, j'ai encore un étonement au niveau du passage au XHTML.

J'ai un tableau utilisant des "rowspan". J'ai 4 colones dont les 2 1ères et la dernière ont rowspan="3". Et pour la 3ième colone, j'ai bien 3 lignes.

Or le passage au XHTML semble posser problème au "rowspan" ou ne pas le prendre en compte.
A l'affiche, la 1ère ligne de la 3ième colone s'est agrandit en hauteur sans raison.

[Erwan31]

Sans le code il va être difficile de t'aider mais ça m'étonnerait quand même que
ce soit le passage en xHTML qui soit à la source de cette différence. Le passage
du strict au transitionnal ou inversement serait moins étonnant mais tout de même.

[S-Kayp]

Bon, inutile que je mette mon code. J'ai finis par comprendre mon problème !!

J'avais mis la taille en hauteur (131 px) dans le <tr> qui comprend 4 colones dont 3 - de 131 px - avec rowpsan="3" et 1 de 69 px (hauteur déclarer dans le <td>).

Quand ma page est considéré comme HTML, les hauteurs sont bien respectées : celle de 69 px fait bien 69 px. Mais quand je passe en XHTML, la hauteur dans le <tr> prend le dessus sur celle dans le <td> et donc tous les hauteur des <td> dans ce <tr> ont pris la hauteur indiqué dans le <tr>, soit 131 px.

J'ai donc enlevé la hateur dans le <tr> pour la mettre dans les 3 <td> (ceux avec rowpsan="3").

Evidement c'est tout bête, mais c'est souvent ce genre chose qu'on a du mal à trouver.

[S-Kayp]

Bon, j'en reviens à mon problème de départ :



Dans le 1er cas, j'ai, dans chaque <img>, align="middle". Et c'est le bas (ou quasiment le bas) du texte qui est aligné avec le milieu des 3 images.
Dans le 2d cas, j'ai, dans chaque <img>, align="absmiddle". Et c'est le milieu (ou quasiment le milieu - ca dépend de la taille de la police) du texte qui est aligné avec le milieu des 3 images.

Moi, je veux que ca fasse comme le 2d cas. Or, en XHTML, la balise align n'est plus autorisée. Je cherche donc un équivalent en CSS et donc remplacé le align="absmiddle" par style="????" mais je ne vois quoi mettre à la place des ????.
Surtout qu'en XHTML, au niveau CSS pour les propriétés d'alignement, il n'existe plus de absmiddle.