[CSS] position: absolute - Softwareontwikkeling

woensdag 16 juli 2003 02:30

Acties:

Topicstarter

Ik ben een dhtml menu aan het maken voor een site van een klant van mij, en nu stuitte ik op een probleem. Namelijk dat wanneer ik een tabel visible maak, die in een andere tabel staat die visible is, de positie niet goed word opgepakt.

Ze zijn beide absolute gepositioneerd en de coordinaten waar de tabel moet komen te staan word berekend met javascript. Die berekening klopt overigens. Het gebeurt verder alleen in IE en Opera. NS/MZ is wel goed.

Om even wat meer duidelijkheid te geven heb ik ff 2 screens gemaakt (klikbaar):

Niet Goed

Afbeeldingslocatie: http://members.lycos.nl/audiozone/goed.jpg

Goed

Zoals je kan zien heb ik de positie hier maar ff op 0,0 gezet (gaat om tabel met stukje tekst "sub item") om het makkelijker te zien. In NS/MZ laat die hem dus in de linkerbovenhoek zien maar in IE vind die ondanks dat de positie absolute is dat het 0,0 punt in de linkerbovenhoek van mijn andere tabel is.

Wie kan mij helpen dit op te lossen of is de enige mogelijkheid om alle menu tabellen gewoon in 1 en dezelfde container te gooien die op 0,0 staat gepositioneerd?

edit:

Browser versies voor de mensen die het willen weten:
IE 6 SP1
MZ 1.4
NS 7.1
OP 7.1

[ Voor 5% gewijzigd door GF op 16-07-2003 02:37 ]

woensdag 16 juli 2003 07:58

Acties:

Verwijderd

ten eerste: doe zoiets nu alsjeblieft niet met tabellen maar met de elementen die daar het meest geschikt voor zijn, in dit geval lists naar mijn mening (zou opzich niks uitmaken voor je probleem, is meer iets van "gebruik het juiste gereedschap")

weet je zeker dat beide elementen absoluut gepositioneerd zijn? misschien is een stukje code of online voorbeeld wel handig

woensdag 16 juli 2003 08:04

Acties:

cutter

Wannabe i7 fanboy

stukje code wil ook wel helpen. Dingetjes visible maken kun je imho beter doen met divs (layers) Tabellen zijn hiervoor oorspronkleijk niet bedoeld.

woensdag 16 juli 2003 08:36

Acties:

Verwijderd

Een algemene denkfout bij het gebruik van position: absolute is dat coordinaten altijd ten opzichte van de linker bovenhoek van het scherm gemeten worden. Dit geldt echter alleen voor html-elementen die in de eerste laag binnen de body staan. Voorbeeldje:

code:

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

Als je hier bij beide divs coordinaten mee zou geven, zijn deze coordinaten ten opzichten van de linker bovenhoek van het scherm (de linkerbovenhoek is dus (0,0)). Heb je echter zoiets:

code:

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

