Biztos vagyok benne, hogy már többetek fejében megfordult a gondolat, hogy bizonyos elemeknek új méretet kellene adni az ablak újraméretezése esetén. Nem nagy szó, CSS. Igen ám, de mi van abban az esetben, hogyha egyes elemek, mint például egy űrlap elemei dinamikusan fix egy százalékban kifejezett értékből kivont képpontokban meghatározott mérték szélességű.
Példa
Az oldal dinamikusan váltja a szélességét az ablakmérettől függően. Ráadásként, az oldal tartalmi része dinamikus szélességű, míg az oldaléc fix értékkel rendelkezik. A tartalmi részben van egy űrlap, ami dinamikusan kell változtassa a méretét a tartalmi rész szélességétől függően.
Megoldás
A megoldáshoz szükségvan egy minimális CSS és HTML tudáshoz, illetve egy kevés JavaScriptet is jó, ha tudunk.
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
| <html>
<head>
<title>Teszt</title>
<style type="text/css" media="screen">
#wrapper{ /* az ablak kitöltése */
width: 100%;
}
#wrapper #sidebar{ /* az oldalléc szélességének meghatározása */
width: 200px;
border: 1px solid lime;
float: right;
}
#wrapper #content{ /* a tartalmi rész az ablak szélességével egyenlő, alap esetben */
width: 100%;
border: 1px solid red;
float: left;
}
#wrapper #content input{ /* a szövegmezok formázása */
width: 80%;
}
</style>
<script type="text/javascript">
window.onload = setContentSize; /* a betöltés befejezésének eseményén meghívódik az újraméretezés */
window.onresize = setContentSize; /* az ablak méretváltozásán meghívódik az újraméretezést végző függvény */
function setContentSize(){
var wWidth; /* a változók, amiben az ablak szélességét tároljuk */
if( typeof( window.innerWidth ) == 'number' ){
/* ha nem IErol van szó */
wWidth = window.innerWidth;
}else if(document.documentElement && document.documentElement.clientWidth){
/* IE 6 */
wWidth = document.documentElement.clientWidth;
}else if(document.body && document.body.clientWidth){
/* IE 4 összférhető lekérés */
wWidth = document.body.clientWidth;
}
document.getElementById('content').style.width = (myWidth - 220) + 'px'; /* az új érték meghatározása */
}
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<p>A fő tartalmi egység.</p>
<form method="post" action="" id="test" name="test">
<input type="text" name="text1" value="value" />
<button name="sbmt" type="submit" value="val">Küldés</button>
</form>
</div>
<div id="sidebar">
<p>Az oldalsáv tartalma.</p>
</div>
</div>
</body>
</html> |
Ezek az ikonok ún. közösségi könyvjelző oldalakra mutatnak, ahol meg lehet osztani másokkal is amit fontosnak találsz.
Loading ...
A választ itt találod meg: 
