Discussion :

[TommyWeb]

Bonjour,

Je suis occupé d'intégrer un nouveau design pour mon site mais il y a un élément que je n'arrive pas à faire comme je voudrais.

voici mon site actuellement :


A droite, on voit un encadré avec marqué "ACCUEIL". J'aimerais que cet encadré aille jusque dans le bas de la page. Autrement dit, il me faut que cet encadré suive la taille de l'encadré principal.

Je ne sais pas si vous me comprenez :-/

voici un bout de code qui devrait vous aider :

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
<div id='site'> <!-- Site -->
	<div class='header'> <!-- Header -->
	</div> <!-- End Header -->
	<div class='menuh'> <!-- Menu h -->
		<a href='./' title='Scripts PHP'>Accueil</a> - Tommy - Scripts PHP - Sources PHP - Services - Livre d'Or - Forum - Syndication - Contact
	</div> <!-- End Menu h -->
	<div class='menuhb'> <!-- Menu h b -->
	</div> <!-- End Menu h b -->
	</div> <!-- End Menu g -->
	<div class='menud'> <!-- Menu d -->
		<div class='menudtitle'> <!-- Menu d title -->
			A<br />C<br />C<br />U<br />E<br />I<br />L
		</div> <!-- End Menu d title -->
 
	</div> <!-- End Menu d -->
</div> <!-- End Site -->

J'ai retiré tout le menu de gauche qui ne vous aurait servir à rien :-)
et voici ma 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
body {
	margin: 0;
	background-color: #F1F2F3;
	font-family: arial;
	font-size: 12px;
	color: #000000;
	text-align: center;
}
 
#site {
	width: 779px;
	margin: 15px auto 0px auto;
	background-image: url('./img/fond.gif');
	background-repeat: repeat;
	text-align: left;
	border: 1px dashed #000;
}
 
.header {
	background-image: url('./img/header.gif');
	height: 157px;
}
 
.menuh {
	text-align: center;
	border-top: 1px dashed #000;
	border-bottom: 1px dashed #000;
}
 
.menuhb {
	background-image: url('./img/menuhb.gif');
	height: 10px;
	margin-top: 20px;
}
 
.menud {
	background-image: url('./img/fondmenud.gif');
	background-repeat: repeat;
	border-left: 1px solid #82ACD4;
	width: 52px;
	float: right;
}
 
.menudtitle {
	color: #FFF;
	font-size: 45px;
	font-weight: bold;
	text-align: center;
	padding-top: 10px;
	font-family: impact;
}

Merci d'avance pour votre aide.

ps : je tiens à préciser que je ne désire pas utiliser de tableaux :-)

[Kerod]

Si la taille du conteneur de ce menu est fixé alors il suffira de mettre un height à 100%

Edit : il y aurait pas un problème dans ton code...il y a un /div en trop

[TommyWeb]

Si la taille du conteneur de ce menu est fixé alors il suffira de mettre un height à 100%

Edit : il y aurait pas un problème dans ton code...il y a un /div en trop

Le problème, c'est que le conteneur n'a pas une hauteur fixe (puisqu'il doit pouvoir s'agrandir en fonction du texte qu'il y aura (dans la partie centre)...

Oui, oubli de retirer un /div du menu de gauche

[Kerod]

Ben si le conteneur n'a pas de taille fixe c'est pas la même, il faut quand même qu'il ait une taille de base sinon tu n'a aucun moyen de le faire

[TommyWeb]

Rah... ça me gène un peu de faire cela car ça voudrait dire que je devrai mettre une scrollbar à l'intérieur du site alors ? :-/

[Kerod]

ben si tu as un long menu...autant mieux le laisser comme ca tu n'as qu'à rajouter un background avec repeat pour cacher le fond blanc du site( s'il est blanc lol)

[TommyWeb]

Tu n'as pas l'air de comprendre, la partie bleu de droite n'est pas sur le fond du site...

Sinon, existe-t'il un moyen de mettre une hauteur de site minimale (avec min-height je pense) et de faire en sorte qu'il s'agrandisse si le texte est plus grand que l'espace minimum ?

[Kerod]

Ben oui si tu mets un min c'est le min qu'il puisse prendre et donc ca pourra s'agrandir mais à savoir si ca fonctionne...Il faut tester

[TommyWeb]

Ouep mais en fait, ça n'ira pas car la division n'augmentera pas de taille en même temps que le centre :-/

Je me demande si je vais pas refaire le fond alors