Suivez le fil RSS
 

Le DVD vidéo de Florent V. pour apprendre XHTML et CSS

Elephorm apprendre XHTML et CSS
Rechercher dans le sujet :
Forum
» CSS et mise en forme
» [résolu] Absmiddle en XHTML
Auteur
Pages :
Li0n
# 29 Dec 2004 - 20:33:22
Citer
7 Posts
 Bonjour,

je cherche le remplacant de l'attribut absmiddle en XHTML.

pour rappel, absmiddle appliqué sur une image (que sous IE) aligne le centre absolu du texte (milieu de la taille totale et non baseline) avec le centre de l'image.

(un middle aligne le bas du texte avec le centre de l'image)

ex: <img src="image.gif" alt="" align="absmiddle" />mon texte

j'ai cherché partout mais je n'ai rien trouvé de concret à part l'utilisation de tableau (caca!! beurk)

merci pour vos réponses !

Li0n
Modifié le 31 Dec 2004 - 12:45
^
Stephan
# 29 Dec 2004 - 23:22:28
Citer
3160 Posts
 Faudra sans doute regarder vers la propriété vertical-align.
Recommandation CSS2 du W3C a écrit :

Cette propriété agit sur le positionnement vertical à l'intérieur de la boîte de ligne des boîtes générées par un élément de type en-ligne. Les règles suivantes n'ont de sens que par rapport à un élément parent de type en-ligne, ou de type bloc si celui-ci génère des boîtes en-ligne anonymes ; elles sont inopérantes autrement.


Je déplace dans le salon CSS et mise en forme.
^
Li0n
# 30 Dec 2004 - 02:10:56
Citer
7 Posts
 vertical-align ne propose aucune méthode qui correspond à l' "absmiddle"

cf mon 1er post sur le rendu de "middle" qui correspond à:


<img src="image.gif" style="vertical-align: middle;" alt="" />mon texte

Modifié le 30 Dec 2004 - 02:14
^
Stephan
# 30 Dec 2004 - 02:17:22
Citer
3160 Posts
 Tu as un croquis à proposer pour qu'on voit exactement ce que tu veux ?
^
Igor
# 30 Dec 2004 - 02:22:06
Citer
Modérateur
5922 Posts
Li0n a écrit :
vertical-align ne propose aucune méthode qui correspond a l' "absmiddle"


"absmiddle" a t-il jamais existé dans un langage standardisé? La recommendation ne le mentionne pas pour l'élément img.

ps: n'hésites pas si tu le souhaites à passer par le bar du forum au topic des présentations.
Modifié le 30 Dec 2004 - 02:24
Amateur de sites web avec des traits. Membre du lobby de l'Internet.
http://maynaud.name/ 
^
Stephan
# 30 Dec 2004 - 03:11:54
Citer
3160 Posts
 Il me semble qu'ici la traduction soit discutable.
Traduction de la Recommandation CSS2 du W3C a écrit :

middle
- Aligne le milieu vertical de la boîte avec la ligne de base de la boîte de son parent, ce milieu étant augmenté de la moitié de la valeur de la propriété 'x-height' du parent ;

Texte original de la Recommandation CSS2 du W3C a écrit :

middle
- Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

Peut-être que ceci est plus juste ?
Stephan qui traduit la Recommandation CSS2 du W3C a écrit :

middle
- Aligne le milieu vertical de la boîte avec la ligne de base de la boîte de son parent plus la moitié de la valeur de la propriété 'x-height' du parent ;


Néanmoins, ceci fonctionne à merveille.


<p class="axe-y"><img src="" width="" height="" alt="" />Texte</p>





p.axe-y { 

   line-height: 1em; 

}

p.axe-y img { 

   vertical-align: middle; 

}


^
Li0n
# 30 Dec 2004 - 11:28:44
Citer
7 Posts
 j'ai testé ton bout de code et voila ce que j'obtient:

sous IE, impécable (bizarre eek )
upload/654-explikie.gif

sous firefox, ca ne s'aligne pas bawling :
upload/654-explikfx.gif

je vais tenter de reexpliquer avec une image:
upload/654-explik1.gif

ce que je souhaiterais faire, c'est que la ligne du milieu de l'image soit la meme que la ligne du milieu du texte, et cela, quel que soit la taille de la police

mon code:
<img src="fr.gif" alt="" />&nbsp;France


l'image du drapeau:
upload/654-fr.gif

en tout cas, merci pour le temps que vous y avez passé dessus ! cligne

^
fastclemmy
# 30 Dec 2004 - 13:04:45
Citer
22 Posts
 Euh, ça ne répondra pas trop à ta question de départ, mais dans ton cas particulier pourquoi ton image ne serait pas en background de ton paragraphe ? (auquel cas il faudrait jouer avec les propriétés de positionnement de background)
Webstandards are not only sexually transmitted.
http://www.fastclemmy.com/ icq msn yim aim 
^
Li0n
# 30 Dec 2004 - 16:23:23
Citer
7 Posts
 euh,

1) parceque c'est compliqué car j'ai pas mal d'images dans le meme cas

2) parceque l'affichage des drapeaux est dynamique (fonction du pays d'un joueur) (et que le CSS doit être statique non ?)

je sais pas si j'ai bien repondu aussi smile

^
Igor
# 30 Dec 2004 - 16:32:57
Citer
Modérateur
5922 Posts
 Sur un sujet connexe (aux drapeaux) il y a ce topic sur le Hub:
http://www.webmaster-hub.com/index.php?showtopic=7021&hl=
Et ce lien sur la-grange.net:
http://www.la-grange.net/2002/09/03.html
Amateur de sites web avec des traits. Membre du lobby de l'Internet.
http://maynaud.name/ 
^
Li0n
# 31 Dec 2004 - 02:46:51
Citer
7 Posts
 ils utilisent du background avec un margin correspondant a la largeur de l'image alors que, dans mon cas, c'est plus judicieux de mettre l'image en dur (car générée avec du php dans un panel de 240 drapeaux)

