[HTML\CSS] Scrollbar komt niet in het juiste div-element.

maandag 28 januari 2008 22:43

...

Topicstarter

Ik zie dat ik inderdaad de hoogte ben vergeten. Met height: 100% komt de scrollbar netjes in de div.
Maar met IE 7 blijft de scrollbar dus helemaal aan de rechterkant staan.

@FritsYpeij:
Zoals ik al heb aangegeven, komt de css later. Ik wil eerst de basisstructuur van de site goed hebben.

Straks ga ik ook met JavaScript een aantal bewerkingen doen voor de gebruiker, en dan gebruik ik de functie GetElementById. Vandaar dat ik al een ID heb ingevuld, maar nu wordt dat nog niet gebruikt.

Speel ook Balls Connect en Repeat

Acties:

dinsdag 29 januari 2008 15:52

...

Topicstarter

Kick:

Ik heb nog heel wat geëxperimenteerd, maar ik kom niet verder.

De basics van de site die FritsYpeij mij geeft ken ik inmiddels wel. Mij lukt het zelfstandig ook om die boxes zo neer te zetten.

Ik wil juist bereiken dat de div in de horizontale richting even groot blijft en in het midden staat, maar dat de afstand tot de bovenkant en tot de onderkant in pixels gegeven zijn. Daarbij komt nog bij dat de bij "overflow" er netjes een scrollbar in de div komt te staan en de pagina zelf niet gescrold wordt.
Anders kan ik net zo goed met frames aan de gang.

Speel ook Balls Connect en Repeat

Acties:

Verwijderd

Je kan de scrollbalken van het venster uitschakelen en bijv scrollbalken in de div forceren.

Cascading Stylesheet:

1
2
3

html { overflow:hidden; }
/* identifier niet gecontroleerd, maar je begrijpt het idee denk ik wel...*/
div#MainContent { overflow-x:hidden; overflow-y:scroll; }

Voor de rest vraag ik me af of dit zo gaat werken, ik denk namelijk dat de divjes met scrollbalken een fixed height moeten hebben.

dinsdag 29 januari 2008 20:56

Acties:

dinsdag 29 januari 2008 23:45

Obey your screen!

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body style="margin: 0">
    <div id="MainContent" style="position:absolute; width:100%;margin: 0px; top: 130px; bottom: 70px; background-color: transparent; ">
    <div id="cont" style="float:left; width:100%;">
        <div id="MainContentCenter"  style="position:relative; margin:auto; width: 500px; height:200px;    overflow: auto;">
             http://www.lipsum.com/feed/html

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

margin-top en bottom kun je zelf wel plaatsen.

Verder zou ik eens een cursus XHTML en CSS doen, HTML4 doctype mag nou wel es een keer verdwijnen.

[ Voor 16% gewijzigd door Zillion01 op 29-01-2008 21:11 ]

Acties:

woensdag 30 januari 2008 00:07

...

Topicstarter

Bedankt voor de reacties, ik kan morgenavond pas weer verder testen.

Zillion01 schreef op dinsdag 29 januari 2008 @ 20:56:
Verder zou ik eens een cursus XHTML en CSS doen, HTML4 doctype mag nou wel es een keer verdwijnen.

Ik heb verder een aantal websites gemaakt met xhtml en dat is me vrij goed bevallen.
Maar ik kom met xhtml op een aantal punten uit die ik niet kan oplossen terwijl mij dat wel lukt met html Transitional. (Voor dit voorbeeld kan ik inderdaad xhtml gebruiken i.c.m. css.)
Verder heb ik inmiddels begrepen dat binnenkort versie 5 van html een standaard wordt en geen xhtml.

Speel ook Balls Connect en Repeat

Acties:

Kiphaas7

Zillion01 schreef op dinsdag 29 januari 2008 @ 20:56:
Verder zou ik eens een cursus XHTML en CSS doen, HTML4 doctype mag nou wel es een keer verdwijnen.

Eh, er is niks mis met een html 4 doctype.... Deze site(tweakers) gebruikt het ook gewoon. En ja, dat is net zo'n non-argument als dat html4 wel eens mag verdwijnen.