Dan wordt bij position: absolute voor de geneste div niet de linkerbovenhoek van het scherm als (0,0) gezien maar de linkerbovenhoek van de div waarin ie genest is. Als deze div dus op (100,100) staat dan ziet de geneste div het punt (100,100) als (0,0). Bekijk (http://www.w3.org/TR/1998...ren.html#propdef-position) voor meer informatie.

woensdag 16 juli 2003 08:53

Acties:

crisp

Devver

Pixelated

Ik zou geen javascript gebruiken om je menu's te positioneren aangezien dat gewoon met CSS kan. Voorbeeldje (met een tabel):

HTML:

<table width="300" border="1">
  <tr>
    <td width="150" onmouseover="document.getElementById('menu1').style.visibility='visible'">
      <div style="position:relative">
        Menu 1
        <div id="menu1" style="position:absolute;top:18px;left:5px;visibility:hidden">
          <table width="150" border="1">
            <tr><td>Item 1</td></tr>
            <tr><td>Item 2</td></tr>
            <tr><td>Item 3</td></tr>
          </table>
        </div>
      </div>
    </td>
    <td width="150" onmouseover="document.getElementById('menu2').style.visibility='visible'">
      <div style="position:relative">
        Menu 2
        <div id="menu2" style="position:absolute;top:18px;left:5px;visibility:hidden">
          <table width="150" border="1">
            <tr><td>Item 1</td></tr>
            <tr><td>Item 2</td></tr>
            <tr><td>Item 3</td></tr>
          </table>
        </div>
      </div>
    </td>
  </tr>
</table>

Intentionally left blank

woensdag 16 juli 2003 09:30

Acties:

Bosmonster

*zucht*

Verwijderd schreef op 16 juli 2003 @ 08:36:
Een algemene denkfout bij het gebruik van position: absolute is dat coordinaten altijd ten opzichte van de linker bovenhoek van het scherm gemeten worden. Dit geldt echter alleen voor html-elementen die in de eerste laag binnen de body staan. Voorbeeldje:

...

Als je hier bij beide divs coordinaten mee zou geven, zijn deze coordinaten ten opzichten van de linker bovenhoek van het scherm (de linkerbovenhoek is dus (0,0)). Heb je echter zoiets:

...

Dan wordt bij position: absolute voor de geneste div niet de linkerbovenhoek van het scherm als (0,0) gezien maar de linkerbovenhoek van de div waarin ie genest is. Als deze div dus op (100,100) staat dan ziet de geneste div het punt (100,100) als (0,0). Bekijk (http://www.w3.org/TR/1998...ren.html#propdef-position) voor meer informatie.

Moet je er wel bijzeggen dat dit alleen geldt voor nesting met absoluut gepositioneerde elementen. Een absoluut gepositioneerde DIV in een 'gewone' DIV blijft zijn coordinaten van de linkerbovenhoek van het omsluitende absolute element nemen, meestal de body.

woensdag 16 juli 2003 10:10

Acties:

deviltje

Natuurlijk is een menu zelf maken het leukst, maar bij brainjar hebben ze al een heel mooi menu in elkaar gedraaid

http://www.brainjar.com/dhtml/menubar/

met complete uitleg over hoe en wat.. werkt iig in de opgegeven browsers

Iedereen die in telekinese gelooft, steek a.u.b. mijn hand op

woensdag 16 juli 2003 10:50

Acties:

Grijze Vos

Verwijderd schreef op 16 juli 2003 @ 08:36:
Een algemene denkfout bij het gebruik van position: absolute is dat coordinaten altijd ten opzichte van de linker bovenhoek van het scherm gemeten worden. Dit geldt echter alleen voor html-elementen die in de eerste laag binnen de body staan.

De definitie zegt redelijk duidelijk dat absolute positiong werkt aan de hand van de containing box. (In andere woorden, de parent). En het is niet per se ten opzichte van de linker bovenhoek.

Cascading Stylesheet:

right: 0px;
bottom: 0px;
width: 100px;
height: 100px;

Levert toch echt alignment aan de rechteronderkant op. Verder klopt je verhaaltje wel ongeveer

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

woensdag 16 juli 2003 11:29

Acties:

GF

Topicstarter

cutter schreef op 16 July 2003 @ 08:04:
stukje code wil ook wel helpen. Dingetjes visible maken kun je imho beter doen met divs (layers) Tabellen zijn hiervoor oorspronkleijk niet bedoeld.

Ok thnx voor de tip. Dan gooi ik er een divje omheen die ik visible maak. Code is trouwens lastig om te posten aangezien mijn hele menu met javascript gemaakt word en dus best veel is aangezien deze crossbrowser ontworpen is. Het ging nu eigenlijk ook niet om een error uit de code te halen maar eigenlijk om een theoretisch weetje zoals uit antwoord van MrMaikey bleek.

crisp schreef op 16 July 2003 @ 08:53:
[nohtml]Ik zou geen javascript gebruiken om je menu's te positioneren aangezien dat gewoon met CSS kan. Voorbeeldje (met een tabel):

Nee dat kan niet want zo als je kan zien is de hele site gecentreerd. Per resolutie zijn de coordinaten anders. Daar heb ik dus niks aan

Verwijderd schreef op 16 July 2003 @ 08:36:
Een algemene denkfout bij het gebruik van position: absolute is dat coordinaten altijd ten opzichte van de linker bovenhoek van het scherm gemeten worden. Dit geldt echter alleen voor html-elementen die in de eerste laag binnen de body staan. Voorbeeldje:
code:
1
2
3
4
5
6
<body>
  <div>
  </div>
  <div>
  </div>
</body>
Als je hier bij beide divs coordinaten mee zou geven, zijn deze coordinaten ten opzichten van de linker bovenhoek van het scherm (de linkerbovenhoek is dus (0,0)). Heb je echter zoiets:
code:
1
2
3
4
5
6
7
8
<body>
  <div>
    <div>
    </div>
  </div>
  <div>
  </div>
</body>
Dan wordt bij position: absolute voor de geneste div niet de linkerbovenhoek van het scherm als (0,0) gezien maar de linkerbovenhoek van de div waarin ie genest is. Als deze div dus op (100,100) staat dan ziet de geneste div het punt (100,100) als (0,0). Bekijk (http://www.w3.org/TR/1998...ren.html#propdef-position) voor meer informatie.

Kijk dit zocht ik dus. Alleen waarom is dit alleen in IE en niet is NS en MZ. Ik denk dan toch maar alles in een container te gooien

Bosmonster schreef op 16 juli 2003 @ 09:30:
[...]

Moet je er wel bijzeggen dat dit alleen geldt voor nesting met absoluut gepositioneerde elementen. Een absoluut gepositioneerde DIV in een 'gewone' DIV blijft zijn coordinaten van de linkerbovenhoek van het omsluitende absolute element nemen, meestal de body.

Ja dus zoals ik zelf al aangaf als eventuele oplossing is dus alles in een normale container te dumpen.

woensdag 16 juli 2003 23:07

Acties:

GF

Topicstarter

deviltje schreef op 16 July 2003 @ 10:10:
Natuurlijk is een menu zelf maken het leukst, maar bij brainjar hebben ze al een heel mooi menu in elkaar gedraaid

http://www.brainjar.com/dhtml/menubar/

met complete uitleg over hoe en wat.. werkt iig in de opgegeven browsers

Wat moet ik hier btw nu mee?? Ik ben toch iets zelf aan het knutselen. Waarom komen er dan altijd mensen met dit soort berichten. Denken jullie dat behalve de mensen die kant en klare scripts maken de enige zijn die dat kunnen? Daarnaast is kant en klaar nooit echt helemaal hoe je het zou willen.

Maaruh heb het probleem nu opgelost door middel van een simpele if statment waar die controleert of er gebruik word gemaakt van opera of IE. Zoja dan worden de coordinaten anders berekend.

Maar nu zit ik nog steeds eigenlijk met de vraag waarom in MZ en NS wel vanaf de body word gekeken en in ie en opera vanuit de parent. Ik heb gelezen dat dat bij de standaard hoort maar waarom houden mz en ns zich daar dan weer niet aan in dit geval. Browsers

[ Voor 27% gewijzigd door GF op 16-07-2003 23:10 ]

woensdag 16 juli 2003 23:13

Acties:

crisp

Devver

Pixelated

GF schreef op 16 July 2003 @ 11:29:
[...]
Nee dat kan niet want zo als je kan zien is de hele site gecentreerd. Per resolutie zijn de coordinaten anders. Daar heb ik dus niks aan

En? Centreren kan niet in CSS ofzo? Wat ik bedoel te zeggen is dat je voor relatieve positionering (zoals centreren) geen javascript nodig hebt, en dat je binnen je relatief gepositioneerde elementen weer absoluut kunt positioneren ten opzichte van je relatieve element.
Dit concept is wel zo simpel; daar heb je eigenlijk niet eens tables voor nodig...

GF schreef op 16 July 2003 @ 23:07:
[...]
Maaruh heb het probleem nu opgelost door middel van een simpele if statment waar die controleert of er gebruik word gemaakt van opera of IE. Zoja dan worden de coordinaten anders berekend.

Maar nu zit ik nog steeds eigenlijk met de vraag waarom in MZ en NS wel vanaf de body word gekeken en in ie en opera vanuit de parent. Ik heb gelezen dat dat bij de standaard hoort maar waarom houden mz en ns zich daar dan weer niet aan in dit geval. Browsers

Juist Mozilla/NS houdt zich aan de standaard. Zoek maar eens op dit forum naar 'boxmodel'. Maar nogmaals: dit kan absoluut zeker weten zonder javascript, met gelijk effect in alle moderne browsersmaken!

[ Voor 40% gewijzigd door crisp op 16-07-2003 23:15 ]

Intentionally left blank

donderdag 17 juli 2003 00:25

Acties:

GF

Topicstarter

crisp schreef op 16 July 2003 @ 23:13:
[...]

En? Centreren kan niet in CSS ofzo? Wat ik bedoel te zeggen is dat je voor relatieve positionering (zoals centreren) geen javascript nodig hebt, en dat je binnen je relatief gepositioneerde elementen weer absoluut kunt positioneren ten opzichte van je relatieve element.
Dit concept is wel zo simpel; daar heb je eigenlijk niet eens tables voor nodig...

[...]

Juist Mozilla/NS houdt zich aan de standaard. Zoek maar eens op dit forum naar 'boxmodel'. Maar nogmaals: dit kan absoluut zeker weten zonder javascript, met gelijk effect in alle moderne browsersmaken!

Centreren van een element is niet het probleem maar het plaatsen van een variabel element wel. Ik bedoel: je hebt dus geen vaste coordinaten ter beschikking. Het het dan toch ook niet voor niets dhtml.

For absolutely positioned boxes, the offsets are with respect to the box's containing block. For relatively positioned boxes, the offsets are with respect to the outer edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).

Als ik dit dus lees concludeer ik juist dan ms zich voor de afwisseling aan de standaard heeft gehouden en niet ns zoals jij zegt. Of lees ik iets verkeerd

donderdag 17 juli 2003 01:10

Acties:

crisp

Devver

Pixelated

GF schreef op 17 July 2003 @ 00:25:
[...]
Centreren van een element is niet het probleem maar het plaatsen van een variabel element wel. Ik bedoel: je hebt dus geen vaste coordinaten ter beschikking. Het het dan toch ook niet voor niets dhtml.

Nee, je kan vanuit een variabel gepositioneerd element wel degelijk via offsets positioneren. Je hebt welliswaar een container nodig, maar het kan.

Als ik dit dus lees concludeer ik juist dan ms zich voor de afwisseling aan de standaard heeft gehouden en niet ns zoals jij zegt. Of lees ik iets verkeerd

Je leest het inderdaad verkeerd. Je hebt buiten block en inline elementen ook nog andersoortige elementen die nog block nog inline zijn. IE beschouwd een table-cell als een soort van block-element terwijl het dat niet is; tables zijn een buitenbeentje, en als je binnen een TD een blocklevel positioneerd dan neemt IE foutief de TD als parent. Daarom heb je binnen die cell een container (block-level element) nodig met expliciet een "position:relative" wil Mozilla dat accepteren.
In feite werkt het gebruik van tables voor opmaak in moderne browsers je steeds meer tegen; jammer is echter dat nog niet voor alle mogelijkheden die tables hebben er een passende oplossing is in CSS (maar hier niet van toepassing).

Edit: als je een stukje code kan geven, dan kan ik mijn verhaal natuurlijk beter onderbouwen

[ Voor 4% gewijzigd door crisp op 17-07-2003 01:12 ]

Intentionally left blank

donderdag 17 juli 2003 04:21

Acties:

GF

Topicstarter

Ah ok. Weer wat geleerd dan. Als je wat code wil zien moet je hier ff kijken. Heb ff van lokale server gesaved. Dit word dus gerenderd normaal gesproken mbv templates in db

ps. kijk nog niet naar de opbouw van het menu want daar moet nog aan gesleuteld worden. Maar hij werkt al wel helemaal goed in de eerder genoemde browsers.