La fameux vertical-align
La fameux vertical-align - HTML/CSS - Programmation
Marsh Posté le 02-08-2003 à 21:17:12
Pas d'acheteur... ou tout le monde en vacances ? 
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
![[:spamafote]](https://forum-images.hardware.fr/images/perso/spamafote.gif "[:spamafote]")
Marsh Posté le 02-08-2003 à 21:42:41
| gizmo a écrit : IE ne gère pas le table-cell |
Sacré IE, va ! Toujours là pour mettre de l'ambiance, lui 
Et pas moyen de le gruger, sinon ?
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 02-08-2003 à 23:52:23
euh... oui, y a moyen. Tu peux jouer avec les paddings, inclure ton texte dans un span de même hauteur que le div, ...
Marsh Posté le 02-08-2003 à 23:57:19
Avec line-height.
Ah non... ça fonctionne aussi partout... sauf sous IE...
Marsh Posté le 03-08-2003 à 00:37:57
| gizmo a écrit : euh... oui, y a moyen. Tu peux jouer avec les paddings, inclure ton texte dans un span de même hauteur que le div, ... |
Euh ça, ça ne change strictement rien :
<style type="text/css">
.conteneur {
display: table-cell;
width: 500px;
height: 400px;
background-color: yellow;
vertical-align: middle;
}
span {
height: 400px;
}
</style>
<body>
<div class="conteneur">
<span>texte centré</span>
</div>
Et avec les paddings je ne vois pas non-plus 
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 03-08-2003 à 00:47:32
Autre chose : en définissant une taille de 100% (width: 100%;
height: 100%
à mon conteneur, l'alignement ne fonctionne plus du tout... ni sur IE (bien sûr), ni sur aucun autre navigateur.
Question bête : comment centrer un petit site (genre 400x300px) dans la page, horizontalement et verticalement, quel que soit le navigateur ?
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 03-08-2003 à 02:19:04
J'ai finallement une solution qui fonctionne, est-ce correct ?
.conteneur {
position:absolute;
left: 50%;
top: 50%;
width: 500px;
height: 300px;
margin-top: -150px;
margin-left: -250px;
}
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 03-08-2003 à 11:36:53
pour ton centrage de boite, oui, c'est correct (j'avais fait un long post la-dessus sur FG suite à une demande de shemu )
pour le span, c'est bien sur sur lui qu'il faut appliquer le vertical-align, pas sur l'autre, sinon, ca ne change rien au problème
Message édité par gizmo le 03-08-2003 à 11:37:01
Marsh Posté le 03-08-2003 à 18:06:26
"j'avais fait un long post la-dessus sur FG suite à une demande de shemu" >> pas vu
"pour le span, c'est bien sur sur lui qu'il faut appliquer le vertical-align, pas sur l'autre, sinon, ca ne change rien au problème " >> J'avais testé aussi sur le span, mais ça ne change rien
Quoi qu'il en soit, le problème semble réglé
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 03-08-2003 à 19:32:14
| gizmo a écrit : IE ne gère pas le table-cell |
Ah mairde 
Faudra que je l'indique dans l'article sur vertical-align dans la FAQ...
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 03-08-2003 à 19:43:11
| gm_superstar a écrit : |
Oui, parce que cela m'a étonné que ça ne fonctionne pas (quoique avec IE on n'est plus guère étonné), alors que je suivais la FAQ.
Il faudrait peut-être aussi proposer cette solution des marges négatives, si c'est correct et propre partout
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 03-08-2003 à 19:59:45
| SIBELIUS a écrit : |
marche pas avec netscape 4.7 
Marsh Posté le 03-08-2003 à 20:01:06
| flyman30 a écrit : |
On s'en fout des navigateurs d'ancienne génération. Dehors les netscape 4 et Internet explorer
---------------
brisez les rêves des gens, il en restera toujours quelque chose... -- laissez moi troller sur discu !
Marsh Posté le 03-08-2003 à 20:01:48
| kadreg a écrit : |
Marsh Posté le 03-08-2003 à 20:04:49
| flyman30 a écrit : |
Je parlais de navigateurs, pas de dinosaures
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 03-08-2003 à 20:08:06
| SIBELIUS a écrit : Il faudrait peut-être aussi proposer cette solution des marges négatives, si c'est correct et propre partout |
Cette solution des "marges négatives" est évoquée à la fin de l'article sur vertical-align : http://forum.hardware.fr/forum2.ph [...] 12#t389941
| Citation : -> Si on souhaite positionner du texte verticalement dans un bloc : |
C'est ce que je sous-entend par "positionnement absolu" ici. Je n'ai pas détaillé la méthode car elle est expliquée ailleurs : http://forum.hardware.fr/forum2.ph [...] 10#t229960 (méthode 4)
Comme tu le vois cette méthode n'est valable que lorsqu'on connait à l'avance la hauteur du DIV (et donc la quantité de texte qu'il y aura dedans). Ce qui n'est malheureusement pas toujours le cas...
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Sujets relatifs:
- Ecriture alignée à la vertical en HTML
- HTML : Comment bloquer le scroll horizontal (et non vertical) ?
- [CSS] problème de vertical-align
- [XHTML strict] width / height / align / color ?
- Comment utiliser le Text Align "Justifier" ?
- [html] alignement vertical au milieu marche pas a l'aide urgentissime!
- Alignement vertical des images
- [HTML] Peut on l'equivalent d'un <HR> mais en vertical ?
- Bleme d'allignement vertical sur ma page central ! HELP
Marsh Posté le 02-08-2003 à 20:38:12
Je veux centrer un texte dans un bloc. Rien de compliqué apparemment.
Voici mon CSS :
.conteneur {
display: table-cell;
width: 500px;
height: 400px;
background-color: yellow;
vertical-align: middle;
}
Et mon HTML :
<div class="conteneur">
texte centré
</div>
Pourquoi mon texte n'est pas centré verticalement ? Je précise qu'il n'y a que sous IE que ça ne marche pas, tout fonctionne sous Opera et Firebird.
Y'a t'il un truc que j'ai oublié ?
Y'a t'il un moyen de gruger IE ?
Comment faire pour que ça fonctionne sous IE sans tables ?
PS : Je viens de repotasser une fois de plus la FAQ à ce sujet et tout me semble correct pourtant
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com