Centré constamment sans sortir de l'écran

**vulgate** · 07/09/2008, 11h00

J'essaye de copier la structure de ce site
http://www.adcnl.nl/
mais je n'arrive pas à obtenir le même résultat notamment quand je redimensionne la taille de la fenêtre du navigateur.
C'est à dire que si vous réduisez la taille de la fenêtre du navigateur avec ce site, la photo centrale se cale en haut à gauche sans sortir de l'écran. quelle propriété css faut-il appliquer à une boîte pour qu'elle soit constamment centrée mais ne sort pas de l'écran quand on redimensionne la taille du navigateur?

Je deviens fou.

Merci.

**12monkeys** · 07/09/2008, 11h20

Bonjour

Pour centrer une boite il faut lui attribuer des marges automatiques :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
body { margin:5px 0px 0px 0px;padding:0px;text-align:center; }
#centrer { margin:0px auto;padding:0px;width:775px;text-align:left; }

Avec ici un div centrer qui englobe le reste de ton site.

Cependant je ne comprends pas :

Envoyé par vulgate

quelle propriété css faut-il appliquer à une boîte pour qu'elle soit centrée constamment centrée mais ne sort pas de l'écran quand on redimensionne la taille du navigateur?

Il y a bien un moment où ça va sortir de l'écran si on réduit le navigateur à une portion congrue... Ce qui est aussi le cas du site que tu cite...

Pour appliquer cette méthode (des marges auto) il faut donner une largeur fixe à ta div #centrer...

**vulgate** · 07/09/2008, 11h25

sur le site que je mentionne, si tu réduis la fenêtre fortement, l'image centrale ne sort pas de l'écran, elle se cale en haut à gauche sans que ses bords left et top ne sortent de la fenêtre. Les bords bottom et right bien mais les 2 autres non...
comment empêcher les bords top et left de sortir de la fenêtre malgré une centrage permanent, comme sur le site mentionné?

**12monkeys** · 07/09/2008, 11h35

Envoyé par vulgate

sur le site que je mentionne, si tu réduis la fenêtre fortement, l'image centrale ne sort pas de l'écran, elle se cale en haut à gauche sans que ses bords left et top ne sortent de la fenêtre. Les bords bottom et right bien mais les 2 autres non...
comment empêcher les bords top et left de sortir de la fenêtre malgré une centrage permanent, comme sur le site mentionné?

OK j'ai compris

Essaye le code que je t'ai montré, j'ai testé il fait bien ce que tu demande...

Si jamais ce n'est pas le cas chez toi, montre nous ton code (html et css)

**vulgate** · 07/09/2008, 12h28

comment créer un bloc central avec une photo (comme sur ce site) qui s'aligne verticalement et horizontalement et dont les bords top et left ne sortent pas de l'écran...????

voici mon code...
Je voudrais que l'image centrale se comporte de la même manière que sur le site que je mentionne...

Merci encore pour l'aide...

**12monkeys** · 07/09/2008, 12h48

Hum ! tu as testé mon code ?? En tout cas je ne le vois pas dans tes fichiers...

En plus tes div englobantes, n'englobent pas grand chose...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div class="global"><div class="site presentation"></div></div>

<div class="Menu">
<div class="liens"><a href="index.html">accueil</a></div>
<div class="liens"><a href="presentation.html">presentation</a></div>
<div class="liens">evenements</div>
<div class="liens">photos</div>
<div class="liens">presse</div>
<div class="liens">exposants</div>
<div class="liens">liens</div>
<div class="liens">contact</div>
</div>

**vulgate** · 07/09/2008, 13h07

ça ne fonctionne pas parceque il y a en plus un alignement vertical...
si tu jètes un oeil sur le site dont je mentionne l'adresse dans mon premier post tu verras que la photo centrale est alignée horizontalement et verticalement en permanence mais si la fenêtre est très réduite, les bords top et left ne sortent pas du navigateur, ils se bloquent.

Merci.

**12monkeys** · 07/09/2008, 13h28

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr-FR">
<head>
<title>Test</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
</style>
</head>
 
<body>
 
<div style="background:red;width:400px;height:100px;position:absolute;left:50%;margin-left:-200px;top:50%;margin-top:-50px;">
sss
</div>
 
 
</body>
</html>

Par contre le bord du haut gauche ne reste pas dans le coin supérieur gauche de la fenêtre, je ne sais pas comment ils font, regarde le code source, sinon quelqu'un d'autre saura peut être...

Centré constamment sans sortir de l'écran

CSS

Discussions similaires

Partager

Partager