[résolu] Absmiddle en XHTML

(reprise du message précédent)

a bon alors , on va laisser courir

dernier recours!
mon souci en image:
http://img25.imageshack.us/img25/3374/cssblogimg1sa.jpg
mon code html:

<p class="imgBox"><span>alice</span><img src="http://ottomar.chez-alice.fr/res/100olivia.jpg" /><span>tiscali</span><img src="http://ottomar.chez-alice.fr/res/100olivia.jpg" /></p>

dans le css:

.post p.imgBox {
line-height: 1em;
font-size : 80%;
font-style : italic;
margin: 10px;
text-align : center;
vertical-align: sub;
}
.post img {
max-width: 100%;
border: solid white 2px;
margin: 10px auto;
}
.post p.imgbox img, span {
vertical-align: text-bottom;
}
.post p.imgbox span {
padding-left: 25px;
}

j'avoue misèrablement butter pour aligner le texte et l'image sur le même axe vertical
en tous cas, merci de m'accueillir
Modifié par ottomar (02 Nov 2005 - 19:41)

Ben, et nous alors !

Nous n'avons pas le droit de savoir ?

Bonsoir Vero

Bien sur et c'est tout simple:

<img style="vertical-align:middle;" src="http://domainedegriggione.free.fr/img_emb/image1.gif" alt="image" />

Il existe une raison pour laquelle le validateur de CSS du W3C renvoit une erreur pour inline-block ???

Validateur de CSS du W3C a écrit :
Erreurs

* Ligne: 79 Contexte : p.alignimage img, span

Propriété érronée : display inline-block n'est pas une valeur de display : inline-block

Bonjour Laurent Denis,

Oui, effectivement, en utilisant l'interface évoluée et en forçant la validation en CSS 2.1, c'est bon

Par contre, je suis perplexe ... Pourquoi est-il par défaut en CSS 2, le CSS 2.1 n'est plus au stade de version "en travail", il est bien opérationnel et reconnu, non ???

bon ok je deviens fou
j'essaye de remplacer un vilain tableau qui me sers d'entete (oouuuu pas bien les tableaux)
par un liste non ordonnée (des UL + LI quoi)
le truc c'est que je n'arrive pas a centrer verticalement le texte de mes LI
j'ai (je pense) tout essayé: vertical-align:middle, margin:0.5em, secouer mon ecran, jeter ma souris, simuler une explosion nucléaire sur mon clavier et j'en passe.

voici la page incriminée:
http://pcie.espace-competences.org/formation/

comme vous pouvez le voir dans l'entete, il y a la "liste" des rubriques du site (seule la formation est accessible), je voudrais tout simplement que le titre des rubriques soient alignées verticalement dans leur conteneur.

le meme mais avec des tableaux (mais qui marche mais ouuuuuu pas bien les tableaux)
http://www.espace-competences.org/formation/

tiens d'ailleurs je profites du topic, pour demander aussi comme éviter le bug sous FF pour la cellule "Animation Régionnale Des Ateliers De Pédagogie Personnalisée" (je hais les hefs de projets du public et leur nom à ralonges ...)

bonjour,

Peut-etre aurait t-il fallu te creer un nouveau sujet , plutot que squatter celui d'un autre , mêm si il est plein de choses interessantes et qu'il donne l'impression de correspondre a ton soucis , tout le monde va finir pr s'y perdre. .

Au vue du code html que tu sert , pour remplacer ton tableau , autant garder le tableau pour le moment .
<a><li><div><span> ... etc , en passant au validateur , j'magine qu'il doit deja y avoir des trucs qui passe pas .

Basiquement , on ne met pas de balise de type "block" dans des balises de type "inline". essai d'abord de te creer une liste de menu "propre" en html , apres commence a voir comment tu peut "styler" tout ça avec une feuille de style.
Cela devrais te permettre de mieux "maitriser ta portion de code" et donc d'y appliquer des regles css avec plus de discernement.

++

Salut la communauté,

Pour mémoire, la question était :
comment centrer verticalement du texte par rapport à une image?
la réponse est "vertical-align: middle"

Voila, si ça peut faire gagner du temps, à un autre lecteur de ce post