[CSS]Character map

[David]

Ik ben bezig een character map (zoals je die in Windows vindt) te maken in XHTML en CSS. De character map moet in een raster speciale karakters laten zien. Zodra je over een karakter hovert, verandert de achtergrondkleur en lettergrootte. Om het geheel strak in een raster te krijgen heb ik nu een tabel gebruikt, maar het liefst wil ik een definition list gebruiken.

Het is de bedoeling dat zodra je over een karakter hovert, de font-size vergroot wordt zoals het dialoog in Windows ook doet. Het probleem in de huidige aanpak is echter dat de tabelrij meeschaalt, en dat het hele raster meebeweegt. Het best kan ik dit illustreren aan de hand van wat ik tot nu toe in elkaar gezet heb:
Linkje

Dit is natuurlijk te omzeilen door elke <tr> een aparte id mee te geven en die een absolute position te geven, maar dat is eigenlijk niet zoals ik het wil oplossen. Ik ben aan de slag gegaan met het correct opmaken van een lijst, maar dat wil ook niet lukken. Kan iemand mij misschien de zet in de goede richting geven die ik nodig heb?

Kleine kanttekening trouwens: het geheel hoeft alleen te werken in Mozilla 1.5 of hoger. Geen andere browsers dus.

[edit]
Mijn tweede poging, met definition list (nog niet juist gebruikt, gaat er eerst om of het werkt): Linkje2

[ Voor 7% gewijzigd door David op 11-02-2004 23:29 ]

[Verwijderd]

Je wilt zoiets ongeveer zoals http://diveintomark.org/ heeft, ongeveer?
Hij heeft een div class="squares" met erin allemaal absoluut gepositioneerde vierkantjes.
http://diveintomark.org/css/squares-final.css
Nogal een gedoe met css, maar het werkt wel.
Ik denk dat het haast niet anders kan dan met absoluut gepositioneerdheid.

[David]

Het positioneren van de items gaat prima (zie m'n linkje2 is de startpost), maar zodra ik de grootte van een item vergroot (bij het hoveren) schuiven de kolommen/rijen mee. In de link die jij vangen ze dat op met ruimte rondom de blokjes, maar ik wil dat mijn blokjes de andere overlappen.

't helpt trouwens wel om een negatieve margin te gebruiken. Alleen zit ik nu met een overlap-probleem. Ik ga eens kijken of ik dit met z-indexen op kan lossen.

edit:

Ik zie net dat z-indexes alleen werken op absoluut gepositioneerde elementen. Nog niet helemaal klaar dus. Linkje twee is geupdate.

[ Voor 39% gewijzigd door David op 12-02-2004 00:07 ]

[Verwijderd]

Heb jij geluk, een simpele position:relative; in je dt.entity:hover en hij werkt.
Niet kijken in andere browsers als bijv. Opera7.
Ik krijg wel de indruk dat dit eigenlijk fout gedrag is van Mozilla.

[David]

Hartstikke bedankt. Gelukkig hoeft het niet te werken in andere browsers, dus dit is ideaal.

[Verwijderd]

Ik wil alleen nog maar zeggen: Als dit fout gedrag is van Mozilla en ze fixen de bug, dan ... heb je een probleem

[David]

Verwijderd schreef op 12 februari 2004 @ 00:20:
Ik wil alleen nog maar zeggen: Als dit fout gedrag is van Mozilla en ze fixen de bug, dan ... heb je een probleem

Goed punt. Is er dan misschien toch een juiste manier om dit aan te pakken, voor op de lange termijn?

[Blaise]

Misschien kan je iets met dit voorbeeld?

edit: ohnee, MS Word doet dat anders

[ Voor 114% gewijzigd door Blaise op 12-02-2004 00:28 ]

[Verwijderd]

Ja, die absoluut gepositioneerde aanpak van divintomark wat ik je eerder zei. Maar dit is wel een hoop css-gedoe denk ik.
Mozilla mist nog de :nth-child pseudoclass selector om het je in dit voorbeeld waarschijnlijk makkelijker te maken.
Je zou misschien door slim classes uit te zoeken voor elk element de css kunnen versimpelen.
Duz zoiets: <dt class="x1 y1"
x1 staat voor de left property van het element
y1 staat voor de top property van het element

[Blaise]

Dit is denk ik wel wat DiMension bedoelt: click

[Verwijderd]

Verrek, het kan dus wel simpel

[David]

Blaise schreef op 12 februari 2004 @ 00:35:
Dit is denk ik wel wat DiMension bedoelt: click

Hij doet inderdaad wat hij zou moeten doen, maar wederom dankzij het position: relative-verhaal, en niet dankzij je z-index (die doet namelijk niks op je relatief gepositioneerde element). Als de bug in Mozilla gefikst wordt heb ik dus nog steeds een probleem.

[David]

Een tweede hoofdbreker doet z'n intrede. Om mezelf een hoop typwerk te besparen heb ik dit:

PHP:

<dt class="entity" onclick="window.location.href='charmap.html?&amp;nbsp;'" title="Non breaking space">&nbsp;</dt>

vervangen door dit (met bijbehorende functie):

PHP:

<dt class="entity" onclick="getEntity(this)" title="Non breaking space">&nbsp;</dt>


  function getEntity(entity) {
     window.location.href = "charmap.html?" + entity.innerHTML;
  }

Nu wordt de letterlijke string van de entity op de een of andere manier automatisch ge-escaped. (& wordt %C2 bijvoorbeeld). Ik heb geprobeerd met een regexp de ampersand (&) uit de innerHTML te vervangen door &, maar dat leverde geen resultaat op, er werd geen string gereturnd.

[Blaise]

Zonder relative positioning werkt het ook maar verdwijnt het achter de volgende div; die z-index en positioning is dus alleen om het op de voorgrond weer te geven. Niet om een of andere vage hack te gebruiken.

Op zich kan je DMV die margin ook zorgen dat hij vergroot naar linksboven zodat die z-index/relative niet nodig is.

[Justice]

Blaise voorbeeld doet het ook als enige goed in Opera 7.23 dus ik denk dat het correcte markup +stylesheet is. Het zou namelijk wel raar zijn dat Opera ook dezelfde bug heeft.

[Verwijderd]

in een URI moet je ook entities gebruiken, het wordt dus charmap.html?&amp;nbsp;
bovendien levert je innerhtml volgens mij het character terug en niet de entity

[David]

Verwijderd schreef op 12 februari 2004 @ 10:25:
in een URI moet je ook entities gebruiken, het wordt dus charmap.html?&amp;nbsp;
bovendien levert je innerhtml volgens mij het character terug en niet de entity

Dat had ik inderdaad (uit de praktijk) begrepen. Is er toch een manier om niet het karakter maar de entity uit de <dd> te vissen?