decu

^
St0uK
# 31 Dec 2004 - 02:56:38
Citer
32 Posts
 Technique de sioux très sale mais qui marche : utilise la propriété line-height sur le texte. Tu feras descendre ton texte petit à petit jusqu'à ce qu'il soit aligné avec le centre de ton image.
J'avoue que c'est crade ... mais je vois pas autre chose confused

http://www.webcarcenter.com 
^
Stephan
# 31 Dec 2004 - 03:08:21
Citer
3160 Posts
 Bingo !



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>Test</title>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <meta http-equiv="content-style-type" content="text/css" />

  <style type="text/css" media="all">

* {padding: 0; margin: 0;}

h1, p { 

   margin: 0.5em; 

}

p.flag { 

   line-height: 1em; 

}

p.flag img, span { 

   vertical-align: middle; 

}

p.flag span { 

   padding-left: 5px; 

}

  </style>

 </head>

 <body>

  <div id="content">

   <h1>Test</h1>

   <p class="flag"><img src="drapeau.gif" width="20" height="14" alt="" /><span>Texte</span></p>

  </div>

 </body>

</html>

Modifié le 31 Dec 2004 - 03:26
^
Laurent Denis
# 31 Dec 2004 - 05:27:15
Citer
7979 Posts
 Hum... Jouer sur la hauteur de ligne me semble hasardeux: tout dépend de la config côté utilisateur. En outre, cela échoue dans Opera (au moins pour moi).

Je proposerai, pour le même code HTML que Stephan :
* {padding: 0; margin: 0;}

h1, p { 

   margin: 0.5em; 

}

p.flag img, span { 

   vertical-align: middle;

   display: inline-block; 

}

p.flag span { 

   padding-left: 5px; 

}


L'alignement est correct chez moi dans Opera, IE et FireFox.
Ne parlons pas de choses nouvelles. Commencez par ne pas détourner CSS de son objet, ce que vous faites immanquablement avec des techniques sexy qu'on enseigne ici.
http://www.temesis.com 
^
Stephan
# 31 Dec 2004 - 05:36:25
Citer
3160 Posts
 En effet, je n'avais pas testé sous Opera ! confused

Merci pour ta contribution Laurent Denis ! cligne

Reste à savoir comment ça passe sous mac... hum

<edit>
Je n'ai pas trouvé inline-block dans la Recommandation CSS2 : La propriété display
Alors j'ai cherché et trouvé dans CSS3 module: The box model
=> 4. The 'display', 'display-model' and 'display-role' properties
</edit>

On va se mettre à CSS3 à notre insu ! lol
Modifié le 31 Dec 2004 - 06:47
^
Laurent Denis
# 31 Dec 2004 - 08:19:43
Citer
7979 Posts
 Ce n'est pas spécifiquement du CSS3, mais du CSS2.1 (Candidate Recomandation). Voir:
- http://www.w3.org/TR/CSS21/visuren.html#propdef-display
- http://blog-and-blues.org/weblog/2004/11/24/346-de-css2-a-css21-anticipation-raisonnable-1 (à propos du rôle de CSS2.1)
Ne parlons pas de choses nouvelles. Commencez par ne pas détourner CSS de son objet, ce que vous faites immanquablement avec des techniques sexy qu'on enseigne ici.
http://www.temesis.com 
^
Li0n
# 31 Dec 2004 - 12:45:06
Citer
7 Posts
 tested & approuved ! biggol

voila qui termine bien l'année 2004 biggrin

merci beaucoup à tous les intervenants,

et bonne année !
^
Chatissimus
# 14 Aug 2005 - 08:17:14
Citer
10 Posts
 Désolé de déterrer le topic mais j'ai un petit problème sous opéra avec cette méthode

le contenu du span est aligné en haut :?
http://gazette.hc.free.fr/aff.png
alors que sous FF et IE ca va

http://gazette.hc.free.fr/_test.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>titre</title>

	<style type="text/css">

* {padding: 0; margin: 0;}

h1, p {

	margin: 0.5em;

}

p.avatar img, span {

vertical-align: middle;

display: inline-block;

}





p.avatar span {

padding-left: 5px;

}

</style>

	

</head>

<body>

<div>

		<p class="avatar" >

			<img src="http://HeroesOfWarcraft.nainwak.org//barres/pm_100b.gif" alt="pm" />

			<a href="#" >[TAG]</a>

			<span ><a href="#" >perso</a></span>

			<a href="#" ><img src="http://HeroesOfWarcraft.nainwak.org//messagerie/images/message.gif" alt="envoyer un message" /></a>

		</p>

</div>

</body>

</html>


c'est moi qui ai merdé ou bien ?
Modifié par Chatissimus (14 Aug 2005 - 08:47)
^
Laurent Denis
# 14 Aug 2005 - 08:22:01
Citer
7979 Posts
 Non, c'est moi qui avais oublié les bugs d'Opera sur l'alignement vertical dans les inline-block cligne

Ces bugs étant corrigés dans la prochaine version officielle de Presto, le moteur de rendu d'Opera, le mieux est donc de laisser courir.
Ne parlons pas de choses nouvelles. Commencez par ne pas détourner CSS de son objet, ce que vous faites immanquablement avec des techniques sexy qu'on enseigne ici.
http://www.temesis.com 
^
Chatissimus
# 14 Aug 2005 - 09:08:24
Citer
10 Posts
 a bon alors , on va laisser courir lol

^
Pages :
Le sujet est clos.
Aller à
Powered by Phedio v3.8.7 beta in 11.4 ms © dew