[css] div probleem in IE met rollover images

[Verwijderd]

Ha, dit is er weer een: zo'n n00b die wat met css aan het vogelen is en er achter komt dat FF en IE de hele boel anders interpreteren.

Het idee was om een <div> te maken, waarin het achtergrondplaatje verandert als je er met je muis overheen waait. Ik had daarom een plaatje gemaakt met beide knopjes daarin: eentje met rode tekst, en eentje met zwarte tekst:


In het css sheet schuif ik de background-position van de <div id="honden"> op van 0% 0% naar 0% 100%

Cascading Stylesheet:

#honden
{
    float: left;
    /*
    position: absolute;
    top: 165px;
    left: 18px; */
    width: 158px;
    height: 20px;
    
}

#honden a img   {
border:none;
background-color:#00FFFF;
background: url(honden.jpg) no-repeat;
background-position: 0% 0%;
width: 158px; 
height: 20px;
}

#honden a:hover img {
border: none;
background-position: 0% 100% ; 
}

#honden a:active img {
border: none;
background-position: 0% 100% ; 
}

In de html bups roep ik een transparant gifje op om overheen te gaan:

HTML:

<div id="honden"><a href="index.php?onderdeel=honden"><img src="transpgif.gif" height="22" width="158" alt="" /></a></div>

In Firefox werkt dit prima, maar in Internet Explorer doet ie het niet. Ik heb al twee dagen lopen puzzelen en natuurlijk googelen maar ik kom er niet uit.

Het hele project is hier te vinden:

http://www.klassikaprikmavera.nl/daniel/index.php
http://www.klassikaprikmavera.nl/daniel/felix.css

Wie o wie heeft er enig idee wat er mis gaat? (Ik vermoed een heleboel, maar enfin, ik ben dan ook nieuw met css. )

PS. Ik lijd aan ID'eritus - ik had volgens mij best eea anders kunnen doen of niet?

[Bozozo]

Waar heb je dat divje nog voor nodig?

[disjfa]

Waar heb je de img voor nodig? Kan het niet gewoon met de background van de link.

[Verwijderd]

Bozozo schreef op maandag 07 juli 2008 @ 10:38:
Waar heb je dat divje nog voor nodig?

Ik snap je vraag niet. Ik heb een menu'tje bestaande uit verschillende rollover images (verschillende divjes dus).

@disfja
Bedoel je de transparante gif of de background img?

[Bozozo]

Sorry, ik had niet goed gelezen.

Dat transparante plaatje is nergens voor nodig. Gewoon:

Cascading Stylesheet:

a.menulink {
  display: block;
  width: 100px;
  height: 40px;
}
div#honden a {
  background: white url("honden.jpg") no-repeat top left;
}

div#honden a:hover {
  background-position: bottom left;
}

Verder is het niet echt netjes om volledig van plaatjes afhankelijk te zijn in je menu. Zoekrobots en blinden stellen dat niet zo op prijs.

[Bosmonster]

Verwijderd schreef op maandag 07 juli 2008 @ 10:49:
[...]

Ik snap je vraag niet. Ik heb een menu'tje bestaande uit verschillende rollover images (verschillende divjes dus).

Wat is het nut van die div dan, misschien kun je dat uitleggen, want gezien de code die je tot nu toe geeft voegt die div helemaal niks toe. Die float:left kun je ook op de img gooien en dan kan heel die div weg.

edit: ik zal ook wel verkeerd gelezen hebben, snap de vraag ook niet meer... als het gaat om het gebruiken van de :hover van de a, gebruik dan inderdaad gewoon een achtergrond op de a-tag (en maak hem display:block met width/height natuurlijk).

Maar dan nog snap ik het nut van die div niet Je kunt alles wat je wilt hier doen met een lijstje a-tags, al is het mooier ze te wrappen in een UL natuurlijk, semantisch gezien.

[ Voor 32% gewijzigd door Bosmonster op 07-07-2008 11:34 ]

[DiSiLLUSiON]

In HTML zijn alle elementen in feite 'virtuele' elementen. Ze doen helemaal niets en ze hebben ook geen eigenschappen. Wel heeft elk element een eigen (semantische) betekenis. Hierdoor past de browser bij elk element ook een aantal 'standaard' eigenschappen toe. Maar, omdat je dit zelf weer kunt 'terugdraaien', is het vaak niet nodig om meerdere elementen in elkaar te schuiven. Elk element kan immers helemaal naar je wensen aangepast worden.

