[HTML / CSS] Ruimte bovenin beeld leeg houden bij scrollen

Pagina: 1
Acties:

Acties:
  • 0 Henk 'm!

  • BratMokstrof
  • Registratie: Mei 2003
  • Laatst online: 08-07 22:09
Ik ben bezig een site op te zetten, die er als volgt uit moet gaan zien:

links: navigatie, aparte div, scrollt niet mee.
rechts: content, verticale scrollbar als er teveel tekst is voor één scherm.

Boven de content is een "witruimte", d.w.z. dat de content dus niet helemaal boveninbeeld begint.

navigatie<witruimte>
meer navigatiecontent


De witruimte heb ik gecreeërd door de content-div een top van 150px; te geven. Echter, op het moment dat er naar beneden wordt gescrolled, wordt de witruimte wel gevuld (namelijk met de tekst die nu naar boven komt), en dat wil ik niet: ik wil dat die ruimte altijd wit blijft.

Is dit mogelijk en zo ja: hoe?
>> Alvast bedankt. :)

Acties:
  • 0 Henk 'm!

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Leuk hoe je tabel in elkaar zit, maar geef eens een test-case met HTML + CSS en leg dan nog een keer uit wat je graag wilt bereiken.

Nu lijkt je topic wel heel erg op een "kan iemand dit even voor me fixen?" :)

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.


Acties:
  • 0 Henk 'm!

  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 06-02 08:32

OkkE

CSS influencer :+

Je kunt de "Content" een overflow:auto meegeven, zodat deze een beetje op een iframe gaat lijken, qua werking. Of je kunt de witruimte maken door daar een div met position:absolute te zetten, waar je content onderdoor scrolled.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


Acties:
  • 0 Henk 'm!

  • BratMokstrof
  • Registratie: Mei 2003
  • Laatst online: 08-07 22:09
BtM909 schreef op dinsdag 10 juni 2008 @ 10:50:
Leuk hoe je tabel in elkaar zit, maar geef eens een test-case met HTML + CSS en leg dan nog een keer uit wat je graag wilt bereiken.

Nu lijkt je topic wel heel erg op een "kan iemand dit even voor me fixen?" :)
Oh, excuus, dat is uiteraard absoluut niet wat ik bedoelde! Was oprecht in de veronderstelling dat dit voldoende info zou zijn en wilde juist geen onnodige info meegeven, maar bij deze dan wat code voorbeelden:

De CSS:
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
*
{
  margin:  0;
  padding: 0;
}

body
{
  font-size:   0.7em;
  font-family: Georgia;
}

#navigatie {
  width: 19em;
  float: left;
  position: fixed;
  top: 15px;
  left: 15px;
}

#content {
  position:absolute;
  top: 180px;
  left: 21em;
}

...


De HTML:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel = "stylesheet" type = "text/css" href = "css/style.css">

</head>

<body>
<div id="navigatie">
<a href = "index.php"><img src = "images/site/lb.jpg" alt = "Menu" border = "0"></a>
<div class = "hrshort"></div>
<ul class = "navlist">
  <li><b>About</b></li>
</ul>
<br />
<div class = "hrshort"></div>
<ul class = "navlist">
  <li><b>Blabla</b></li>
</ul>
</div>
<div id="content">
<b>Welcome!</b><br /><br />
<div class = "hr">&nbsp;</div>

<img src = "images/site/main.jpg">

</div>
</body>
</html>


Zoals ik in de eerste post al meldde, is de content verlaagd door de regel "top: 180px;" in de CSS onder de #content.
Echter doordat main.jpg een heel hoog plaatje is, ontstaat een scrollbalk. En op het moment dat ik dan naar beneden scroll wordt de 180px hoge ruimte alsnog gevuld... :(

@Okke: overflow: auto ga ik naar kijken en die andere suggestie: daar heb ik ook aan zitten denken, maar is dat elegant...?

Acties:
  • 0 Henk 'm!

  • H004
  • Registratie: Maart 2006
  • Laatst online: 28-05 19:55
Overflow: auto is waarschijnlijk ook helemaal niet nodig. Plaats een absolute witte div over de 180px die wit moeten blijven:

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
<!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">
<head><title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body {
        margin:         0;
        padding:        0;
}

#navigatie {
        width:          200px;
        height:         400px;
        float:          left;
        position:       fixed; /* IE6 ondersteunt fixed niet, dus t zal niet werken in ie6 */
        top:            0;
        left:           0;
        background:     green;
}

