Texte trop bas

Fermé
pabouguim Messages postés 96 Date d'inscription vendredi 29 novembre 2013 Statut Membre Dernière intervention 13 septembre 2014 - Modifié par Chris 94 le 20/06/2014 à 16:51
zermat Messages postés 160 Date d'inscription jeudi 19 juin 2014 Statut Membre Dernière intervention 3 juin 2016 - 20 juin 2014 à 23:15
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é :

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
0
pabouguim Messages postés 96 Date d'inscription vendredi 29 novembre 2013 Statut Membre Dernière intervention 13 septembre 2014 4
20 juin 2014 à 17:29
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
0
zermat Messages postés 160 Date d'inscription jeudi 19 juin 2014 Statut Membre Dernière intervention 3 juin 2016 16
20 juin 2014 à 23:15
Ajouter à
#header
{
display: table-cell;
vertical-align: middle;
}
0