Toon posts:

div layer snap to bottom of browserwindow

Pagina: 1
Acties:

vrijdag 27 december 2002 12:20

Acties:

Verwijderd

Topicstarter
heeft iemand een idee en/of voorbeeld script om een div vast te maken aan de onderkant van je browser.. in eerste instantie zoek ik IE 6/5 compatible script .. oplossingen voor netscape zijn mooi meegenomen..

ik ben zelf er al een week mee bezig maar ik kom niet verder dan een div die relatief aan de top left mee beweegt als ik scroll

het mooist zou zijn als de div gewoon vast snapt aan de onderkant en niet mee hoeft te scrollen omdat in scrollen altijd opbouwende vertraging zit.
later wil ik uit die onderste div ook menu's laten uitklappen maar ik ben eerst al blij als ik die onderste div heb.. ik weet dat het mogelijk moet zijn ook al wordt het overal waar ik zoek ontkent.

mijn scripts met de innerheight van het window en de top van de div willen maar niet lukken..

welke dhtml guru helpt mij uit de brand?

vrijdag 27 december 2002 12:30

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:25

crisp

Devver

Pixelated

Je zou de scrolling van je body uit kunnen zetten en je content in een scrollable layer kunnen zetten, waar je je menu weer onder plaatst.

Intentionally left blank

vrijdag 27 december 2002 12:41

Acties:

Verwijderd

Topicstarter
gaat dat bij het resizen van het browserwindow wel goed dan?
bedankt voor je reactie ik zal dat eens gaan proberen

vrijdag 27 december 2002 12:58

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:25

crisp

Devver

Pixelated

voorbeeld:
HTML:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>menu bottom</title>
<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  padding-bottom: 50px;
  overflow: hidden;
}
#contentbox {
  position: relative;
  height: 100%;
  overflow: auto;
}
#content {
  padding: 10px;
}
#menu {
  height: 50px;
  background-color: #ffff00;
  padding: 10px;
}
</style>
</head>
<body>
<div id="contentbox">
  <div id="content">
top
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
bottom
  </div>
</div>
<div id="menu">Hier het menu</div>
</body>
</html>

Intentionally left blank

vrijdag 27 december 2002 14:37

Acties:

Verwijderd

Topicstarter
Geweldig voorbeeld, dankje vriendelijk. Het scrollen van de content van de body had ik uitgezet en ik was met layers aan de gang gegaan, maar op het beperken van de body was ik nog niet gekomen. Ik ga nu verder met de opbouw zodat ik straks de menu layers kan gaan testen die ik erin wil maken. Het worden layers naast elkaar die ik uit kan schuiven en weer in kan schuiven naar beneden. Mocht dit niet meteen lukken dan maak ik ze tijdelijk visible / hidden dmv een button, zodat ik daar later aan verder kan proggen.

vrijdag 27 december 2002 14:40

Acties:

Verwijderd

als je ook nog de html en body elementen de CSS property height: 100%; meegeeft, dan heb je nog een dikke kans dat het in Mozilla en Netscape 6+ ook nog werkt.

vrijdag 27 december 2002 14:45

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:25

crisp

Devver

Pixelated

Verwijderd schreef op 27 december 2002 @ 14:40:
als je ook nog de html en body elementen de CSS property height: 100%; meegeeft, dan heb je nog een dikke kans dat het in Mozilla en Netscape 6+ ook nog werkt.
Hij werkt zo al in Mozilla hoor :P

Intentionally left blank

vrijdag 27 december 2002 16:54

Acties:

Verwijderd

Topicstarter
Ik was aan het proggen gegaan met je code om de plaatsing van div beter onder de hand te krijgen. Maar het lukt mij niet om bovenaan ook eenzelfde div te maken als het menu onderaan. Ik heb geprobeert om een extra topbox aan te maken met daarin een topmenu div en ik heb geprobeert om enkel een topmenu div te maken maar dit wilde niet lukken. Is het handiger om het menu bovenaan dan gewoon in een frame te stoppen of is het toch wel mogelijk om dit op te lossen met een div?

vrijdag 27 december 2002 17:12

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:25

crisp

Devver

Pixelated

HTML:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>menu top &amp; bottom</title>
<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  padding-top: 50px;
  padding-bottom: 50px;
  overflow: hidden;
}
#menutop {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 50px;
  width: 100%;
  background-color: #ffff00;
  padding: 10px;
  -moz-box-sizing: border-box;
}
#content {
  height: 100%;
  overflow: auto;
  padding: 10px;
  -moz-box-sizing: border-box;
}
#menubottom {
  height: 50px;
  background-color: #ffff00;
  padding: 10px;
  -moz-box-sizing: border-box;
}
</style>
</head>
<body>
<div id="menutop">Hier het topmenu</div>
<div id="content">
top
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
bottom
</div>
</div>
<div id="menubottom">Hier het bottommenu</div>
</body>
</html>