#content {
        margin-left:    200px;
        padding-top:    180px;
        width:          600px;
        height:         1400px;
        background:     red;
} 

#witruimte {
        position:       fixed; /* IE6 ondersteunt fixed niet, dus t zal niet werken in ie6 */
        z-index:        1000;
        top:            0;
        left:           200px;
        width:          600px; /*Zelfde breedte als #content */
        height:         180px; /*Zelfde hoogte als #content-padding-top */
        background:     white;
}
</style>

</head>

<body>

        <div id="navigatie"></div>
        <div id="witruimte"></div>
        <div id="content">
        
                <p>test</p><p>test</p><p>test</p><p>test</p>
                <p>test</p><p>test</p><p>test</p><p>test</p>
                <p>test</p><p>test</p><p>test</p><p>test</p>
                <p>test</p><p>test</p><p>test</p><p>test</p>
                <p>test</p><p>test</p><p>test</p><p>test</p>
                <p>test</p><p>test</p><p>test</p><p>test</p>
        
        </div>

</body>
</html>

[ Voor 6% gewijzigd door H004 op 10-06-2008 17:46 ]


Acties:
  • 0 Henk 'm!

  • BratMokstrof
  • Registratie: Mei 2003
  • Laatst online: 08-07 22:09
Witte div geplaatst en werkt idd. Super, onwijs bedankt! :D

Alleen vraag ik me af... Is dit "netjes" en/of elegant? Voelt een beetje als cheaten. ;)
Is er geen nettere manier mogelijk (of is dit gewoon netjes?)

Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 22:57

Bosmonster

*zucht*

BratMokstrof schreef op woensdag 11 juni 2008 @ 08:44:
Witte div geplaatst en werkt idd. Super, onwijs bedankt! :D

Alleen vraag ik me af... Is dit "netjes" en/of elegant? Voelt een beetje als cheaten. ;)
Is er geen nettere manier mogelijk (of is dit gewoon netjes?)
Gewoon basic CSS is toch wel netjes? :P

Alleen IE6 pakt position:fixed niet, maar daar zou je een javascript oplossing voor kunnen toevoegen eventueel.

Acties:
  • 0 Henk 'm!

  • BratMokstrof
  • Registratie: Mei 2003
  • Laatst online: 08-07 22:09
Bosmonster schreef op woensdag 11 juni 2008 @ 09:24:
[...]


Gewoon basic CSS is toch wel netjes? :P

Alleen IE6 pakt position:fixed niet, maar daar zou je een javascript oplossing voor kunnen toevoegen eventueel.
Ja, op zich wel basic CSS, maar een leeg ding neerzetten op een pagina waar andere dingen achterlangs scrollen...
Bijkomend nadeel is dat de breedte van de content variabel kan zijn (mogelijk zelfs leiden tot horizontale scrollbalkken). Moet even kijken of het extreem breed zetten van die witruimte zal leiden tot horizontale scrollbalken, zo niet kan het, anders moet ik toch even zien hoe of wat.

En als hij die fixed niet pakt, scrollt alles gewoon het beeld uit toch (het menu én die witruimte). Op zich zou dat er dan toch niet heel gek uit moeten zien, behalve dan dat het niet helemaal designed behaviour is?

Acties:
  • 0 Henk 'm!

  • H004
  • Registratie: Maart 2006
  • Laatst online: 28-05 19:55
Beide problemen (fixed bestaat niet in IE6, en variabele breedte) kun je simpel oplossen met wat javascript, zodat t in elke browser, en op elk scherm goed werkt.
Pagina: 1