28217 sujets

CSS et mise en forme, CSS3

[Résolu] Calques de meme hauteurs

Bonjour

Je chercher ( je cherchais plutot ) à avoir 2 calques de meme hauteurs
Que la hauteur de l'un faite par le contenu entraine la hateur de l'autre

Je les ais laissé libre, leurs parents étaient body avec un en float : left et un autre margin-left : ...px

J'ai essayé ensuite de les contenirs tout les deux dans un bloc et donné 100% au plus petit, mais non

Depuis j'ai fais autre chose mais je voudrais vraiment savoir comment procéder ( pt réessayer )

Ah oui, je vois partout clear : both, mais ça signifie quoi ? et ça sert à quoi ?, cela a une rapport avec ce que je raconte ?

Merci, j'espere avoir été assez clair
Comment avoir deux calques de même hauteur sans la définir, sachant que l'un deux contient un contenu variable ?

Voilà ma question

Petite question, qui pourrez avancer dans la première:

Comment un bloc peut il offrir tout l'espace laissé libre ?
Ca depends un peu de ce que tu veux faire avec...

A te lire comme ca, j'ai l'impression que ce que tu avais etait une page en deux colonne ou tu aurais voulu que les deux colonne aient la même hauter. (mais je peux me tromper).

Dans ce cas, la meilleur solution est probablement le "faux-columns" mais il y'en a d'autres... jettes peut-être aussi un oeil sur http://www.alsacreations.com/articles/modeles/

Mais ca ne fera peut-être pas ton bonheur.


Le "clear: both" peut en effet servir.

En gros, un objet positioné en "float" sort quelquepeu du flux (voir l'article alsacreation pour les positionements et du coup, l'element le contenant ne s'entend pas pour l'englober totalement.

Un element avec un clear provoque un retour à la ligne après les elements en float (à gauche Smiley left , à droite Smiley right ou des deux cots Smiley both ) et se place donc, en général, sous l'élément en float.

Ceci veut dire que si tu as qqch du genre
<body>

<div id="content">

  <ul id="menu>
    <li>Item 1</li>
    <li>Item 2</li> 
     ...
  </ul>

  <div id="main">
     <p>...</p>
  </div>

  <div id="clearer"></div>

</div>

et que tu positionne l'ul du menu à gauche via un float et le texte de "main" à droite avec une marge equivalente à la largeur de ton menu, #content devrait normalement s'étendre jusque sous #clearer qui viendra se mettre naturellement sous main, sans tenir compte de la hauteur du menu.

maintenant, en donnant un "clear: left" à #clearer, il restera contenu dans #content mais se placera sous le menu, forcant donc #content être au moins aussi haut que menu + clearer. Et comme clearer est vide, tu peux lui donner un taille négligeable comme 1px de hauteur.

voilà, j'espères que j'ai pu aider avec cette explication. je finit seulement mon premier café donc pas sur que ce soit clair. j'espères que c'est compréhensible quand même :-D
En gros j'avais fais ça,
Un div conteneur, margin, padding, left, top à 0px,
dedans menu, float : left, et contenu margin-left : largeur du menu

Mais je n'avais pas mis de clear en dessous
et donc d'après ce que tu dis le conteneur se placera juste en dessous du clear ( donc en dessous de mes calques, les deux : both, celui à droite : right et à gauche : left )


oko je crois comprendre, et est ce que par exemple :

Menu est petit, Texte est grand, et clearer est en dessous d'eux et mon conteneur les contient tous, est ce que Menu augmentra sa hauteur automatiquement pout atteindre le bas de conteneur ? ( Je vois souvent dans les tutos Alsa que un calque, occupe tout l'espace offert ! Je commence à en douter ou à mal le comprendre )

Sinon moi j'ai déjà déjeuner et je vai me laver avant de manger Smiley biggrin
Modifié le 07 Nov 2004 - 13:07
xeter a écrit :

Menu est petit, texte est grand, et clearer est en dessous d'eux et mon conteneur les contients tous, est ce que Menu augmentra sa hauteur automatiquement pout atteindre le bas de conteneur ? ( Je vois souvent dans les tutos Alsa que un calque, occupe tout l'espace offert ! Je commence à en douter ou à mal le comprendre


Non, pas que je sache.

C'est là qu'intervient le "faux-column": On peut donner l''impression que #menu s'etend sur toute la hauteur en utilisant une image de fond sur #content qui dessine la colonne dans laquelle se trouve #menu.
Ah d'accord, ben c'est ce que j'ai fais sans le vouloir, j'ai mis une couleur conteneur, ( pour dire de savoir ou il était ) et j'ai remarqué que ça ressemblait à une colonne, oko

je resterais des que j'ai le temps et je reviendrais sur ce post si ça me pose encore problème
Sujet clos
Aller à