28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je cherches a "fixer" en haut de ma page web un DIV.
Je crois savoir faire cela avec

DIV.monHaut {
 POSITION: fixed; TEXT-ALIGN: center; WIDTH: 100%;HEIGHT:124px;
PADDING-BOTTOM: 0px; PADDING-LEFT: 0px;  PADDING-RIGHT: 0px; ; PADDING-TOP: 0px
OVERFLOW: hidden; FONT-WEIGHT: bold}

pour moi cela me fait un DIV qui restera fixe lors du scroll de la page,
Dedans ce DIV je voudrais un DIV de 788px centré
Que me conseillez vous comme syntaxe, bien sur ce DIV restant "enfermé" dans le premier Smiley smile
Merci d'avance
Modifié par Christele (09 Nov 2010 - 13:12)
Bonjour,

Il suffit donc d'imbriquer les deux div.

Par contre, avec 788px de haut... Les utilisateurs ayant une petite résolution (mobile, mini PC...) n'auront pas accès à tout ton contenu...

Ce div parent, à quoi sert-il réellement ? Si c'est juste pour mettre une image de fond, il y a d'autres solutions.

ps. : les attributs CSS doivent être écrits en minuscule.
Laurie-Anne a écrit :
Bonjour,
Il suffit donc d'imbriquer les deux div.

Merci de tes réponses, oui, 788px c'est en largeur Smiley smile
Alors tu me demandes pourquoi ?
Je veux un DIV qui me bloque en haut de l'ecran mon logo et menus qui sont dans le DIV 788px
et que, tu t'en doutes, je veux centré. alors que le DIV qui le contient, a un fond (img)
et est a 100% ainsi ma page scroll bien en "rentrant dedans" j'espéres que tu me comprends.
Dans ce cas, il suffit de fixer le div ne devant pas bouger et de lui dire où se placer (comme avec le positionnement absolu en fait). Cela devrait fonctionner sans problème.

Si tu as une page en ligne pour exposer le problème que tu rencontre, ce sera plus facile pour le comprendre.

Pour les version de IE ne reconnaissant pas position:fixed; il faudra utiliser le positionnement absolu.
Laurie-Anne a écrit :
Dans ce cas, il suffit de fixer le div ne devant pas bouger et de lui dire où se placer (comme avec le positionnement absolu en fait). Cela devrait fonctionner sans problème.
Si tu as une page en ligne pour exposer le problème que tu rencontre, ce sera plus facile pour le comprendre.

Oui oui mais c'est promis tu ne hurles pas Smiley cligne
http://www.fox-infographie.com
Laurie-Anne a écrit :
Bah ça fonctionne, non ?
Où alors je n'ai vraiment pas compris le problème.

Oui c'est "regardable" sauf que je voulais me débarasser des tables
et surtout des

              

Qui simulent le centrage !
Tu vois que dans mon pavé du haut j'ais mon div class="monHaut" avec

div.monHaut {  
position: fixed;text-align: center; width: 100%;height:140px; 
margin: 0 ;     padding: 0 ; border:0;
overflow: hidden;
background-image : url("fi_logos/fox.jpg");
}

qui lui est bien, mais dedans j'ais tout et nimporte quoi !
Notes il y a un progrés, j'ais mis en minuscule mon CSS Smiley smile
Modifié par Christele (09 Nov 2010 - 10:12)
Je vais m'auto-quoter
Laurie-Anne a écrit :
Dans ce cas, il suffit de fixer le div ne devant pas bouger et de lui dire où se placer (comme avec le positionnement absolu en fait). Cela devrait fonctionner sans problème.


Un truc du genre devrait fonctionner :
<div id="haut"></div>
<div id="bas"></div>


#haut{
position:fixed;
top:0;
left: 50%; 
width: 700px;
margin-left: -350px; /* moitié de la largeur */
}


Il faudra juste quelques adaptations pour IE6.