Centrage d'éléments DIV ayant position:absolute;

**Steph4fun** · 13/05/2007, 16h48

Bonjour,

J'ai des boites positionnées avec "position:absolute;".
Je n'arrive pas à les centrer dans la page à l'aide d'un DIV.
Voici mon code :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test position</title>
<style type="text/css">
<!--
body {text-align: center;}
#boite1 { position:absolute; top:10px; left:20px; width:150px; height:150px; z-index:1; }
#boite2 { position:absolute; top:40px; left:40px; width:100px; height:100px; z-index:2; }
#boite3 { position:absolute; top:80px; left:50px; width:150px; height:150px; z-index:3; }
#boite4 { position:absolute; top:40px; left:20px; width:70px; height:70px; z-index:1;  }
#global {
     width: 800px;
     margin-left: auto;
     margin-right: auto;
     }
 
-->
</style>
</head>
 
<body bgcolor="FFFFFF" text="#000000">
 
<div id="global">
<div id="boite1" style="background:red; border:solid 2px blue;">boite 1</div>
<div id="boite2" style="background:blue; border:solid 2px white;">boite 2</div>
<div id="boite3" style="background:yellow; border:solid 2px red;">boite 3
        <div id="boite4" style="background:gold; border:solid 2px green;">boite 4</div>
</div>
 
</div>
 
</body>
</html>

Autre question dans le même domaine :
Toujours avec ces boites, serait-il possible de déclarer une <table> en tant qu'élément parent ? Pour que ces boites soient incorporées dans la table et qu'elles répondent aux déclarations du style <table align="center"> ou <table align="left">

Merci pour votre aide !

**Steph4fun** · 14/05/2007, 08h41

En rajoutant :
position:relative;
dans au niveau de l'id "global", ça marche.

Je posais la question de pouvoir déclarer une table en tant qu'élément parent car je voudrais afficher une bordure autour des boites de hauteur variable selon le contenu (il peut y avoir beaucoup de boites...)

Merci

Centrage d'éléments DIV ayant position:absolute;

Centrer un élément en CSS

Discussions similaires

Partager

Partager