[DHTML] Positie van een span bepalen

[porn*]

Ik zit met een dynamisch pull-down menu, dat alleen in Explorer werkt. Het werkt via spans die kleuren en borders krijgen, en met text ingevuld worden zodat het lijkt alsof het een echt menu is.
Dat het niet werkt in andere browsers komt (onder andere) omdat het commando getHTMLRects gebruikt wordt, om zo de positie van een span op te halen. Dit wordt alleen in Explorer ondersteund.

Weet iemand of daar een alternatieve manier voor is in Netschaap en Mozilla e.d.?

[drm]

er zijn zat pulldownmenuutjes te vinden die prima werken in NS en Mozilla. En als je het over vinden hebt, is google jouw grootste vriend.

[Dennis]

<span> is een element dat je eigenlijk niet mag gebruiken voor absolute positioning. Omring het met een <div> svp

[drm]

Op woensdag 02 januari 2002 16:01 schreef dennisdotcom het volgende:
<span> is een element dat je eigenlijk niet mag gebruiken voor absolute positioning. Omring het met een <div> svp

hoe kom je daar bij?

[porn*]

Op woensdag 02 januari 2002 16:02 schreef drm het volgende:

[..]

hoe kom je daar bij?

Dat vraag ik me ook af

Nou ik ben mezelf rot aan het zoeken naar GOEDE sites waarin (D)HTML objecten en hun properties en functies beschreven staan maar het schiet niet echt op... Ik gebruik eigenlijk altijd M$DN, staat het allemaal mooi bij elkaar, maar daar zitten dus ook dingen bij die NIET aan de standaard voldoen, oftewel niet werken in andere browsers

[drm]

Op woensdag 02 januari 2002 16:05 schreef porn het volgende:

[..]

Dat vraag ik me ook af

Nou ik ben mezelf rot aan het zoeken naar GOEDE sites waarin (D)HTML objecten en hun properties en functies beschreven staan maar het schiet niet echt op... Ik gebruik eigenlijk altijd M$DN, staat het allemaal mooi bij elkaar, maar daar zitten dus ook dingen bij die NIET aan de standaard voldoen, oftewel niet werken in andere browsers

dhtml.com webreference.com hotscripts.com etcetera

[Dennis]

Op woensdag 02 januari 2002 16:02 schreef drm het volgende:
hoe kom je daar bij?

Wel eens sites gezien waar het wél wordt gebruikt dan

[drm]

Op woensdag 02 januari 2002 16:06 schreef dennisdotcom het volgende:
Wel eens sites gezien waar het wél wordt gebruikt dan

Ja, mijn eigen
just kidding.

absolute positionering is gewoon CSS, en er staat nergens in de CSS specificaties dat je dat niet voor spans mag gebruiken.

[Pelle]

Op woensdag 02 januari 2002 16:06 schreef dennisdotcom het volgende:
Wel eens sites gezien waar het wél wordt gebruikt dan

Das natuurlijk onzin. Een beetje je kop in het zand steken zegmaar.. ik zie jullie niet dus jullie zien mij ook niet..
Het wordt niet gebruikt dus het mag niet. Dubieus.

[Dennis]

Op woensdag 02 januari 2002 16:07 schreef drm het volgende:
Ja, mijn eigen
just kidding.

absolute positionering is gewoon CSS, en er staat nergens in de CSS specificaties dat je dat niet voor spans mag gebruiken.

Staat niet dat het niet mag misschien, maar het is niet de bedoeling. Anders hadden ze de <div> en <span> wel samen kunnen voegen denk je ook niet...!

[Bluestorm]

object.offsetHeight
en
object.offsetWidth

moet je daarvoor hebben...

bij bepaalde browsers is het daarvoor wel nodig om een position:absolute; of position:relative; mee te geven met het object waarvan je de offset wil weten... Alleen bij mij vond netscape dat niet leuk als je dat in de style="" zet... dus moet je 'm even in een css bestandje mikken...

[drm]

Op woensdag 02 januari 2002 16:09 schreef dennisdotcom het volgende:

[..]

Staat niet dat het niet mag misschien, maar het is niet de bedoeling. Anders hadden ze de <div> en <span> wel samen kunnen voegen denk je ook niet...!

