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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Je n'arrive pas à faire fonctionner text-align: en css

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Je n'arrive pas à faire fonctionner text-align: en css

n°2232780
MrBrown91
Posté le 05-07-2014 à 20:27:07  profilanswer
 

Bonjour,
 
Je début en création de sites web
 
voici mon code sur la page html
 

Code :
  1. <span class="titre"> TEXTE TEXTE TEXTE </span>


et mon code CSS (j'ai testé font-style mais également text-align mais c'est pareil, aucun changement de mise en forme sur la page)
 

Code :
  1. .titre{ color: red; font-size: 24px; font-weight: bold; font-style: center; }


je fais bien appel au fichier style dans le code :
 

Code :
  1. <LINK rel=STYLESHEET href="style.css" type="text/css">


Je tiens à préciser que le reste fonctionne : couleur, gras, taille de police, etc.
 
Une idée ? Merci


Message édité par MrBrown91 le 05-07-2014 à 20:30:01
mood
Publicité
Posté le 05-07-2014 à 20:27:07  profilanswer
 

n°2232784
islis
Posté le 05-07-2014 à 21:23:20  profilanswer
 

Bonjour,
 
Tout élément crée une "boîte" dans laquelle il va s'afficher. C'est pas évident dans tous les cas mais ajouter une couleur de fond aide à voir à quoi elle ressemble.
Là tu utilises un span, qui est un élément en ligne (comme a ou strong) : sauf style spécifique, l'élément fera la taille strictement nécessaire à son rendu.
Au contraire un div (ou un paragraphe ou un titre h1-h6) est un élément de type bloc : il va occuper toute la largeur laissée disponible par son parent. Si son parent c'est body, c'est toute la largeur de la page moins le padding de body. Bien entendu si on le style différemment, il se comportera différemment.
 
Si tu essayes de centrer un élément qui fait 165px de large dans une boîte qui fait exactement la taille nécessaire soit 165px bah il se passe rien.
Si maintenant l'élément fait la largeur de la page ou la moitié, là oui on observe quelque chose.
 
Tu retrouves les 3 cas dans cet exemple en ligne : codepen (clique sur l'avant-dernier bouton du panneau JS pour le réduire et mieux voir les 2 autres)
 
Pour les pros : oui oui %inline et %block c'est HTML 4.01 et plus HTML5. osef :o
 
EDIT: Centrer les éléments ou un site web en CSS
Je te laisse ajouter sur le Codepen margin: 0 auto; et voir dans quel cas ça fonctionne et dans quel cas non ;)


Message édité par islis le 05-07-2014 à 21:31:23
n°2232785
olivthill
Posté le 05-07-2014 à 21:29:50  profilanswer
 

La syntaxe est :

text-align:center;


Mais il faut rajouter une largeur, sinon le centrage ne se voit pas, car il est au centre de lui-même. Il faut aussi ajouter display:inline-block;.
Par exemple, le code suivant marche :

Blabla<span style="text-align:center;display:inline-block;width:300px;">TEXTE TEXTE </span>blabla

n°2232787
MrBrown91
Posté le 05-07-2014 à 21:51:05  profilanswer
 

Merci pour vos réponses, je vais essayer tout ça, si j'arrive à tout comprendre (surtout le message d'islis)
 
Je précise également que le texte que je voudrais justifier se trouve dans une cellule de tableau <bh> </bh>


Message édité par MrBrown91 le 05-07-2014 à 21:51:59
n°2232800
David Bori​ng
Posté le 06-07-2014 à 08:21:52  profilanswer
 

th tu veux dire ?
Le texte est centré par défaut dans un th.
Tu as peut-être une classe sur ta table ou tes th qui fait le contraire.

n°2232904
MrBrown91
Posté le 07-07-2014 à 17:46:02  profilanswer
 

oui pardon <th>

n°2232909
MrBrown91
Posté le 07-07-2014 à 18:00:48  profilanswer
 

je vous avoue ne pas tout avoir compris, désolé je débute et j'étais habitué à faire des sites web à l'aide de logiciel WISIWIG
 
Voici mon style.css
 

Spoiler :

html, body {
 margin: 12px; /*12 px de marge sur tout le document*/
 padding: 0;
 }
body {
 background-color: white;  
 font-family: Verdana, sans-serif;  
 font-size: 50%;
 }
a:link {  
 font-family: Verdana;  
 font-variant:normal;  
 color: green;  
 text-decoration: underline;  
 }
a:hover {  
 font-family: Verdana;  
 font-variant:normal;  
 color:red;  
 text-decoration:none;  
 }
.bold {  
 color: #CA0000;  
 font-size: 12px;  
 font-weight: bold;  
 }
h1 {  
 color: red;  
 font-size: 24px;  
 font-weight: bold;  
 text-align: center;
 display: inline-block;  
 


Et j'ai ajouté les balises <h1> </h1> sur mon titre au lieu de définir une class, car je n'y arrivais toujours pas...
 
Voici le code du début de la page
 

Spoiler :

<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <meta http-equiv="Content-Language" content="fr">
    <title>TITRE DU SITE</title>
    <meta name="description" content="DESCRIPTION DE LA PAGE">
    <meta name="keywords" content="MOTS CLEFS">
    <link href="style.css" rel="stylesheet" media="all" type="text/css">
  </head>
  <body>
   
  <h1> TITRE DE LA PAGE A METTRE EN FORME </h1>
  <table width="960px" border="0" align="center">
  <CAPTION> </CAPTION>
   <tr>
    <th width="560px">  <div class="flvcashplayer-root" SUITE DU CODE align="center"></div> </th>
    <th width="400px"> <span class="justify"> DESCRIPTION DE L'ELEMENT </span> </th>
   <tr height="40px"> </tr>
 


Voilà, quand j'applique une marge cela fonctionne mais pas la valeur test-align ou font-style

n°2232913
David Bori​ng
Posté le 07-07-2014 à 18:15:19  profilanswer
 

Pas convaincu par ton code, j'ai l'impression que tu emploies une table pour construire le layout !
C'est bien sur le texte qui est centré par un th, si tu mets un div dedans, tu dois dire à ce div d'être centré
.flvcashplayer {margin: 0 auto}
 
Pour ton deuxième th, mets ton text dans un <p> plutôt que un span (c'est la règle du display expliqué plus haut).
 
Mais si tu parles un peu plus de ton projet, ce que tu essaies de faire, l'aide sera plus complète, car tu es mal parti je pense.

n°2233111
MrBrown91
Posté le 10-07-2014 à 10:38:02  profilanswer
 

.


Message édité par MrBrown91 le 10-07-2014 à 19:35:53

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

  Je n'arrive pas à faire fonctionner text-align: en css

 

Sujets relatifs
javascript, je n'arrive pas a faire fonctionner ma galerie d'imagesJe n'arrive pas ajouter mes composants la ou je veux.
PHP + SQL + Jpgraph = j'y arrive pasJe n'y arrive vraiment pas ='(
[DITA-OT] Je n'arrive pas à lancer l'AntText clignotant
Je n'arrive lancer mon script shell via crontabFaire fonctionner la fonction filemtime
Les dates : j'arrive pas à enrégistrer dans ma BD 
Plus de sujets relatifs à : Je n'arrive pas à faire fonctionner text-align: en css


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