Fixer mon site

**roukgreg** · 01/06/2010, 01h00

Bonjour,

Je fait actuellement un site pour une association. J'ai déjà un peu avancé mais le problème c'est que quand je réduis la fenêtre de mon navigateur, le site se "renferme" sur lui même jusqu'à disparaître si je continu de réduire la fenêtre. J'ai essayé de regarder en 800x600, et la le site n'est presque plus visible. En faite tout se monte les uns sur les autres. Idem pour mon menu déroulant, lorsque je réduis la fenêtre, au lieu de s'afficher en longueur, il s'affiche toujours mais en hauteur.
J'ai déjà essayé certaines choses mais apparemment pas les bonnes.

Pour vous aidez à m'aidez

, voici le code de mon index;

Code xhtml :

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
 
<html>
	<head>
		<title>FOOTBALL CLUB D'ARGENCES</title>		
			<link rel="stylesheet" type="text/css" href="CSS/CSS_total.css"/>
			<script language="JavaScript" type="text/javascript" src="menu_deroulant.js"></script>
 
			<head>
 
 
<body>
 
 
<div class="en_tete">
		<!--La div "en-tete" est le cadre contenant l'image de présentation avec les 2 logos et le nom du club-->
	<div class="titre_site">
		<!--La div "titre-site" contient l'image "titre.jpg", celle avec les 2 logos et le nom du club-->
	</div>
 
</div>
 
		<!--Inclusion du code xHTML du menu déroulant-->
<?php
        include('menu_deroulant.inc.php');
?>
 
 
<div class="corps">
 
</div>
 
 
 
 
 
</body>
 
</html>

Et voici mon code CSS:

Code css :

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
/*Corps général de la page*/
body {
	background-attachment: fixed;
	width: 850px;
	margin-bottom: 20px;
	margin-left: 200px;
	margin-right: 200px;									
	}
 
/*Emplacement de: la banniere avec les 2 logos*/
.tableau_titre {
	width: 100%;											
	height: 18%;	
	}
 
.titre_site {
	background-image: url('../fond/titre.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	width:100%;
	height: 100%;
	padding: 0px;
	}
 
 
.en_tete {
	background-color: blue;
	width: 100%;
	height: 18%;
	}
 
/*Cadre entourant le menu*/
.cadre_menu {
	width: 100%;
	margin-top: 0px;										
	height: 5%;
	}
 
/*Fond d'ecran de la page d'accueil*/
.corps {
	border: 2px solid;
	background: blue url('../fond/logo_fond.png');
	background-position: center center;
	text-align: center;										
	width: 100%;
	height: 1800px;
	background-repeat: repeat-y;
 
	}
 
/*Feuille de style du menu deroulant*/
.bouton_menu {
	padding: 0px;
	margin: 0px;
	position: absolute;
	border: 1px solid transparent;
	}
 
#menu {
	width: 100%;
	}
#menu li:hover ul ul, #menu li.sfhover ul ul
{
        left: -999em; 
}
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul 
{
        left: auto; 
        min-height: 0; 
}
 
#menu, #menu ul    
{
 
		height : 15;
		padding : 0; 
        margin : 0; 
        list-style : none; 
        line-height : 30px; 
        text-align : center; 
}
 
#menu 
{
        font-weight : bold; 
        font-family : arial black; 
        font-size : 17px; 
}
 
#menu a 
{
        display : block; 
        padding : 0;
        background-image : url('../fond/base.png');
        color : #fff; 
        text-decoration : none; 
        width: 169px;
 
}
 
#menu li    
{ 
        float : left; 
 
        border-right : 1px solid #fff; 
}
 
body #menu li
{
        border-right: 1px solid transparent ; 
}
 
#menu li ul 
{ 
        position: absolute; 
        width: 199px; 
        left: -999em; 
}
 
 
 
#menu li ul ul 
{
        margin    : -22px 0 0 144px ;  
 
        border-left     : 1px solid #fff ;      
}
 
 
body #menu li ul ul                
{
        border-left     : 1px solid transparent ; 
}

J'espère que vous pourrez m'aider, j'espère ne pas avoir à tout refaire, enfin s'il le faut

.

En vous remerciant d'avance pour vos réponses

**pop_up** · 01/06/2010, 10h33

pour que ton site s'adapte à la taille de ta fenêtre de navigateur, il faut que tu utilises une mise en page fluide, c'est à dire ne pas utiliser de pixel pour spécifier la largeur d'un bloc mais plutôt les pourcentages.

dans ton cas (par exemple) la largeur de ton body est en pixel. Du coup, si ta fenêtre fait moins de 850px de large, tu perds de l'information.
en revanche, si tu déclare une largeur équivalente à 80%, ton site fera 80% de la largeur de ta fenêtre de navigation, peut importe sa taille.

**roukgreg** · 02/06/2010, 00h14

Bonsoir,

Tout d'abord merci pour ta réponse. J'ai mis comme tu me l'as dit en %, en me servant de min-width, cela marche assez bien.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
body {
	background-attachment: fixed;
	width: 67%;
        min-width: 800px;
	height: 100%;
	min-height: 800px;	
	margin-bottom: 20px;
	margin-left: 17%;
	margin-right: 16%;
	}

Encore merci pour ta réponse

Fixer mon site

CSS

Vue hybride

Discussions similaires

Partager

Partager