Natuurlijk niet. In platte html hebben div en span namelijk een andere betekenis. Voor mijn part pas je position:absolute zelfs toe op <a ..> tags. Mag allemaal hoor.

[Pelle]

Op woensdag 02 januari 2002 16:11 schreef drm het volgende:
Natuurlijk niet. In platte html hebben div en span namelijk een andere betekenis.

Idd. <div> genereert een line-break, <span> niet.

[drm]

Pelle:
Idd. <div> genereert een line-break, <span> niet.

shhhh! niet verklappen

[oh,when?]

Op woensdag 02 januari 2002 16:09 schreef dennisdotcom het volgende:

[..]

Staat niet dat het niet mag misschien, maar het is niet de bedoeling. Anders hadden ze de <div> en <span> wel samen kunnen voegen denk je ook niet...!

je loopt weer een beetje te brabbelen...

<SPAN> en <DIV> zijn allebei grouping elementen, en worden zonodig gebruikt als container, voor stijlelementen. Het enige verschil tussen deze twee dat het ene element (<SPAN>) content defineerd als inline, en het andere op block-level nivo staat, wat dus een op een andere manier geparsed word in de tree.

[oh,when?]

Op woensdag 02 januari 2002 16:13 schreef Pelle het volgende:

[..]

Idd. <div> genereert een line-break, <span> niet.

in de huidige browsers word er idd een linebreak gegenereerd, echter dit staat los van de betekenis van het element in het document. MAW een andere browser zou deze op een andere manier (kunnen) renderen. Dat is een verschil van aanname.

[Dennis]

Op woensdag 02 januari 2002 16:23 schreef oh,when? het volgende:
in de huidige browsers word er idd een linebreak gegenereerd, echter dit staat los van de betekenis van het element in het document. MAW een andere browser zou deze op een andere manier (kunnen) renderen. Dat is een verschil van aanname.

Met CSS kun je dat ook zo veranderen...
Maar stel dat er geen linebreak meer wordt gegenereerd, wat is volgens jou dán het verschil ?

[drm]

Op woensdag 02 januari 2002 16:21 schreef oh,when? het volgende:

[..]

je loopt weer een beetje te brabbelen...

<SPAN> en <DIV> zijn allebei grouping elementen, en worden zonodig gebruikt als container, voor stijlelementen. Het enige verschil tussen deze twee dat het ene element (<SPAN>) content defineerd als inline, en het andere op block-level nivo staat, wat dus een op een andere manier geparsed word in de tree.

_{<aanvulmode status="on">}

terwijl je <span style="display:block"> en <div style="display:inline"> ook prima kunt gebruiken, maar dat was pas toen CSS zijn neus om de hoek stak (logischerwijs)

^{</aanvulmode>}

[oh,when?]

Op woensdag 02 januari 2002 16:24 schreef dennisdotcom het volgende:

...wat is volgens jou dán het verschil ?

zie het antwoord daarboven.

[Dennis]

http://www.w3.org/TR/REC-html40/struct/global.html#edef-SPAN

Zie het stukje source daaronder...

[oh,when?]

Op woensdag 02 januari 2002 16:31 schreef dennisdotcom het volgende:
http://www.w3.org/TR/REC-html40/struct/global.html#edef-SPAN

Zie het stukje source daaronder...

precies!!

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content.

En dat is nu precies wat ik bedoel. Deze elementen worden gebruikt om de structuur van het html document weer te geven, en enige rendering van de browser is daar strict onafhankelijk van. Dat toevallig de huidige browsers zoals IE en NS daar een <br> voor renderen staat daar los van.

Dus feitelijk bevestig je nu mijn punt. Mijn dank is groot

[Dennis]

Op woensdag 02 januari 2002 18:25 schreef oh,when? het volgende:
Dus feitelijk bevestig je nu mijn punt. Mijn dank is groot

Ik zei stukje source daaronder, doelend op de code.
Daarin zie je een praktijkvoorbeeld hoe het gebruikt dient te worden.

Verder staat op htmlhelp ook duidelijk vermeld dat <div> is bedoeld om <table> en <p> in te nesten

[oh,when?]

