Header CSS
Fermé
HCKRZ51
Messages postés
618
Date d'inscription
samedi 12 décembre 2009
Statut
Membre
Dernière intervention
27 février 2011
-
21 avril 2010 à 00:32
HCKRZ51 Messages postés 618 Date d'inscription samedi 12 décembre 2009 Statut Membre Dernière intervention 27 février 2011 - 22 avril 2010 à 23:48
HCKRZ51 Messages postés 618 Date d'inscription samedi 12 décembre 2009 Statut Membre Dernière intervention 27 février 2011 - 22 avril 2010 à 23:48
Salut',
Enfait je voudrais que quelqu'un m'aide pour mon header, merci =D
Enfait je voudrais que quelqu'un m'aide pour mon header, merci =D
11 réponses
Utilisateur anonyme
22 avril 2010 à 23:46
22 avril 2010 à 23:46
En html :
<div id="header">
<div id="text-header">Virtual black market</div>
<div id ="carré-header">
</div>
En css :
#header {
min-width: 900px; /*Largeur minimal de ton header : en générale c'est la m^me valeur que la largeur minimal du site*/
background-image:ton-image.png; /*(image de 1px de large qui correspond au fond du header sans le texte ni le carré de gauche*/
background-repeat:repeat-x; /* pour que le fond de 1px se repète sur la largeur*/
}
#text-header {
position:absolute; /*pour le posisionner par rapport à aux header*/
width:auto;
top:20px; /* le texte sera à 20px du haut du header */
text-align:center; /*tu centre le texte dans ta div*/
/* Bon après tu modifie pour que ça correspond */
}
#carré-header {
/* le carré enquestion c'est le carré gris avec les 4 carrés vert */
background-image:mon-carré.png; /*image de ton carré*/
width:100px; /*largeur de ton carré*/
height:100px; /*hauteur de ton carré*/
position:absolute; /*pour positionner par rapport au header*/
bottom:0px; /* pour le collé au bas du header*/
left:200px; /* pour définir la distance par rapport à la gauche. Tu peux la définir en % ou en em pour qui garde les même proportion */
}
Bon colle ça dans ton éditeur j'ai commenté ;)
<div id="header">
<div id="text-header">Virtual black market</div>
<div id ="carré-header">
</div>
En css :
#header {
min-width: 900px; /*Largeur minimal de ton header : en générale c'est la m^me valeur que la largeur minimal du site*/
background-image:ton-image.png; /*(image de 1px de large qui correspond au fond du header sans le texte ni le carré de gauche*/
background-repeat:repeat-x; /* pour que le fond de 1px se repète sur la largeur*/
}
#text-header {
position:absolute; /*pour le posisionner par rapport à aux header*/
width:auto;
top:20px; /* le texte sera à 20px du haut du header */
text-align:center; /*tu centre le texte dans ta div*/
/* Bon après tu modifie pour que ça correspond */
}
#carré-header {
/* le carré enquestion c'est le carré gris avec les 4 carrés vert */
background-image:mon-carré.png; /*image de ton carré*/
width:100px; /*largeur de ton carré*/
height:100px; /*hauteur de ton carré*/
position:absolute; /*pour positionner par rapport au header*/
bottom:0px; /* pour le collé au bas du header*/
left:200px; /* pour définir la distance par rapport à la gauche. Tu peux la définir en % ou en em pour qui garde les même proportion */
}
Bon colle ça dans ton éditeur j'ai commenté ;)
avion-f16
Messages postés
19252
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 février 2025
4 505
22 avril 2010 à 17:01
22 avril 2010 à 17:01
Déjà le BMP on s'en passerait bien. Prends PNG ou JPG (ou GIF si tu as des animations ou des images peu colorées).
Ton background doit être une image faisant 1px de largeur, et la hauteur de ton entête. Il suffira de la faire répéter horizontalement (repeat-x).
Ton background doit être une image faisant 1px de largeur, et la hauteur de ton entête. Il suffira de la faire répéter horizontalement (repeat-x).
HCKRZ51
Messages postés
618
Date d'inscription
samedi 12 décembre 2009
Statut
Membre
Dernière intervention
27 février 2011
20
22 avril 2010 à 18:34
22 avril 2010 à 18:34
Je vais d'abord le faire en statique et je te l'uploaderai ok?
avion-f16
Messages postés
19252
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 février 2025
4 505
22 avril 2010 à 18:41
22 avril 2010 à 18:41
C'est inutile, j'ai tout dit.
HCKRZ51
Messages postés
618
Date d'inscription
samedi 12 décembre 2009
Statut
Membre
Dernière intervention
27 février 2011
20
22 avril 2010 à 18:46
22 avril 2010 à 18:46
Ouais mais j'ai un logo à mettre, avec des boutons dans le header
avion-f16
Messages postés
19252
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 février 2025
4 505
22 avril 2010 à 18:50
22 avril 2010 à 18:50
Et alors ?
Tu fais un div contenant le tout, et tu mets la background à ce div
Tu fais un div contenant le tout, et tu mets la background à ce div
HCKRZ51
Messages postés
618
Date d'inscription
samedi 12 décembre 2009
Statut
Membre
Dernière intervention
27 février 2011
20
22 avril 2010 à 18:59
22 avril 2010 à 18:59
xHTML:
<div id="en_tete">
</div>
Je comprend pas après
<div id="en_tete">
</div>
Je comprend pas après
avion-f16
Messages postés
19252
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 février 2025
4 505
21 avril 2010 à 14:16
21 avril 2010 à 14:16
Et c'est quoi la question ou le problème ?
Tu bloques au niveau (X)HTML/CSS ou sur ton éditeur d'images (Photoshop, Gimp, ...) ?
Tu bloques au niveau (X)HTML/CSS ou sur ton éditeur d'images (Photoshop, Gimp, ...) ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
HCKRZ51
Messages postés
618
Date d'inscription
samedi 12 décembre 2009
Statut
Membre
Dernière intervention
27 février 2011
20
21 avril 2010 à 20:11
21 avril 2010 à 20:11
Bah en fait je veux faire un header étirable, je voudrais que mon titre soit en milieu, mais l'image ne peut pas être étiré et donc le reste est blanc, donc il faudai plusieurs images, tu comprends?
avion-f16
Messages postés
19252
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
10 février 2025
4 505
21 avril 2010 à 22:21
21 avril 2010 à 22:21
Fais un header qui peut se répéter horizontalement, ou un design fixe en largeur.
HCKRZ51
Messages postés
618
Date d'inscription
samedi 12 décembre 2009
Statut
Membre
Dernière intervention
27 février 2011
20
21 avril 2010 à 23:37
21 avril 2010 à 23:37
Voilà un exemple de header: https://openclassrooms.com/fr/
Tu sais coder un truc du genre?
Pour l'instant moi je l'ai comme ça:
#en_tete
{
width: auto;
height: 132px;
background-image: url("NomSite.bmp");
background-repeat: no-repeat;
margin-bottom: 10px;
}
Tu sais coder un truc du genre?
Pour l'instant moi je l'ai comme ça:
#en_tete
{
width: auto;
height: 132px;
background-image: url("NomSite.bmp");
background-repeat: no-repeat;
margin-bottom: 10px;
}
HCKRZ51
Messages postés
618
Date d'inscription
samedi 12 décembre 2009
Statut
Membre
Dernière intervention
27 février 2011
20
22 avril 2010 à 00:11
22 avril 2010 à 00:11
Regarde en bas =D
HCKRZ51
Messages postés
618
Date d'inscription
samedi 12 décembre 2009
Statut
Membre
Dernière intervention
27 février 2011
20
22 avril 2010 à 21:47
22 avril 2010 à 21:47
Difficile il est en construction =/
HCKRZ51
Messages postés
618
Date d'inscription
samedi 12 décembre 2009
Statut
Membre
Dernière intervention
27 février 2011
20
22 avril 2010 à 21:57
22 avril 2010 à 21:57
Je l'upload
HCKRZ51
Messages postés
618
Date d'inscription
samedi 12 décembre 2009
Statut
Membre
Dernière intervention
27 février 2011
20
22 avril 2010 à 22:12
22 avril 2010 à 22:12
http://imageshack.com/f/4vheaderomp
HCKRZ51
Messages postés
618
Date d'inscription
samedi 12 décembre 2009
Statut
Membre
Dernière intervention
27 février 2011
20
22 avril 2010 à 23:48
22 avril 2010 à 23:48
Alors toi tu gères vraiment =D Merci