Je kunt er bijvoorbeeld voor zorgen dat een <a> element zich gaat gedragen als een <div> (dat 'ie een breedte en hoogte krijgt) en als een <img> (dat 'ie een achtergrond afbeelding krijgt). Hierdoor zijn die elementen niet meer nodig. Ook de tekst in de afbeelding is niet meer nodig, als je dit gewoon in de <a> tag laat staan. Dit scheelt weer afbeeldingen maken.

Hier zou je wel een stuk mee kunnen komen:

css:

code:

.menuitem {
    display: block;
    width: 150px;
    height: 14px;
    background: transparent url('menuitembg.png') top left repeat-x;
    
    color: #333;
    font: bold 8pt Tahoma, sans-serif;
    text-decoration: none;
    padding: 4px;
}

.menuitem:hover {
    color: #f00;
}

en dan in je html iets als:

code:

<a class="menuitem" href="index.php?onderdeel=honden">Honden</a>
<a class="menuitem" href="index.php?onderdeel=katten">Katten</a>
<a class="menuitem" href="index.php?onderdeel=meisjes">Meisjes</a>
<a class="menuitem" href="index.php?onderdeel=bierflesjes">Bierflesjes</a>

Je kunt ook de achtergrondafbeelding meerdere keren laten terugkomen (repeat-x in dit geval). Deze afbeelding hoeft dus maar 1 pixel breed te zijn (en 11px hoog vanwege je gradient), de rest herhaalt zich vanzelf.

Een bijkomend voordeel hiervan is, behalve de kleinere code en dat je niet elke afbeelding meer met de hand hoeft te maken, dat alles een stuk kleiner is (al die afbeeldingen hoeven immers niet meer geladen te worden).

[ Voor 14% gewijzigd door DiSiLLUSiON op 07-07-2008 11:53 ]

[Bosmonster]

DiSiLLUSiON schreef op maandag 07 juli 2008 @ 11:50:
In HTML zijn alle elementen in feite 'virtuele' elementen. Ze doen helemaal niets en ze hebben ook geen eigenschappen. Wel heeft elk element een eigen (semantische) betekenis. Hierdoor past de browser bij elk element ook een aantal 'standaard' eigenschappen toe. Maar, omdat je dit zelf weer kunt 'terugdraaien', is het vaak niet nodig om meerdere elementen in elkaar te schuiven. Elk element kan immers helemaal naar je wensen aangepast worden.

[...]

en dan in je html iets als:

code:

<a class="menuitem" href="index.php?onderdeel=honden">Honden</a>
<a class="menuitem" href="index.php?onderdeel=katten">Katten</a>
<a class="menuitem" href="index.php?onderdeel=meisjes">Meisjes</a>
<a class="menuitem" href="index.php?onderdeel=bierflesjes">Bierflesjes</a>

[...]

Als je semantiek dan zo belangrijk vindt, wrap het dan in een UL, zoals ik in de vorige post al zei. Dan ziet je menu er ook niet zo uit zonder css:

HondenKattenMeisjesBierflesjes

Je links hebben nu geen enkele relatie, terwijl het notabene een menu is.

Verder zou ik niet zo snel ieder menuitem een class geven, dat is nogal overbodig als je gewoon een wrapper element gebruikt (die je in dit geval semantisch toch al nodig hebt).

Ben in een goeie bui:

code:

<style type="text/css">
ul.menu {
   list-style: none;
   margin: 0;
   padding: 0;
}
ul.menu li a {
   /* etc */
}
</style>

<ul class="menu">
   <li><a href="index.php?onderdeel=honden">Honden</a></li>
   <li><a href="index.php?onderdeel=katten">Katten</a></li>
   <li><a href="index.php?onderdeel=meisjes">Meisjes</a></li>
   <li><a href="index.php?onderdeel=bierflesjes">Bierflesjes</a></li>
</ul>

[ Voor 24% gewijzigd door Bosmonster op 07-07-2008 12:11 ]

[Verwijderd]

DiSiLLUSiON schreef op maandag 07 juli 2008 @ 11:50:
een heleboel

