Impossible d'aligner un texte verticalement dans une DIV ?

Dans le but de refaire mon site dans un format standart Html, je vire
toutes mes Tables qui me servaient pour la mise en page. Mais j'ai un
probléme lorsque je fais mon menu, jusqu'ici tout va bien sauf que... Le
texte que je mets dans mes div n'est pas aligné au milieu de la Div
verticalement, et je n'arrive pas à le faire ( Dans les tableau ça le
fait automatiquement, si vous avez une idée voici mon code :

<style>
#conteneurmenudroite { width: 115px;
background-image: url(/images/fond_menu2.gif); }
#titrecategorie {width: 115px;
height:20px;
background-image: url(/images/rub_droit.gif);
color:#53B4FF;
text-align:right;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif ;}
#titresouscat { width: 115px;
height:25px;
text-align:left;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif ;}
p{vertical-align:middle}
</style>
<div id="conteneurmenudroite">
<img src="images/b_droit.gif" width="115" height="21">
<div id="titrecategorie"><span class="format">Blabla <img
src="images/picto.gif" width="10" height="5"></span></div>
<div id="titresouscat">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i mg
src="images/picto_menu_g.gif" height="6"><?php echo "<a
href=\"index.php?pages=fai\"> FAI</a>\n"; ?></div>
</div>


--
http://extantpc.free.fr Bonne visite ! --> Nous recrutons !
Comparatif des offres FAI, Overclocking, Test, News, Petites annonces
Etc....
Pour m'envoyer un mail, retirez NoSpam de mon adresse. Steuf

Steuf a écrit :

Dans le but de refaire mon site dans un format standart Html, je vire
toutes mes Tables qui me servaient pour la mise en page. Mais j'ai un
probléme lorsque je fais mon menu, jusqu'ici tout va bien sauf que... Le
texte que je mets dans mes div n'est pas aligné au milieu de la Div
verticalement, et je n'arrive pas à le faire ( Dans les tableau ça le
fait automatiquement, si vous avez une idée voici mon code :

style
#conteneurmenudroite { width: 115px;
background-image: url(/images/fond_menu2.gif); }
#titrecategorie {width: 115px;
height:20px;
background-image: url(/images/rub_droit.gif);
color:#53B4FF;
text-align:right;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif ;}
#titresouscat { width: 115px;
height:25px;
text-align:left;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif ;}
p{vertical-align:middle}
/style
div id="conteneurmenudroite"
img src="images/b_droit.gif" width="115" height="21"
div id="titrecategorie"><span class="format">Blabla <img
src="images/picto.gif" width="10" height="5"></span></div
div id="titresouscat">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i mg
src="images/picto_menu_g.gif" height="6"><?php echo "<a
href=\"index.php?pages=fai\"> FAI</a>\n"; ?></div
/div

Salut !
Il te faut mettre un "display: table-cell" dans ton div, et un "vertical-align: middle" pour le texte, si mes souvenirs sont bons... )

Je croise les doigts pour... Vas-y.

Fabien a écrit :

Salut !
Il te faut mettre un "display: table-cell" dans ton div, et un
"vertical-align: middle" pour le texte, si mes souvenirs sont bons... )

Je croise les doigts pour... Vas-y.

J'ai déjà essayé cette astuce pour lui faire croire qu'il y a une table,
mais le probléme c'est que ça marche sous Firefox mais pas sous IE...
Sinon y'a peut être une autre solution en n'utilisant pas des DIV ?
C'est problématique ça...


--
http://extantpc.free.fr Bonne visite ! --> Nous recrutons !
Comparatif des offres FAI, Overclocking, Test, News, Petites annonces
Etc....
Pour m'envoyer un mail, retirez NoSpam de mon adresse. Steuf

Steuf a écrit :

Fabien a écrit :

Salut !
Il te faut mettre un "display: table-cell" dans ton div, et un
"vertical-align: middle" pour le texte, si mes souvenirs sont bons... )

Je croise les doigts pour... Vas-y.


J'ai déjà essayé cette astuce pour lui faire croire qu'il y a une table,
mais le probléme c'est que ça marche sous Firefox mais pas sous IE...
Sinon y'a peut être une autre solution en n'utilisant pas des DIV ?
C'est problématique ça...

