Scalabilite d'un Div

**3logy** · 17/08/2009, 15h41

salut tout le monde,

Bon voila je suis entrain de concevoir un site internet mais deja des le depart j'ai un probleme avec les divs....

Lorsque j'agrandir ou retrecir la fenetre ni le Background ni le contenu des div ne changent...

Que faut il faire? ya til une solution dans ce cas en css?

Merci

**vodiem** · 17/08/2009, 16h59

salut 3logy,

le background n'est pas "resizable" il faut utiliser une <img> et utiliser les width et height en pourcentage:

Code CSS :

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

1
2
	<img src="fond.jpg" width="100%" height="100%"/>
	<div style="width:100%; height:100%;">...</div>

**3logy** · 18/08/2009, 16h19

Oui merci beaucoup pour ta reponse!! ca c'est deja fais et il fonctionne...mais j'ai mis des buttons par exemple...mais quand je retreci le browser elle reste sur place...donc j'ai au milieu de ma page des gros buttons pourtant la page web est retrecie....

et j'ai mis les buttons dans une div...!!

Quest qui ne vas pas?

Merci

**vodiem** · 18/08/2009, 16h58

peux tu donner le code de l'ensemble des balises de la div incluant les buttons?

**3logy** · 18/08/2009, 22h54

Okay voici le HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
 
 <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
     <title>VAS</title>
	<link rel="shortcut icon" href="favicon.ico" >
	<link rel="icon" href="images/favicon_o.gif" type="image/gif" >
     <link href="style.css" rel="stylesheet" type="text/css" />   
 </head>     
<body>
<!--[if IE]>
<div id="IEroot">
<![endif]-->
	<div id="main">
    	<div id="container">
        	<div id="background">
				<img src="images/background.jpg" id="bg">
			</div>
			<div id="search_box">
				<form id="search_form" method="post" action="search.php">					
					<input type="text" id="s" value="Search" class="swap_value" />
					<input type="image" src="images/sb_btn.gif" width="40" height="29" id="go" alt="Search" title="Search" />					
				</form>
			</div>
        </div>
		<div id="menu">
			<div id="menuControls">
				<a href="main.html" class="home_btn"></a>
				<a href="about.html" class="about_btn"></a>
				<a href="news.html" class="news_btn"></a>
				<a href="features.html" class="features_btn"></a>
				<a href="forum.html" class="forum_btn"></a>
				<a href="contacts.html" class="contacts_btn"></a>
			</div>
                 </div>
            </div>

et le 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
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}
 
img#bg {
position:fixed;
top:0;
left:0;
z-index:-1;
border:0;
height:100%;
width:100%;
}
 
body,html{
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:768px;
	font-family: "Lucida Sans", "Lucida Grande", Verdana, sans-serif;
	scrollbar-face-color: #444444;
	scrollbar-arrow-color: #fff;
	scrollbar-base-color: #999999;
	scrollbar-3d-light-color: black;
	scrollbar-darkshadow-color: #000;
	scrollbar-highlight-color: #000;
	scrollbar-shadow-color: #777777;
	scrollbar-track-color: #fff;
	margin : 0;
	padding : 0;
}
 
 
/*-------------Searchbox----------------------*/
#search_box {
    background: url("images/text_sb.gif") no-repeat;
	position:fixed;
	/*margin-left : 958px;*/
	margin-left : 740px;
}
#search_box #s {
    float: left;
    padding: 0;
    margin: 6px 0 10px 5.3px;
    border: 0;
    width: 109px;
    background: none;
}
#search_box #go {
    float: right;
    margin: 0px 0px 0 0;
}
 
 
 
 
/*--------------MenuControls------------------*/
#menuControls{
	position:fixed;
}
 
 
 
/*Home button*/
a.home_btn {
background:url("images/home_btn_normal.jpg") no-repeat 0px 0px;
position:fixed;
display: block;
left:158px;
top:113px;
width:146px;
height:42px;
text-decoration: none;
}
 
a.home_btn:hover {
background:url("images/home_btn_over.jpg") no-repeat 0px 0px;
}
 
a.home_btn:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
/*Home button end*/
 
/*About button*/
a.about_btn {
background:url("images/about_btn_normal.jpg") no-repeat 0px 0px;
display: block;
position:fixed;
left:304px;
top:113px;
width:146px;
height:42px;
text-decoration: none;
}
 
a.about_btn:hover {
background:url("images/about_btn_over.jpg") no-repeat 0px 0px;
}
 
a.about_btn:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
/*About button end*/
 
/*News button*/
a.news_btn {
background:url("images/news_btn_normal.jpg") no-repeat 0px 0px;
display: block;
position:fixed;
left:448px;
top:113px;
width:146px;
height:42px;
text-decoration: none;
}
 
a.news_btn:hover {
background:url("images/news_btn_over.jpg") no-repeat 0px 0px;
}
 
a.news_btn:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
/*News button end*/
 
 
/*Features button*/
a.features_btn {
background:url("images/features_btn_normal.jpg") no-repeat 0px 0px;
display: block;
position:fixed;
left:596px;
top:113px;
width:146px;
height:42px;
text-decoration: none;
}
 
a.features_btn:hover {
background:url("images/features_btn_over.jpg") no-repeat 0px 0px;
}
 
a.features_btn:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
/*Features button end*/
 
/*Forum button*/
a.forum_btn {
background:url("images/forum_btn_normal.jpg") no-repeat 0px 0px;
display: block;
position:fixed;
left:744px;
top:113px;
width:146px;
height:42px;
text-decoration: none;
}
 
a.forum_btn:hover {
background:url("images/forum_btn_over.jpg") no-repeat 0px 0px;
}
 
a.forum_btn:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
/*Forum button end*/
 
/*Contacts button*/
a.contacts_btn {
background:url("images/contacts_btn_normal.jpg") no-repeat 0px 0px;
display: block;
position:fixed;
left:888px;
top:113px;
width:146px;
height:42px;
text-decoration: none;
}
 
a.contacts_btn:hover {
background:url("images/contacts_btn_over.jpg") no-repeat 0px 0px;
}
 
a.contacts_btn:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
	}
/*Contacts button end*/

Comme je l'ai dis plus tot ni les Buttons ni la case de recherche ne s#agrandissent et ne se retrecissent avec le browser!!

**vodiem** · 18/08/2009, 23h54

il faut que tu changes les valeurs dimension/position en %.

Scalabilite d'un Div

CSS

Vue hybride

Discussions similaires

Partager

Partager