[ Voor 18% gewijzigd door Kiphaas7 op 30-01-2008 00:08 ]

woensdag 30 januari 2008 01:58

Acties:

woensdag 30 januari 2008 02:16

Obey your screen!

Kiphaas7 schreef op woensdag 30 januari 2008 @ 00:07:
[...]

Eh, er is niks mis met een html 4 doctype.... Deze site(tweakers) gebruikt het ook gewoon. En ja, dat is net zo'n non-argument als dat html4 wel eens mag verdwijnen.

Tsja als je niet voor recommendations van W3 gaat ben je blijkbaar slimmer. Vermoedelijk vind je het ook leuk om nog wysiwyg tabelletjes te genereren. Ik ken geen enkele vormgeving die niet met XHTML 1.1 strict te maken is.

[ Voor 9% gewijzigd door Zillion01 op 30-01-2008 02:04 ]

Acties:

Verwijderd

HTML 4.01 is een W3 recommendation. Vermoedelijk verstuur jij je XHTML gewoon als incorrecte text/html naar de browser.* Ik ken geen enkele vormgeving die niet met HTML 4.01 strict te maken is.

* Of geef je de vinger aan Internet Explorer? In dat geval:

Maar wel jammer voor 70% van de mensheid die een witte pagina ziet.

[ Voor 33% gewijzigd door Verwijderd op 30-01-2008 02:20 ]

woensdag 30 januari 2008 02:30

Acties:

woensdag 30 januari 2008 02:36

Obey your screen!

Wel een oude recommendation hoor, XHTML is nieuwer.

Als je fatsoenlijk in XHTML en CSS bouwt heb je geen problemen met Internet Explorer 6. Het zegt echter wel iets over je (kortzichtige) houding als webdesigner dat je je nog immer met HTML4 bezig houdt..

Voordelen XHTML :

* Duurzaamheid.
Toepassingen op het Web bewegen richting XML. Het nu al gebruiken van XHTML in plaats van HTML maakt een eventuele toekomstige overgang van een website eenvoudiger.
* Uitbreidbaarheid.
Vanwege de uitbreidbaarheid (extensibility) van XML, kunnen XHTML documenten via namespaces aangevuld worden met andere vormen van markup, zoals MathML (Math Markup Language) en SVG (Scalable Vector Graphics), of eigen markup varianten. Browsers die dergelijke toepassingen ondersteunen zijn echter zeer dungezaaid.
* Uitwisselbaarheid.
Omdat XHTML documenten geschreven zijn volgens regels van XML, kost het XML verwerkende programma’s weinig moeite om een XHTML bestand naar een bestand van een ander formaat (bijv., PDF, RSS of RTF) om te zetten.
* Efficiëntie van verwerkende applicaties.
Wanneer browsers ondersteuning gaan bieden voor XHTML documenten en de strikte regels van XML, zullen ze sneller kunnen worden vanwege kortere foutafhandelingsroutines. Op dit moment nog gaat een groot deel van de verwerkingskracht van een browser op aan liberale foutafhandeling van documenten die misvormde HTML markup bevatten. Dit is de erfenis van een snel, maar chaotisch groeiend internet.

[ Voor 76% gewijzigd door Zillion01 op 30-01-2008 02:38 ]

Acties:

left part of the evil twins

Zillion01 schreef op woensdag 30 januari 2008 @ 01:58:
[...]

Tsja als je niet voor recommendations van W3 gaat ben je blijkbaar slimmer. Vermoedelijk vind je het ook leuk om nog wysiwyg tabelletjes te genereren. Ik ken geen enkele vormgeving die niet met XHTML 1.1 strict te maken is.

In welke recommendation raadt het W3C in godesnaam af om HTML 4.01 te gebruiken?

Zal ik het je nog sterker vertellen.... het W3C is al geruime tijd bezig met HTML5, en als je daar even de meest recente working draft van opent zie je:

quote: http://www.w3.org/html/wg/html5/
This specification is intended to replace (be the new version of) what was previously the HTML4, XHTML 1.x, and DOM2 HTML specifications.

Of iets verder naar beneden:

1.1.1. Relationship to HTML 4.01, XHTML 1.1, DOM2 HTML

This specification represents a new version of HTML4 and XHTML1, along with a new version of the associated DOM2 HTML API. Migration from HTML4 or XHTML1 to the format and APIs described in this specification should in most cases be straightforward, as care has been taken to ensure that backwards-compatibility is retained.

This specification will eventually supplant Web Forms 2.0 as well. [WF2]

1.1.2. Relationship to XHTML2

XHTML2 [XHTML2] defines a new HTML vocabulary with better features for hyperlinks, multimedia content, annotating document edits, rich metadata, declarative interactive forms, and describing the semantics of human literary works such as poems and scientific papers.

However, it lacks elements to express the semantics of many of the non-document types of content often seen on the Web. For instance, forum sites, auction sites, search engines, online shops, and the like, do not fit the document metaphor well, and are not covered by XHTML2.

This specification aims to extend HTML so that it is also suitable in these contexts.

XHTML2 and this specification use different namespaces and therefore can both be implemented in the same XML processor.

Je zwamt dus uit je nek en dat flamerige superieure toontje mag je bij je houden voor als je weet waar je het over hebt.

Verwijderd schreef op woensdag 30 januari 2008 @ 02:16:
HTML 4.01 is een W3 recommendation. Vermoedelijk verstuur jij je XHTML gewoon als incorrecte text/html naar de browser.*

XHTML 1.0 Transititional mag als text/html aan de browser worden aangeboden. Strict/Frameset en 1.1 niet.

woensdag 30 januari 2008 02:39

Acties:

Fuzzillogic

Cool

Wow. Ik ben helemaal voor XHTML enzo (HTML5 zuigt, yadayada, je kent het wel), maar Zillion01, je argumenten kloppen wel, maar voor een eenvoudige site maakt het echt geen fluit uit. Hoe kun je jezelf webdevver noemen als je je dat niet realiseert?

woensdag 30 januari 2008 02:43

Acties:

woensdag 30 januari 2008 02:47

Obey your screen!

curry684 schreef op woensdag 30 januari 2008 @ 02:36:
[...]

In welke recommendation raadt het W3C in godesnaam af om HTML 4.01 te gebruiken?

Zal ik het je nog sterker vertellen.... het W3C is al geruime tijd bezig met HTML5, en als je daar even de meest recente working draft van opent zie je:

[...]

Of iets verder naar beneden:

[...]

Je zwamt dus uit je nek en dat flamerige superieure toontje mag je bij je houden voor als je weet waar je het over hebt.

[...]

XHTML 1.0 Transititional mag als text/html aan de browser worden aangeboden. Strict/Frameset en 1.1 niet.

Ja man, kom maar aanzetten met HTML5, nou dan deze

It is not backward compatible. An agent not understanding HTML5 will find a <section> element and have a fit, for example. Therefore in order to use any of the new HTML5 features we will have to wait until the number of browsers that don't do HTML5 is extremely low. No corporation on earth is going to throw away even a couple of percent of people when those people are potential profit, and it isn't personal blogs that will be the decider on whether HTML5 is successful or not. It's corporate land that decide that.

So we have to wait for IE6, IE7, Safari 3, Firefox 2 &3, all to die off before HTML5 is viable on the corporate web. We're going to have to wait for browsers that aren't even out yet to become statistically irrelevant before we can use HTML5 without either duplicating the site in XHTML or throwing away customers/visitors/revenue.

mazzel

Acties:

left part of the evil twins

En waar zegt dat unsourced en dus untrusted document dat HTML 4.01 een slecht idee zou zijn in jouw beperkte belevingswereld?

Ik zie je 2 alinea's citeren van iemand die een factueel correcte statement plaatst over adoptie van HTML 5 als nieuwe standard (net zoals voor HTML4 en HTML3 transition periods nodig waren) en verder geen enkele inhoudelijke uitspraak doet over wat het alternatief is. Hij heeft het zelfs over corporate sites, waarvan ik je met stellige zekerheid uit ervaring kan vertellen dat het merendeel ook in 2008 nog doctype-loze HTML 3.2-achtige prut is. Zolang browsers een quirksmode hebben zal dat HTML5 niet tegenhouden.

