Discussion :

[Erakis]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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

[Candygirl]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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 ?

[Candygirl]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[Erakis]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
               <div style="margin-left:160px;">
                     Blablablba....
              </div>

ou, par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

[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

[Candygirl]

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,...

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.

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

[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

[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.

[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.

[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 ?

[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
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.

[Erakis]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Er3van]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Candygirl]

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

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

[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.

[Erakis]

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

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 ?