CSS, absolut et relatif

Marsh Posté le 16-03-2008 à 15:36:34

Bonjour,

Je souhaite faire quelquechose avec des css mais je ne sais pas si c'est possible, en tout état de cause, il faut que je reussisse à faire ceci:
J'ai des éléments (des div) dont l'organisation entre eux a été fixée de manière absolue. (J'ai donc des coordonnées précises pour chaque div)

Exemple:

<div id="boite" style="left=0px; top=0px ; height=100px; width=100px;">bla bla</div>

Je voudrais inclure cette boite dans un autre div (global) qui va centrer l'ensemble des boites au milieu de la page, et je voudrais que les corrdonnée que j'ai fourni pour la boite soient calculés par rapport a ce div global.
Donc ici, je voudrais que mon div global ait les parametre auto pour les marges, et une largeur définie, puis ma boite a (0,0) dans le global.
Est ce que c'est possible?

J'ai essayé de mette mes boite en position:absolute mais bien evidement c'est relatif a toute la page, et en relative, tous sont relatifs entre eux et j'obtient n'importe quoi.

Quelle est la solution? Je vous en prie Ô grand manitous du css!

Reply

Marsh Posté le 16-03-2008 à 15:36:34

Reply

Marsh Posté le 16-03-2008 à 16:04:45

Ouaip, c'est possible. Il faut utiliser les deux en fait : "relative" pour ton div englobant et "absolute" pour tes divs contenus.

Une position "absolue" est en fait toujours relative au dernier élément ayant une position relative ou absolue.

Ah ouais, comme d'hab, IE (toutes versions) foutent la merde :
http://www.brunildo.org/test/IEW_rel_abs1.html

Reply

Marsh Posté le 16-03-2008 à 16:05:14

Merci mille fois!! Ca marche!

Message édité par milootooloo le 16-03-2008 à 16:05:26

Reply

Marsh Posté le 16-03-2008 à 16:21:31

Oui j'ai un problème avec IE, mais je ne comprends pas ce que dis le document que vous m'avez envoyé..
En deux mots je peux faire comment si ce n'est pas abuser?

(En fait avec IE mon div global n'a pas d'effet et toutes mes boites sont plsu espacées qu'elles ne devraient, tout en étant assez bien positionnées.)

Ils sont forts chez microsoft..

Merci

Message édité par milootooloo le 16-03-2008 à 16:24:10

Reply

Marsh Posté le 16-03-2008 à 18:51:32

Bon, bizarrement, je n'arrive plus à reproduire le problème. À mon avis c'est encore plus tordu que ce que j'imaginais, mais je me rappelle de la formule magique à prononcer : rajouter un conteneur avec un attribut position à "relative", du genre :

Code :

<html> 
<head><title>Bleurp</title> 
<style type="text/css"> 
#container2 { position: relative; } 
#container1 { position: relative; border: 10px solid red; padding: 10px; margin: 10px; height: 500px; } 
#tile       { position: absolute; width: 100px; height: 200px; border: 1px solid black; background-color: yellow; bottom: 0; right: 0; } 
</style> 
</head> 
<body> 
<div id="container2"> 
    <div id="container1"> 
        <div id="tile"></div> 
    </div> 
</div> 
</body> 
</html>

Edit: ah et si tes divs sont plus grands qu'ils ne paraient, avec IE, un div ne peut pas avoir une taille inférieure à la taille de la police du div. Il faut donc rajouter un font-size: 0; pour ne pas se faire emmerdé par cette limitation.

Message édité par tpierron le 16-03-2008 à 18:54:53

Reply

Marsh Posté le 16-03-2008 à 22:59:50

Merci beaucoup.

Reply

CSS, absolut et relatif

Sujets relatifs:

Leave a Replay