1 pièce(s) jointe(s)
extensibilité css : repeat y
Bonjour,
Merci avant tout pour votre conseil sur ce cas : 'repeat y' sur div à gauche ok, mais pas sur div droite .
J'intègre un menu extensible selon le contenu, j'ai donc des div imbriquées (nested) avec sur les 2 cotés du menu (gauche et droite) 2 div flottantes contenant les cotés graphiques du menu (left and right) . Cependant, le coté gauche s'allonge en fonction du contenu mais pas le coté droit ! Bien sûr si j'affecte une valeur en pixel sur ce même côté, cela marche mais ce menu perd du coup toute son extensibilité.
Voici le code de la colonne de gauche avec le menu gauche à l'intérieur :
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
|
<div id="banner">Placez ici le contenu de id "banner"</div>
<div id="chemin">Placez ici le contenu de id "chemin"</div>
<div id="menubg"></div>
<div id="maincontent"> <!--debut de maincontent, qui contient col de gauche, partie centrale et col de droite -->
<div id="leftcol"> <!--la colonne de gauche qui contient les 4 div du menu (avec les images qui constituent le menu) -->
<div id="menuleftcol"> <!--le menu avec ces 4 div à l'intérieur -->
<div id="menuleftcolHaut"></div>
<div id="menuGauCotGau">
<p>Lorem ipsum dolor sit amet, </p> <!--le contenu du menu -->
<div id="menuGauCotDro"> </div>
</div>
<div id="menuGaubas"></div>
</div>
</div>
<div id="content"> <div id="adv"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</div>
<div id="rightcol">
<div id="menurightcol"></div>
</div>
</div> <!--fin de maincontent --> |
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
#menuleftcol{
margin-left: 88px;
width: 133px;
height: auto;
margin-top: 51px;
background-color: #E3D0CA;
}
#menuleftcolHaut{
margin-left: 0px;
width: 138px;
background-color: #FFFFFF;
height: 14px;
margin-top: 0px;
background-image: url(imagesbis/images/menuGau.jpg);
background-repeat: no-repeat;
}
#menuGauCotGau{
margin-left: 2px;
height: auto;
margin-top: 0px;
background-image: url(imagesbis/images/menuGauCotGau.jpg);
background-repeat: repeat-y;
clear: both;
float: left;
margin-right: 0px;
width: 137px;
}
#menuGauCotGau p {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 1.3em;
line-height: normal;
margin-bottom: 0.8em;
font-style: normal;
letter-spacing: normal;
text-align: left;
display: block;
height: auto;
width: 105px;
margin-left: 7px;
margin-right: 0px;
float: left;
}
#menuGauCotDro {
width: 6px;
height: auto;
background-image: url(imagesbis/images/menuGauCotDro.jpg);
float: right;
background-repeat: repeat-y;
}
#menuGaubas {
margin-left: 0px;
width: 137px;
background-color: #cccccc;
height: 10px;
margin-top: 0px;
background-image: url(imagesbis/images/menuGaubas.jpg);
background-repeat: no-repeat;
float: right;
} |
MERCI beaucoup...