Op woensdag 02 januari 2002 18:56 schreef dennisdotcom het volgende:

..Verder staat op htmlhelp ook duidelijk vermeld dat <div> is bedoeld om <table> en <p> in te nesten

is dat niet wat ik de hele tijd verkonding?

Op woensdag 02 januari 2002 16:21 schreef oh,when? het volgende:


<SPAN> en <DIV> zijn allebei grouping elementen, en worden zonodig gebruikt als container, voor stijlelementen. Het enige verschil tussen deze twee dat het ene element (<SPAN>) content defineerd als inline, en het andere op block-level nivo staat, wat dus een op een andere manier geparsed word in de tree.

laten we deze thread ff samenvatten:


• topicstarter vraagt of er een alternatieve manier is om de absolute positie van een <span> te bepalen
• je antwoord dat <span> niet gebruikt mag worden voor absolute positionering, je geeft als tip om deze te omringen met <div> (zoals ook in het voorbeeld dat je aangeeft)
• de reden die je aangeeft waarom het niet mag is omdat je het nog nooit hebt gezien ( wel een hele zwakke reden )
• ik geef vervolgens uitleg wat nu de reden is dat er 2 zogenaamde grouping tags zijn, <div> en <span> en dat dat het enige verschil is tussen deze tags
• daarna bevestig je mijn punt door de link naar het W3C te geven, waaruit ik weer kan quoten

Je beperking is dat je teveel denkt in visuele termen, terwijl html juist bedoeld is om de structuur van een document weer te geven. Ik heb zelf ook moeite gehad om deze 2 los van elkaar te zien. <span> is een inline grouping element, en <div> een block-level element en defineeren een structuur aan, enig visuele rendering door de browser staat hier los van. Je geeft zelf aan dat dit door CSS is op te vangen. Daardoor is het volstrekt legitiem om een <span> door middel van stylesheets absoluut te positioneren.

[Dennis]

Oh, when: Je verdraait mijn woorden op alle mogelijke manieren om jezelf maar zoveel mogelijk gelijk te geven. En dat geldt niet alleen voor dit topic. Wordt er een beetje schijtziek van

Als ik zeg dat <div> is bedoeld om <table> en <p> in te nesten moet jij er niet meteen vanuit gaan dat ik met <div> ook meteen <span> bedoel. Op de site die ik daarvoor refereerde staat duidelijk dat block-level elementen zoals <p> en <table> voornamelijk in <div> genest dienen te worden.

Door de lezen had je kunnen zien dat ik dus <div> zei en niet <span>

[prototype]

Op woensdag 02 januari 2002 19:14 schreef dennisdotcom het volgende:
Oh, when: Je verdraait mijn woorden op alle mogelijke manieren om jezelf maar zoveel mogelijk gelijk te geven. En dat geldt niet alleen voor dit topic. Wordt er een beetje schijtziek van

Als ik zeg dat <div> is bedoeld om <table> en <p> in te nesten moet jij er niet meteen vanuit gaan dat ik met <div> ook meteen <span> bedoel. Op de site die ik daarvoor refereerde staat duidelijk dat block-level elementen zoals <p> en <table> voornamelijk in <div> genest dienen te worden.

Door de lezen had je kunnen zien dat ik dus <div> zei en niet <span>

ja sorry, 'k kon het niet laten

[Verwijderd]

Op woensdag 02 januari 2002 19:14 schreef dennisdotcom het volgende:

Op de site die ik daarvoor refereerde staat duidelijk dat block-level elementen zoals <p> en <table> voornamelijk in <div> genest dienen te worden.

Ben ik het mee eens: een <p> of <table> is niet bedoeld om inline toegepast te worden.
Ik vind dat je een span alléén moet gebruiken als je in een regel iets met bepaalde woorden wilt doen.

Het is er zodat je sommige (imho) achterlijke HTML 4.01 tags niet hoeft te gebruiken.

Voor alles wat je niet inline wilt doen, heb je helemaal niets aan span, aangezien een <span> in principe een <div style="display: inline;"> is.

Dus ik vind dat je alleen span moet gebruiken als je niet met de positionering gaat spelen.

