[HTML] scroll window probleem - Softwareontwikkeling

dinsdag 7 december 2004 16:39

Acties:

Scorpion1984

Topicstarter

Ik moet dit krijgen:
Afbeeldingslocatie: http://pvdl.nl.eu.org/temp.gif

Maar aangezien frames eigenlijk afgeschaft zijn in xhtml1.1 en ik een hekel aan frames heb, wil ik dit zonder frames doen, en gewoon netjes met p en div.

Heb nu al dit:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="default.css" title="default" />
<title>Titel</title>
</head>
<body>
<div class="mid">
<p><font size="15">Titel</font></p>
<p>Menu</p>
<p class="main">${content}</p>
</div>
</body>
</html>

Cascading Stylesheet:

body {
    background-color: #000000;
    margin: 0px;
}

.mid {
    background-color: #FFAA11;
    margin-left: 10%;
    margin-right: 10%;
}

p {
    margin: 0px;
}

div {
height: 100%;
}

.main {
    overflow: auto;
    height: 100%;
}

Maar dan gaat hij gewoon door onderaan het scherm, in plaats van daar te stoppen en in die <p> een scrollbar te maken. Krijg dus nog steeds een scrollbar waarmee ik ook de titel en het menu mee wegscroll.

dinsdag 7 december 2004 16:42

Acties:

samo

yo/wassup

een iframe gebruiken?
Waarom is de scrollbalk op deze locatie dan per se nodig?

En als je van overflow: scroll maakt?

Bekend van cmns.nl | ArneCoomans.nl | Het kindertehuis van mijn pa in Ghana

dinsdag 7 december 2004 16:46

Acties:

Rowanov

Kop eens wat anders...

Als je dan toch alles correct wil doen, is het misschien leuk om je font tags uit je code te halen; die zijn ook al een tijdje niet meer gangbaar. Ook is het misschien handig om je titel, menu en content alledrie in een aparte div te zetten, ipv p daarvoor te gebruiken.

dinsdag 7 december 2004 16:50

Acties:

Scorpion1984

Topicstarter

Die font tag in mijn code was heel even voor een snelle test, vergeten om eruit te halen.

Iframe is niet echt een oplossing, dan zit ik nog steeds vast aan de frames-problemen, moet gewoon op die plaats met php een pagina kunnen negeren.

overflow: scroll, heeft nog steeds hetzelfde probleem, alleen krijg je dan als extra gedisablede scrollbars in je div(of p)

dinsdag 7 december 2004 16:52

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

een P voor de hele main content lijkt me niet echt terecht, ik neem aan dat dat niet echt enkel één Paragraaf is?
en FONT-tags hebben niks te zoeken in XHTML1.1

verder maakt hij hem nu 100% van de height van de viewbox, terwijl hij lager op een pagina gepositioneerd is, blijft hij de hoogte van de hele BODY (het venster zelf dus)

Om het op te lossen moet je minsten de title en het menu een vaste hoogte geven, is dat mogelijk?

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

dinsdag 7 december 2004 17:03

Acties:

Scorpion1984

Topicstarter

Ja, titel en menu vaste hoogte geven kan waarschijnlijk wel.
Maar main moet van onderkant menu tot rand van het scherm strekken, niet meer en niet minder.

dinsdag 7 december 2004 20:37

Acties:

Scorpion1984

Topicstarter

Ik heb ondertussen al wat aan gewerkt maar het lukt me dus absoluut niet.
Heb wat willekeurige afstekende kleuren genomen om te kijken wat er gebeurt.
Afbeeldingslocatie: http://pvdl.nl.eu.org/temp2.gif

Afbeeldingslocatie: http://pvdl.nl.eu.org/temp2.gif

Je ziet dat hij in de breedt het wel goed doet, mooi precies tot aan het einde van het 'wrap'-divje.(onderaan staat een mooie scrollbar)
Alleen in de hoogte gaat hij lompweg door het 'wrap'-divje heen.
In internet explorer is het nog erger: hij vergroot domweg het 'wrap'-divje in de breedte en hoogte zodat het blauwe divje er wel in past.

Source:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="default.css" title="default" />
<title>${title}</title>
</head>
<body>
<div id ="wrap">
<div id="title">[img]"plaatje.gif"[/img]</div>
<div id="menu">Competenties <b>×</b> Functies & Rollen <b>×</b> Taakrollen <b>×</b> Taakclusters <b>×</b> GetThePicture</div>
<div id="main">${content}</div>
</div>
</body>
</html>

Cascading Stylesheet:

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    background-color: #000000;
} 

#wrap {
    position: relative;
    margin-left: 10%;
    height: 100%;
    width: 80%;
    border: 10px solid #aa0000;
}

#title {
    position: relative;
    top: 0px;
    left: 0px;
    height: auto;
    width: 100%;
    overflow: hidden;
    background-color: #f0f0f0;
    }
    
#menu {
    background-color: #ffaaaa;
    position: relative;
    top: 0px;
}

#main {
    background-color: #0000aa;
    position: relative;
    top: 0px;
    overflow: auto;
}

woensdag 8 december 2004 09:21

Acties:

Verwijderd

Dit soort dingen voor alle browsers lekker werkend krijgen zonder frames of javascript is best lastig aangezien een div met overflow:auto het alleen doet met een voorgedefinieerde vaste hoogte (correct me if I'm wrong).

Dus even terug naar het begin. Wat is precies je eis?
1) De scrollbalk dicht bij je content?
2) De titel/logo altijd in beeld?

En bij beiden de vraag waarom?

Als het gaat om de titel altijd in beeld dan zou je een aanpak kunnen overwegen als:
- Uitganspunt: titel in div boven, content daaronder
- Met javascript de titel altijd in beeld houden in lange pagina's

Ben hier niet echt een voorstander van maar het is een aardige compromis: Als het javascript gebeuren niet werkt dan blijft alles staan waar het staat en heb je dus alsnog een 'gewone' pagina.

woensdag 8 december 2004 09:37

Acties:

Scorpion1984

Topicstarter

Verwijderd schreef op woensdag 08 december 2004 @ 09:21:
Dit soort dingen voor alle browsers lekker werkend krijgen zonder frames of javascript is best lastig aangezien een div met overflow:auto het alleen doet met een voorgedefinieerde vaste hoogte (correct me if I'm wrong).

Dus even terug naar het begin. Wat is precies je eis?
1) De scrollbalk dicht bij je content?
2) De titel/logo altijd in beeld?

En bij beiden de vraag waarom?

Als het gaat om de titel altijd in beeld dan zou je een aanpak kunnen overwegen als:
- Uitganspunt: titel in div boven, content daaronder
- Met javascript de titel altijd in beeld houden in lange pagina's

Ben hier niet echt een voorstander van maar het is een aardige compromis: Als het javascript gebeuren niet werkt dan blijft alles staan waar het staat en heb je dus alsnog een 'gewone' pagina.

Het is zeker mogelijk, zonder vaste hoogte. Heb het wel eens gezien, maar mij lukt het niet echt. In firefox heeft de div wel de hoogte van het scherm precies.

Javascript is een erg krotte oplossing en dan is frames bijna net zo goed.

[ Voor 5% gewijzigd door Scorpion1984 op 08-12-2004 09:44 ]

woensdag 8 december 2004 09:56

Acties:

Verwijderd

Scorpion1984 schreef op woensdag 08 december 2004 @ 09:37:
[...]

Javascript is een erg krotte oplossing en dan is frames bijna net zo goed.

Ietwat kort door de bocht. Met frames kom je nadelen tegen op het gebied van semantiek, bookmark-baar-heid, toegankelijkheid, enz. De javascript aanpak die ik beschrijf is slechts 'added value' (daarover kunnen meningen uiteraard verschillen) voor de user agents die daar wat mee kunnen. Semantiek en inhoud van je pagina blijft in feite onaangeroerd.

Ik heb 'div-scroll-auto' wel eens toegepast in een tabel (sorry) met een top- en onder regel die bij voorkeur altijd in beeld stonden met alle content daartussen. IE was de enige browser die bij de div zonder meegegeven hoogte in de middencel de conclusie trok dat de bedoelde hoogte wel de tabelcel zou zijn. Stom gedrag, in dit geval pakte het aardig uit en werd bij andere browsers de site als geheel langer in plaats van een scrollbalk in het content-div.

woensdag 8 december 2004 12:36

Acties:

Scorpion1984

Topicstarter

Verwijderd schreef op woensdag 08 december 2004 @ 09:56:
[...]

Ietwat kort door de bocht. Met frames kom je nadelen tegen op het gebied van semantiek, bookmark-baar-heid, toegankelijkheid, enz. De javascript aanpak die ik beschrijf is slechts 'added value' (daarover kunnen meningen uiteraard verschillen) voor de user agents die daar wat mee kunnen. Semantiek en inhoud van je pagina blijft in feite onaangeroerd.

Ik heb 'div-scroll-auto' wel eens toegepast in een tabel (sorry) met een top- en onder regel die bij voorkeur altijd in beeld stonden met alle content daartussen. IE was de enige browser die bij de div zonder meegegeven hoogte in de middencel de conclusie trok dat de bedoelde hoogte wel de tabelcel zou zijn. Stom gedrag, in dit geval pakte het aardig uit en werd bij andere browsers de site als geheel langer in plaats van een scrollbalk in het content-div.

Zover ik weet is div-scroll-auto niet eens valid xhtml1.1.

Ook met javascript krijg je soms rare problemen, ik gebruik liever pure html/css.

woensdag 8 december 2004 13:15

Acties:

Verwijderd

Hoeft IE niet ondersteund te worden? Over je XHTML 1.1 geblaat, misschien is dit interessant: According to the Accept header, Mozilla prefers application/xhtml+xml over text/html. Should I serve application/xhtml+xml to Mozilla?. En deze: How is the treatment of application/xhtml+xml documents different from the treatment of text/html documents?.

Eigenlijk, die zijn voor iedereen die hiermee bezig is wel interessant.