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