Les styles...
<style type="text/css">
#conteneurmenu {
width: 115px;
background-image: url(/images/fond_menu2.gif);
}
h1 {
width: 115px;
height: 20px;
background-image: url(/images/rub_droit.gif);
color:#53B4FF;
border: solid 1px #000;
text-align: right;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 20px;
}
h2 {
width: 115px;
height: 25px;
border: solid 1px #000;
text-align: left;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif ;
line-height: 25px;
}
img {
margin: 9px 0%;
vertical-align: middle;
}
</style>

....et le xhtml

<div id="conteneurmenu">
<img src="image" width="115" height="21" alt="" />
<h1>
Blabla <img src="image" height="5" alt="" />
</h1>
<h2>
<img src="image" height="6" alt="" /> <a href="index.php?pages=fai">un peu de texte</a>
</h2>
</div>

Normalement, le line-height suffit, sauf bien sûr pour ?!
Bravo, tu as gagné : IE.
J'ai essayé avec Windows XP sous Opera 7.6, Firefox 1.0, et IE 6, donc...
En fait, ça lui suffirait s'il n'y avait pas d'image...
Essaies de supprimer l'image et le style de l'image. Ça fonctionne... /
Donc si c'est une image générique, tu peux la mettre en "background", et ça résoudra le problème tout en supprimant le vilain "margin: 9px 0%".
Bien sûr, tout ça ne fonctionne que si tu as toujours la même hauteur de ligne et d'image.

De plus, essaie d'éviter des noms comme menuDroite, ou assimilés, car tu ne sais pas forcément où il se situera dans le futur... )

Steuf a écrit :

Fabien a écrit :

Salut !
Il te faut mettre un "display: table-cell" dans ton div, et un
"vertical-align: middle" pour le texte, si mes souvenirs sont bons... )

Je croise les doigts pour... Vas-y.


J'ai déjà essayé cette astuce pour lui faire croire qu'il y a une table,
mais le probléme c'est que ça marche sous Firefox mais pas sous IE...
Sinon y'a peut être une autre solution en n'utilisant pas des DIV ?
C'est problématique ça...


Eh non, malheureusement les diplay:table-XXXX ne sont pas supportés par

IE comme on peut le constater sur
http://dicolive.media-box.net/docCSS...yType=1&id=134 .

Je pourrais renvoyer à l'article sur le centrage sur Alsacréations
(http://alsacreations.com/articles/centrer/), mais il n'apporte rien de
nouveau.

Donc il faut soit s'arranger pour connaitre la hauteur du bloc et faire
un centrage plus ou moins empirique, soit conserver un tableau, soit
alors, et c'est la meilleure solution, trouver une autre méthode plus
originale de mise en page et ne pas vouloir reproduire à l'identique une
mise en page telle qu'elle était construite avec des tableaux...

Xavier Robin a écrit :

Steuf a écrit :

Fabien a écrit :

Salut !
Il te faut mettre un "display: table-cell" dans ton div, et un
"vertical-align: middle" pour le texte, si mes souvenirs sont bons...
)

Je croise les doigts pour... Vas-y.



J'ai déjà essayé cette astuce pour lui faire croire qu'il y a une
table, mais le probléme c'est que ça marche sous Firefox mais pas sous
IE... Sinon y'a peut être une autre solution en n'utilisant pas des
DIV ? C'est problématique ça...


Eh non, malheureusement les diplay:table-XXXX ne sont pas supportés par
IE comme on peut le constater sur
http://dicolive.media-box.net/docCSS...yType=1&id=134 .

