Toon posts:

[CSS] Faux columns én 100 procent hoog

Pagina: 1
Acties:

dinsdag 24 april 2007 11:03

Acties:

Verwijderd

Topicstarter
Ik zit er nu al even op vast, en vooral omdat ik een soort van mengvorm wil, zijn niet alle tutorials voor mijn situatie geknipt.

Dit is het ontwerp:
Afbeeldingslocatie: http://users.telenet.be/toongorissen/csstest/design.jpg

En deze code heb ik 'al':
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
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

<!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" lang="en" xml:lang="en">
    <head>
        <title>Layout met 100% hoogte</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
*{
padding:0;
margin:0;
}
p {
padding: 1em 0;
line-height: 1.5em;
}
html, body {
height: 100%; /* heel belangrijk */
font: 1.0em "Trebuchet MS", Verdana, Arial, sans-serif;
color: #000;
background: #C63;

}
#container {
    width: 700px;
    margin: 0;
    text-align: left;
    position: relative;
    min-height: 100%;
    height: auto !important; /* voor moderne browsers */
    height: 100%; /* voor IE */
    background: #f5f5f0 url(plooi.jpg);
    background-position: 150px;
    background-repeat: repeat-y;
}
#leftcontent {
    float: left;
    clear: left;
    width: 250px;
    min-height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: red;
}
#rightcontainer {
    margin-left: 250px;
    position: relative;
    min-height: 100%;
    height:auto !important; /* voor moderne browsers */
    height:100%; /* voor IE */
    background: blue;
}
#rightcontent {
    position: relative;
    min-height: 100%;
    height:auto !important; /* voor moderne browsers */
    height:100%; /* voor IE */
    background: blue;
    background: url(blad_boven.jpg);
    background-position: top right;
    background-repeat: no-repeat;
}
#header{
    padding-left:20px;
    height:110px;
    font-size:1.3em;
    background: #859C0E;
    line-height: 60px;
    border-bottom: 1px solid #555;
}
#inhoud {
    padding: 0px;
}
#footer {
position: absolute;
bottom: 0; /* heel belangrijk */
margin-left: 250px;
width: 450px;
background-color: #f5f5f0;
height: 40px;
text-align: center;
background-image: url(blad_onder.jpg);
background-position: bottom right;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="container">

<div id="inhoud">
    <div id="leftcontent">
        <p>Jeez, one aesthetic quail acceptably forgot behind some frightening human. Hmm, a bee is less tardy than a incongruous grizzly bear. Umm, the worm is less excursive than this flagrant hippopotamus. Um, the tamarin is far less obedient than a subversive wallaby.</p>

        <p>Uh, one exulting squirrel bearishly grimaced excepting that objective crane. Gosh, the inappreciable fish sufficiently froze for this imperative terrier.</p>
    </div>
    <div id="rightcontainer">
        <div id="rightcontent">
            <p>Jeez, one aesthetic quail acceptably forgot behind some frightening human. Hmm, a bee is less tardy than a incongruous grizzly bear. Umm, the worm is less excursive than this flagrant hippopotamus. Um, the tamarin is far less obedient than a subversive wallaby.</p>

            <p>Uh, one exulting squirrel bearishly grimaced excepting that objective crane. Gosh, the inappreciable fish sufficiently froze for this imperative terrier.</p>
        </div>
    </div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>


Je kan het hier live bekijken. Zoals je ziet moet er nog zo'n paginarandje in de volledige hoogte van de div 'rightcontent' komen. Zit ik in de buurt, of sla ik met deze opzet de plank mis? Ik vrees nu al voor dat tekstblokje links onder... :|

Het is mijn eerste echte divsite, dus correcties op het gebied van redeneringen zijn ook welkom.

dinsdag 24 april 2007 11:56

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 18-11 20:27

Sappie

De Parasitaire Capaciteit!

Hij wordt, als ik het goed zie, niet in het midden van het venster gepositioneerd? Kun je dan geen background toepassen op bijv de html.. of de body?

Ik zou het anders aanpakken, maar je kan er zo vast uitkomen.

Specs | Audioscrobbler

dinsdag 24 april 2007 12:08

Acties:

Verwijderd

Topicstarter
Sappie schreef op dinsdag 24 april 2007 @ 11:56:
Hij wordt, als ik het goed zie, niet in het midden van het venster gepositioneerd? Kun je dan geen background toepassen op bijv de html.. of de body?

Ik zou het anders aanpakken, maar je kan er zo vast uitkomen.
Nee, vertel! Hoe zou je het doen? :o

dinsdag 24 april 2007 13:18

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 18-11 20:27

Sappie

De Parasitaire Capaciteit!

Een beetje meer input zou handig zijn.. heb je toevallig de psd van de layout.. ja ik heb nix beters te doen, ga zo naar de stad :)

[ Voor 10% gewijzigd door Sappie op 24-04-2007 13:19 ]

Specs | Audioscrobbler

dinsdag 24 april 2007 13:27

Acties:

Verwijderd

Jouw keuze voor een 100% hoogte site met een footer is vrij ingewikkeld. De footer positioneer je namelijk absolute. Maak het venster maar eens in de hoogte klein zodat je een verticale scrollbalk krijgt en scroll naar beneden.

Ik zou de footer weglaten. op het plaatje heb je hem ook niet. Verder zou ik idd de body de plooi.jpg geven.