Ook z'n claim over <section> gaat niet op. Iedere hedendaagse browser ignoret al moeiteloos unknown elements, ik zou niet weten waarom dat ineens zou ophouden. Dat HTML 3.x ineens een <font> element had en HTML 4.x ineens niet meer heeft ook geen wereldschokkende rampen veroorzaakt.

Op dit moment, 30 januari 2008, hoor je websites te ontwikkelen in een van de door het W3C ondersteunde standaarden. Of je daarbij HTML 4.01 Transitional, HTML 4.01 Strict, XHTML 1.0 Strict of XHTML 1.1 pakt maakt geen fluit uit.

Maar surprise me, ik zie graag een paar linkjes van sites van jou. Laat maar eens zien wat een moois jij kunt met XHTML 1.1.

[ Voor 25% gewijzigd door curry684 op 30-01-2008 02:53 ]

woensdag 30 januari 2008 02:53

Acties:

woensdag 30 januari 2008 03:01

Obey your screen!

curry684 schreef op woensdag 30 januari 2008 @ 02:47:
Maar surprise me, ik zie graag een paar linkjes van sites van jou. Laat maar eens zien wat een moois jij kunt met XHTML 1.1.

http://validator.w3.org/c...%2Fwww.netcreators.com%2F

Ik heb es trouwens jouw site bekeken. Jammer dat je geen kaas heb gegeten van een semantische opbouw van je XHTML. Wel aardig verder. Als ik je een tip mag geven, een site dient opgebouwd te worden uit H1, H2, H3 etc. Behalve dat searchengines zo de content van je site minder goed oppakken, hoor je ook niet zo een site op te bouwen met kopjes als <span class="block_title">Webdevelopment</span>

[ Voor 38% gewijzigd door Zillion01 op 30-01-2008 03:01 ]

Acties:

Verwijderd

Zillion01 schreef op woensdag 30 januari 2008 @ 02:53:
[...]

http://validator.w3.org/c...%2Fwww.netcreators.com%2F

Je stuurt 'm mooi met het text/html mime-type in plaats van het sterk aangeraden application/xhtml+xml, waarmee je browsers forceert om ze met hun HTML-renderer te renderen in plaats van hun XHTML-renderer. Naast dat je daarmee dus geen enkel voordeel van XHTML hebt, moet de browser je foute HTML nog eens gaan corrigeren ook (slashes weghalen etc), zodat het als (volgens jou zo hopeloos verouderd) HTML gerenderd kan worden.

woensdag 30 januari 2008 03:03

Acties:

woensdag 30 januari 2008 03:04

Obey your screen!

Verwijderd schreef op woensdag 30 januari 2008 @ 03:01:
[...]

Je stuurt 'm mooi met het text/html mime-type in plaats van het sterk aangeraden application/xhtml+xml, waarmee je browsers forceert om ze met hun HTML-renderer te renderen in plaats van hun XHTML-renderer. Naast dat je daarmee dus geen enkel voordeel van XHTML hebt, moet de browser je foute HTML nog eens gaan corrigeren ook (slashes weghalen etc), zodat het als (volgens jou zo hopeloos verouderd) HTML gerenderd kan worden.

Das nog een foutje wat hersteld moet worden, daar kan ik weinig aan doen. Voor de rest valideert die zowel in XHTML 1.1 strict als CSS.

Acties:

left part of the evil twins

text/html

Als ik het door een strikte XML validator mik krijg ik ook zoals verwacht:

error (5): reached max_errors; too many errors/warnings to print for http://www.netcreators.com/

En dat zou Firefox ook doen als je application/xhtml+xml zou serven.

woensdag 30 januari 2008 03:07

Acties:

Verwijderd

Zillion01 schreef op woensdag 30 januari 2008 @ 03:03:
[...]

Das nog een foutje wat hersteld moet worden, daar kan ik weinig aan doen. Voor de rest valideert die zowel in XHTML 1.1 strict als CSS.

Da's mooi, maar dat kan je ook met HTML 4.01. Welke extra features van XHTML gebruik je? En hoe degradeer je die netjes voor Internet Explorer (die niet alleen niets van application/xhtml+xml snapt, maar ook al die extra features niet ondersteunt)?

woensdag 30 januari 2008 03:13

Acties:

left part of the evil twins

Zillion01 schreef op woensdag 30 januari 2008 @ 02:53:
[...]

Ik heb es trouwens jouw site bekeken. Jammer dat je geen kaas heb gegeten van een semantische opbouw van je XHTML. Wel aardig verder. Als ik je een tip mag geven, een site dient opgebouwd te worden uit H1, H2, H3 etc. Behalve dat searchengines zo de content van je site minder goed oppakken, hoor je ook niet zo een site op te bouwen met kopjes als <span class="block_title">Webdevelopment</span>

Dank voor de gratis tip, nu zal ik veel beter slapen. Helaas heb ik zelf geen regel ontwikkeld van onze corporate site, anders was ik nu mezelf gaan spanken.

Deze link illustreert overigens perfect wat ik hierboven zei over dat legacycode niets in de weg hoeft te staan van de adoptie van nieuwe standaarden.

woensdag 30 januari 2008 03:17

Acties:

woensdag 30 januari 2008 03:20

Obey your screen!

Tsja als je fan bent van Microsoft en hun browserts als standaard ziet, ik zorg in ieder geval wel dat het werkt... anyways ik ga pitten. Good talk thanks en sry voor misschien arrogante toon, ik had ook een biertje op

Acties:

left part of the evil twins

Kijk nu komen we ergens

Als je niet uit de hoogte was begonnen met die ontiegelijk foute wysiwyg tables opmerking had iedereen je hier een stuk subtieler gecorrigeerd op dat HTML 4.01 en XHTML 1.x perfect harmonisch naast elkaar bestaande standaarden zijn, en dat ze hun eigen doelen dienen zonder de ander overbodig te maken of in enige mate 'beter' te zijn. Knoop dat ajb wel even in de oren voor de volgende keer

woensdag 30 januari 2008 03:23

Acties:

Verwijderd

Die site waar je naar linkt als homepage is semantisch trouwens wel erg slecht, curry.

Da's echt door iemand gedaan die dacht: "Als extra oefening gooi ik alles van HTML overboord en ga ik al m'n elementen helemaal zelf maken met CSS". Het valt me nog mee dat er niet gekozen is om alles met <span>'s te doen, en overal display:block te definiëren.

woensdag 30 januari 2008 03:33

Acties:

g4wx3

stelletje zeveraars...
Je gebruikt het doctype da je wilt, en nee ie houd zich niet aan de standaard, als je een coment zet boven het doctype gaat ie trouwens naar quirks, en ie zet padding en border aan de binnenkant!
Hoe kun je dan zeggen dat als je goed bouwt je geen problemen hebt? Ja workarround is alle met margin af te stellen. Kun je dat dan nog volgens de regels noemen?

XHTML is stricter, omdat je alle tags moet sluiten, en sommige tags niet meer passen in het kader vanxhtml. Maar ik weiger te zeggen dat het daarom "beter" is.

(PS: dat ie padding aan de binnenkant zette vond ik nu net een van de dingen die wel handig waren, is hier een alternatief voor?)

Ontopic:
mischien best een DHTML scrollbar zetten als JS aan staat, zoniet, moet de gebruiker het maar met een iets mindere scrollbar doen.
De breedte van de scrollbar is op elke browser verwhillen, maar ik dacht eigenlijk wel dat elke browser de scrollbar binnen de border zette. Dus de border komt nog net rond de scrollbar.

http://www.softfocus.be/

woensdag 30 januari 2008 18:37

Acties:

Kiphaas7

Verdorie, nou mag ik niet bijdehandje spelen, en ik ben daar in het dagelijks leven best goed in.

curry684 schreef op woensdag 30 januari 2008 @ 03:20:
Kijk nu komen we ergens

Als je niet uit de hoogte was begonnen met die ontiegelijk foute wysiwyg tables opmerking had iedereen je hier een stuk subtieler gecorrigeerd op dat HTML 4.01 en XHTML 1.x perfect harmonisch naast elkaar bestaande standaarden zijn, en dat ze hun eigen doelen dienen zonder de ander overbodig te maken of in enige mate 'beter' te zijn. Knoop dat ajb wel even in de oren voor de volgende keer