Dat het wel kan is waar, maar ik raad het je af, omdat het vrij nutteloos is. Bovendien is div korter

[Tom]

Op woensdag 02 januari 2002 19:14 schreef dennisdotcom het volgende:
Oh, when: Je verdraait mijn woorden op alle mogelijke manieren om jezelf maar zoveel mogelijk gelijk te geven. En dat geldt niet alleen voor dit topic. Wordt er een beetje schijtziek van

Hij heeft toch ook gelijk?

[oh,when?]

Op woensdag 02 januari 2002 19:14 schreef dennisdotcom het volgende:
Oh, when: Je verdraait mijn woorden op alle mogelijke manieren om jezelf maar zoveel mogelijk gelijk te geven. En dat geldt niet alleen voor dit topic. Wordt er een beetje schijtziek van

ik snap niet goed waarom je schijtziek word. Das ook niet goed voor je gezondheid...

Maar ten eerste:

• Ik verdraai niemand zijn woorden
• Speel altijd de bal, nooit de man


Dat het misschien irritant is dat ik vaak zo reageer kan ik inkomen, want het komt vaak heel betweterig over. Echter mijn idee erachter is dat als je een antwoord geeft, je ook helemaal goed moet zitten, en niet maar een half goed antwoord moet geven. Noem het miereneuken, of een extreme vorm van perfectionisme. Maar goed..ik vind je nog steeds lief hoor

[Dennis]

Op woensdag 02 januari 2002 19:35 schreef oh,when? het volgende:
bla

Wil je nu ook nog ff op de nuttige inhoud van mijn post ingaan? Thanx!

[Clay]

Ik vind span een suffe tag.

het enige waar ik um voor gebruik is als alternatieve font tag met een class om netscape de css goed te laten doen als je dynamisch content schrijft naar layers. Kan ook met een font tag, maar een font tag = evil

[Verwijderd]

Op woensdag 02 januari 2002 19:50 schreef Clay het volgende:
Ik vind span een suffe tag.

het enige waar ik um voor gebruik is als alternatieve font tag met een class om netscape de css goed te laten doen als je dynamisch content schrijft naar layers. Kan ook met een font tag, maar een font tag = evil

ik gebruik inderdaad alleen span ipv. de font, big, cite, code, small, etc. en dat soort tags.

[Dennis]

Op woensdag 02 januari 2002 19:50 schreef Clay het volgende:
Ik vind span een suffe tag.

het enige waar ik um voor gebruik is als alternatieve font tag met een class om netscape de css goed te laten doen als je dynamisch content schrijft naar layers. Kan ook met een font tag, maar een font tag = evil

Bovendien zijn font tags niet meer toegestaan in xhtml. En jij gebruikt dus het span element precies zoals het bedoeld is

[oh,when?]

Op woensdag 02 januari 2002 19:44 schreef dennisdotcom het volgende:

[..]

Wil je nu ook nog ff op de nuttige inhoud van mijn post ingaan? Thanx!

ach ja...ff een c/p uit onze ICQ conversatie, en dat geeft weer een heel nieuw licht op de inhoud van deze thread (met toestemming van dennisdotcom ):

dennisdotcom: elk html element is wel ergens voor....dat iets kan wil nog niet zeggen dat het de bedoeling is...
centreet jij ook nog steeds sites? mooi.... binnenkort mag het niet meer
en toch kan het nog
gek hè
Oh,when?: ?
Oh,when?: centreet?
dennisdotcom: doe maar centreert
Oh,when?: waarom mag ik geen sites centreren?
dennisdotcom: dat mag straks niet meer...
Oh,when?: van wie niet?
dennisdotcom: nieuwe html specs
je mag niet meer <center> of <div align="center"> oid gebruiken
Oh,when?: dus daarom mag ik niet centreren??
dennisdotcom: idd

het kan wel
maar het mag niet
gek hè
Oh,when?: volgens mij begin je nu echt onzin uit te kramen :-)
dennisdotcom:
dennisdotcom: en toch heb ik gelijk
Oh,when?: erm..zal ik maar voor je eigen bestwil deze conversatie als nooit gehouden beschouwen of wil je dat ik dit ga posten op GoT?
dennisdotcom: is goed hoor
maar ga dan ook ff in op alle replies die na jouw laatste posts kwamen in het topic
Oh,when?: ja is goed
Oh,when?: moment

