[CSS] div als frame over volle beeldhoogte tonen - Softwareontwikkeling

maandag 26 februari 2007 15:25

Acties:

Verwijderd

Topicstarter

Hallo mensen,

ik ben even bezig met het aanpassen van mijn website ( http://coreradio.110mb.com/tracklists.html )
Het is de bedoeling dat het contentgedeelte, dat de tracklists bevat, in een div wordt geplaatst, zodat alleen dit deel scrollbaar is. Als een gebruiker de tracklists bekijkt, dan moet het menu dus op dezelfde plaats blijven staan. Om dit voor elkaar te krijgen heb ik het contentgedeelte in een div geplaatst met de volgende style opmaak;

style="height: 100%; width: 100%; overflow: auto;"

Nu is het probleem dat de div geen scrollbalken krijgt, maar nog steeds de volledige hoogte van de tabel met de tracklists aanhoudt. Als ik een vaste waarde meegeef als hoogte voor de div, dan werkt het wel goed, maar dan is het niet langer dynamisch en wordt het niet goed weergegeven met andere resoluties ed.

Ik heb een voorbeeldpagina gemaakt die iets versimpeld is, zodat het niet nodig is om de gehele pagina code door te spitten; http://coreradio.110mb.com/test.html Het zou dus de bedoeling moeten zijn dat de div over de hele beeldhoogte wordt getoond, en dat de scrollbalk in de div wordt geplaatst.

Is het mogelijk om dit in css op te lossen, of moet ik hier java script voor gebruiken?

maandag 26 februari 2007 15:55

Acties:

BtM909

Watch out Guys...

Maak eerst gebruik van een volledige (stricte doctype). Ga het liefst voor HTML4.01 en niet voor XHTML. Dit zorgt er dus voor dat je pagina's in standards mode worden gerendered. Als je dat hebt gedaan, dan kunnen we wat beter kijken naar een oplossing. Het kost me nu iets teveel tijd, omdat ik ook alle plaatjes nodig heb om het te reproduceren

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.

maandag 26 februari 2007 16:32

Acties:

Verwijderd

Topicstarter

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

zoiets?

maandag 26 februari 2007 16:43

Acties:

BtM909

Watch out Guys...

yep

Overigens hier een overzicht van alle volledige doctypes: http://www.w3.org/QA/2002/04/valid-dtd-list.html

[ Voor 90% gewijzigd door BtM909 op 26-02-2007 16:48 ]

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.

maandag 26 februari 2007 16:51

Acties:

Verwijderd

Topicstarter

oke, gedaan. Ik heb tracklists.html en test.html aangepast

maandag 26 februari 2007 16:54

Acties:

BtM909

Watch out Guys...

Ik zie nog niks

Wel geupload?

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.

maandag 26 februari 2007 16:56

Acties:

Verwijderd

Topicstarter

nu klopt ie wel

edit
geen mogelijkheden in css?

[ Voor 232% gewijzigd door Verwijderd op 26-02-2007 20:07 ]

dinsdag 27 februari 2007 15:43

Acties:

Verwijderd

Topicstarter

iemand?

Let er even op dat je kickt na 24 uur

[ Voor 72% gewijzigd door BtM909 op 27-02-2007 16:42 ]

dinsdag 27 februari 2007 16:46

Acties:

BtM909

Watch out Guys...

Kan je er geen versimpelde test-case van maken. Ik zie teveel CSS voor zo weinig HTML en daardoor wordt het al een stuk lastiger om te bepalen of bepaalde CSS stijlen met elkaar bijten

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.

dinsdag 27 februari 2007 17:18

Acties:

Verwijderd

Topicstarter

oke, ik heb ff een versimpelde situatie gemaakt. Het werkt nu gedeeltelijk (IE geeft problemen)

http://coreradio.110mb.com/test%20firefox.html

linksboven zie je het menu, het is de bedoeling dat deze op dezelfde positie blijft staan (alsmede de rest van de content buiten de scrolldiv). De tabel binnen de div moet in een scrollvenster worden weergegeven, als de hoogte van dat venster de hoogte van het beeld overschrijdt.

Voor zover werkt het nu goed in firefox, alleen IE geeft problemen

dinsdag 27 februari 2007 18:44

Acties:

BasieP

misschien zie ik het verkeerd hoor, maar waarom niet gewoon height van html, body, en je divje op 100% zetten, en dan je rechter divje overflow: auto; maken?

wat je nu doet is alleen je divje 100% hoog maken, IE denkt dan dat de rest van de pagina (html, en body) dan maar mee moeten rekken (ja ie houd zich daar niet aan de standaarden)

anyway door hard te zetten dat html en body maar 100% hoog mogen zijn fix je dit.
dus:

Cascading Stylesheet:

1
2
3

html, body {
  height: 100%;
}

trouwens kan je margin en padding ook gewoon zo doen:

Cascading Stylesheet:

1	padding: 0;

ipv

Cascading Stylesheet:

  padding-top: 0ex; 
  padding-bottom: 0em; 
  padding-left: 0em; 
  padding-right: 0em;

(waarbij ik ook niet weet wat een 'ex' voor eenheid is)

dit omdat 0 0 is, en het dus niet uitmaakt welke eenheid je gebruikt

[ Voor 74% gewijzigd door BasieP op 27-02-2007 18:48 ]

This message was sent on 100% recyclable electrons.

dinsdag 27 februari 2007 19:31

Acties:

Verwijderd

Topicstarter

Dank u, ik heb het even geprobeerd, en het werkt nu een stuk beter

De wijzigingen zijn doorgevoerd op:

http://coreradio.110mb.com/test%20firefox.html

http://coreradio.110mb.com/layout.css

In internet explorer viel het me echter op dat er rechts van het "frame" ruimte is, en eronder ook, waardoor er onnodige scrollbalken worden geplaatst. Weet iemand waar deze ruimte ineens vandaan komt?

In firefox wordt het wel gerenderd zoals bedoeld is.

Cascading Stylesheet:

body {
  /* html heb ik eruit gehaald omdat er anders 2 scrollbalken werden getoond in FF */
  height: 100%;
  padding: 0;
}

.menu {
    background-color: #FF0000;
}

.frame {
    position: absolute;
    top: 0; 
    left: 120px; 
    bottom: 0; 
    right: 0;
    overflow: auto;
    height: 100%;
}

[ Voor 26% gewijzigd door Verwijderd op 27-02-2007 19:35 ]

dinsdag 27 februari 2007 20:31

Acties:

BasieP

sorry dat ik het zeg, maar het ziet er niet uit in IE.
waarom positioneer je het rechter deel absoluut? en als je het dan doet, waarom doe je het dan zo dat het niet werkt in IE?

waarom niet gewoon 2 divjes, 1 rechts, die gewoon full screen is, met een padding links van 120px
en dan daar overheen het menutje linkboven

[ Voor 41% gewijzigd door BasieP op 27-02-2007 20:33 ]

This message was sent on 100% recyclable electrons.

dinsdag 27 februari 2007 22:32

Acties:

Verwijderd

Topicstarter

dat is het hele punt van dit topic

Hoe zou ik dit moeten doen zodat het wel goed wordt weergegeven in IE?

dinsdag 27 februari 2007 22:56

Acties:

BasieP

BasieP schreef op dinsdag 27 februari 2007 @ 20:31:
waarom niet gewoon 2 divjes, 1 rechts, die gewoon full screen is, met een padding links van 120px
en dan daar overheen het menutje linkboven

This message was sent on 100% recyclable electrons.

dinsdag 27 februari 2007 23:02

Acties:

Verwijderd

Verwijderd schreef op maandag 26 februari 2007 @ 15:25:

Als een gebruiker de tracklists bekijkt, dan moet het menu dus op dezelfde plaats blijven staan.

Is het niet handiger om dit te doen door position:fixed aan je menu te geven? Je moet dan wel een hack/truc uitvoeren voor IE<7: http://www.howtocreate.co.uk/fixedPosition.html.

BasieP schreef op dinsdag 27 februari 2007 @ 18:44:
(waarbij ik ook niet weet wat een 'ex' voor eenheid is)

'ex' is een eenheid, gerelateerd aan de breedte en hoogte van de letter x in het huidige font (ongeveer de helft van de font-size).

'em' is gerelateerd aan de letter M in het huidige font en ongeveer gelijk aan de font-size.

woensdag 28 februari 2007 11:06

Acties:

BtM909

Watch out Guys...

BasieP schreef op dinsdag 27 februari 2007 @ 18:44:
(waarbij ik ook niet weet wat een 'ex' voor eenheid is)

Possible values:
ex
em
px
cm
mm
pc
in
pt
%

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.

woensdag 28 februari 2007 11:39

Acties:

BasieP

BtM909 schreef op woensdag 28 februari 2007 @ 11:06:
[...]

Possible values:
ex
em
px
cm
mm
pc
in
pt
%

mm ik kende hem niet.. eerste hit met google zegt dit:

quote: http://www.xs4all.nl/~sbpoley/webmatters/emex.html
In fact my conclusion is that the CSS ‘ex’ unit is practically useless. A unit based on a typical character width would indeed have been useful in getting CSS boxes to wrap at approximately the same point in the text, regardless of which font the reader is using. But the ex is defined as follows:

The ‘ex’ unit is defined by the font’s ‘x-height’. The x-height is so called because it is often equal to the height of the lowercase "x". However, an ‘ex’ is defined even for fonts that don’t contain an "x".

This message was sent on 100% recyclable electrons.