Zoals al eerder is gezegd, is html 4.01 net zo goed een reccomendation als xhtml. Overigens had ik nergens gezegd dat xhtml slecht is. En sinds wanneer is vormgeving afhankelijk van je doctype?

De enige echte reden voor redelijk eenvoudige(!) sites om xhtml te gebruiken is dat de validator (en niks anders) stricter is in het controleren. Die validator is een leuke spellingscontrole, maar ook niet meer dan dat, semantische controle is beperkt tot een minimum.

Leuk dat je trouwens het onderwerp van wysiwyg tabellen naar voren brengt. Begin 2000 toen ik een beetje begon met sites heb ik dat welgeteld 1 keer geprobeerd, maar was er mee gestopt omdat ik het niet snapte.

Ik kon er gewoon niet bij dat alles in een tabel gestopt moest worden.

Zillion01 schreef op woensdag 30 januari 2008 @ 01:58:
[...]

Tsja als je niet voor recommendations van W3 gaat ben je blijkbaar slimmer. Vermoedelijk vind je het ook leuk om nog wysiwyg tabelletjes te genereren. Ik ken geen enkele vormgeving die niet met XHTML 1.1 strict te maken is.

[ Voor 46% gewijzigd door Kiphaas7 op 30-01-2008 18:46 ]

woensdag 30 januari 2008 22:47

Acties:

left part of the evil twins

Verwijderd schreef op woensdag 30 januari 2008 @ 03:23:
Die site waar je naar linkt als homepage is semantisch trouwens wel erg slecht, curry. Da's echt door iemand gedaan die dacht: "Als extra oefening gooi ik alles van HTML overboord en ga ik al m'n elementen helemaal zelf maken met CSS". Het valt me nog mee dat er niet gekozen is om alles met <span>'s te doen, en overal display:block te definiëren.

Zoals ik al zei: ik heb geen regel van onze corp homepage gedaan, en hij staat al een tijdje op de agenda voor rebuild, we geven alleen graag betalende klanten voorrang

donderdag 31 januari 2008 20:55

Acties:

vrijdag 1 februari 2008 02:01

...

Topicstarter

Zillion01 schreef op dinsdag 29 januari 2008 @ 20:56:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body style="margin: 0">
    <div id="MainContent" style="position:absolute; width:100%;margin: 0px; top: 130px; bottom: 70px; background-color: transparent; ">
    <div id="cont" style="float:left; width:100%;">
        <div id="MainContentCenter"  style="position:relative; margin:auto; width: 500px; height:200px;    overflow: auto;">
             http://www.lipsum.com/feed/html

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

margin-top en bottom kun je zelf wel plaatsen.

Ik krijg nog steeds niet het gewenste effect. De hoogte is niet dynamisch met de paginahoogte. Ook niet als ik de margins of height anders instel. (Getest met Firefox V2.0.0.11)

Verwijderd schreef op dinsdag 29 januari 2008 @ 15:52:
Je kan de scrollbalken van het venster uitschakelen en bijv scrollbalken in de div forceren.
Cascading Stylesheet:
1
2
3
html { overflow:hidden; }
/* identifier niet gecontroleerd, maar je begrijpt het idee denk ik wel...*/
div#MainContent { overflow-x:hidden; overflow-y:scroll; }
Voor de rest vraag ik me af of dit zo gaat werken, ik denk namelijk dat de divjes met scrollbalken een fixed height moeten hebben.

Dit werkt niet omdat de overflow:hidden gewoon alles verbergt wat buiten het venster komt te staan.
Het maakt dan niet uit hoe groot de content in de site is.

Speel ook Balls Connect en Repeat

Acties:

Verwijderd

Ik heb sterk het vermoeden dat het niet kan met HTML en CSS alleen. Je kan maar beperkt rekenen met CSS. Als je een element de height "viewport-height - 200px" wilt geven, zal je dat met javascript moeten uitrekenen en toekennen. De viewport-height lees je uit window.innerHeight.

Da's wel vervelend voor mensen zonder Javascript (sommige tweakers), want die zien een statische hoogte. Het andere alternatief, frames gebruiken, is echter helemaal af te raden vanwege Google en allerlei usability-problemen.

