Toon posts:

[CSS] 3 rows waarvan 2 vast

Pagina: 1
Acties:

Verwijderd

Topicstarter
de bekende layout. Een top en een bottom panel welke beiden vast staan.
Hiertussen een panel, welke indien nodig gescrolled moet kunnen worden.

Onderstaande code werkt perfect, zolang bij #content geen width aangegeven wordt.
Zodra ik hier een width aangeef, dan gaat deze in IE 6 fout. De div content valt dan onder de #bottom.

Hoe kan dit opgelost worden? (overigens in firefox werkt het wel)
Als ik op F11 druk in IE, en hierna nog eens, dan staat het ineens wel goed zoals het bedoeld is.

code:
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
<?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: 85px;
  padding-bottom: 35px;
  -moz-box-sizing: border-box;
}

#top {
  position: absolute;
  top:0px;
  left:0px;
  height: 85px;
  width: 100%;
  background-color: #0000FF;
}

#content {
  position: relative;
  height: 100%;
  width:50%;
  overflow: auto;
  background-color: #00FF00;
}

#bottom {
  position: absolute;
  bottom:0px;
  left:0px;
  height: 35px;
  width: 100%;
  background-color:#0000FF;
}

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


kijk op http://vno.webaddict.nl/test.htm wat ik bedoel.

[ Voor 20% gewijzigd door Verwijderd op 05-04-2005 19:39 ]


Verwijderd

Hmm ik heb het geopend met firefox en internet explorer, er staat een width in de #content div maar hij is precies hetzelfde in deze twee browsers hoor :)

Niets raars te zien dus.

Verwijderd

Topicstarter
die scrollbalk van dat content vlak loopt ook goed?
Bij mij is het namelijk zo dat het content vlak, onder de bottom loopt, en dus ook de scrollbalk van dat vlak... .. ik zal wel eens een screenshot plaatsen...

[ Voor 78% gewijzigd door Verwijderd op 06-04-2005 16:16 . Reden: . ]


Verwijderd

Topicstarter
Bij deze de screenshots...

zoals het niet moet zijn:
Afbeeldingslocatie: http://vno.webaddict.nl/images/fout.gif%20+%20http://vno.webaddict.nl/images/fout.gif

zoals het wel moet zijn:
Afbeeldingslocatie: http://vno.webaddict.nl/images/goed.gif%20+%20http://vno.webaddict.nl/images/goed.gif

  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

En als je je footer en header fixed met behulp van http://limpid.nl/lab/css/fixed/header-and-footer ?

DM!


Verwijderd

Topicstarter
hmmm... bijna...
in IE doe dat voorbeeld het wel, maar niet in Firefox ;)

  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

Hoe bedoel je? Ik kan in FF toch keurig zien wat er daar gebeurd? Wat zou er niet kloppen aan dat voorbeeld?

[ Voor 25% gewijzigd door JHS op 06-04-2005 19:23 ]

DM!


Verwijderd

Topicstarter
de scrollbalk loopt daar over de gehele hoogte van het scherm (ook naast de top en de bottom). Het is de bedoeling dat deze daar tussen valt...

Verwijderd

Overheen is juist mooier imho. Voor http://xopus.com/ is dat cross browser gelukt. (Wel met 'behavior' voor IE.)

Verwijderd

Topicstarter
het gaat er hier niet om wat mooier is, maar om de functionaliteit.
Er moeten 3 panels komen te staan, welke alle drie (indien nodig) moeten scrollen.. Er overheen is dus absoluut geen optie.. Het moet er echt tussen vallen....

  • Boelie-Boelie
  • Registratie: November 2004
  • Laatst online: 26-09-2020

Cogito ergo dubito


Verwijderd

Topicstarter
precies! een dergelijke layout moet het hebben!
Heel erg bedankt, nu nog kijken naar de code ;)

  • Woudloper
  • Registratie: November 2001
  • Niet online

Woudloper

« - _ - »

