menu complexe en xhtml/css

Version imprimable

Bonjour

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

Code:

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:

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:

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

Pourquoi pas quelque chose comme ca?

HTML:

Code:

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:

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

25/09/2006, 18h02
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é.
25/09/2006, 18h12
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...
25/09/2006, 18h33
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.
25/09/2006, 22h14
MasterOfChakhaL

1 pièce(s) jointe(s)

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

Pièce jointe 5118