DIV niet meescrollend
http://dpelsma.nl/test/1.php
daar ben ik bezig met een layout te maken. Maar ik ben op een probleem gestuit.
waar: "Page Goes Here: staat, die is meescrollend.
Maar waar ik het verhaaltje heb staan over het menu, werkt niet. Die is niet meescrollend.
Ik heb vanalles geprobeerd.
Misschien kunnen jullie aan de hand van de bron, mij helpen waar de fout uit komt.
Het is allemaal nog HTML, en CSS.
Want ik heb geen idee, waar de fout uit komt.
Groeten Durk,
Een standaard (x)html opbouw van een website is:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
<div id="wrap"> <!-- wrap kan ook container zijn. -->
<div id="header">
Al de element die in de header moet staan komt hier.
Zoals:
logo,
menu,
inlog box,
etc.
</div>
<div id="content">
Content.
</div>
<div id="footer">
</div>
</div>
</body>
<div id="wrap"> <!-- wrap kan ook container zijn. -->
<div id="header">
Al de element die in de header moet staan komt hier.
Zoals:
logo,
menu,
inlog box,
etc.
</div>
<div id="content">
Content.
</div>
<div id="footer">
</div>
</div>
</body>
De css ziet er zo uit:
Code (php)
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
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
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background-color: #000; /* zwart */
}
#wrap {
width: 900px;
margin: 0 auto; /* het midden van het scherm. */
height: 100%;
hieght: auto!important;
min-height: 100%;
}
#header {
height: 150px;
}
#content {
color: #FFF;
}
#footer {
hieght: 50px;
padding-top: 50px;
}
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background-color: #000; /* zwart */
}
#wrap {
width: 900px;
margin: 0 auto; /* het midden van het scherm. */
height: 100%;
hieght: auto!important;
min-height: 100%;
}
#header {
height: 150px;
}
#content {
color: #FFF;
}
#footer {
hieght: 50px;
padding-top: 50px;
}
Dit is een vrij basic opbouw. Voor ingewikkelde website raad ik je google aan.
http://www.google.nl/search?q=sticky+footer&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:nl:official&client=firefox-a
of niet?
Kijk eens even op de onderstaande url`s misschien is dit iets wat je bedoeld, want de beschrijving van jou snap ik niet helemaal :
http://swf2.sq4.nl/durk/style_1.html
en
http://swf2.sq4.nl/durk/style_2.html
zie de bron voor de style sheets etc.
Ik heb 7 div's
- Container (online nog als box)
- header
- Big-menu
- content
- small-menu
- page
- footer
In 'Container' moet alles komen, dus daar alle div's.
In 'Content' staan
- small-menu
- page
Het zou er zo uitmoeten komen te zien:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
|-----------------------------------------|
| Header |
|-----------------------------------------|
| Big-menu |
|-----------------------------------------|
| small | page |
| menu | |
| | |
| | |
| | |
|----------------------------------------|
| Footer |
|----------------------------------------|
| Header |
|-----------------------------------------|
| Big-menu |
|-----------------------------------------|
| small | page |
| menu | |
| | |
| | |
| | |
|----------------------------------------|
| Footer |
|----------------------------------------|
zo in grote lijnen wil ik het hebben. Het ziet er nu zo uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
|-----------------------------------------|
| Header |
|-----------------------------------------|
| Big-menu |
|-----------------------------------------|
| small | page |
| menu | |
| | |
| | |
| | |
|--------|-------------------------------|
| | Footer |
|---------| |
|----------------------------------------|
| Header |
|-----------------------------------------|
| Big-menu |
|-----------------------------------------|
| small | page |
| menu | |
| | |
| | |
| | |
|--------|-------------------------------|
| | Footer |
|---------| |
|----------------------------------------|
Div- Page, maakt de 'content' wel groter, dus het lijkt als die er wel in zit.
Div - small-menu gaat uit de div, 'content' en dan gaat small-menu over de footer heen.
Ik hoop dat ik het zo duidelijker heb uitgelegd
Gewijzigd op 01/01/1970 01:00:00 door Durk Pelsma
Geef de footer dus clear: left; mee
position: static mag weg
//edit
Ik zie net wat jij met de div page hebt gedaan. Het beste geef je die een float: right mee en een breedte. De footer geef je dan clear: both; mee
Gewijzigd op 01/01/1970 01:00:00 door Kay Kay
Iedereen Bedankt!
FireBug plugin voor FireFox...
Retehandig...
De web developer toolbar is veel handiger :)
Ik gebruik de developer toolbar ook veel, ook heel handig. Zijn 2 verschillende tools die niet zijn te vergelijken.
@aar, met firebug kun je ook realtime je css aanpassen en je html.
Wat kan Firebug wat de developer toolbar niet kan dan?
Dragy schreef op 08.04.2009 20:57:
@Niek,
Wat kan Firebug wat de developer toolbar niet kan dan?
Wat kan Firebug wat de developer toolbar niet kan dan?
Zoooo veel man.. Je kunt beter de lijst andersom maken..
Firebug is vooral bedoeld om te debuggen (oa javascript). De developer toolbar zit vol met tooltjes die makkelijk zijn voor een developer, zoals het resizen van je window
Niek schreef op 08.04.2009 21:50:
Het zijn 2 verschillende tools, (wel met enkele vergelijkbare opties).
Firebug is vooral bedoeld om te debuggen (oa javascript). De developer toolbar zit vol met tooltjes die makkelijk zijn voor een developer, zoals het resizen van je window
Firebug is vooral bedoeld om te debuggen (oa javascript). De developer toolbar zit vol met tooltjes die makkelijk zijn voor een developer, zoals het resizen van je window
En er zit ook een javascript debugger in. Ik heb alleen maar nadelen kunnen ontdekken aan Firebug.
Wat wel handig was, is dat je de request kon zien van Ajax gedoe.
Wat ik zelf veel gebruik is de generated source bekijken, dan weet je precies wat er gemaakt is (en dus ook wat er niet klopt) als je fouten hebt wanneer je met JS/ AJAX werkt.
Het zijn zeker heel verschillende tools, maar ik ben er zelf nog niet achter hoe of firebug mij precies verteld wat er fout is.
In combinatie met FirePHP kan eht nog krachtiger. Dan kan je zelf PHPapplicaties debuggen met:
Code (php)
1
fb::log($foo,"Bar");
En dat is helemaal handig als je met een template parser werkt.
En heb ik het al over de Y-Slow extentie voor Firebug gehad :P?
Dit is echt duidelijk anders dan dan de Webdeveloper Toolbar.
Gewijzigd op 01/01/1970 01:00:00 door - Ariën -