Deze ziet er leuk uit, maar is niet geheel gebruiksvriendelijk aangezien de scrollwiel niet werkt om door de tekst heen te scrollen...

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Woudloper schreef op donderdag 07 april 2005 @ 06:50:
Deze ziet er leuk uit, maar is niet geheel gebruiksvriendelijk aangezien de scrollwiel niet werkt om door de tekst heen te scrollen...
Dat is dan alleen in Firefox! Voor zover ik me kan herinneren lag dat vooral aan de browser...

Verwijderd

Topicstarter
Onder IE werkt het inderdaad gewoon met de scrollwheel...
Echter FF heeft wat problemen met divs met overflow:auto of :scroll...

https://bugzilla.mozilla.org/show_bug.cgi?id=97283

Voor zover ik weet is er geen workaround voor... Tenzij ik het niet kan vinden?

  • bonwon
  • Registratie: September 2004
  • Laatst online: 30-01-2019
Toevallig was ik met dezelfde lay-out bezig toen ik deze thread tegenkwam. Dank voor links en opmerkingen! Met de link van Boelie boelie naar Stuart Nicholls ben ik verder gegaan. Enige nadeel vond ik dat het hier een XHTML met XML declaratie betrof, waardoor MSIE in quirksmode schiet en andere browsers (netjes) niet.

Met enig uitproberen ben ik op de volgende CSS (met voor MSIE hack op hack) gekomen, die werkt voor HTML4.01 en XHTML1.0 (met en zonder XML declaratie). Enkel kunnen testen met laatste versies van Firefox, MSIE en Opera onder Windows XP. So far, good :)

Graag jullie commentaar en jullie test-resultaat met andere browsers!
http://www.xs4all.nl/~bonwon/css3rows/

  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

Zolang je niet kan scrollen, vind ik het geen effectieve oplossing :) , en dan ga ik, ondanks dat de scrollbalk langs het geheel staat toch voor deze :) .

DM!


  • Boelie-Boelie
  • Registratie: November 2004
  • Laatst online: 26-09-2020
@bonwon:
Heb ff met IE5.01/win gekeken, het werkt. Heb wel een probleem met terug naar introductie gaan: lukt alleen na reload.

@JHS:
Scrollen werkt bij jouw oplossing ook niet met IE5.01/win. Wel in FF en IE6/win overigens. En die lange scrollbalk loopt bij FF over de hele hoogte, maar bij IE5.01 en IE6 alleen langs het middenstuk.

Cogito ergo dubito


  • bonwon
  • Registratie: September 2004
  • Laatst online: 30-01-2019
@boelie-boelie: dank je! Ik heb vervolgens oude browsers gedownload (had ik natuurlijk eerder moeten doen!) en bekeken wat aan de hand is. Als ik de <li>..</li> uit de code weghaal, dan werkt het wel gewoon: vreemd, maar het is! Maakt de "oplossing" daardoor minder werkbaar, want ik kan gebruikers van de template lastig verplichten om geen list-items op te nemen.

  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

Boelie-boelie: I know. Maar IE 5.0 vind ik persoonlijk zoiezo niet echt een interressante doelgroep, iig niet voor de dingen die ik produceer :) .

DM!


Verwijderd

Topicstarter
JHS schreef op vrijdag 08 april 2005 @ 10:58:
Zolang je niet kan scrollen, vind ik het geen effectieve oplossing :) , en dan ga ik, ondanks dat de scrollbalk langs het geheel staat toch voor deze :) .
En probeer dan eens op deze manier ipv 1 contentblok, er 3 naast elkaar te zetten, welke allemaal tussen de top en de bottom vallen. Indien nodig, moeten ze stuk voor stuk ook kunnen scrollen via een scrollbalk.
Als er slechts één contentblok zou zijn, ja, dan zou ik ook voor die oplossing gaan, maar dat is in deze situatie denk ik niet het geval.

  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

Vince-EAls dat het geval is, dan is dat inderdaad niet mogelijk :) . Maar meestal heb je niet meer dan één blok dat moet scrollen... Tenminste, naar mijn ervaring..

DM!

Pagina: 1