28172 sujets

CSS et mise en forme, CSS3

Positionnement d'une div !

Bonjour,
Avant toute chose j'ai cherché la réponse à ma question sur le forum mais en vain !
Voilà, Je souhaiterais créer un calque qui ait une largeur fixe de 850px, qu'il soit centré dans la page en largeur MAIS que ça hauteur fasse la totalité de l'écran.
Voici le code que j'ai fait :

#calque
{
position:absolute; 
left: 50%;
margin-left: -425px;
width: 850px; 
height:100%;
}


Mais cela ne fonctionne pas !

Quelqu'un pourrait-il m'aider à trouver la solution.
J'espère avoir été clair !?
Merci d'avance pour vos réponses
Bonjour,

Si le but est que l'image/couleur de fond prenne toute la hauteur, le plus simple est de créer une image de 1px sur la largeur souhaité et de l'appliquer à body ou html (avec height:100%) et de la positionner au centre.

Si ce n'est pas le but, alors il nous faudrait une page en ligne ou un schéma pour expliquer ce que tu souhaites faire.

ps. : pour centrer un élément de taille fixe, utiliser margin: 0 auto; est plus simple.
Merci pour ta réponse.
Je vais développer mon propos.
J'ai une image en arrière plan qui est fixe. Le contenu du site se trouve dans le calque "container" avec plusieurs calques à l'intérieur. Entre les deux j'ai mis un calque blanc opacifié pour que lorsque la page se déroule l'image d'arrière plan ne vienne pas gêner la lecture.
Ce n'est pas très évident à expliquer.

Voici le code

body {
background: #fff url(bg.png) fixed no-repeat top right;
padding: 0px 0 0 0;
margin: 0;
font: 11px/140% Verdana;
}

#calque
{
position: absolute; 
left: 50%;
margin-left: -425px;
width: 850px; 
height:100%;
background: #fff;
opacity : 0.2;
}

#container
{
position: relative;
margin: 0 auto;
width: 834px;
z-index: 1;
}


L'image d'arrière plan qui se trouve dans le body ne remplie que le haut de la page.
J'espère avoir été plus clair.
Merci bien
Hello,
Concernant ta div de 850px, comme te l'a dis Laurie-Anne, utilise margin:0 auto; pour centrer. Du coup, tu évites position:absolute et ton height:100% sera pris en compte (si tu rajoutes height:100% a html et body)
Pour ta div blanc opacifié, je n'ai pas bien compris: ne faudrait t'il pas travaillé ton image sur photoshop plutot?

Vincent
vdo93 a écrit :
Pour ta div blanc opacifié, je n'ai pas bien compris: ne faudrait t'il pas travaillé ton image sur photoshop plutot?
Un png semi-transparent ou une couleur de fond associé à opacity revient au même résultat (après c'est une question de compatibilité).
Oui bien sur mais ca alourdi le code...alors que si il veut juste une atténuation de son image de fond, je pense que le mieux est quand meme de travailler l'image avant.
Je tente de mieux m'expliquer !
L'image de fond représente le haut du site. le fond est fixe, seul le contenu défile.
J'ai donc placé une div (qui commence à 200 px du haut) entre le contenu et le fond qui sert à opacifier le fond uniquement lors du défilement de la page !!! c'est là le hic !

Voyez plutôt par vous même

Merci d'avance
Le probleme est que ta div#trame est en position:absolute et contenue dans body qui lui est calculé en fonction de container....
J'ai réussi un semblant de truc, essaie ca:


#container:after{content:"";position:absolute;z-index:-1;width:830px;height:82%;top:12%;background:white;opacity:0.8;border:10px solid black;-moz-border-radius:10px;}


et masque #trame avec 
display:none
ta div#trame.

Le résultat n'est pas strictement identique et pas parfait ( z-index:-1;opacity;top et height en %) . J'ai testé sur FF pas sur les autres mais c'est pour te donner des idées.

Par contre :after ne marche pas avec IE<8 si je me souviens bien.

Essaie aussi en déplacant ta div#trame dans #container et joue sur body,#trame,#container avec height:auto, height:100%, min-height:100%.

A+
Modifié par vdo93 (14 Sep 2010 - 17:42)
Sujet clos
Aller à