dinsdag 24 april 2007 13:43

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 18-11 20:27

Sappie

De Parasitaire Capaciteit!

Naja ik ben er weg van.. bij deze geef ik je ff een behoorlijke zet :) ajb
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
97
98
99
100
101

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>test</title>
    <style type="text/css">      
        * { 
         font-family: arial
         font-size: 11px;
        }
        
        .invisible { display: none; }
        
        h2 { 
            background: #5C5C5A;
            width: 303px;
            height: 28px;
            padding: 2px 5px;
            font-size: 20px;
            font-weight: bold;
            color: white;
                    margin: 0 0 10px 0;
        }
        
        h1, h3, h4, p { margin: 10px 0; }
        
        html {
          margin: 0; 
          height: 100%; 
          background:  #F4F5F0;
        } 
        
        body {
          position: relative; 
          min-height: 100%; 
          width: 600px;
          margin: 0;           
          background: #F4F5F0 url('background-image.gif') repeat-y top left;  
        }
       
            #header {
            width: 200px;
            height: 78px;
            background: red;
            padding: 5px;
            font-weight: bold;
            padding: 22px 0 0 400px; 
            font-size: 11px;
            }
                
        #content {
          width: 313px; 
          padding: 10px;
          margin: 0 0 0 185px;          
        }
        
        #footer {
          position: absolute; 
          bottom: 0;
          left: 0;
          width: 600px;
          height: 100px;            
          background: yellow;
        }              
        
       #menu {
        position: absolute;
        top: 70px;
        left: 20px;
        list-style: none;
       }
       
       #menu li a {
         text-decoration: none;
         color: black;
         font-weight: black; 
       }
    
  </style>
  <!--[if lt IE 7]>
      <style type="text/css">
          div#footer { bottom: expression((document.body.clientHeight % 2) ? "-1px" : "0" ); }
          body { height: 100%; }
      </style>
    <![endif]-->
</head>
<body>
    <h1 class="invisible">site naam</h1>
    <div id="header">Nunc auctor bibendum eros.</div>
    <h2 class="invisible">Menu</h2>
    <ul id="menu">
        <li><a href=# title="blaat">Item 1</a></li>
        <li><a href=# title="blaat">Item 2</a></li>
        <li><a href=# title="blaat">Item 3</a></li>
    </ul>
    <div id="content">
        <h2>sfeerprojecten</h2>
    </div>
    <div id="footer">lorem ipsum...</div>
</body>
</html>

Specs | Audioscrobbler

dinsdag 24 april 2007 13:51

Acties:
  • Zerora
  • Registratie: September 2003
  • Laatst online: 30-11 22:30

Zerora

Ik Henk 'm!

Misschien dat je wat aan deze link hebt :)
http://www.code-sucks.com/css%20layouts/faux-css-layouts/

Ik zelf ben hier afgelopen paar dagen ook mee bezig geweest en die site had na het gepruts van mij een mooie oplossing :)

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

dinsdag 24 april 2007 13:58

Acties:

Verwijderd

Topicstarter
Verwijderd schreef op dinsdag 24 april 2007 @ 13:27:
Jouw keuze voor een 100% hoogte site met een footer is vrij ingewikkeld. De footer positioneer je namelijk absolute. Maak het venster maar eens in de hoogte klein zodat je een verticale scrollbalk krijgt en scroll naar beneden.

Ik zou de footer weglaten. op het plaatje heb je hem ook niet. Verder zou ik idd de body de plooi.jpg geven.
Inderdaad, die footer is ook al niet in orde. Maar ik heb 'em wel nodig, denk ik - onderaan het rechterblad staat een grafisch grapje: 'pagina 123 - titel van de pagina'.

Het psd-bestand vind je hier - het is wel een tikje slordig geördend, maar met de move tool en de rechtsklik in de hand, kom je door het hele land? :s :)

dinsdag 24 april 2007 14:00

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 18-11 20:27

Sappie

De Parasitaire Capaciteit!

Ik moet er echt vandoor en bovendien denk ik dat ik je al genoeg op weg geholpen heb. suc6! :)

Specs | Audioscrobbler

woensdag 25 april 2007 16:31

Acties:

Verwijderd

Topicstarter
Heel erg bedankt Sappie! Maar hij doet iets geks. Ik stop er drie screenshotjes bij:

Afbeeldingslocatie: http://users.telenet.be/toongorissen/drop/1.gif
Dit is nog normaal.

Afbeeldingslocatie: http://users.telenet.be/toongorissen/drop/2.gif
Wanneer ik de hoogte van de browser verminder, komt de footer over de content. Dat lijkt me een gevolg van die absolute positionering. Is dit op te lossen?

Afbeeldingslocatie: http://users.telenet.be/toongorissen/drop/3.gif
Ik wil het dus eigenlijk zo - nagemaakt in Photoshop.

Spelen met de height en min-height property van de contentdiv heeft niet het gewenste effect - die div zou altijd de footer moeten raken om zo de scrollbars juist te laten reageren.

woensdag 25 april 2007 16:40

Acties:
  • Zerora
  • Registratie: September 2003
  • Laatst online: 30-11 22:30

Zerora

Ik Henk 'm!

Kijk anders eens hier:

http://www.strictlycss.co...three-column-layout-6.asp

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

Pagina: 1
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq