problèmes de code css

folha seca · dreamweaver mioche

salut!!! j'ai un piti problème... je comprends pas ce qui se passe...
sur le site que je veux faire, j'ai mon header que je voudrai mettre en haut au centre, j'aimerai aussi le fixer pour que quand on descend dans la page, on voit toujours le header... je vous montre mon script... j'espère que vous pourrez me dire ce qui ne va pas... regardez :
#en_tete
{
width: 500px;
height: 107px;
margin: auto;
background-image: url("project1.png");
background-repeat: no-repeat;
margin-bottom: 10px;
background-attachment: fixed; /* Le fond restera fixe */
}

iowa · php mioche

pour sa il faut faire du javascript

folha seca · dreamweaver mioche

einh?! je comprends pas là... moi je marche au html et css! pas au javascript! on doit pouvoir se débrouiller sans javascript nan?!!! la seule chose que je veux c'est centrer mon header et le fixer...
et pis je comprends pas parce que le code que je vous ai montré, c ce que je fais pour le fond d'acran et ca marche nikel! je vous montre mon truc...

body
{
font-family: "Trebuchet MS", "Comic sans MS", "Arial";
font-weight: bold;
background-image: url("project capoeira custom.jpg");
background-attachment: fixed; /* Le fond restera fixe */
color: white;
width: 95%;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
}

voila... moi en tout cas je comprends pas pourquoi ca marche avec le fond décran et pas avec mon header...

iowa · php mioche

oula j'ai pas compris la ?

tu veux que l'on voie toujour ton header meme quand on scroll ?

clb56 · frontpage mioche

En fait il y a une solution en css.

Petite modification du html tout d'abord.

folha seca · dreamweaver mioche

ok je vais essayer ca alors merci! je vous dirai si j'y suis arrivé ou pas

folha seca · dreamweaver mioche

euh... j'y arrive pas vraiment... je vais vous montrer ce que j'ai marqué pr que vous me disiez si j'ai mal fait un truc... alors :
le html dans le body :
<div id="conteneur_entete">
<div id="en_tete">


</div>
</div>

le css :
#conteneur_entete
{
position:absolute;/* à mettre en premier*/
width:100%;
height:107px;
text-align:center;
}

body #conteneur_entete
{
position:fixed;
width:100%;
height:107px;
}

/* L'en-tête */

#en_tete
{
height: 100%;
}

voila... qu'est ce qui va pas??? O_o

clb56 · frontpage mioche

Qu'est ce qui ne marche pas ?

Si tu as testé le code tout seul alors rajoute une couleur de background à #en_tete pour le visualiser.

++

folha seca · dreamweaver mioche

ce qui va pas c'est que je vois pas mon image d'en tete -.- ... en fait j'ai l'espace que j'ai dit pr le mettre (107px) qui est bien présent en haut de la page mais il est vide, on voit que le fond d'écran dedans... et en plus après qd je défille avec un scroll bah il reste pas fixe...

mais logiquement... si on paramètre juste en absolu... mm sans mettre de position : fixe ca doit rester fixe non?!

voila dc essayez de me dire pk il m'affiche pas mon image et pis répondez a ma question svp

merci d'avance

folha seca · dreamweaver mioche

non bah en fait c'est bon... ch'ui revenu sur ce que j'avai écrit au début, j'ai modifié un ou deux trucs et ca marche.

merci qd mm!

enfin... un truc avant de partir... tu peux m'expliquer pourquoi tu ouvrais un nouvel id "conteneur_entete"??? nan parce que je vois pas bien a quoi ca ser...

clb56 · frontpage mioche

parce que en position fixed comme en position absolute, un element perd sa propriete de margin donc le centrage via margin auto sous firefox et opera ne marcherait pas

++

folha seca · dreamweaver mioche

ah ok! bon là en fait moi j'ai viré le margin et pis je me suis débrouillé en faisant un truc un peu plus barbar et ca marche bien... voila voila... merci en tt cas!

TranMi · frontpage mioche

Bonsoir tout le monde, j'ai un peu le même genre de problème que l'auteur du site sur la capoeira ...

Je vous explique le problème : j'ai donc une bannière, mais voilà qu'elle n'est pas très ... centré voyez-vous !

Le code css :

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;

}

.en_tete_a

{
width: 650px;
height: 180px;
background-image: url("images/ban1.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
}

Je ne suis pas un grand spécialiste du CSS, et je me suis largement inspiré d'un tutorial pour réaliser ceci, et je dois avouer que là, je reste perplexe !

Problème réglé, il m'a suffit d'ajouter : margin: auto; au dessus de margin-bottom: 10px;