Texte trop bas
pabouguim
Messages postés
102
Statut
Membre
-
zermat Messages postés 160 Statut Membre -
zermat Messages postés 160 Statut Membre -
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! :)
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 -
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 -
Ajouter à
#header
{
display: table-cell;
vertical-align: middle;
}
