Des divs comme un tableau... - Page 1

J'ai trois divs, et je veux pouvoir les aligner comme ca:

/------------\/------------\/------------\
|            ||            ||            |
|            ||            ||            |
|      1     ||     2      ||      3     |
|            ||            ||            |
|            ||            ||            |
\------------/\------------/\------------/

en précisant le width pour chacun des trois et sans utiliser de "position:absolute" car le div qui contient ces trois là nest pas en absolute.
Là, il me les mets les uns sous les autres... :s

Si je faisais avec une table, ca serait super simple: trois colonne avec l'attribut width. Mais il parait que c'est pas propre de faire des tableau.
Alors comment faire proprement (avec ou sans divs) ???

si tu ne veux pas faire de tableau il faut que tu utilise la propriété float:left avectes div pour les forcer à se coller les uns à coté des autres
tu auras aussi besoin de la propriété clear:both (ou left, right ou none) pour empecher qu'un autre div flottant vienne se coller à coté de ton div

tu crée un grand DIV dans lequel tu met les 3 DIV.
Le premier DIV tu le fais aller de 0 à 33%, le 2e de 33% à 66%, le 3e de 66% a 100%

Ok merci Nue, c'est nickel.

Maintenant autre question:
En javascript, je change la hauteur d'un élément: objToBeResized.style.height = hgt + 'px';

Sous FF c'est parfait, mais sous IE, ca fait des sortes de highlight.. Le contenu clignote. Y a moyen de forcer le double-buffering à IE?

(jutilise ie7, je sais pas si ca le fait sous ie6)

onur (./1) :
sans utiliser de "position:absolute" car le div qui contient ces trois là nest pas en absolute

tu peux très bien positionner en absolute dans un autre div non absolute, le tout est de spécifier une position :

genre
<div id="pere" style="position:relative;">
<div id="fils" "position:absolute;top:25px;">je suis positionné par rapport à pere (enfin sauf erreur, ça fait longtemps que je n'ai plus touché à ça...)</div>
</div>

Sinon, tu peux simuler un tableau en CSS avec
display: table ;
display: table-cell ;
display: table-row ;
C'est ce que j'ai trouvé de plus simple après avoir galéré comme un malade.

Pen^2 (./5) :

genre
<div id="pere" style="position:relative;">
<div id="fils" "position:absolute;top:25px;">je suis positionné par rapport à pere (enfin sauf erreur, ça fait longtemps que je n'ai plus touché à ça...)</div>
</div>

Hum je ne suis pas certain que ça fonctionne, je crois qu'on reste en relative, et que le "relatif absolu" est effectivement défini par top/left/right... (cela dit, ça fait partie des solutions sur lesquelles je me suis cassé les dents avant de passer à ce que j'explique plus haut)

Nil> ouais mais à ce moment là autant utiliser directement la balise table non ?

De toutes façons, les DIV en fait ça sux... Pourtant je connais pas mal, mais ça apporte pleins de complications pour une mise en page un peu évoluée... Franchement il manque tout un tas de fonctionnalités pour placer correctement les boites...

Regardez vous même, y'a pas besoin de chercher loin : réduisez la largeur cette fenêtre sur le post ./1 (sous Firefox par exemple)...

Nil (./7) :

Pen^2 (./5) :

genre
<div id="pere" style="position:relative;">
<div id="fils" "position:absolute;top:25px;">je suis positionné par rapport à pere (enfin sauf erreur, ça fait longtemps que je n'ai plus touché à ça...)</div>
</div>

Hum je ne suis pas certain que ça fonctionne, je crois qu'on reste en relative, et que le "relatif absolu" est effectivement défini par top/left/right...

je ne comprend pas ce que tu veux dire :/

pour le positionnement absolu dans un conteneur :
http://www.aidejavascript.com/article93.html (paragraphe "positionnement absolu")

./9: tu parle de la boite contenant le "pre" qui sort du parent ?

oué entre autres, mais il y a aussi la date qui sort, etc...

ben avec IE c'est pas mieux, ok rien ne sort mais il ne conserve plus la largeur du post et il pète la mise en page du reste de la page (il m'a fait chier avec ça pour mon blog)

perso je trouve que les emmerdes viennent surtout des floats

Nue > Oui mais non, ça reste quand même plus souple que des tables "à l'ancienne", vu que tu peux créer un nouveau CSS qui pourra utiliser un autre type de disposition (c'est justement ça l'objectif : sur un grand écran, j'utilise des tableaux, sur un PDA, des listes à puces...)

./5 -> j'ai pas réussi à faire marcher ainsi.


Sinon autre question:

Toujours dans une configuration similaire (sans absolute), j'aimerais que le div 2 soit exactement au meme endroit que le div 1.
Vu que là, j'utilise des float:left et des margin-left, ca marche pas super :s puisqu'il me les espace automatiquement.
Comment faire?

T'as margin:0px et padding : 0px ?

Nil (./15) :
Nue > Oui mais non, ça reste quand même plus souple que des tables "à l'ancienne", vu que tu peux créer un nouveau CSS qui pourra utiliser un autre type de disposition (c'est justement ça l'objectif : sur un grand écran, j'utilise des tableaux, sur un PDA, des listes à puces...)

Ce ne serait pas plutot (dans ce cas) du XML avec du XSLT qu'il te faudrait ?

Les CSS ne sont pas non plus fait pour changer radicalement le fonctionnement/apparence d'une page web

L'apparence si.

par apparence comprendre "transformer tableau en liste a puce" par ex, et si tu fait ça c'est peut etre que tu utilise pas la bonne techno au bon endrois..

Ben c'est clairement quelque chose que tu peux faire en CSS très proprement, et c'est même l'objectif premier des CSS, pouvoir modeler l'apparence en fonction du système de visualisation ou du public touché.

L'bojectif premier de CSS est de separer information/affichage plutot...

Hum oui, enfin ça dépend si l'on se met côté développeur ou utilisateur

onur (./16) :
./5 -> j'ai pas réussi à faire marcher ainsi.

tu as lu

Pen^2 (./11) :
pour le positionnement absolu dans un conteneur :
http://www.aidejavascript.com/article93.html (paragraphe "positionnement absolu")

?

Nil (./6) :
Sinon, tu peux simuler un tableau en CSS avec
display: table ;
display: table-cell ;
display: table-row ;
C'est ce que j'ai trouvé de plus simple après avoir galéré comme un malade.

ça marche partout, ça ?

ie6 le prenait pas si je me souviens bien...

Oui, de mémoire c'est le problème, c'est pour ça que je pose la question

IE7 non plus