Taille et positionnement d'un div dans un div à taille variable

Bonjour à tous,

Oui je sais le titre.... :aie:


Voici mon problème

Code:

---

1 2 3 4

<div class='tab'> <div class='tab_top'></div> </div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.tab{ position: relative; width: 300px; height: 300px; } .tab_top{ position: absolute; top: 0px; left: 10px; height: 10px; width: 280px; background: orange; }

---

Voila ce que je voudrais :

J'aimerais que le div tab_top soit position au top de tab en laissant 10px à gauche et à droite.

Normalement tel que c'est marqué là, ça fonctionne mais mon problème est que la taille de tab peut varier et donc entrer le width:280px en dure risque de ne plus fonctionner.

J'aurais voulu savoir comment traduire en css la réquête suivant

width:100%-20px

Je voudrais que la taille soit de 100% - 2*10px. Comment traduire cela en css ?

Je pourrais passer par javascript mais je préfère une solution css invariable. Vous l'aurez peut être compris, c'est pour définir des borders à une boite et j'utilise la méthode des div en absolute.


Merci,


Vodnok,

A priori je dirais impossible en css, du moins, pas si on veut être compatible avec tous les navigateurs, ou alors pas à ma connaissance ( mais si c'est possible rassures-toi, mes deux correcteurs perso, Candy et Erwan31 :P, viendront me rectifier ^^ )

Il y a bien "expression()" mais ça appelle du JS, donc ça revient au même, et c'est MSIE7 only il me semble.
Il y a bien "max-width" mais IE ne le reconnait pas ( IE7 ? )

Donc t'es obligé de passer par JS pour connaitre la taille navigateur et faire le calcul...

Sinon tu peux opter pour une solution de ce type, qui combine tout via des commentaires conditionnels :
Voir les posts de Janvier 2007 en bas de page

Merci de la réponse. Je vais passer en JS alors. D'un autre côté la solution permet d'alleger le code.

Ca....

Code:

---

1 2 3 4

<div class='tab'> </div> <script>addBorders(params);</script>

---

Au lieu de ça...

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<div class='tab'> <div class='tabT'></div> <div class='tabTR'></div> <div class='tabR'></div> <div class='tabBR'></div> <div class='tabB'></div> <div class='tabBL'></div> <div class='tabL'></div> <div class='tabTL'></div> </div>

---

Le JS est cependant ennyuant dans le cas du resize dynamique en drag&drop mais ça me semble pas impossible.

J'avais lu un article avec les différentes solutions et aucune n'étaient parfaites.

Si quelqu'un a une autre idée pour le problème...

Citation:

---

Envoyé par vodnok

Vous l'aurez peut être compris, c'est pour définir des borders à une boite et j'utilise la méthode des div en absolute.

---

? pourrais tu montrer une image de ce que tu cherches à obtenir ?

Sans positionnement absolu tu n'as qu'à donner un margin-right et left de 10px et ton élément occupera automatiquement le reste de l'espace à disposition.

Sans positionnement absolu, cela devient barbar car je dois alors avoir un div en plus contenu.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<div class='tab'> <div class='tabT'></div> <div class='tabTR'></div> <div class='tabR'></div> <div class='tabBR'></div> <div class='tabB'></div> <div class='tabBL'></div> <div class='tabL'></div> <div class='tabTL'></div> <div class='content'></div> </div>

---

Et ce n'est plus transparent et la cision contenu apparence n'est plus assez clair. De plus et ça je ne l'avais pas dit, je crois, c'est que certaines boites auront plusieurs modes d'affichage.

Je suis occupé à faire ce que j'appel un 'styleBox'. Pour faire simple, un visiteur peut définir un style de boite et l'appliquer aux div sur le site le permettant. Sachant que les différentes boites peuvent avoir des tailles différentes, je ne peux connaitre à l'avance la taille que doit avoir certains éléments. StyleBox génère donc des classes Css sur base des paramètres entré par l'utilisateur lors de la définition de son styleBox

Il y a pour le moment 2 modes : un mode basique avec des border et un mode image.

Dans le mode 1 : c'est assez simple. Mais dans le mode 2 j'ai 8 div à rajouter avec pour chacun une propriété css.

Donc je dois mettre absolument le contenu dans le div principale sinon par la suite ça risque d'être compliqué pour accéder à la div en Ajax vu qu'alors soir ce sera $(tab).innerHTML ou $(#tab #content).innerHTML. Je pourrais dire que quelque soit le mode d'affichage, le contenu d'une boite se trouve dans content mais je préfère sans.

J'ai tout de même testé sans les absolus et cela ne me satisfait pas. Je viens de trouver une solution sur base d'un petit code Js.

Comme expliqué dans mon premier post, j'ai un problème avec le width (pour T et B) et avec le height (pour L et R). J'ai donc retiré ces propriétés aux classes respectives et ensuite via une fonction js, je fixe le taille désirée en fonction de la taille d'une boite - la taille des élements dans les coins.


Pour le moment donc, pour chaque boite, je dois mettre 8 div, les class Css associées et 4 appel d'une même fonction js en mode width ou height. Je vais modifier cependant la chose pour faire en sorte que les 8 div soit générer par du js et via un seul appel de fonction. Cela me permettra de n'envoyer au client qu'un seul div + css + un appel de fonction avec probablement un json contenant les paramètres.


Merci pour les conseils