Texte trop bas
pabouguim
Messages postés
96
Date d'inscription
Statut
Membre
Dernière intervention
-
zermat Messages postés 160 Date d'inscription Statut Membre Dernière intervention -
zermat Messages postés 160 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Ca fait seulement 3 jours que j'ai commencé à apprendre correctement comment se servir du HTML (disons qu'avant je connaissais 4-5 balises et les utilisais un peu n'importe comment) donc soyez indulgents haha :)
J'ai crée un en-tête avec <div id="header"> pour y mettre un texte <h2>, par exemple My blog, comme ceci : <div id="header"><h2>My blog</h2></div>. J'ai centré le texte mais il reste en bas de la bannière, y a t'il un moyen de le faire remonter ? (pas en agrandissant l'en-tête, il devrait rester à 50px de hauteur)
Image : http://img4.hostingpics.net/pics/923856myblogessai.jpg
Morceau de mon CSS associé :
Merci d'avance! :)
Ca fait seulement 3 jours que j'ai commencé à apprendre correctement comment se servir du HTML (disons qu'avant je connaissais 4-5 balises et les utilisais un peu n'importe comment) donc soyez indulgents haha :)
J'ai crée un en-tête avec <div id="header"> pour y mettre un texte <h2>, par exemple My blog, comme ceci : <div id="header"><h2>My blog</h2></div>. J'ai centré le texte mais il reste en bas de la bannière, y a t'il un moyen de le faire remonter ? (pas en agrandissant l'en-tête, il devrait rester à 50px de hauteur)
Image : http://img4.hostingpics.net/pics/923856myblogessai.jpg
Morceau de mon CSS associé :
div {
border-radius: 5px;
}
#header {
background-color: #068133;
height: 50px;
width: 400px;
position: fixed;
text-align: center;
}
Merci d'avance! :)
A voir également:
- Texte trop bas
- Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Texte barré whatsapp - Guide
- Mettre un texte en majuscule - Guide
3 réponses
Salut:
#header {
background-color: #068133;
height: 50px; <!--- Ici vous définissez la hauteur de h2 de 50px donc vous aurez votre texte aligné à la moitié de 50px soit 25px, ceci explique votre décalage-->
width: 400px;
position: fixed; <!---??? pourquoi faire?--->
text-align: center;
}
Vous pouvez par contre écrire ceci:
position:relative;<!---vous définissez la position de l'élément par rapport à l'élément précédent-->
top:1em;<!---à partir du haut et espacé de 1 hauteur de ligne--->
height:1em;<!---si vous n'avez qu'une ligne de texte 1em correspond à la hauteur d'une ligne de texte, c'est aussi la valeur par défaut d'une balise de texte-->
Je vous incite à consulter des liens de cette page:
https://www.google.fr/search?q=positionnement+CSS
Nottamment le cours d'Alsacreations et de OpenClassRoom qui sont 2 des principaux sites d'auto formation au web.
L'utilité et la complexité du CSS c'est à 90% le positionnement des éléments.
Bon travail
#header {
background-color: #068133;
height: 50px; <!--- Ici vous définissez la hauteur de h2 de 50px donc vous aurez votre texte aligné à la moitié de 50px soit 25px, ceci explique votre décalage-->
width: 400px;
position: fixed; <!---??? pourquoi faire?--->
text-align: center;
}
Vous pouvez par contre écrire ceci:
position:relative;<!---vous définissez la position de l'élément par rapport à l'élément précédent-->
top:1em;<!---à partir du haut et espacé de 1 hauteur de ligne--->
height:1em;<!---si vous n'avez qu'une ligne de texte 1em correspond à la hauteur d'une ligne de texte, c'est aussi la valeur par défaut d'une balise de texte-->
Je vous incite à consulter des liens de cette page:
https://www.google.fr/search?q=positionnement+CSS
Nottamment le cours d'Alsacreations et de OpenClassRoom qui sont 2 des principaux sites d'auto formation au web.
L'utilité et la complexité du CSS c'est à 90% le positionnement des éléments.
Bon travail
Merci beaucoup pour votre réponse :)
Le position: fixed; est pour que l'en-tête reste visible même si on descend.
" height: 50px; <!--- Ici vous définissez la hauteur de h2 de 50px donc vous aurez votre texte aligné à la moitié de 50px soit 25px, ceci explique votre décalage--> "
"height" détermine ici la taille du texte ?
Sinon je n'ai pas compris ce que veut dire "positionner un élément par rapport à un autre", même si je l'ai vu plusieurs fois, ça veut dire qu'ils ne se chevaucheront pas ?
Et juste pour être sûre - dire top: 1em revient à laisser une marge de 1em au-dessus d'un élément ? Et ça marche aussi pour d'autres dans le genre bottom, left, right ?
Je vais voir ces sites :) pour le moment, je n'ai fait que sur Codecademy
Le position: fixed; est pour que l'en-tête reste visible même si on descend.
" height: 50px; <!--- Ici vous définissez la hauteur de h2 de 50px donc vous aurez votre texte aligné à la moitié de 50px soit 25px, ceci explique votre décalage--> "
"height" détermine ici la taille du texte ?
Sinon je n'ai pas compris ce que veut dire "positionner un élément par rapport à un autre", même si je l'ai vu plusieurs fois, ça veut dire qu'ils ne se chevaucheront pas ?
Et juste pour être sûre - dire top: 1em revient à laisser une marge de 1em au-dessus d'un élément ? Et ça marche aussi pour d'autres dans le genre bottom, left, right ?
Je vais voir ces sites :) pour le moment, je n'ai fait que sur Codecademy