Hardstikke bedankt! Dit is een zeer leerzame en duidelijke uitleg. Wat ik wil, werkt nu ook, en ook in IE. Heel erg dank je wel!

Er zijn nog wel wat dingskes die ik hierover zou willen weten. Is er ergens een goede online doc die in dit soort basic jip en janneke taal mij deze dingskes kan uitleggen?

edit: het leven kan zo simpel zijn: http://www.cssbasics.com
Cheers, dank u allemaal! Over en sluiten!

edit 2:
Bosmonster, ik begrijp niet goed waarom het in een lijst moet. Waarom is dat beter dan bijvoorbeeld een <br /> of (nog erger) een <p></p>? Is dat alleen omdat er iets mis kan gaan met het stylesheet en dat ie de bedoel dan vernaggelt of heeft het nog andere redenen?

[ Voor 31% gewijzigd door Verwijderd op 07-07-2008 12:18 ]

[Bozozo]

Als iemand je site zonder CSS bekijkt (Google's zoekrobot, voorlees robots, textbrowsers op telefoontjes) dan is je menu nog steeds een duidelijk gestructureerd geheel als het een UL is.

[curry684]

Verwijderd schreef op maandag 07 juli 2008 @ 12:09:
Bosmonster, ik begrijp niet goed waarom het in een lijst moet. Waarom is dat beter dan bijvoorbeeld een <br /> of (nog erger) een <p></p>? Is dat alleen omdat er iets mis kan gaan met het stylesheet en dat ie de bedoel dan vernaggelt of heeft het nog andere redenen?

Zelfde vraag: waarom zou je elementen als <ul>, <table>, <em>, <strong> e.d. uberhaupt gebruiken? Alles kan toch ook met <div> en <span> met inline styles?

[Verwijderd]

Bozozo schreef op maandag 07 juli 2008 @ 12:25:
Als iemand je site zonder CSS bekijkt (Google's zoekrobot, voorlees robots, textbrowsers op telefoontjes) dan is je menu nog steeds een duidelijk gestructureerd geheel als het een UL is.

Ok, duidelijk. Dank je wel.

curry, ik denk dat je Bozozo niet helemaal begrepen hebt. Het gaat erom, dat als je website bezocht wordt door iets of iemand die GEEN gebruik maakt van je divisies enzo, je toch nog een duidelijk herkenbaar menu hebt om voor te schotelen. Je opmerking valt dus in de catagorie: 'stel nou dat het niet hypotetisch zou zijn'. (no offense)

[Bosmonster]

Verwijderd schreef op maandag 07 juli 2008 @ 12:37:
[...]

Ok, duidelijk. Dank je wel.

curry, ik denk dat je Bozozo niet helemaal begrepen hebt. Het gaat erom, dat als je website bezocht wordt door iets of iemand die GEEN gebruik maakt van je divisies enzo, je toch nog een duidelijk herkenbaar menu hebt om voor te schotelen. Je opmerking valt dus in de catagorie: 'stel nou dat het niet hypotetisch zou zijn'. (no offense)

Curry heeft het prima begrepen denk ik

Wat hij bedoelt te zeggen is dat elementen ergens voor bedoeld zijn, en dat is niet alleen voor stylen. Ze hebben 'semantische' waarde, zoals de term al een paar keer is voorbij gekomen. Ze zeggen iets over de inhoud.

Je kunt ipv een table ook een lijst met divs gebruiken, maar dan weet bijvoorbeeld Google niet dat het tabulaire data is en dat de rijen en kolommen een verhouding hebben ten opzichte van elkaar. Hetzelfde geldt voor een list zoals die nu voor het menu handig is.

Dat is ook de reden dat tags als <i> en <b> zijn vervangen door <em> (emphasis, nadruk) en <strong> zijn vervangen. Het gaat erom wat ze zeggen over de inhoud, niet over hoe ze eruit zien.

Tuurlijk zijn er bijna geen mensen die zonder CSS surfen, maar door CSS uit te schakelen (echt of alleen in je hoofd) kun je wel redelijk bepalen of je code enigszins semantisch is opgebouwd. Zo niet, dan is het een onleesbare puinhoop namelijk.

[ Voor 21% gewijzigd door Bosmonster op 07-07-2008 12:45 ]

[DiSiLLUSiON]

Bosmonster geeft valide punten. Wel is het handig dat Puinhoop eerst snapt waarom elementen zich op een bepaalde manier gedragen en daarna pas wat de semantische waarde van elementen zijn en hoe dit toe te passen. Andersom werkt het immers behoorlijk verwarrend.

Ook ligt de semantische waarde van enkele tags nog immer onder discussie: de <em> tag is bijvoorbeeld niet geschikt voor alles waar geen emphasis op ligt, maar wel volgens de spelregels als Italics geschreven dient te worden (namen van schepen en dergelijke).

Daarnaast hebben steeds meer websites meer weg van applicaties dan documenten: In dat geval is een simpel menu (enkellaags of met meerdere submenu's) lang niet altijd correct wanneer het met een <ul> tag weergegeven wordt. Het kan namelijk voorkomen dat het geen 'inhoudsopgave' of andere opsomming/lijst meer is, en dan veranderd de semantische waarde van de verzameling links.

Al met al beslaat het semantiek vormgeven van je html méér dan een paar vaste regels als "menu's moeten met een <ul>". Dus schrik men daar nou niet mee af, maar laat ze er stapsgewijs mee kennis maken.

[curry684]

Verwijderd schreef op maandag 07 juli 2008 @ 12:37:
[...]

curry, ik denk dat je Bozozo niet helemaal begrepen hebt. Het gaat erom, dat als je website bezocht wordt door iets of iemand die GEEN gebruik maakt van je divisies enzo, je toch nog een duidelijk herkenbaar menu hebt om voor te schotelen. Je opmerking valt dus in de catagorie: 'stel nou dat het niet hypotetisch zou zijn'. (no offense)

Ik heb het prima begrepen hoor Je gebruikt juist een diversiteit aan elementen in HTML om een diversiteit aan intenties uit te dragen. Een blok tussen <em>-tags is iets met nadruk of 'emphasis', daarom zet je het tussen die tags en niet tussen <span style="font-style:italic"> wat onder de default stylesheets hetzelfde resultaat heeft. Een voorleesbrowser kan ook tekst wel met nadruk voorlezen, maar kan het niet schuingedrukt voorlezen.

Jouw vraag was waarom een menu in een unordered list moet en niet bijvoorbeeld in paragraphs. Nou, dat is omdat een menu een unordered list van selecteerbare opties is, en geen lijstje van paragrafen in een tekst. Zelfde vraag dus als iedere 'maar waarom geen span/div/whatever' kwestie.

[ Voor 4% gewijzigd door curry684 op 07-07-2008 13:54 ]

[Bosmonster]

DiSiLLUSiON schreef op maandag 07 juli 2008 @ 13:44:
Bosmonster geeft valide punten. Wel is het handig dat Puinhoop eerst snapt waarom elementen zich op een bepaalde manier gedragen en daarna pas wat de semantische waarde van elementen zijn en hoe dit toe te passen. Andersom werkt het immers behoorlijk verwarrend.

Semantiek is een van de belangrijkste aspecten van html, lijkt me juist een van de punten om mee te beginnen. Dat beetje CSS komt later wel. Helaas worden beginnende developers te vaak verleid maar direct met CSS te gaan spelen en vergeten de hele achtergrond van HTML.

Ook ligt de semantische waarde van enkele tags nog immer onder discussie: de <em> tag is bijvoorbeeld niet geschikt voor alles waar geen emphasis op ligt, maar wel volgens de spelregels als Italics geschreven dient te worden (namen van schepen en dergelijke).

Huh Dat een <em> standaard cursief is is alleen maar de default stylesheet. Neemt niet weg dat <em> gebruikt dient te worden voor inline tekst met nadruk. Maar als ik alle tekst met nadruk rood en bold wil hebben inplaats van cursief kan dat.

Daarnaast hebben steeds meer websites meer weg van applicaties dan documenten: In dat geval is een simpel menu (enkellaags of met meerdere submenu's) lang niet altijd correct wanneer het met een <ul> tag weergegeven wordt. Het kan namelijk voorkomen dat het geen 'inhoudsopgave' of andere opsomming/lijst meer is, en dan veranderd de semantische waarde van de verzameling links.

Al met al beslaat het semantiek vormgeven van je html méér dan een paar vaste regels als "menu's moeten met een <ul>". Dus schrik men daar nou niet mee af, maar laat ze er stapsgewijs mee kennis maken.

Sorry, maar ook dit is onzin. Een lijst gerelateerde onderdelen, of het nou plaatjes, buttons, menu-items, whatever zijn, dienen ook met soortgelijke semantiek behandeld te worden. Of je je website nu een document of een applicatie noemt.

Tuurlijk kunnen je links ook meer informatie bevatten, zodat bijvoorbeeld DL of zelfs een TABLE meer van toepassing kan zijn. Maar bij een menu kan ik me eerlijk gezegd niks anders voorstellen dan een UL/OL.

[ Voor 5% gewijzigd door Bosmonster op 07-07-2008 14:12 ]

[DiSiLLUSiON]

Bosmonster schreef op maandag 07 juli 2008 @ 14:09:
Semantiek is een van de belangrijkste aspecten van html, lijkt me juist een van de punten om mee te beginnen. Dat beetje CSS komt later wel. Helaas worden beginnende developers te vaak verleid maar direct met CSS te gaan spelen en vergeten de hele achtergrond van HTML.

Theoretisch? Yeah, dan geef ik je voor de volle 100% gelijk. Maar, realistisch gezien, wil iemand die begint met HTML het resultaat zo snel mogelijk aanschouwen. Dit is ook ergens wel logisch, men heeft de mindset dan nog niet om het resultaat in hun hoofd 'bij te houden', terwijl het eigenlijk pas in een later stadium zichtbaar wordt (tenzij het een programmeur is, dan is die mindset er al wel).

Daarnaast heeft het gebruik van semantisch correcte elementen op het eerste gezicht geen tot weinig verschil (visueel gezien dan) ten opzichte van het gebruik van minder correcte elementen, dus daar wil je als 'beginner' niet teveel over nadenken; dat is dan immers 'mierenneuken'.

Het zijn een beetje natuurlijke stadia van ontwikkeling: Eerst leer je hoe je resultaat krijgt (men 'prutst' een beetje). Daarna leer je hoe je het resultaat *correct* verkrijgt (men leert semantiek). En vervolgens leer je hoe je het resultaat correct verkrijgt terwijl je rekening houdt met anderen (in dit geval de variable: verschillende browsers).

Vandaar mijn opmerking dat je 'm niet teveel moet verwarren.

Huh Dat een <em> standaard cursief is is alleen maar de default stylesheet. Neemt niet weg dat <em> gebruikt dient te worden voor inline tekst met nadruk. Maar als ik alle tekst met nadruk rood en bold wil hebben inplaats van cursief kan dat.

Sorry, maar ook dit is onzin. Een lijst gerelateerde onderdelen, of het nou plaatjes, buttons, menu-items, whatever zijn, dienen ook met soortgelijke semantiek behandeld te worden. Of je je website nu een document of een applicatie noemt.

Je bestempelt iets als snel als 'onzin', terwijl ik vermoed dat je me gewoon verkeerd begreep. Het was maar een voorbeeld, en je weet dit allemaal vast ook al, maar om even duidelijkheid te scheppen:

In het geval van de <em> had ik het niet over dat je het kunt stylen, maar dat <em>phasis bedoeld is als semantisch-correcte vervanger voor <i>talics. De <em> geeft aan dat ergens de nadruk op gelegd moet worden (waar <i> vroeger voor gebruikt werd). Het is alleen wel zo dat er genoeg voorbeelden aan te bieden zijn waarop iets geschreven dient te worden in italics, terwijl men er doodleuk een <em> tag aan koppelt (omdat men de <i> niet meer mag/wil gebruiken). En dan klopt het semantisch al niet meer.

Zoals mijn voorbeeld van scheepsnamen, het is in de Engelse spelling in ieder geval zo dat die schuin geschreven moeten worden. Dan ben je semantisch verkeerd bezig met een <em> tag, en zou je weer een span met een class moeten gebruiken (wat het hele semantische teniet doet).

Hetzelfde geldt voor een menu; in een simpele website is dit vaak een simpele lijst; vergelijk het met een inhouds-opgave. Maar, wanneer je semantisch correct wilt werken, is het handig dat je begrijpt dat de semantiek per functie kan verschillen.

Stel je bijvoorbeeld een website voor waar je een groot (veel groter dan schermvullend) document in zowel de x-as alsmede de y-as beweegt door op pijlen te drukken die aan de zijkanten staan, en dat het vlak elk 'secties' bevat welke te vergelijken zouden zijn met een 'pagina' of -- beter gezegd -- een 'dia'. In zo'n geval zou je de pijlen kunnen zien als menu, maar niet als inhoudsopgave, aangezien het navigatie betreft, maar geen opsomming of lijst. In dat geval is een <ul> in mijn ogen semantisch niet correct.

Omdat een website tegenwoordig dus meer kán zijn dan een simpele verzameling documenten, betekent dit ook dat de semantiek van onderdelen kan veranderen en de regels der semantiek zijn dus lang niet altijd zo clear-cut zijn. Daardoor zijn ze toch best complex, omdat je rekening dient te houden met de functionaliteit van onderdelen. En om een 'beginner' daar nou al mee om de oren te slaan...

Het is niet alsof je gewoon een lijstje met 15 regels uit je hoofd leert (zoals een menu moet met <ul>, een paragraaf moet met <p>) en je dan klaar bent. Dat zou wel makkelijk zijn.

Vandaar ook dat ik in mijn voorbeeld géén <ul> gebruikte. Het voorbeeld wat ik gaf werkte, dat is voor de TS dénk ik belangrijker dan dat het semantisch correct is.

[ Voor 14% gewijzigd door DiSiLLUSiON op 07-07-2008 16:31 . Reden: Even het stukje over 'mierenneuken' erbij :+ ]

[Verwijderd]

Boeiend topic voor een knoeier als ik. Leerzaam allemaal, bedankt hiervoor.

(Ooit nog een paar taalkunde vakken gevolgd. Is er in de (x)html ook nog een verschil tussen de generalisten en de functionalisten? Ik zou mij kunnen voorstellen dat in de discussie hierboven DisIllusion eerder een functionalist is (mijn code is afhankelijk van de functie die het heeft), en Bosmonster eerder een generalist: de 'grammatica' is objectief, mensen gebruiken het ergens voor en dat gebruik kan 'ongrammaticaal zijn'. Beetje wazige uitleg misschien, maar in het Nederlands werkt het ongeveer zo.)

[DiSiLLUSiON]

Ik las dit topic net even na, en zag dat ik Spijtbetuiging per abuis Puinhoop noemde sorry voor deze verwarring! Ik zal op dat moment wel net een ander topic hebben gelezen van een TS met die naam ofzo, geen idee waar het anders vandaan komt.

Het is sowieso helaas wat het internet betreft niet altijd even makkelijk om de theorie in de praktijk te brengen. Denk alleen al aan de verschillende interpretaties en functionele mogelijkheden tussen browsers (IE die achterloopt, Webkit/Gecko met beiden een hoop functionaliteit wat eigenlijk nog niet 'geaccepteerd' is).

Of bijvoorbeeld de verschillende insteken wat betreft achtergrond: Programmeurs zijn bijvoorbeeld vaak erg goed in het semantisch correct opzetten van de HTML, helaas zijn het lang niet altijd goede vormgevers . Andersom ook, vormgevers maken vaak een prachtige website, maar een zooitje van hun HTML/JS/PHP.

[ Voor 21% gewijzigd door DiSiLLUSiON op 07-07-2008 18:57 ]

[Verwijderd]

DiSiLLUSiON schreef op maandag 07 juli 2008 @ 18:54:
Ik las dit topic net even na, en zag dat ik Spijtbetuiging per abuis Puinhoop noemde sorry voor deze verwarring! Ik zal op dat moment wel net een ander topic hebben gelezen van een TS met die naam ofzo, geen idee waar het anders vandaan komt.

Ik denk, ik zeg niets. Maar je hebt gelijk hoor, ik maak er een Puinhoop van. Dit is, zeg maar, mijn Paarse periode.

[DiSiLLUSiON]

Verwijderd schreef op maandag 07 juli 2008 @ 19:09:
[...]

Ik denk, ik zeg niets. Maar je hebt gelijk hoor, ik maak er een Puinhoop van. Dit is, zeg maar, mijn Paarse periode.

Hahaha nee hoor, dat valt behoorlijk mee; je bent goed op weg.