Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1436 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  pb d'alignement vertical de texte dans un DIV

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

pb d'alignement vertical de texte dans un DIV

n°694509
fxoxo
Posté le 07-04-2004 à 11:11:10  profilanswer
 

Bonjour à tous,
je me suis mis hier aux Div (j'ai passé l'après midi à refaire un truc que j'avais fais en 5mn avec un tableau ...)
 
Et il reste un truc que je ne réussis pas à faire: aligner verticalement un texte dans un Div de petite taille.
 
Je m'explique:
si on utilise du 'gros' texte dans un div sans préciser sa hauteur
<div style=" background-color: #00ff00; margin:30px;">
 <p align="center" style="font-size:150%">du texte</p>
</div>
Pas de problème le texte est centré verticalement.
 
 
par contre si on veux choisir la hauteur du div (parcequ'on à un background précis par exemple)
<div style="height:40px; background-color: #00ff00; margin:30px; ">
 <p align="center" style="font-size:150%">du texte</p>
</div>
ca marche pas !!! :fou:  
 
Bon alors j'ai essayé pas mal de truc (vertical-align, padding, marging-top ...) mais j'ai rien trouvé qui marche à la fois avec IE et Mozilla ... Grrrr
 
Si quelq'un connais la réponse ca serais cool (sinon j'vais être obligé de continuer à utiliser des tableaux pour ce truc ...)
 
 
 

mood
Publicité
Posté le 07-04-2004 à 11:11:10  profilanswer
 

n°694536
gizmo
Posté le 07-04-2004 à 11:50:50  profilanswer
 
n°694569
fxoxo
Posté le 07-04-2004 à 12:37:15  profilanswer
 

Merci pour ta réponse,
Ca marche avec position : relative dans un cas
 
<div style="height:50px;  background-color: #00ff00;  text-align: center; vertical-align:middle;">
 <p align="center" style="position: relative; top: 10px; font-size:150%;">du texte</p>
</div>
 
Par contre, si on passe le bloc conteneur en float (comme c'est mon cas) c'est la cata ... :
 
<div style="height:50px;  background-color: #00ff00;  text-align: center; vertical-align:middle;">
 <p align="center" style="position: relative; top: 10px; font-size:150%;">du texte</p>
</div>
 
si on ne précise pas la position du texte Mozilla aligne le texte vers le bas et IE vers le haut donc impossible d'utiliser position : relative !  :fou:  
 
bref retour au poins de départ !!!
c'est vraiment merdique la gestion des alignements avec les divs ! tu parle d'un standard , les tableaux c'est peu être pas élégant mais au moins tu peux faire des alignements dynamiques ...

n°694616
gizmo
Posté le 07-04-2004 à 14:02:52  profilanswer
 

disons que ce que tu veux faire, c'est standard. C'est la façon dont IE le gère qui ne l'est pas.

n°694634
fxoxo
Posté le 07-04-2004 à 14:12:25  profilanswer
 

gizmo a écrit :

disons que ce que tu veux faire, c'est standard. C'est la façon dont IE le gère qui ne l'est pas.


 
Oui mais malheureusement c'est IE qui est leader du marché donc je suis obligé d'avoir un résultat 100% compatible IE en prioritè ...
 
Pour que les standards se répandent ils faut qu'ils puissent s'appliquer aux outils majoritaires et c'est malheureusement pas le cas ...
 
Bon pour finir, je pense que je vais essayer d'utiliser au maximum les div et dans les cas ou ce n'est pas possible reprendre la vieille sauce tabulaire ...
 

n°694754
KdZ'
Simple®
Posté le 07-04-2004 à 16:02:41  profilanswer
 

Code :
  1. <div style=" background-color: #00ff00; margin:30px;">
  2. <p align="center" style="font-size:150%">du texte</p>
  3. </div>


 
Peut etre remplacer par
 

Code :
  1. <p style="font-size:150%; background-color: #00ff00; margin:30px; text-align:center;">du texte</p>


 
:)

n°695619
fxoxo
Posté le 08-04-2004 à 16:10:50  profilanswer
 

KdZ' a écrit :

Code :
  1. <div style=" background-color: #00ff00; margin:30px;">
  2. <p align="center" style="font-size:150%">du texte</p>
  3. </div>


 
Peut etre remplacer par
 

Code :
  1. <p style="font-size:150%; background-color: #00ff00; margin:30px; text-align:center;">du texte</p>


 
:)


 
 
Merci !!!
Ce n'étais pas exactement ça, mais ça m'à permis de trouver la solution :
 
<div style="height:47; width:47px; float: left; " >
  <div style="font-size:150%; padding:10px; background-image:url(img/toto.jpg);  text-align:center;">t</div>
</div>
 
En gros je fixe la taille de la cellule dans le conteneur (qui est flottant) puis je centre/rêgle la taille de l'image dans l'autre cellule qui contiend le texte.
C'est un peu bizare, à la louche et bidouillé mais ca marche sur IE et Mozilla!
 
merci à tous
 
 
 
 
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  pb d'alignement vertical de texte dans un DIV

 

Sujets relatifs
Comment faire un champ de texte avec ce type de scrollbar ?[Java] Créer un editeur de texte gérant la coloration syntaxique
[C++]Aide épuration de fichier texteMon texte deborde de mon JTextArea et va dans une autre ?!
[JAVA 2D] Redimensionner la taille d'un composant en fonction du texteremplacer dans un fichier texte
Modifier grandeur du texte dans une liste déroulante ?Problème d'affichage du texte sous IE
comment recuperer un texte écrit dans un JComboBox<xsl:copy> - contenu mixte - recopiage du texte
Plus de sujets relatifs à : pb d'alignement vertical de texte dans un DIV


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR