Taille variable d'un DIV

Version imprimable

Bonjour à tous,

Je dois concevoir une template flexible. Dans le header j'ai un logo à la gauche, et à la droite d'autre liens, etc... Dans la portion du centre (c'est-à-dire entre le logo et la partie droite) l'image de background doit se répéterà l'horizontal. C'est donc là la partie flexible (Élastique).

Voici ce que j'ai jusqu'ici :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 #Container { width :80%; border : solid 1px red; margin-left: auto; margin-right: auto; min-width :760px; } #Header { height : 94px; border : solid 1px black; } #HeaderTopLeft { width :160px; height :94px; background-image : url(images/HeaderTopLeft.gif); background-repeat :no-repeat; float :left; } #HeaderTopCenter { height :94px; width : ??? /* Je ne peux spéfifier la taille puisqu'elle est variable !!! */ background-image : url(images/HeaderTopCenter.gif); background-repeat : repeat-x; float :left; border : solid 1px green; } #HeaderTopRight { width :585px; height :94px; background-image : url(images/HeaderTopRight.gif); background-repeat :no-repeat; float :right; }
Code:

1 2 3 4 5 6 7 8 <div id="Container"> <div id="Header"> <div id="HeaderTopLeft"></div> <div id="HeaderTopCenter"></div> <div id="HeaderTopRight"></div> </div> </div>
Dans le partie centrale HeaderTopCenter je ne peux pas spécifier la taille en largeur puisque je ne la connais pas. Elle doit prendre l'espace disponible entre HeaderTopLeft et HeaderTopRight. Si je met 100%, ça ne fonctionne pas... Et je dois mettre une taille sinon le background ne se répétera pas en X.

Thank for your help.

08/05/2008, 22h56
Erakis

J'ai presque réussi à faire ce que je veux mais il y a encore un petit problème à régler....

Regarger le résultat : Template

J'aimerais que mes bordure de chaque côté soit répété aussi longue que la hauteur du CenterContent. On dirait que la hauteur des deux div (CenterLeft et CenterRight) ne suivent pas celle du CenterContent :(

Bonsoir,

Tu devrais passer par une inclusion de div plutôt que des float (tu ne peux pas dire à tes flottants d'occuper toute la hauteur du parent). Quelque chose comme ça:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
    <div id="Center">
       <div id="CenterContent">
          This is a test...<br /><br />
          This is a test...<br /><br />
          This is a test...<br /><br />
 
          This is a test...<br /><br />
          This is a test...<br /><br />
          This is a test...<br /><br />
          This is a test...<br /><br />
       </div>
    </div>

Code:

1
2
3
4
5
6
7
8
9
10
  #Center
  {
  	clear :both;
        background: url(images/CenterLeft.gif) repeat-y top left;
  }
 
  #CenterContent
  {
        background: url(images/CenterRight.gif) repeat-y top right;
  }

SI tu avais vraiment besoin d'images. Mais là, un border suffit:

Code:

1
2
3
4
5
6
7
8
9
10
    <div id="Center">
          This is a test...<br /><br />
          This is a test...<br /><br />
          This is a test...<br /><br />
 
          This is a test...<br /><br />
          This is a test...<br /><br />
          This is a test...<br /><br />
          This is a test...<br /><br />
    </div>

Code:

1
2
3
4
5
#Center{
  	border-width:0 1px;
        border-color:transparent #8FA6CD transparent #8C6365;
        border-style:solid;
}

Autrement ton image "excel" devrait être dans le html puisqu'elle véhicule une information, de même que des drapeau de langue.

09/05/2008, 02h40
Erakis

Merci pour ton aide "Candygirl".

Je ne suis pas au travail en ce moment mais dès demain j'essaierai votre idée ;)

Cependant, je suis tout de même curieux avec la solution d'inclusion... Corrige moi si je me trompe mais le div parent sera plus GRAND que le div ENFANT, alors l'image (jouant le rôle de la bordure) ne sera pas répété avec la même taille en Y sur le parent comme sur l'enfant ?
09/05/2008, 08h31
Candygirl
Citation:

Envoyé par Erakis

Corrige moi si je me trompe mais le div parent sera plus GRAND que le div ENFANT, alors l'image (jouant le rôle de la bordure) ne sera pas répété avec la même taille en Y sur le parent comme sur l'enfant ?

Non, du moment qu'il n'y a ni margin, ni padding ni border de défini sur le div parent, les 2 div auront exactement les mêmes dimensions.

Autrement je ne sais pas trop pourquoi j'ai pas simplement mis:
Code:

1 2 3 4 #Center{ border-left:1px solid #8C6365; border-right:1px solid #8FA6CD; }
Quand même nettement plus lisible; on dira que c'était à cause de l'heure tardive ;)
09/05/2008, 15h01
Erakis