[Dennis]

Op woensdag 02 januari 2002 19:59 schreef oh,when? het volgende:

Whahaha
ROTFLMAO

Lig me hier te bescheuren

[prototype]

Op woensdag 02 januari 2002 20:00 schreef dennisdotcom het volgende:

[..]

Whahaha
ROTFLMAO

Lig me hier te bescheuren

Anders ik wel

[oh,when?]

Op woensdag 02 januari 2002 19:14 schreef dennisdotcom het volgende:

Als ik zeg dat <div> is bedoeld om <table> en <p> in te nesten moet jij er niet meteen vanuit gaan dat ik met <div> ook meteen <span> bedoel. Op de site die ik daarvoor refereerde staat duidelijk dat block-level elementen zoals <p> en <table> voornamelijk in <div> genest dienen te worden.

Door de lezen had je kunnen zien dat ik dus <div> zei en niet <span>

*zucht*

op je eigen verzoek ontkracht ik nog even je antwoord:

Ik ga er helemaal niet van uit dat je de verschillen niet weet tussen <div> en <span>. Waar ik wel van uit ga is de aanname dat de visuele rendering een verschil is tussen elementen in HTML. Dit is dus niet juist. Hoe een bepaalde tag door de browser word gerenderd, staat volledig los van wat de waarde is van een element binnenin een document. We hebben het nu over <div> en <span> maar dat maakt binnen mijn standpunt weinig verschil. Het verschil tussen visuele rendering, en structuur van een document is een 'materie' die ik pas na een tijdje doorhad. Ik beperkte mijzelf teveel door html te zien als een visueel iets, terwijl het juist structuur moet geven.

En omdat je graag ziet dat ik miereneuk:

"...dat block-level elementen zoals <p> en <table>.."

<p> is geen block-level element, maar behoort tot zijn eigen groep, paragraphs.
<table> is ook geen block-level element maar is een manier om zogenaamde tabular data te structuren. (zie ook hier)

[drm]

dennisdotcom:
<span> is een element dat je eigenlijk niet mag gebruiken voor absolute positioning. Omring het met een <div> svp

We dwalen af. Dit is niet waar. punt.

En om maar even in oh,when?'s woorden te spreken: "Ik speel de bal, niet de man"

[Verwijderd]

Op woensdag 02 januari 2002 19:50 schreef Clay het volgende:
Ik vind span een suffe tag.

het enige waar ik um voor gebruik is als alternatieve font tag met een class om netscape de css goed te laten doen als je dynamisch content schrijft naar layers. Kan ook met een font tag, maar een font tag = evil

True, maar je kunt de DIV en SPAN tags voor nog meer doelen gebruiken...ook al zijn ze daar misschien niet voor bedoeld. Als je in een TD rare margins wilt hebben (2px links, 3px rechts, 4px boven en 1px onder, ik zeg maar wat) kun je dat in NS4.7 bijna alleen voor elkaar krijgen (is mijn ervaring) met een combinatie van de DIV en de SPAN tags.

[porn*]

Sjeetje het was niet de bedoeling een dergelijke discussie op gang te brengen die tot ruzie gaat leiden

Maarre in ieder geval allemaal bedankt, het is gelukt. We gebruiken voor de positionering van ALLE elementen spans, omdat het gewoon makkelijker is dan <DIV>'s te gebruiken en in elke stijl "display: inline;" op te nemen.

Of spans suf zijn of niet, als ze toch makkelijker in gebruik zijn dan divs voor bepaalde toepassingen kun je dat toch doen?

Bluestorm: nog bedankt want daar ging het uiteindelijk om, bepalen van de positie (en lengte/breedte) en dat is dus perfekt gelukt.
Weet iemand nog een verklaring waarom bijv. <object>.style.left niet werkt in zowel MSIE als Netschape als je werkt via stijlklassen? Oftewel, in de header van het document een inline style-class definieren en daarna aan refereren via class="bla".

Offtopic: we hebben toch maar gelikte sites gemaakt die volledig met spans worden opgebouwd
Voorbeeldje van een administratiemenu van een webshop:

