Toon posts:

[css] 3 rows, 2 vast, de ander zoekt het maar uit

Pagina: 1
Acties:
  • 163 views sinds 30-01-2008
  • Reageer

maandag 10 november 2003 15:26

Acties:

Verwijderd

Topicstarter
Ik wilde een nieuwe site eens aanpakken dmv css ipv tables. Het grootste gedeelte werkt nu zonder box model hacks of wat dan ook, maar ik blijf nog met een probleem zitten nl. het volgende

Een DIV, met daarin 1 header DIV van 80px hoog, 1 footer DIV van 80px hoog, en een laatste DIV die de overgebleven hoogte moet pakken, en zonnodig een scrollbar moet tonen.

In tables zou je dit kunnen zie als:

<table height=100%>
<tr>
<td height=80>header</td>
</tr>
<tr>
<td style=overflow:auto>content</td>
</tr>
<tr>
<td height=80>footer</td>
</tr>
</table>

Hoe krijg ik dit nu in CSS voor elkaar zonder gebruik van Javascript :) Ik had al wat uitgeprobeerd op advies van een msn contact, maar Mozilla stribbelt tegen, en IE heeft al helemaal geen zin om uberhaupt iets te doen.

Dit is de opzet, en ik wil graag het rode gedeelte scrollend hebben:

Is dit mogelijk in css? Of meot ik maar gewoon weer terug naar tables?

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
53
54
55
56
57
58
59
60
61
62
63

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <style>
    html,body{
        margin:0px;
        padding:0px;
        overflow:hidden;
        text-align:center;
        text-align:left;
    }
    #content{
        background-color:navy;
        width:790px;
        height:100%;
        margin-right:auto;
        margin-left:auto;
        padding:0px;
    
    }
    #sitenav{
        float:left;
        width:176px;
        background-color:#ffffff;
    }
    #main{
        float:left;
        background-color:gray;
        margin-left:19px;
        width:595px;
        height:100%;
    }
    #scrollarea{
        background-color:red;
        margin-top:80px;
        margin-bottom:80px;
        overflow:auto;
    }
    #footer{
        background-color:ffffcc;
        position:absolute;
        bottom:0px;
        height:80px;
        width:595px;
    }
    </style>
</head>

<body>
<div id="content">
    <div id="sitenav">navigatie<br \>staat hier</div>
    <div id="main">
        background van 80px hoog op de main div
        <div id="scrollarea">text met een top margin van 80px en een bottom margin van 80px, dit moet dus 100%-80px-80px hoog zijn en scrollen indien nodig</div>
        <div id="footer">footer 80 px hoog als losse div</div>
    </div>
</div>


</body>
</html>

[ Voor 11% gewijzigd door Verwijderd op 10-11-2003 15:56 ]

maandag 10 november 2003 15:39

Acties:

Verwijderd

offtopic:
/me verbaast zich over de taal PHP... Lijkt wel verdacht veel op HTML??
Is het dan werkelijke zó simpel, in PHP een website te maken?? :?

maandag 10 november 2003 15:43

Acties:

Verwijderd

Topicstarter
Verwijderd schreef op 10 november 2003 @ 15:39:
offtopic:
/me verbaast zich over de taal PHP... Lijkt wel verdacht veel op HTML??
Is het dan werkelijke zó simpel, in PHP een website te maken?? :?
Nee het was de bedoeling dat het als source kwam te staan. :)

maandag 10 november 2003 15:45

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:24

crisp

Devver

Pixelated

Verwijderd schreef op 10 november 2003 @ 15:43:
[...]


Nee het was de bedoeling dat het als source kwam te staan. :)
daar hebben wij [ code=html ] voor ;)

Intentionally left blank

maandag 10 november 2003 15:47

Acties:
  • Vinzzz243
  • Registratie: Februari 2001
  • Laatst online: 22-01-2025

Vinzzz243

Verwijderd schreef op 10 november 2003 @ 15:43:
[...]


Nee het was de bedoeling dat het als source kwam te staan. :)
dan zet het in [ code=php ] [ /code=php ] tags en in je code <? ?> gebruiken
PHP:
1
2
3
4

<?
<html>
</html>
?>


ontopic:
dit kan niet. Het is in verscheidene topics al gevraagd, maar niet mogelijk zonder tabellen of javascript, zie mijn topic [rml][ CSS HTML] positionering en uitlijning[/rml]/

maandag 10 november 2003 15:51

Acties:
  • disjfa
  • Registratie: April 2001
  • Laatst online: 08-01 11:17

disjfa

be

er word echt om de paar dagen deze vraag gesteld he :) als mensen nuo even wachten op clay die het bottom css2 element erin kan zetten met die htc file dan word het heel simpel :) anders moet je idd het idee van vinzzzz gebruiken :)

disjfa - disj·fa (meneer)
disjfa.nl

maandag 10 november 2003 15:57

Acties:

Verwijderd

Topicstarter
disjfa schreef op 10 november 2003 @ 15:51:
er word echt om de paar dagen deze vraag gesteld he :) als mensen nuo even wachten op clay die het bottom css2 element erin kan zetten met die htc file dan word het heel simpel :) anders moet je idd het idee van vinzzzz gebruiken :)
Ik kon hem anders niet in de search terugvinden. Niet zo vreemd ook, omdat dat ding toch voor geen meter werkt maargoed.

Heb je toevallig een linkje van dat topic voor me?

Ik vind het best belachelijk dat zoiets simpels als dit niet werkt. Geen wonder dat maar een minimaal aantal mensen van tables afstapt. Simpele typepad layouts zijn te doen, maar wil je iets anders dan mag je weer terug naar tables.

[ Voor 19% gewijzigd door Verwijderd op 10-11-2003 15:58 ]

maandag 10 november 2003 16:07

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:24

crisp

Devver

Pixelated

mwa
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<html>
<head>
<title>test</title>
<style type="text/css">

html, body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

div {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#container {
  height: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
}

#top {
  position: absolute;
  top:0px;
  left:0px;
  height: 80px;
  width: 100%;
  border: 1px solid red;
}

#content {
  position: relative;
  height: 100%;
  border: 1px solid blue;
  overflow: auto;
}

#bottom {
  position: absolute;
  bottom:0px;
  left:0px;
  height: 80px;
  width: 100%;
  border: 1px solid red;
}

</style>
<body>
<div id="container">
  <div id="top">top</div>
  <div id="content">
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
  </div>
  <div id="bottom">bottom</div>
</div>
</body>
</html>

Intentionally left blank

maandag 10 november 2003 16:20

Acties:
  • disjfa
  • Registratie: April 2001
  • Laatst online: 08-01 11:17

disjfa

be

die ff onthouden voor als mensen hem weer vragen en waarom heb je die niet eerder gepost crisp :P :)

alleen een klein dingetje en ja het is weer opera... ben er nou even mee aan t spelen want in opera wil die niet echt helemaal lekker lopen :)

gordijnstok:
hij loopt verder best mee met verschillende resoluties hoor :)

[ Voor 14% gewijzigd door disjfa op 10-11-2003 16:25 ]

disjfa - disj·fa (meneer)
disjfa.nl

maandag 10 november 2003 16:21

Acties:

Verwijderd

Topicstarter
crisp schreef op 10 november 2003 @ 16:07:
Tuurlijk zo lukt het wel, maar dan ga je absoluut positioneren, en ik gebruik gewoon float:left :) Jij zet meteen de boel vast op een x en y. En de #top div kan bij mij dus wijzigen op x vanwege resoluties.

Kortom jouw oplossing is niet echt van toepassing op mijn situatie. :)

[ Voor 23% gewijzigd door Verwijderd op 10-11-2003 16:23 ]

maandag 10 november 2003 16:37

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:24

crisp

Devver

Pixelated

Verwijderd schreef op 10 november 2003 @ 16:21:
[...]


Tuurlijk zo lukt het wel, maar dan ga je absoluut positioneren, en ik gebruik gewoon float:left :) Jij zet meteen de boel vast op een x en y. En de #top div kan bij mij dus wijzigen op x vanwege resoluties.

Kortom jouw oplossing is niet echt van toepassing op mijn situatie. :)
oh, je wilt ook nog horizontaal centreren?

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10

#container {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -395px;
  height: 100%;
  width: 790px;
  padding-top: 80px;
  padding-bottom: 80px;
}


en Opera zuigt inderdaad met dit soort dingen..

[ Voor 4% gewijzigd door crisp op 10-11-2003 16:39 ]

Intentionally left blank

maandag 10 november 2003 16:41

Acties:
  • Vinzzz243
  • Registratie: Februari 2001
  • Laatst online: 22-01-2025

Vinzzz243

wtf crisp, dit werkt (bij 1e blik)...damn :)

maandag 10 november 2003 16:51

Acties:

Verwijderd

Topicstarter
crisp schreef op 10 november 2003 @ 16:37:
[...]

naais
*gloek* zou het ... :7 Ik gaat meteen testen.

[ Voor 11% gewijzigd door Verwijderd op 10-11-2003 16:52 ]

maandag 10 november 2003 17:11

Acties:

Verwijderd

Topicstarter
Ik heb nog een hele hoop extra aanpassingen moeten doen vanwege het navigatiemenu, maar het werkt! :'( Een historisch moment... 8)7...

Dank u allemaal :)

maandag 10 november 2003 17:14

Acties:
  • Vinzzz243
  • Registratie: Februari 2001
  • Laatst online: 22-01-2025

Vinzzz243

dit topic (of deze oplossing) moet je onder de tweakers brengen :) gaat veeeeeeeel toekomstige vragen sparen!!!

thx crisp!

maandag 10 november 2003 17:34

Acties:
  • disjfa
  • Registratie: April 2001
  • Laatst online: 08-01 11:17

disjfa

be

Vinzzz schreef op 10 november 2003 @ 17:14:
thx crisp!
heb jij m staan heb ik m staan ;)

disjfa - disj·fa (meneer)
disjfa.nl

maandag 10 november 2003 17:40

Acties:
  • Clay
  • Registratie: Oktober 1999
  • Laatst online: 25-02 11:17

Clay

cookie erbij?

Hij werkt idd :D zeer flex, maar crisp, met alle _o_ respect, ik wil wel een doctype! :{ Misschien dat je strict kan doen met een <?xml?> header, dan skipt IE ook de doctype en gaat die in quircks mode....

[ Voor 3% gewijzigd door Clay op 10-11-2003 17:41 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

maandag 10 november 2003 17:49

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:24

crisp

Devver

Pixelated

Clay schreef op 10 november 2003 @ 17:40:
Hij werkt idd :D zeer flex, maar crisp, met alle _o_ respect, ik wil wel een doctype! :{ Misschien dat je strict kan doen met een <?xml?> header, dan skipt IE ook de doctype en gaat die in quircks mode....
* crisp was te lui om een doctype to copy-pasten :P

ik heb dit trouwens gebruikt in een design dat er zo uitzag:

code:
1
2
3
4
5
6
7
8
9
10
11

+-----------------------+
|        Header         |
+---+---------------+---+
| L |               | R |
| e |    Content    | i |
| f |               | g |
| t |               | h |
|   |               | t |
+---+---------------+---+
|        Footer         |
+-----------------------+


(de truuk voor de 3 kolommen is wel aardig bekent inmiddels geloof ik)

[ Voor 5% gewijzigd door crisp op 10-11-2003 17:51 ]

Intentionally left blank

maandag 10 november 2003 17:52

Acties:
  • disjfa
  • Registratie: April 2001
  • Laatst online: 08-01 11:17

disjfa

be

ja maar als er een doctype bij zit vernaggelt ie m wel behoorlijk op in IE en opera :) en das niet al te handig. welk doctype had jij er dan bij? want ik heb hier al zogoed als alle doctypes erbij gezet.

ahzo :) ik zat al te kijken hoe dat dan moest :) idd goed..... nou nog operaproof maken ;( maar komt wel :)

vinizzzzz:
HTML:
1
2
3

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

[ Voor 44% gewijzigd door disjfa op 10-11-2003 18:00 ]

disjfa - disj·fa (meneer)
disjfa.nl

maandag 10 november 2003 17:55

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:24

crisp

Devver

Pixelated

disjfa schreef op 10 november 2003 @ 17:52:
ja maar als er een doctype bij zit vernaggelt ie m wel behoorlijk op in IE en opera :) en das niet al te handig. welk doctype had jij er dan bij? want ik heb hier al zogoed als alle doctypes erbij gezet.
Zie de opmerking van Clay, je moet een xml-header gebruiken tesamen met een XHTML doctype om IE in quircks mode te dwingen. In strict mode gaat IE(6) het W3C boxmodel gebruiken, en dan gaat het hele feest niet door.
Wat het is met Opera weet ik niet, die zou de box-sizing property moeten ondersteunen, maar blijkbaar is die gewoon nog niet goed geimplementeerd...

Intentionally left blank

maandag 10 november 2003 17:58

Acties:
  • Vinzzz243
  • Registratie: Februari 2001
  • Laatst online: 22-01-2025

Vinzzz243

ben maybe lui, maar zou je dan de complete code es kunnen posten crisp? (me snapt niet zoveel wrom doctypes gebruikt moeten worden enzo :D )

maandag 10 november 2003 18:51

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:24

crisp

Devver

Pixelated

dit is ook wel een leuke (complete code speciaal voor Vinzzz ;) ):

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

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

html, body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

#container {
  height: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
  -moz-box-sizing: padding-box;
}