La solutiond d'inclusion ; Wow :)
Ça fonctionne à merveille, merci beaucoup CandyGirl.

Je n'aurais jamais pensé que ça aurait fonctionné !!! Vous venez de m'apprendre quelque chose aujourd'hui :)

Re-bonjour CandyGirl,

Jusqu'ici vous avez été très EFFICACE pour régler mes problèmes et je vous en remerci beaucoup :)

Toutefois, j'ai un dernier inconvénient à régler... Au centre de ma template, j'aimerais avoir un DIV pour ma liste des MENUS et un autre DIV pour le centre de ma page (CONTENU). Ce que je n'arrive pas à faire malheureusement :( Je crois que j'ai trop fait de SQL, Winform et MFC c'est dernier temps :(

Vous pouvez aller jetter un coup d'oeil sur ma template, du moins ce j'ai accompli depuis. Template 1

Idéalement, ce que je devrais avoir c'est : (style INLINE pour facilité)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <div id="Center"> <div id="CenterContent"> <div style="float :left; width :160px;"> Bouton 1<br /><br /> Bouton 2<br /><br /> Bouton 3<br /><br /> Bouton 4<br /><br /> Bouton 5<br /><br /> Bouton 6<br /><br /> Bouton 7<br /><br /> Bouton 8<br /><br /> </div> <div style="float :right;"> Blablablba.... </div> <div id="CenterExcelBackgroundLogo"></div> </div> </div>
Mais voilà ce que ça donne : Template 2

Le logo dans le menu en bas à gauche prend TOUTE une ligne dans le centrale. Et le TOP de mon DIV de contenu centrale "<div style="float :right;">" lui est donc repoussé. Enfin bref, je suis sur que vous comprendez le problème mieux que je puisse l'expliqué ;)

Le résutlat finale doit ressemblé à peu près à ça :Finale sauf que ma version doit être ÉLASTIC.

Merci pour votre aide

09/05/2008, 18h12
Candygirl
En faite ça rejoint ta question ici ;)

Si tu as une ou deux colonnes de taille fixe et une dernière qui doit s'allonger, tu ne peux pas faire flotter cette dernière. En effet, tu ne peux pas lui attribuer de largeur, ni en px ni en %. Dans ton exemple elle devrait faire 100%-160px.

Pour qu'elle occupe donc le maximum de place à disposition, on la laisse dans le flux et joue avec un margin ou une propriété créant un nouveau contexte de formatage pour l'empêcher de s'étendre au-dessous du flottant:
Code:

1 2 3 <div style="margin-left:160px;"> Blablablba.... </div>
ou, par exemple
Code:

1 2 3 <div style="overflow:auto;"> Blablablba.... </div>
A noter que sur IE6 l'overflow n'induit pas un nouveau contexte de formattage et qui faudrait donc lui donner le layout.

Il faudra aussi composer avec le bug des 3px sur IE6 (3px jog).
09/05/2008, 20h05
Erakis

Vous êtes vraiment bonne dans ce domaine ! Plate que ce ne soit pas mon cas. J'ai de la misère à suivre maintenant que je ne fais plus que du web.

Grossomodo, sachant que je dois convertir la template fixe en template elastique, est-ce que je m'y prend bien jusqu'ici ou vous auriez fait autrement ? Est-ce normal que je me butte à tous ces problèmes de DIV fixe/flottant, etc... ? Y-avait-il un autre moyen de faire ?

Encore un gros merci pour ton aide, c'est largement apprécié.

PS : Oui, j'ai posté sur un autre forum (anglais) question de mettre les chance de mon côté car ce projet est déjà en retard :(
11/05/2008, 20h55
Candygirl

Citation:

Envoyé par Erakis

sachant que je dois convertir la template fixe en template elastique, est-ce que je m'y prend bien jusqu'ici ou vous auriez fait autrement ?

Dans les grandes lignes oui c'est bien, Après il y a une foule de petits détails, par exemple, pour que ton site réagisse au mieux lors de l'agrandissement des caractères, dépends aussi de comment tu vas coder tes langues, ton image excel qui devrait être dans le html plutôt qu'en background,...

Citation:

Envoyé par Erakis

Est-ce normal que je me butte à tous ces problèmes de DIV fixe/flottant, etc... ? Y-avait-il un autre moyen de faire ?

Oui c'est tout à fait normal. Avant d'avoir bien compris tous les mécanismes c'est assez galère.

Citation:

Envoyé par Erakis

PS : Oui, j'ai posté sur un autre forum (anglais) question de mettre les chance de mon côté car ce projet est déjà en retard :(

Il n'y a aucun souci à faire ainsi pour autant que tu repasses sur tous les forums sur lesquels tu postes pour informer de la progression du problème, ce que tu as fait ;)
12/05/2008, 02h00
Erakis

Tout d'abord, encore un gro smerci pour votre aide ;)

Quand vous parlez de mettre mon logo d'Excel en HTML plutôt qu'en background, vous parlez du logo principal en haut à gauche du layout ? Si oui alors j'imagine que vous me proposer de le mettre dans un IMG ? Si oui alors je le ferai et je crois comprendre le pourquoi.

Sinon, l'autre logo orange situé en bottom gauche background me donne de la misère. Afin d'aller le plaquer où il est en ce moment, j'ajoue un DIV dans mon Center mais malheusement ce fameux div prend environ 84 pixels en haut mais aussi il s'étent sur la TOTALITÉ du Center en largeur. Ce qui me fait perdre 84px par x% qui ne sert à rien en bas du layout :( Enfin bref, je ne sais pas si vous comprennez où je veux en venir.

L'idéal, c'est qu'au centre j'aie seulement mon menu dans un DIV à gauche de 160px et un div flottant à droite de x% pixel... Enfin j'écris dans le div de gauche chacun de mes boutons de menus et pour le div de droite, j'écris mon contenu.

Lien de la template à titre de référence : Template
20/05/2008, 18h19
Erakis

Il me reste qu'un petit soucil à régler.

Voilà où j'en suis : Template

Pourquoi mon texte central est aligné complètement à droite ?
J'aimerais que ce texte soit aligné à gauche, au début de . Et aussi qu'il prenne tout l'espace disponible.
20/05/2008, 18h27
Candygirl

Parce qu'un flotant s'adapte par défaut à la taille de son contenu. Retire le float:right et il occupera l'espace à disposition, limité sur la gauche par ton margin-left.
20/05/2008, 21h50
Erakis

Wow !!! Ça fonctionne à merveille. MERCI :)

Toujours dans cette template : Template

Est-ce que c'est possible pour mon logo Excel (orange à gauche) que sa position soit forcé au bas de la colonne orange ?

Voir dans le CSS : #CenterExcelBackgroundLogo

Peut-être que je m'y prend mal ?
21/05/2008, 09h31
Er3van

Je n'ai pas eu le courage de tout relire depuis le début, mais en affichant ton Template j'ai relevé un p'tit soucis sous MSIE6.
Ce problème qui était le premier je crois, où les drapeaux sont suceptibles de passer sous la bannière titre persiste quand on rétrécie la page.

Pour répondre à ces deux soucis, celui là et celui que tu as avec le logo orange, je pense que tu devrais te pencher sur le positionnement absolu.
Pas absolu absolu, mais absolu dans un div en positionnement relatif, soit un positionnement absolu relatif à ton conteneur :D
Dans ton cas, un div contenant ton logo orange avec "bottom:0; left:0;" contenu dans le bloc de ta colonne de gauche réglerait le problème, et même principe, un div contenant les drapeaux avec "right:0; top:0;" dans le div de ta bannière réglerait le problème.

Cependant je n'ai pas eu le temps de relire ton code pour voir comment ton site était agencé...donc à tester en fonction de ton organisation.

Bonjour Er3van ;)
Merci pour votre aide,

j'ai suivi vos conseils en ce qui a trait au drapeau en haut. Tout semble bien ;) Malgré que je n'ai pas IE6 pour valider.

