[CSS] Twee blokken over elkaar trekken

[djc]

Voor het open source DVCS Mercurial probeer ik een visuele interface voor de revision graph te maken. Hiervoor heb ik met behulp van canvas een simpele graaf getekend. Daarnaast wil ik de changeset message en wat andere tekstuele informatie weergeven. Zie hier het resultaat tot nu toe:

http://hg.xavamedia.nl/mercurial/graph/graph (werkt in Safari en Firefox)

Hier is de graaf links een stuk canvas, met daar overheen op een hogere z-index een ul met een li voor elke changeset. De ul heeft position: relative en trek ik daarna naar boven zodat ie bovenop het canvas terecht komt. Nu blijft er alleen daaronder een lege ruimte over waar de ul eigenlijk zou moeten staan. Heeft iemand hier enig idee hoe ik dat kan oplossen? Heb ook al wat lopen zoeken, maar kan eigenlijk geen goede zoektermen bedenken om dit probleem op te lossen. Daarnaast heb ik ook al geprobeerd om de ul een float: left mee te geven. Dat lijkt te werken, maar dan is er nog steeds een stuk lege ruimte, alleen dan in zwart ipv wit omdat de main div niet meer uitrekt.

HTML (de li's worden mbv JS toegevoegd):

HTML:

<canvas id="graph" width="224" height="663"></canvas>
<ul id="graphnodes" style="top: -667px;"></ul>

CSS voor de ul:

Cascading Stylesheet:

#graphnodes {
    list-style: none inside none;
    position: relative;
    z-index: 10;
    top: -667px;
}

[_Thanatos_]

Omdat je position:relative gebruikt, wordt de oorspronkelijke flow niet veranderd, dus die extra witruimte is de plek waar je <ul> in de ongewijzigde flow hoort te staan. Je kunt het proberen op te lossen met position:absolute, en dan zo nodig de parent op position:relative zetten. Dan kun je volgens mij gewoon top:0 en left:200px ofzo gebruiken.

Netter is om de <ul> te laten voor wat ie is en de canvas te laten floaten. Alleen moet die canvas dat wel de juiste breedte hebben.

(Trouwens, je pagina werkt niet alleen in Firefox en Safari, maar ook in Opera )

[djc]

_Thanatos_ schreef op dinsdag 17 juni 2008 @ 12:41:
Netter is om de <ul> te laten voor wat ie is en de canvas te laten floaten. Alleen moet die canvas dat wel de juiste breedte hebben.

Waarom is dat netter?

[_Thanatos_]

Omdat je dan geen twee elementen hebt waarvan onnodig de een de ander overlapt, en je bent niet aan het rommelen met de document flow waar dat niet nodig is. Een offset van een gezet aantal pixels forceert daarbij dat je van tevoren moet weten hoe hoog je element wordt, en dat weet je nou eenmaal niet met verschillende fontsizes enzo.

Drie redenen dat het netter is

[djc]

Hmmm. Inmiddels is het nog complexer geworden, met drie lagen: een ul aan achtergrond, met daarin row coloring, daar bovenop het canvas en daar weer bovenop de li's met text erin. Het canvas moet achter de tekst omdat de links onder het canvas anders niet werken, de background coloring moet achter het canvas omdat het canvas anders wegvalt achter de achtergrondkleuren.

Kan het dan nog steeds netter/nog voorstellen om dat beter te doen?

[_Thanatos_]

Waarom maak je die canvas dan zo breed dat hij per se onder de tekst moet vallen?

[djc]

_Thanatos_ schreef op donderdag 19 juni 2008 @ 01:39:
Waarom maak je die canvas dan zo breed dat hij per se onder de tekst moet vallen?

Omdat ik niet van tevoren weet hoe breed de graaf is die ik in het canvas teken. En de tekstdingen moeten inspringen, zodat ze boven (maar niet naast) canvas-gedeeltes komen waar lager op de pagina ook een deel van de graaf getekend wordt.