#top {
  position: absolute;
  top:0px;
  left:0px;
  height: 80px;
  width: 100%;
  background-color: red;
}

#middlecontainer {
  position: relative;
  height: 100%;
}

#left {
  position: absolute;
  left: 0px;
  height: 100%;
  width: 80px;
  background-color: blue;
}

#middle {
  position: relative;
  height: 100%;
  margin-left: 80px;
  margin-right: 80px;
  background-color: yellow;
  overflow: auto;
}

#right {
  position: absolute;
  right: 0px;
  height: 100%;
  width: 80px;
  background-color: blue;
}

#bottom {
  position: absolute;
  bottom:0px;
  left:0px;
  height: 80px;
  width: 100%;
  background-color: red;
}

</style>
<body>
<div id="container">
  <div id="top">top</div>
  <div id="middlecontainer">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="middle">middle<br /><br />
      a lot of content here a lot of content here a lot of content here
      a lot of content here a lot of content here a lot of content here
      a lot of content here a lot of content here a lot of content here
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
    </div>
  </div>
  <div id="bottom">bottom</div>
</div>
</body>
</html>


ook goed in Opera \o/

Edit: meteen even naar Glish gestuurd - hopelijk doen ze nog steeds aan die beloning van 3750 dollar :P

[ Voor 5% gewijzigd door crisp op 10-11-2003 19:09 ]

Intentionally left blank

maandag 10 november 2003 19:46

Acties:
  • CrashOne
  • Registratie: Juli 2000
  • Niet online

CrashOne

oOoOoOoOoOoOoOoOoOo

Hmmm, de bovenste werkt nog niet juist in Opera 7, verder top!

edit:
getest in IE4, 5, 5.5, mozilla 1.5 en opera 7

[ Voor 34% gewijzigd door CrashOne op 10-11-2003 19:48 ]

Huur mij in als freelance SEO consultant!

maandag 10 november 2003 20:04

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:24

crisp

Devver

Pixelated

CrashOne schreef op 10 november 2003 @ 19:46:
Hmmm, de bovenste werkt nog niet juist in Opera 7, verder top!

edit:
getest in IE4, 5, 5.5, mozilla 1.5 en opera 7
zo wel:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

html, body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

#container {
  height: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
  -moz-box-sizing: border-box;
}

#top {
  position: absolute;
  top:0px;
  left:0px;
  height: 80px;
  width: 100%;
  background-color: red;
}

#content {
  position: relative;
  height: 100%;
  overflow: auto;
  background-color: yellow;
}

#bottom {
  position: absolute;
  bottom:0px;
  left:0px;
  height: 80px;
  width: 100%;
  background-color: red;
}

</style>
<body>
<div id="container">
  <div id="top">top</div>
  <div id="content">
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
  </div>
  <div id="bottom">bottom</div>
</div>
</body>
</html>


blijkbaar kiest Opera toch voor het IE-model, en is de box-sizing niet nodig ofzo :?

Intentionally left blank

dinsdag 11 november 2003 15:55

Acties:
  • Vinzzz243
  • Registratie: Februari 2001
  • Laatst online: 22-01-2025

Vinzzz243

tis niet de bedoeling, maar crisp: thx :)
gooi m in de faq ;)

dinsdag 11 november 2003 16:30

Acties:
  • McVirusS
  • Registratie: Januari 2000
  • Laatst online: 17-04 13:33

McVirusS

crisp, je bent m'n held... hier ben ik al keer 2 dagen mee bezig geweest...dacht dat ik alles geprobeert had. Het ziet er allemaal vrij logisch uit eigenlijk :o

dinsdag 11 november 2003 21:02

Acties:

Verwijderd

Topicstarter
Ik krijg alleen in het eerste voorbeeld van crisp een vreemde uitwerking. De bottom margin van 80px werkt hier niet in MSIE 6, tot het moment dat ik de browser resize. Dan is opeens het scrollbare gedeelte wel netjes 80px van onderen uitgelijnd. Er komt geen Javascript aan te pas, het is in dit geval echt iets in de renderen van IE.

Dit komt alleen voor als ik backgrounds ga toevoegen aan de top en bottom layer.

[ Voor 12% gewijzigd door Verwijderd op 11-11-2003 21:05 ]

woensdag 12 november 2003 09:19

Acties:
  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

crisp schreef op 10 november 2003 @ 20:04:
[...]

zo wel:
crisp is mijn held van de dag _/-\o_ (ff bijwerken in HK-topic). En elke keer verbaas je mij over de 'simpelheid' van dit soort dingen.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Pagina: 1
Reageer