Oh, een andere oplossing is het gebruik van een tabel voor de layout. Dat wordt meestal afgekraakt, maar dit is een layout die niet zonder tabel-rekenregels te realiseren is. Als je niet van de semantisch misleidende "<table>" houdt, kan je het nagenoeg betekenis-loze "<div>" gebruiken, en via css "display: table" definiëren.

[ Voor 53% gewijzigd door Verwijderd op 01-02-2008 02:13 ]

zondag 3 februari 2008 03:29

Acties:

dinsdag 5 februari 2008 13:26

Obey your screen!

Ik had idd niet goed gelezen wat je vroeg. Zonder javascript is het hebben van een vaste top en bottom met fluid scroll center vrij lastig. Het volgende werkt bijv. wel onder FF en Opera en doet volgens mij dan exact wat je wilt, maar niet onder de iE's waar we met zijn allen zoveel plezier aan beleven.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body style="margin: 0">
<div id="MainContent" style="position:absolute; width:100%; margin: 0px; top: 130px; bottom: 70px;">
<div id="MainContentCenter" style="position:relative; margin:auto; width: 500px; height:100%; margin-bottom:100px; display:block; overflow: auto;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam tincidunt arcu quis turpis. Mauris sit amet quam sit amet arcu dignissim auctor. Maecenas elit. Suspendisse ornare purus. Aliquam laoreet. Maecenas ornare mi vel velit. Morbi pretium sem et enim. Praesent scelerisque. Vivamus dictum molestie magna. In posuere pede pellentesque risus.

In viverra mattis sapien. Morbi dapibus, nulla in congue rhoncus, diam lectus suscipit lorem, vitae rutrum lacus nisl ut orci. Sed eleifend, magna sed tempus pharetra, nunc dolor malesuada est, at luctus purus lorem pretium nisi. Maecenas risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec risus augue, pulvinar sed, lobortis quis, tempus ac, ipsum. Vivamus quis arcu non orci cursus luctus. Sed iaculis urna eget diam. Phasellus et enim. Sed pulvinar. Duis enim. Phasellus sapien nisl, rutrum in, pretium in, ornare in, odio. Quisque nisi sem, imperdiet non, vehicula a, fermentum at, elit. Vestibulum sed sem. Etiam quam diam, pulvinar commodo, sagittis id, adipiscing at, felis. Pellentesque pulvinar, lacus et lobortis laoreet, sem velit varius nisl, id interdum velit purus quis diam. Cras tellus. Vivamus dictum. Donec vitae felis. Vestibulum eget leo ac felis euismod suscipit.

Nullam non orci. Integer tortor. Suspendisse et urna. Cras consectetuer, felis vel ultricies faucibus, nulla leo rhoncus enim, non malesuada arcu purus ut sem. Sed diam. Cras libero. Pellentesque aliquet nisl id tellus. Nam tellus odio, accumsan sed, sagittis ac, auctor a, odio. Proin elementum. Suspendisse potenti. Donec eros. Etiam ullamcorper faucibus libero. Ut porttitor. Nulla facilisi.

Quisque consectetuer vulputate nisi. Etiam tristique eros sit amet tortor. Maecenas libero. Donec nisi lectus, cursus ac, tempor vitae, aliquet sit amet, urna. Etiam ultricies feugiat neque. Nulla erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed et risus at est rhoncus cursus. Sed eu lacus id odio pharetra hendrerit. Vivamus odio tellus, ullamcorper et, nonummy ut, fringilla nec, tellus. Fusce dignissim turpis ac augue. Duis urna purus, fermentum eu, laoreet at, venenatis eu, mauris. Aenean auctor erat eget lectus. Fusce dolor. Proin arcu. Suspendisse potenti. Nullam ornare. Sed eu dolor mattis metus tempus pretium. Aenean dictum.

