28172 sujets

CSS et mise en forme, CSS3

Div, position:absolute et heritage

Bonjour,

J'ai un soucis d'ordre general et j'aimerai comrpendre cette histoire d'heritage avec les position....

example :

<center>
<table style='width:500px;height:200px;'>
<tr><td style='width:100%;height:100%'>
<div id='fond' style='position:absolute;left:0px;top:0px;width:100%,height:100%;background-color:#123456'>
</div>
</td></tr>
</table>
</center>

normalement, si j'ai bien compris les regles elementaires de l'heritage, le div 'fond' se trouvant dans le table, sa position absolute devrait heriter de celle du tableau, n'est-ce pas?

Donc ses dimension width, et height 100% devraient se caller sur celle du tableau (500px/200px)
De plus sa position absolute avec top et left a 0px devriat le positionner en haut a gauche du <td> du tableau.

Or, j'ai un div qui se positionne en haut a gaiuche de ma page, et prend 100% de la largeur(et hauteur) de ma page.....

Alors soit je n'ai pas compris les bases de l'heritage, soit j'ai ecrit une grose bourde, soit j'ai du codedr une exeption aux regles de l'heritage...

Quelqu'un peut'il m'expliquer ?

PS : J'ai volontairement ommi les balises <html>, <head> et dtd.... pour faire simple!
PS2 : teste sous firefox
PS3 : clavler americain, je suis desole pour les accents...
Bonjour,
cooluhuru a écrit :
normalement, si j'ai bien compris les regles elementaires de l'heritage, le div 'fond' se trouvant dans le table, sa position absolute devrait heriter de celle du tableau, n'est-ce pas?

Donc ses dimension width, et height 100% devraient se caller sur celle du tableau (500px/200px)
De plus sa position absolute avec top et left a 0px devriat le positionner en haut a gauche du <td> du tableau.
Non, la position absolue fait sortir l'élément du flux et le positionne par rapport et dernière élément positionné (absolu ou relatif) vu que ton tableau n'est pas positionné, le div se positionnera par rapport au viewport (la fenêtre du navigateur) ou un autre élément positionné que tu n'as pas mis dans le code d'exemple.


cooluhuru a écrit :
Alors soit je n'ai pas compris les bases de l'heritage, soit j'ai ecrit une grose bourde, soit j'ai du codedr une exeption aux regles de l'heritage...
Je pense que c'est plutôt la première solution. Le positionnement absolu est "dangereux" surtout quand on débute.

cooluhuru a écrit :
PS3 : clavler americain, je suis desole pour les accents...
Alt+130 = é ; Alt+138 = è ; Alt+133 = à
okay, super pour vos rappels Smiley smile

A la place du tableau, j'ai mis un div en position 'relative' avec un 'margin:auto', donc du coup cela fonctionne parfaitement

Pour les accents, je n'utilise plus que des mots sans accents. Le dictionnaire francais est bien fourni, cela reste possible!

donc voici le code qui fonctionne :

<div style='margin:auto;width:200px;height:200px;display:block'>
<div style='position:absolute;left:0px;right:0px;width:100%;height:100%;background-color:#654321'>
</div>
</div>


PS : alsa cr ALT+110 tion is the best:)









[code]
Sujet clos
Aller à