Intentionally left blank

vrijdag 27 december 2002 17:43

Acties:

Verwijderd

Topicstarter
tof het werkt maar ik moet er nog meer over lezen en mee testen voordat ik het door heb.. want ik krijg bijvoorbeeld niet zo 1.. 2 nu weer het bovenste menu in 2en gedeeld.. ook als ik voor de invulling van de div tables gebruik gaat het niet goed.. dit moeten zeker ook bij voorkeur div zijn.. 1 keer div alles div of niet?

hmm of ik snap het wel.. het moet zo denk ik. .maar nu ga ik naar huis eerst :D
in de body een grotere top padding en dan tussen menutop en content een extra div

vrijdag 27 december 2002 17:49

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:25

crisp

Devver

Pixelated

Verwijderd schreef op 27 december 2002 @ 17:43:
tof het werkt maar ik moet er nog meer over lezen en mee testen voordat ik het door heb.. want ik krijg bijvoorbeeld niet zo 1.. 2 nu weer het bovenste menu in 2en gedeeld.. ook als ik voor de invulling van de div tables gebruik gaat het niet goed.. dit moeten zeker ook bij voorkeur div zijn.. 1 keer div alles div of niet?

hmm of ik snap het wel.. het moet zo denk ik. .maar nu ga ik naar huis eerst :D
in de body een grotere top padding en dan tussen menutop en content een extra div
Tsja, ik heb hier al meermalen geroepen dat tabellen niet bedoeld zijn voor opmaak, dus dacht bij deze eens te bewijzen dat het met layers en css ook allemaal mogelijk is :) (dit had in z'n geheel ook met een table gekund natuurlijk).
Uiteraard kan je binnen je div's wel weer tables gebruiken. Je kan de paddings gewoon terugschroeven of weglaten, maar je kan er net zo goed weer divs in zetten.
Je kan bovenin ook wel 2 divs onder elkaar kwijt, en inderdaad met de heights en de padding van je body aanpassen kom je een heel eind.
suc6 :)

Edit: nog een laatste note; de style property '-moz-box-sizing: border-box' zorgt ervoor dat de hoogte gerenderd wordt inclusief de aangegeven padding; in IE is dat default, in Mozilla niet...

[ Voor 9% gewijzigd door crisp op 27-12-2002 17:51 ]

Intentionally left blank

donderdag 2 januari 2003 13:52

Acties:

Verwijderd

Topicstarter
Als ik een tabel in het content deel plaats moet ik als ik de pagina voor het eerst open in IE eerst het venster resizen voordat de content en de bottom worden weergegeven.
Doe ik iets fout.. is dit een instelling, komt het door overflow=auto of is het gewoon een IE bug?

donderdag 2 januari 2003 14:01

Acties:
  • edie
  • Registratie: Februari 2002
  • Nu online

edie

Verwijderd schreef op 27 december 2002 @ 12:20:
heeft iemand een idee en/of voorbeeld script om een div vast te maken aan de onderkant van je browser.. in eerste instantie zoek ik IE 6/5 compatible script .. oplossingen voor netscape zijn mooi meegenomen..

ik ben zelf er al een week mee bezig maar ik kom niet verder dan een div die relatief aan de top left mee beweegt als ik scroll

het mooist zou zijn als de div gewoon vast snapt aan de onderkant en niet mee hoeft te scrollen omdat in scrollen altijd opbouwende vertraging zit.
later wil ik uit die onderste div ook menu's laten uitklappen maar ik ben eerst al blij als ik die onderste div heb.. ik weet dat het mogelijk moet zijn ook al wordt het overal waar ik zoek ontkent.

mijn scripts met de innerheight van het window en de top van de div willen maar niet lukken..

welke dhtml guru helpt mij uit de brand?
Da's gewoon CSS2 (misschien zelfs wel CSS1)
code:
1
2
3
4
5
6
7
8

#menu
{
  position: fixed;
  height: 100px;
  widht: 500px;
  bottom: 0px;
  left: 0px;
}


Maarja... dat doet het natuurlijk weer niet in IE |:(
(en ja, -1 troll zou hier wel mogen, maar ik wou het gewoon even zeggen)

"In America, consumption equals jobs. In these days, banks aren't lending us the money we need to buy the things we don't need to create the jobs we need to pay back the loans we can't afford." - Stephen Colbert

Pagina: 1
Reageer