Je pourrais renvoyer à l'article sur le centrage sur Alsacréations
(http://alsacreations.com/articles/centrer/), mais il n'apporte rien de
nouveau.

Vive IE moi je dis...

Donc il faut soit s'arranger pour connaitre la hauteur du bloc et faire
un centrage plus ou moins empirique,

J'ai essayé avec les négatifs, mais le résultat c'est pas trop ça...

soit conserver un tableau,

Bah il parait que c'est pas trop standart HTML, c'est pour ça que je
voulais changer...

soit
alors, et c'est la meilleure solution, trouver une autre méthode plus
originale de mise en page et ne pas vouloir reproduire à l'identique une
mise en page telle qu'elle était construite avec des tableaux...

C'est à dire ?


--
http://extantpc.free.fr Bonne visite ! --> Nous recrutons !
Comparatif des offres FAI, Overclocking, Test, News, Petites annonces
Etc....
Pour m'envoyer un mail, retirez NoSpam de mon adresse. Steuf

an.archi a écrit :

Normalement, le line-height suffit, sauf bien sûr pour ?!
Bravo, tu as gagné : IE.

Oui j'ai vu avec les images ça décale tout... Il a vraiment décidé de me
faire chier IE... grrrr

J'ai essayé avec Windows XP sous Opera 7.6, Firefox 1.0, et IE 6, donc...
En fait, ça lui suffirait s'il n'y avait pas d'image...
Essaies de supprimer l'image et le style de l'image. Ça fonctionne... /

Bon j'ai un peu changer le code, car avec les <h1> etc... ca ne
respectait pas les tailles donc j'ai fait ça :
<style type="text/css">
#conteneurmenu {
width: 115px;
background-image: url(/images/fond_menu2.gif);
}
.h2 {
width: 115px;
height: 20px;
background-image: url(/images/rub_droit.gif);
color:#53B4FF;
text-align: right;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 20px;
}
.h3 {
width: 115px;
height: 25px;
text-align: left;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif ;
line-height: 25px;
}
.h1 {
width: 115px;
height: 21px;
}
</style>
<div id="conteneurmenu">
<div class="h1"><img src="images/b_droit.gif" width="115"
height="21"></div>
<div class="h2">
Blabla
</div>
<div class="h3">
&nbsp;&nbsp;&nbsp;&nbsp;<a
href="index.php?pages=fai">FAI</a>
</div>
</div>

Ca fonctionne sous Firefox et IE, mais ça me fait chier de perdre mon
petit icone devant mon lien...

Donc si c'est une image générique, tu peux la mettre en "background", et
ça résoudra le problème tout en supprimant le vilain "margin: 9px 0%".
Bien sûr, tout ça ne fonctionne que si tu as toujours la même hauteur de
ligne et d'image.

De plus, essaie d'éviter des noms comme menuDroite, ou assimilés, car tu
ne sais pas forcément où il se situera dans le futur... )

Hum si, dans mes mon fichier contenant mes feuilles de style tout est
organisé, mais ceci n'était qu'un début de recodage, perfectible bien
entendu, je veux juste que cela soit standart Html... Mais IE ne voit
pas ça du même oeil !


--
http://extantpc.free.fr Bonne visite ! --> Nous recrutons !
Comparatif des offres FAI, Overclocking, Test, News, Petites annonces
Etc....
Pour m'envoyer un mail, retirez NoSpam de mon adresse. Steuf

Steuf a écrit :

soit alors, et c'est la meilleure solution, trouver une autre méthode
plus originale de mise en page et ne pas vouloir reproduire à
l'identique une mise en page telle qu'elle était construite avec des
tableaux...


C'est à dire ?

Ma solution fonctionnait, même avec les images, ceci dit en passant... )
Mais je ne sais pas si tu connais tout le temps la hauteur de celles-ci...

an.archi a écrit :

Steuf a écrit :

soit alors, et c'est la meilleure solution, trouver une autre méthode
plus originale de mise en page et ne pas vouloir reproduire à
l'identique une mise en page telle qu'elle était construite avec des
tableaux...



C'est à dire ?


Ma solution fonctionnait, même avec les images, ceci dit en passant... )

Oui avec le petit icone bleu cela fonctionne, sauf que c'est un peu
décalé vers le haut sous IE, et ça me convient. Mais si j'ai une autre
solution moins contraignante, je m'en priverais pas ;-)

Mais je ne sais pas si tu connais tout le temps la hauteur de celles-ci...

Si je connais les ahuteurs, mais les images sont plus petites que la
DIV, ce qui fait qu'IE remonte un peu la ligne... Sinon pour le reste ça
fonctionne vous pouvez le voir ici et faire des suggestions sur mon code :

http://infomatiqueaide.free.fr/droite.php

--
http://extantpc.free.fr Bonne visite ! --> Nous recrutons !
Comparatif des offres FAI, Overclocking, Test, News, Petites annonces
Etc....
Pour m'envoyer un mail, retirez NoSpam de mon adresse. Steuf

Steuf a écrit :

faire des suggestions sur mon code :

oui, j'en ai au mions une, vue l'heure...
Pourquoi utiliser des class="hx", etc... et pas utiliser des hx, tout simplement.
J'avoue ne pas comprendre, là...