Toon posts:

[CSS+IE5/6]Oplossing 'Zwevend' menu - potition:fixed

Pagina: 1
Acties:
  • 54 views sinds 30-01-2008

vrijdag 12 september 2003 01:08

Acties:
  • Rtificial
  • Registratie: Juni 2001
  • Laatst online: 21-08 16:46

Rtificial

as fake as can be

Topicstarter
Na uitgebreid zoekwerk, waaronder op GOT, waar ik hiervoor niets kon vinden, bij deze de oplossing om ook in IE5/6 menuutjes en andere div's te kunnen laten zweven, ofwel, een oplossing voor position:fixed.

Het moet nog wel getest worden onder Mozilla en anderen... kan iemand even laten weten of dat werkt?

Eerst even de kale CSS:
code:
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

html, body {
    height: 100%;
    margin: 0px;
    overflow: hidden;
    padding: 0px;
}
.BodyReal {
    height: 100%;
    width: 100%;
    overflow: auto;
    padding: 0px;
    margin: 0px;
    z-index: 1;
}
.BodyAbsolute {
    position: relative;
    border-style: dashed;
    border-width: 1px;
    border-color: navy;
    width: 300px;
    height: 1em;
    background-color: #E3E3E3;
    color: #000000;
    left: 10px;
    top: 10px;
}
.MenuFixed {
    position: absolute;
    border-style: dashed;
    border-width: 1px;
    border-color: navy;
    width: 300px;
    height: 4em;
    background-color: #E3E3E3;
    color: #000000;
    right: 10px;
    top: 100px;
    text-align: center;
}


Zoals je hierboven ziet, 2 body elementen. De eerste betreft de HELE pagina, de tweede alleen de daadwerkelijke body.

Dan even de HTML uitwerking:
code:
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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- Test floatende menuutjes -->
<title>
Test floatende menuutjes
</title>
<link href="float.css" rel="styleSheet" type="text/css" media="all" />
</head>
<body>
    <div class="BodyReal">
        <h1>Echte inhoud van de pagina</h1>
        <p>
        Dit scrolt allemaal
</p>
        <div class="BodyAbsolute">
            Titelbalkje met absolute        </div>
        <p>
Blah
<br />
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
Blah
<br />          
            
        </p>
    </div>
    <div class="MenuFixed">
        Hier kan het floatende menu
        <br />
        Even over de scrollbar heengeschoven :-p    </div>
</body>
</html>


Resultaat staat hier:
http://www.mds-forum.nl/testblog/float/positionfixed.html

Misschien iets voor in een faq ofzo?

"Don't blow out my candle if you want yours to shine brighter..."

vrijdag 12 september 2003 01:11

Acties:
  • HunterPro
  • Registratie: Juni 2001
  • Niet online

HunterPro

titelbalkje met absolute scrollt niet mee in IE, wel in moz. In beiden reageert het floating boxje rechts gelijk; ligt over de scrollbalk en blijft fixed op de positie.

vrijdag 12 september 2003 01:18

Acties:
  • Rtificial
  • Registratie: Juni 2001
  • Laatst online: 21-08 16:46

Rtificial

as fake as can be

Topicstarter
HunterPro schreef op 12 September 2003 @ 01:11:
titelbalkje met absolute scrollt niet mee in IE, wel in moz. In beiden reageert het floating boxje rechts gelijk; ligt over de scrollbalk en blijft fixed op de positie.
Ja klopt dus op zich wel... mozilla gaat een stuk beter om met deze argumenten. ;)

Maar het gaat dus inderdaad met name om het rechter boxje, die doet nu iets dat met CSS in IE niet op de standaard methoden mogelijk is.

"Don't blow out my candle if you want yours to shine brighter..."

vrijdag 12 september 2003 01:27

Acties:
  • Dark Blue
  • Registratie: Februari 2001
  • Laatst online: 21-08 18:36

Dark Blue

Compositionista!

Alpenmeisje

Idem aan wat Hunterpro zegt, IE werkt prima met deze argumenten.
Ik heb geen Mozilla (ja, wel gedownload maar niet geinstalleerd, ik ben op de goede weg ;) )

heidiulrich.nl | adventura.nl : rugzakavonturen | pathwise.nl : prepping geeks to get jobs

vrijdag 12 september 2003 01:29

Acties:
  • Rtificial
  • Registratie: Juni 2001
  • Laatst online: 21-08 16:46

Rtificial

as fake as can be

Topicstarter
Dark Blue schreef op 12 September 2003 @ 01:27:
Idem aan wat Hunterpro zegt, IE werkt prima met deze argumenten.
Ik heb geen Mozilla (ja, wel gedownload maar niet geinstalleerd, ik ben op de goede weg ;) )
LOL, het ging me nou eigenlijk juist om Mozilla en andere browsers, aangezien ik hier ook alleen IE heb...

Anyway, het lijkt te werken, dus dan is het tijd rustig te gaan slapen :D

edit:

Als ik de topic-titel zo bekijk was het al eerder tijd om te gaan slapen :D

[ Voor 10% gewijzigd door Rtificial op 12-09-2003 01:30 ]

"Don't blow out my candle if you want yours to shine brighter..."

vrijdag 12 september 2003 01:37

Acties:

Verwijderd

Ook in Opera geeft hij geen problemen. Maar als je dit soort dingen gaat ontwikkelen, is het dan niet sowieso slim om de meest standaard browsers te installeren? Als je Mozilla hebt, dan zal Netscape ook niet zo'n probleem zijn. Opera is echter weer een totaal ander soort browser, en levert naar mijn ervaring de meeste problemen op met niet-standaarden. Het hangt natuurlijk af van wat voor publiek je voor ontwikkelt, maar ik vind het zelf altijd wel prettig om vantevoren te weten of een website er in de meest gebruikte browser goed werkt, ook voor de toekomst :).

vrijdag 12 september 2003 01:46

Acties:
  • Guru Evi
  • Registratie: Januari 2003
  • Laatst online: 21-08 16:35

Guru Evi

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ik zie dit, komt die site door de test? ok, dan is het goed... je website zou moeten overal hetzelfde gedisplayed worden (hier in mozilla alles correct, ik heb geen ie) wordt dat niet gedaan dan is de browser die het niet doet verkeerd... -> bugtrack

Pandora FMS - Open Source Monitoring - pandorafms.org

vrijdag 12 september 2003 02:09

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 10:01

crisp

Devver

Pixelated

Dat kan je zelf prima uittesten door gewoon meerdere browsers te installeren, ik zie niet in waarom wij dat zouden moeten doen voor jou...

W&G is niet bedoeld voor sitepagechecks, als je echter iets bijzonders weet te melden, dan sta ik daar voor open :)

edit: niet echt een sitecheck, maar meer een pagecheck (what's in a word). Daarbij heb ik gedemonstreerde methode zelf al meermalen aangegeven als een oplossing om een div 'fixed' te houden in een pagina :)

[ Voor 84% gewijzigd door crisp op 12-09-2003 10:25 ]

Intentionally left blank

Pagina: 1

Dit topic is gesloten.