[drm]

porn liet even wat zien en vroeg iets over style.left

Zit er apegelikt, moet ik zeggen. Opacitygeintjes zijn heerlijk

Probeer het eens met object.style.pixelLeft. Dat is volgens mij de gerenderde afstand, en object.style.left is een representatie van wat je opgegeven hebt in het style="..." attribuut.

Maar ben er niet zeker van of dat in NS < 6 werkt

shoot me if i'm wrong

[porn*]

Op donderdag 03 januari 2002 10:21 schreef drm het volgende:

[..]

Zit er apegelikt, moet ik zeggen. Opacitygeintjes zijn heerlijk

Probeer het eens met object.style.pixelLeft. Dat is volgens mij de gerenderde afstand, en object.style.left is een representatie van wat je opgegeven hebt in het style="..." attribuut.

Maar ben er niet zeker van of dat in NS < 6 werkt

shoot me if i'm wrong

Pauw u'r wrong

Pixelleft geeft steeds 0, welke positie ik ook ingeef voor de span. En inderdaad werkt het niet in NS, en dat is dus het streven, bovenstaand menuutje ook in NS te laten werken.

[drm]

porn shot drm

headshot!

hmmm nu durf ik helemaal niets meer te zeggen *ashamed*

maf, want volgens mij heb ik daar pas ook een dergelijk probleem mee opgelost...

[porn*]

Op donderdag 03 januari 2002 10:41 raakte ik drm met een headshot

Had je maar kevlar+helm moeten kopen

Hmm vaag ik krijg telkens 0, misschien bugje in MSIE6 dat ze hier draaien? Ben ik toch al niet zo kapot van, 5.5 is veel stabieler en sneller.

Schaam je vooral niet, kan dus ook best aan mij liggen OF aan MSIE hier

Maar in ieder geval bedankt!

Oja ook nog zoiets leuks: Netscape tekent een border BUITEN de span (dus span width 60px met border van 1px geeft een width van 62px) terwijl MSIE gewoon binnen de span die border zet (width nog steeds 60px).



Maja we komen er wel uit

[Bluestorm]

Op woensdag 02 januari 2002 16:10 schreef Bluestorm het volgende:
object.offsetHeight
en
object.offsetWidth

moet je daarvoor hebben...

bij bepaalde browsers is het daarvoor wel nodig om een position:absolute; of position:relative; mee te geven met het object waarvan je de offset wil weten... Alleen bij mij vond netscape dat niet leuk als je dat in de style="" zet... dus moet je 'm even in een css bestandje mikken...

Hmmm erg... beetje foute functies geef ik daar...

maar hier:

code:

function getPosition(image) {
    leftoffset = 0;
    if(document.getElementById) var leftoffset = document.getElementById(image).offsetLeft;
    else if (document.all) var lefftoffset = document.all[image].offsetLeft;
    else if (document.images[image].x) var leftoffset =  document.images[image].x;
    
    return leftoffset;

}

da's een functie voor het bepalen voor de x positie van een relatief geplaatst plaatje... (class : .relative {position: relative; top: 0px; left: 0px;} )

die kun je vast wel ombuigen naar een functie die de het zelfde doet voor een span... je hoeft alleen maar y (offsetTop) bij te voegen en objecten wat te veranderen...

[Clay]

gebruik anders ff een property-lees scriptje:

code:

function getProperties(obj) {
   var res = "";
   for(var i in obj) {
    res += i +' \t-  ';
    res += obj[i];
    res += '\n';
   }
   alert(res);
}

als je daar bijvoorbeeld als obj een span meestuurt krijg je een hele lijst dingen, zit vast wel iets nuttigs tussen.

[porn*]

Jah tnx beiden zoiets kan ik wel schrijven, nu alleen weer het probleem dat span in MSIE over een iframe geplaatst wordt als hij daarna pas getekend wordt, in NS komt het iframe gewoon overal overeen

Maja ik zoek nog even verder...

[Yellow|A]

* Yellow|A snikt en kijkt omhoog, gebalde vuisten, dramatische muziek en natuurlijk onweer

"can't we all just be friends?"