Cependant, pour le problème du logo orange de Excel dans la colone de menu à la gauche, lui ne veut pas se positionner au BOTTOM du DIV. Il se contente de se positionner à la fin des items du menu :( Ce que je ne désire pas. Pourtant j'ai bien appliqué ce que vous m'avez proposer. À moins que je n'aie pas bien compris.
Code:

1 2 3 4 5 6 7 8 9 10 #CenterExcelBackgroundLogo { width :159px; height :84px; position : relative; bottom : 0px; left : 0px; background-image : url(images/CenterExcelBackgroundLogo.gif); }
Est-ce bien ce qui fallait faire ?

Voici à nouveau, le lien vers la template : Template

En fait, ça serait plutôt comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 #menu { position : relative; } #menu #CenterExcelBackgroundLogo { width :159px ; height :84px ; position : absolute ; bottom : 0px; left : 0px; background-image : url(images/CenterExcelBackgroundLogo.gif); }
Le conteneur, ici menu, en relatif, et à l'intérieur, le logo en absolu.

Pour les drapeaux ça ne fonctionne toujours pas sous IE.
Mais c'est peut-être à cause de la même chose.
Le header doit être en relatif, et la logo en absolu.

Citation:

Envoyé par Erakis

Est-ce que c'est possible pour mon logo Excel (orange à gauche) que sa position soit forcé au bas de la colonne orange ?

Citation:

Envoyé par er3van

Le conteneur, ici menu, en relatif, et à l'intérieur, le logo en absolu.

Le problème c'est que le logo sera au bas du menu, pas de la colonne oange qui, elle descendra jusqu'au bas du contenu. le position:relative devrait donc être attribué à #Center doublé d'une propriété établissant un nouveau contexte de formatage pour le cas où le menu serait plus haut que le contenu. Du genre:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <ul id="Menu"> <li><a href="#">Bouton 1</a></li> <li><a href="#">Bouton 2</a></li> <li><a href="#">Bouton 3</a></li> <li><a href="#">Bouton 4</a></li> <li><a href="#">Bouton 5</a></li> <li><a href="#">Bouton 6</a></li> <li><a href="#">Bouton 7</a></li> <li><a href="#">Bouton 8</a></li> </ul> <div id="CenterExcelBackgroundLogo"></div>
Le CenterExcelBackgroundLogo pourrait rester dans le menu mais il est plus sur de le sortir au cas où le menu demanderait un position:relative par la suite.
Code:

1 2 3 4 5 6 7 8 #Center { background: url(images/Center.gif) repeat-y top left; overflow:auto; position:relative; border-right : solid 1px #90a6cd; }
On pourrait aussi faire sans recourir à un div supplémentaire en attribuant différement les images de fond:
Code:

1 2 3 4 5 6 7 8 #Container { width :80%; margin-left: auto; margin-right: auto; min-width :760px; background:White url(images/Center.gif) repeat-y top left; }
Code:

1 2 3 4 5 6 #Center { background: url(images/CenterExcelBackgroundLogo.gif) no-repeat bottom left; overflow:hidden; border-right : solid 1px #90a6cd; }
Après on peut aussi se demander si #center est vraiment utile (un seul border pourrait être appliqué au conteneur).

23/05/2008, 18h03
Erakis

Er3van : J'ai essayé votre solution mais sans succès :(

Voici ce que ça donne : Template

Le logo se positionne à la fin des DIV emplié formant le menu à gauche. Cependant, il faudrait qu'il ait se plaquer tout en bas, collé sur le footer. Donc au MAX BOTTOM de ma colonne orange. Enfin bref, je suis sur que vous comprennez ce que je veux dire ;)

J'ai tenté d'autre combinaison (relative / absolute) mais aucun succès.

Merci pour votre aide.
24/05/2008, 00h19
Erakis

Candygirl : Wow ! Encore une fois vous m'épaté !!! :oops:

Je ne saisie pas correctement pourquoi le fait de mettre position : relative au container plutôt qu'au menu corrige le problème mais bref, l'important c'est que tout fonctionne bien :)

Aussi, pourquoi me conseillez-vous d'utiliser une liste UL et LI au lieu de DIV pour les items du menu ?
24/05/2008, 11h14
Candygirl

Citation:

Envoyé par Erakis

Je ne saisie pas correctement pourquoi le fait de mettre position : relative au container plutôt qu'au menu corrige le problème mais bref, l'important c'est que tout fonctionne bien :)

Pour le positionnement absolu, c'est le plus proche ancêtre positionné qui sert de référence. En donnant le position:relative à #menu c'est lui qui sert de référence pour l'image excel. Le problème c'est que le menu ne prend pas toute la hauteur, il s'arrête à concurrence de son contenu et ne va donc pas jusque tout en bas. L'image excel sera donc au bas du menu mais pas tout en bas de la page comme souhaité.

Par contre le #center englobe le contenu et le menu. Il descend donc bien jusqu'au bas du contenu et donc en positionnant le excel au bas de ce div là il sera bien tout en bas de la "colonne" orange.

Par contre le height de 100% ne sert à rien (à part donner le layout à IE). Une valeur de height en % n'est prise en compte que si le parent à un height explicitement renseigné ce qui n'est pas le cas. De plus, si le contenu venait à être moins haut que le menu, le excel ne serait plus tout en bas puisque le menu étant flottant il ne sera pas pris en compte par le #center pour établir sa hauteur, d'où ma suggestion d'ajouter un overflow:hidden ou auto sur #center afin de régler ce cas (et donner le layout à IE6).

Citation:

Envoyé par Erakis

Aussi, pourquoi me conseillez-vous d'utiliser une liste UL et LI au lieu de DIV pour les items du menu ?

Il est important d'utiliser les différents éléments html pour bien structurer le document afin de le rendre plus aisément consultable par les différents médias. Un menu est une liste de lien menant vers les pages du site. le balise ul/li est donc plus approprié que l'utilisation de div, conteneur générique, dont la fonction première est le regroupement des éléments
27/05/2008, 04h18
Erakis

Merci beaucoup CandyGirl :)
Enfin :resolu: :)