Toon posts:

[CSS] Indeling van 3 rijen met boven en onder fixed

Pagina: 1
Acties:

vrijdag 26 augustus 2005 15:40

Acties:

Verwijderd

Topicstarter
Helaas kom ik er echt niet meer uit, ik heb gezocht in CSS tutorials, gezocht naar layouts met 3 rijen zoals ik het wil hebben, maar ik kan het niet vinden, en ik twijfel of het eigenlijk zelfs mogelijk is met CSS.

Mijn probleem is als volgt:

Ik wil een pagina maken met daarin 3 rijen, zeg top, center, bottom. Het totaal moet een hoogte van 100% hebben (het browser venster dus). Hiervan wil ik top en bottom een vaste hoogte geven, en center moet de rest van de hoogte nemen, waarbij ik overflow met een scroll bar wil afhandelen.

Nu wil ik dit dus voor elkaar krijgen zonder frames of tables en het liefst zonder javascript oplossingen. Wat het grote probleem is is dat height naar mijn weten niet kan worden gezet naar "rest" of iets dergelijks. Met inherit krijg ik (zoals ik de divs heb gestructureerd in ieder geval) zoals wel logisch is 100%, met als gevolg dat hij onder uit steekt.

Nu heb ik het voor elkaar gekregen in firefox, maar het werkt niet in internet explorer, waarschijnlijk omdat het een beetje een hack is.

Voorbeeld (werkt alleen in firefox)

Ik heb de containers als volgt gestructureerd:

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

<div id="main">

<div id="top">
</div>

<div id="center">
</div>

<div id="bottom">
</div>

</div>


En dit als stylesheet (wat dus niet helemaal lekker werkt):

Cascading Stylesheet:
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

#main{
  width:600px;
  height:100%;
  background-color:#000000;
}

#top{
  background-color:#FF0000;
  height:70px;
}

#center{
  background-color:#00FF00;
  overflow:auto;
  position:absolute;
  width:inherit;
  top:70px;
  bottom:70px;
}

#bottom{
  background-color:#0000FF;
  position:absolute;
  width:inherit;
  height:70px;
  bottom:0px;
}


Nu weet ik dat het zo gepiept is met bijvoorbeeld frames, en dat je met javascript eventhandlers ook wel de hele tijd kan berekenen hoe hoog center moet worden, maar ik heb het idee dat ik gewoon iets over het hoofd zie ofzo.

Edit: nog wat vergeten te schrijven, ik heb al geprobeerd om met margins te werken, alleen werken de scroll bars dan weer niet mee (ze worden niet beinvloed door de margins). Ook weet ik dat het zo opgelost is door met percentages te werken voor top en bottom, alleen wil ik echt een vaste hoogte in pixels.

[ Voor 11% gewijzigd door Verwijderd op 26-08-2005 15:42 . Reden: wat vergeten toe te voegen ]

vrijdag 26 augustus 2005 16:01

Acties:
  • MaNdM
  • Registratie: April 2001
  • Laatst online: 22:23

MaNdM

1000-dingen-doekje

Ik heb een vergelijkbaar ontwerp een keer gemaakt en toen heb ik het relatief eenvoudig aangepakt.

Het principe is heel simpel maar wel effectief, je maakt een container die schermvullend is. In die container plaats je vervolgens je boven en onderbalk en je contentbalk. In mijn geval is er ook nog sprake van een menu aan de linkerzijde. De CSS ziet er zo uit:

Cascading Stylesheet:
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

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

#top {
    position: absolute;
    top:0px;
    left:0px;
    height: 75px;
    width: 100%;
    text-align: right;
    line-height: 0em;
}

#menu {
    position: absolute;
    top:75px;
    left:0px;
    height: 100%;
    width: 190px;
    border: none;
    overflow: hidden;
    padding-top: 90px;
    z-index: 10;
}

#content {
    position: relative;
    height: 100%;
    overflow: auto;
    margin-left: 10px;
    padding-left: 190px;
    padding-right: 110px;
    padding-bottom: 10px;
}

#bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 20px;
    width: 100%;
    text-align: right;
}


En de html ziet er zo uit:

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

<?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>
        <META NAME="ROBOTS"                 CONTENT="Index, follow">
        <META NAME="REVISIT-AFTER"          CONTENT="30 days">

        <META HTTP-EQUIV="CONTENT-TYPE"     CONTENT="text/html; charset=iso-8859-1">
        <META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="NL">
<link rel="stylesheet" href="blauw.css" type="text/css" />
<script type="text/javascript" src="java/blue_menu.js"></script>
<title>Sitenaam</title>
<body>

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


Als het goed is moet je nu een heel eind op weg komen. ;)

To be determined...

vrijdag 26 augustus 2005 16:36

Acties:

Verwijderd

Meer info vind je ook in de discussie [CSS] 3 rows waarvan 2 vast.
Houd bij de oplossing in de gaten of het gaat om quirks/strict mode.

vrijdag 26 augustus 2005 16:52

Acties:

Verwijderd

Topicstarter
Heel erg bedankt, uiteindelijk heb ik uit het andere topic de layout van deze site bestudeerd. Met wat knip en plak werk werkt het. Het lijkt er op dat het probleem lag in de andere wijze van afhandelen door IE. In firefox werkt mijn oplossing (in de link in de topic start), maar IE pakt dit niet. Voor IE is er een andere definitie nodig, namelijk (nu nog even schaamteloos ge copy paste)
Cascading Stylesheet:
1
2
3
4
5
6
7

* html #center {
 height:100%;
 top:0;
 bottom:0;
 border-top:70px solid #fff;
 border-bottom:70px solid #fff;
}


Nu snap ik nog niet helemaal wat dit doet, maar dat ga ik nu uitzoeken, bedankt!

Edit: Ah ik zie al wat het doet, het is gewoon een hack ;), gewoon even een hele dikke border er omheen gooien.

[ Voor 9% gewijzigd door Verwijderd op 26-08-2005 16:53 ]

Reageer