Nam lobortis lorem eu mi. Donec nulla ipsum, lacinia ac, congue at, venenatis vitae, quam. Cras consequat viverra magna. Vivamus pulvinar, ante eu porttitor convallis, velit dui ullamcorper urna, sed ultricies eros neque nec odio. Vestibulum massa. Etiam viverra lacus eu sem. Donec vulputate sodales augue. Cras pellentesque, pede sed imperdiet hendrerit, lacus nulla vestibulum ligula, sed sodales justo massa nec orci. Integer iaculis. Curabitur sed felis eu risus porta dignissim. Ut commodo felis non erat. Vivamus porta commodo diam.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam tincidunt arcu quis turpis. Mauris sit amet quam sit amet arcu dignissim auctor. Maecenas elit. Suspendisse ornare purus. Aliquam laoreet. Maecenas ornare mi vel velit. Morbi pretium sem et enim. Praesent scelerisque. Vivamus dictum molestie magna. In posuere pede pellentesque risus.

In viverra mattis sapien. Morbi dapibus, nulla in congue rhoncus, diam lectus suscipit lorem, vitae rutrum lacus nisl ut orci. Sed eleifend, magna sed tempus pharetra, nunc dolor malesuada est, at luctus purus lorem pretium nisi. Maecenas risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec risus augue, pulvinar sed, lobortis quis, tempus ac, ipsum. Vivamus quis arcu non orci cursus luctus. Sed iaculis urna eget diam. Phasellus et enim. Sed pulvinar. Duis enim. Phasellus sapien nisl, rutrum in, pretium in, ornare in, odio. Quisque nisi sem, imperdiet non, vehicula a, fermentum at, elit. Vestibulum sed sem. Etiam quam diam, pulvinar commodo, sagittis id, adipiscing at, felis. Pellentesque pulvinar, lacus et lobortis laoreet, sem velit varius nisl, id interdum velit purus quis diam. Cras tellus. Vivamus dictum. Donec vitae felis. Vestibulum eget leo ac felis euismod suscipit.

Nullam non orci. Integer tortor. Suspendisse et urna. Cras consectetuer, felis vel ultricies faucibus, nulla leo rhoncus enim, non malesuada arcu purus ut sem. Sed diam. Cras libero. Pellentesque aliquet nisl id tellus. Nam tellus odio, accumsan sed, sagittis ac, auctor a, odio. Proin elementum. Suspendisse potenti. Donec eros. Etiam ullamcorper faucibus libero. Ut porttitor. Nulla facilisi.

Quisque consectetuer vulputate nisi. Etiam tristique eros sit amet tortor. Maecenas libero. Donec nisi lectus, cursus ac, tempor vitae, aliquet sit amet, urna. Etiam ultricies feugiat neque. Nulla erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed et risus at est rhoncus cursus. Sed eu lacus id odio pharetra hendrerit. Vivamus odio tellus, ullamcorper et, nonummy ut, fringilla nec, tellus. Fusce dignissim turpis ac augue. Duis urna purus, fermentum eu, laoreet at, venenatis eu, mauris. Aenean auctor erat eget lectus. Fusce dolor. Proin arcu. Suspendisse potenti. Nullam ornare. Sed eu dolor mattis metus tempus pretium. Aenean dictum.

Nam lobortis lorem eu mi. Donec nulla ipsum, lacinia ac, congue at, venenatis vitae, quam. Cras consequat viverra magna. Vivamus pulvinar, ante eu porttitor convallis, velit dui ullamcorper urna, sed ultricies eros neque nec odio. Vestibulum massa. Etiam viverra lacus eu sem. Donec vulputate sodales augue. Cras pellentesque, pede sed imperdiet hendrerit, lacus nulla vestibulum ligula, sed sodales justo massa nec orci. Integer iaculis. Curabitur sed felis eu risus porta dignissim. Ut commodo felis non erat. Vivamus porta commodo diam.

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

Mocht je het persé willen met CSS dan kun je nog voor iE7 als conditionele CSS een height:80% ofzo toevoegen aan Maincontent wat de boel aardig benaderd. Voor iE6 zul je dan een uitzondering met tables moeten schrijven. Of je zoekt een javascript. Anyways het is dus volgens mij niet mogelijk. Ik zou zeggen stap af van die vaste pixels boven en onder. Maar misschien moet je ff uitleggen waar je het voor nodig hebt, wellicht is de denkwijze naar een oplossing aan te pasen.

Acties: