Discussion :

[labarre2002]

BOnjour


Sur ma page j ai un titre censé ressembler a çà:


titre:"work force"



mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<h1 class="title">
            <span class="premier">
            <span>w</span>
            <span>o</span>
            <span>r</span>
            <span>k</span>
 
            </span>
            <span class="premier">
            <span>f</span>
            <span>o</span>
            <span>r</span>
            <span>c</span>
            <span>e</span>
            </span>
            </h1>

sur ma page se présente comme ca:



le problème est que lorsque j'applique l'attribut font-size en vue d'augmenter la taille
il est inopérant
l'attribut ne fonctionne sur mon titre.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
position: absolute;
display: block;
font-size: 2.73148vh;
 
left: 240px;

Pourrais-je avoir des explications SVP ?


Merci.

[Archimède]

Salut, ce que tu places devant vh est le pourcentage de la hauteur de la fenêtre... donc, c'est normal ! Tu es à moins de 3% de la hauteur de la fenêtre ici...

[labarre2002]

Bonjour Archimede


même font-size:2em ne change rien.

[Archimède]

Re, tu as bien mis ton code CSS dans :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.title{
 
}

[labarre2002]

voici mon code

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
.title{
align-self: flex-start;
position: absolute;
display: block;
font-size: 2.5em;
text-transform: uppercase;
left: 240px;
}
 
.premier{
  display: block;
 
}

[Archimède]

C'est sur class premier, tu mets 1em et tu affectes une classe second pour le span (force) avec une police de 2.5em...Pas dans ton h1 container.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
.premier {
            display: block;
            font-size: 1em;
}
.second {
            display: block;
           font-size: 2.5em;
}

[labarre2002]

Merci archimede

c'est mieux qu'avant mais la encore la taille est très faible même en exagérant avec un 6em je n'ai même pas la moitié du résultat escompté

[Archimède]

Après, tu mets un 25vh et tu verras...

[labarre2002]

sur l element .premier puis sur .second je suppose


j ai ca

[Archimède]

Re, si tu veux la même taille de police sur les deux : work et force alors autant mettre ton font-size sur la class title... sinon dans la classe premier, tu mets une police plus petite (3vw) et dans la classe second un 15vw (mieux en fonction de la largeur de la fenêtre pour les portables...)

[NoSmoking]

Bonjour,
l'abus de <span> tue le <span>, c'est également valable pour d'autres type d'élément.

Ton code HTML peut se résumer à :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h1 class="title-main"><span class="title-fine">Un bon</span>Titre</h1>

et le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
.title-main {
  font-size: 8em;         /* à ajuster */
  line-height: 1;         /* limite l'écart entre ligne */
  ...                     /* vient le cosmétique */
}
.title-fine {
  display: block;         /* pour le retour à la ligne */
  font-size: .4em;        /* soit 40% de title-main */
  font-style: italic;     /* vient le cosmétique */
  font-weight: normal;
}

le problème est que lorsque j'applique l'attribut font-size en vue d'augmenter la taille
il est inopérant
l'attribut ne fonctionne sur mon titre.

ce que tu nous montres ne nous permet pas de t'aider plus avant !

[labarre2002]

Merci NoSmoking

probleme resolu.