Discussion :

[Henry9]

Bonjour

Dans l'optique de faire un menu qui ressemble à ca:

Code :

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

1
2
3
4
5
6
7
8
9
10
<table width="200" border="1">
  <tr>
    <td colspan="3">image titre </td>
  </tr>
  <tr>
    <td width="15">col1</td>
    <td width="140">col2</td>
    <td width="15">col3</td>
  </tr>
</table>

- les liens se trouveront dans la colonne col2 qui a une bordure en pointillé "border: dotted black 2px;"
- dans col1 et col3 ca sera "le gros bordure" où j'ai mis un fond (image de 1px de hauteur) qui se répète "background-repeat: repeat-y"


J'aimerai savoir comment on fait pour que ces col1 et col3 s'allonge en même temps que col2 s'allonge car lorsque je rajoute des liens dans col2, elle s'allonge en hauteur mais col1 et col3 ne s'allonge pas.



Voici ce que j'ai réussi à faire pour l'instant.

Déjà je met entre div l'ensemble du menu regroupant tous les tableaux (voir ci-dessus le menu en html)
à l'intérieur de ce div, j'ai mis plusieurs sous div qui représente tout simplement "image titre", "col1", "col2", et "col3".

Voici donc le code xhtml:

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
23
24
25
26
27
28
29
30
31
32
33
34
<!-- VOICI LE HEADER -->
<div id="header">
</div>
 
<!-- VOICI LES MENUS DE GAUCHE ET DE DROITE -->
<div id="menugauche">
        <div class="image_titre">
        </div>
        <div class="col1">
        </div>
        <div class="col2">
             <ul>
                        <li>Lien</li>
                        <li>Lien</li>
                        <li>Lien</li>
                        <li>Lien</li>
                        <li>Lien</li>
                        <li>Lien</li>
                        <li>Lien</li>
                </ul>
        </div>
        <div class="col3">
        </div>
</div>
 
 
<!-- VOICI LE CENTRE DE MA PAGE -->
<div id="centre">
</div>
 
 
<!-- VOICI LE BAS DE MA PAGE -->
<div id="footer">
</div>

Et voici le code css

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
23
24
25
26
27
28
29
.image_titre
{
        height:27px;
        background-image: url("images/15_05.gif");
        background-repeat: no-repeat;
        margin-bottom: 0px;
}
.col1
{
        width: 9px;
        background-image: url("images/15_62.gif");
        background-repeat: repeat-y;
        float:left;
}
.col2
{
        width: 124px;
        background-image: url("background2.jpg");
        background-repeat: repeat;
        border: 2px dotted black;
        float: left;
}
.col3
{
        width: 9px;
        background-image: url("images/15_62.gif");
        background-repeat: repeat-y;
        float:left;
}

Donc voilà, si quelqu'un peut m'aider, MERCI

[MasterOfChakhaL]

Pourquoi pas quelque chose comme ca?

HTML:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<h2>titre du menu</h2>
<div id="menu">
  <div>
    <ul>
      <li><a href="un.html">un</a></li>
      <li><a href="deux.html">deux</a></li>
      <li><a href="trois.html">trois</a></li>
      <li><a href="quatre.html">quatre</a></li>
    <ul>
  </div>
</div>

CSS:

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
23
24
25
26
27
28
29
30
 
* {
  padding: 0;
  margin: 0;
}
 
#menu {
  width: 200px;
  background: url("images/15_62.gif") repeat-y left;
  padding-left: 9px;
}
 
h2 {
  height: 27px;
  width: 200px;
  background-image: url("images/15_05.gif");
}
 
#menu div {
  background: url("images/15_62.gif") repeat-y right;
  padding-right: 9px;
}
 
#menu ul {
  border: 2px dotted black;
}
 
#menu li {
  background-image: url("images/background2.gif");
}

Je n'ai pas testé car je n'ai pas de telles images sous la main, mais je pense qu'aux coquilles près, ca devrait aller.
En tout cas, la structure HTML devrait te permettre d'obtenir le résultat escompté.

Bons tests...

[Henry9]

merci pour le code

je ne savais pas que c'était possible d'imbriquer plusieurs paramètre pour background au lieu de faire à chaque fois background-image background-repeat.


Sinon pour ton code, ca marche pas trop, y a bien image_titre d'affiché mais tout ce qui est bas y a rien qui est affiché.

[MasterOfChakhaL]

Tu veux dire que les liens ne s'affichent pas?

J'ai essayé sans image mais en mettant en évidence les blocs par des bordures de couleurs et j'ai l'impression que c'est ce que tu veux faire...

N'as-tu pas d'autres élément qui perturbent les regles css que je t'ai proposées?

NB: il faut rajouter list-style-type:none dans #menu ul pour enlever les puces de la liste.

je veux bien que tu me fasses une petite capture d'écran de ce qui pose souci ou alors que tu fasses un petit schéma de ce que tu attends...

[Henry9]

ah ok, t'avais mis <ul> pour fermer au lieu de </ul>


Donc avec ton code, ca me donne quelque chose comme ca

http://img158.imageshack.us/img158/94/test1lt9.jpg

Or moi je veux ca:
http://img158.imageshack.us/img158/9642/test2xz2.jpg


voici les images pour faire le menu.

15_62.gif
http://img158.imageshack.us/img158/6959/1562gd7.gif

background2.jpg
http://img158.imageshack.us/img158/1...ground2ns5.jpg

15_05.gif
http://img158.imageshack.us/img158/1276/1505sq8.gif

il manque la bordure à droite mais ce n'est pas important pour l'instant, car le but est d'abord de faire "descendre" en même temps la colonne de gauche avec la colonne du millieu qui contient les liens.

[MasterOfChakhaL]

Voilà ce que je peux te proposer...

J'ai modifié tes images pour coller a l'idée que je m'en faisais, tu pourras éventuellement les retravailler (y'en a plus que deux)

Je te laisse gérer les puces et la mise en forme des liens.

Si ca te convient et que tu veux des précisions... n'hésite pas...

menu.zip