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

Je n'arrive pas à faire fonctionner text-align: en css - HTML/CSS - Programmation

Marsh Posté le 05-07-2014 à 20:27:07    

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
Reply

Marsh Posté le 05-07-2014 à 20:27:07   

Reply

Marsh Posté le 05-07-2014 à 21:23:20    

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
Reply

Marsh Posté le 05-07-2014 à 21:29:50    

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

Reply

Marsh Posté le 05-07-2014 à 21:51:05    

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
Reply

Marsh Posté le 06-07-2014 à 08:21:52    

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.

Reply

Marsh Posté le 07-07-2014 à 17:46:02    

oui pardon <th>

Reply

Marsh Posté le 07-07-2014 à 18:00:48    

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

Reply

Marsh Posté le 07-07-2014 à 18:15:19    

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.

Reply

Marsh Posté le 10-07-2014 à 10:38:02    

.


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

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed