Discussion :

[Ravaka]

Bonjour à tous!

ça fait une semaine que je retape mon site web et j'ai voulu essayer de le mettre aux normes.

J'utilise un design en 5 parties Header/Menu Gauche/Menu Droit/Contenu/Footer.

Cependant, j'ai un problème avec les menus de ce dernier qui refusent de s'étendre en fonction du contenu de la page.

Voici le morceau du CSS qui nous intéresse:

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
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
65
66
67
68
69
70
71
72
73
74
75
 
/**** Mise en page ****/
 
div#conteneur_page {
	width: 950px;
	margin-left: auto;
	margin-right: auto;
}
 
div#page {
	width: 100%;
}
 
div#haut {
	display: block;
	height: 145px;
	width: 100%;
	margin-left: 1px;
	background-image:url("Haut.jpg");
}
 
div#conteneur {
	display: block;
	width: 100%;
	background-color: #FFFFFF;
	color: #000000;
	border-left-width: 1px;
	border-right-width: 1px;
	border-left-color: #939BB2;
	border-right-color: #939BB2;
	border-left-style: solid;
	border-right-style: solid;
}
 
div#menu_1 {
	display: block;
	float: left;
	width: 152px;
	background-color: #C0C6DA;
	border: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-color: #939BB2;
}
 
div#contenu {
	display: block;
	margin-left: 157px;
	margin-right: 107px;
	padding: 7px;
	border-width: 1px;
	border-color: #FFFFFF;
	border-style: dashed;
}
 
div#menu_2 {
	display: block;
	float: right;
	width: 100px;
}
 
div#bas {
	display: block;
	width: 100%;
	background-color: #C0C6DA;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-top: 20px;
	border-top: 1px;
	border-top-style: solid;
	border-top-color: #939BB2;
	text-align: center;
	font-size: 65%;
	clear: both;
}

et voici le code HTML qui va avec:

Code html :

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
 
	<div id="conteneur_page">
		<div id="page">
			<div id="haut">
				<[->HAUT<-]>
			</div>
 
			<div id="conteneur">
				<div id="menu_1">
					<[->MENU_1<-]>
				</div>
				<div id="menu_2">
					<[->MENU_2<-]>
				</div>
				<div id="contenu">
					<[->CONTENU<-]>
				</div>
				<div id="bas">
					<[->BAS<-]>
				</div>
			</div>
		</div>
	</div>

Que faut-il corriger pour voir les menus aussi s'allonger pour les pages avec beaucoup de contenu s'il vous plait?

[MasterOfChakhaL]

Salut et bienvenue à toi sur les forums de developpez.com,

Un élément dont tu ne précises pas le dimension s'adapte par rapport à son contenu.
Donc tes menus n'ont aucune raison de s'agrandir...

Si tu veux quand même obtenir cet effet en css, tu peux t'inspirer de cet exemple sur le site CSSplay: http://www.cssplay.co.uk/layouts/3cols.html#

En gros l'astuce consiste à définir des brodures de la même couleur que tes menus sur l'élément central. Tu auras plus de détails en affichant la source de cette page.

[Ravaka]

Merci pour cette réponse si rapide!

Par contre, je vais mettre un temps fou à comprendre ces lignes:

Code :

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

1
2
3
4
5
6
 
/* Just to extend each column */
#inner a:visited, a {color:#000; text-decoration:none; cursor:default;}
#inner a span {display:none;}
#inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;}
#inner a:active span, #inner a:focus span {display:block;}

J'ai la sensation que le secret réside ici mais je comprends pas vraiment ce que ça représente

J'espère que ça ne suppose pas qu'on sache quelle est la plus grande colonne en tout cas

Merci, je fais mon possible pour comprendre ça, je teste et si ça marche c'est résolu, sinon

En fait non, le secret de la page se trouve pas ici , je vais mieux étudier le code.

[Ravaka]

Ouah, après avoir testé en local, j'ai compris le principe!

Mais y'a un hic, c'est que ma bordure devrait aussi utiliser une bordure

C'est presque ça mais c'est pas encore ça.

Merci en tout cas

[trotters213]

Juste une ou 2 remarque sur ton code :
tu peux factoriser le code de tes bordures pour qu'il soit plus court :

Code :

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

1
2
3
border-top: 1px;
border-top-style: solid;
border-top-color: #939BB2;

est équivalent à

Code :

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

border-top:1px solid #939BB2;

Ensuite tu définis le display à block pour tous tes div ce qui ne sert à rien étant donné que ce sont des éléments en bloc par définition.

PS : attention l'exemple de stu nicholls ne fonctionne pas sous Opera

[MasterOfChakhaL]

PS : attention l'exemple de stu nicholls ne fonctionne pas sous Opera

Mmmh...
L'exemple du lien que j'ai donné fonctionne bien sous Opéra... C'est mon navigateur courant et tout marche normalement (j'ai la version 9...).