[DHTML/Javascript] CSS: hover werkt niet zoals bedoeld

[Glaanie]

Excuses voor de wat rare topictitel, ik wist niet beters te bedenken. (edit: inmiddels wat beters bedacht, titelfix is hopelijk onderweg)

Ik ben bezig met een nieuwe website voor het bedrijf waar ik voor werk en ik wilde een mooi uitklapmenuutje maken. Na het zoeken op GoT en Google, kwam ik op GoT deze link tegen: http://www.xs4all.nl/~peterned/examples/cssmenu.html. Deze code maakt een menu met behup van CSS hovers, dat leek mij wel leuk om mee te spelen en na wat logisch nadenken kwam ik op de volgende code:

HTML:

HTML:

<div class="topmenu"><a href="#">Titel</a><br><div id="menuover">Menuitem1<br>Menuitem2</div></div>

CSS:

Cascading Stylesheet:

div.topmenu {
  width: 75px;
  height: 27px;
  float: left;
}
div#menuover {
  width: 75px;
  z-index: 2;
  position: absolute;
  background-color: #dadfdb;
  display: none;
}
div.topmenu:hover div#menuover:hover, div#menuover:hover{
  display: inline;
}

Het is de bedoeling zodra ik over het woordje 'Titel' ga, de CSS een hover detecteert en de DIV met het ID 'menuover' een inline display attribuut geeft, dus het menuutje laat zien. Zolang ik met mijn muis over het menuutje blijf gaan, dus een CSS hover geef, blijft het menuutje zichtbaar. Maar en gebeurt helemaal niets als ik over de titel heen ga. Als ik het voorbeeld op de website bekijk, moet dat wat ik heb gebakken goed gaan. Maar blijkbaar gaat er toch iets fout, maar ik heb geen idee wat. Als iemand mij kan helpen, graag

Edit: Het menuutje moet in ieder geval werken in Internet Explorer 6, compatibiliteit met andere browsers heeft op dit moment een lagere prioriteit

[ Voor 18% gewijzigd door Glaanie op 28-05-2006 16:12 ]

[crisp]

En juist voor IE heb je de hover-fix nodig: http://www.xs4all.nl/~peterned/csshover.html

En als ik je 1 tip mag geven: ga niet specifiek voor IE dingen maken maar hou je gewoon aan de standaarden, grote kans dat het dan in alle moderne browsers goed werkt. Bezoekers uitsluiten op basis van de door hen gebruikte browser is anno 2006 gewoonweg not-done, da's pure discriminatie en vergis je niet in het aandeel van alternatieve browsers (gemiddeld al tussen de 10 en 20%)

[ Voor 69% gewijzigd door crisp op 28-05-2006 16:24 ]

[Glaanie]

Bedankt! Ik snapte al niet wat dat HTC bestandje deed.

Ik ben juist iemand die graag volgens de standaarden werk, maar tijdens het coderen van de website, kwam ik erachter dat in Firefox alles onderdelen van de site verkeerd staan gepositioneerd, terwijl ik keurig volgens de standaarden heb gewerkt (kijk maar in de code). Ik heb besloten mij in eerste instantie op Internet Explorer te richten, omdat de meeste van de gebruikers van de website met IE werken. Ook omdat het bedrijf deze site graag 1 juni de lucht in wilt hebben, wat ik wel ga redden, als ik mij maar op 1 browser richt. Ik ga daarna namelijk met vakantie voor een week en ik wil geen halfbakken site tijdens mijn afwezigheid omdat ik perse wil dat de site in alle browsers goed werkt. Vandaar dat ik heb gezegd dat het op dit moment van ondergeschikt belang is, puur vanwege de tijd. Uiteraard krijgen de bezoekers van niet IE browsers keurig een melding dat het mogelijk is dat de site niet goed werkt en dat wordt aangeraden om voorlopig IE te gebruiken. Niet helemaal dé oplossing, maar je moet toch wat.

[crisp]

Dat je HTML en CSS wellicht valideren wil niet zeggen dat je het ook goed hebt toegepast

[Fuzzillogic]

Vreemd hoor. Als ik volgens de specs werk, hetgeen ik altijd doe, dan heb ik vrijwel nooit ruzie met Firefox en Opera, omdat die precies doen wat ik ervan verwacht. Het is juist IE die altijd problemen geeft. (Altijd? Ja, altijd.)

En frankly, als ik op een site kom die mij verteld dat mijn browser van "ondergeschikt belang" is dan is de kans groot dat ik de betreffende site ook van ondergeschikt belang vind, en ik met een swifte mouse gesture weer vertrokken ben. Het kan écht niet meer om een tegenwoordig nog een professionele site op die manier op te leveren. Beunwerk. Ik zou me kapotschamen.

[Glaanie]

Ik heb nooit gezegd dat ik dat ik graag buiten de standaarden om werk. Ik heb de site in de huidige vorm opgebouwd zoals ik het altijd geleerd heb en wat ik van sites zoals w3c.org en handleidinghtml.nl vandaan heb gehaald. Tijdens het programmeren kwam ik erachter dat er op een gegeven moment erg grote verschillen zaten tussen IE en Firefox, tot mijn grote schrik deed IE precies wat ik verwachtte, en Firefox niet. Dit is de eerste grote site die ik volledig met div'jes en css heb opgebouwd, de (persoonlijke) sites die ik hiervoor heb gedaan waren of met tabellen, of met een paar div blokjes onder elkaar, de site waar ik nu aan werk heeft er een stuk of tien die elk weer invloed op elkaar hebben. Omdat het mij simpelweg aan de ervaring en tijd ontbreekt (ik zit ook nog op school namelijk, weliswaar niet full time, maar toch) om voor het einde van de week de site volledig operationeel te hebben, inclusief volledige browser-interoperabiliteit, heb ik mijn pijlen nu gericht op IE, de meest gebruikte browser. Ik ben er absoluut niet trots op, maar ik heb weinig keus. Ik heb dit ook aan mijn werkgever uitgelegd en hij begrijpt het, is er ook niet blij mee, maar begrijpt de situatie. Ik gebruik ook liever Firefox dan IE, maar dat is met mijn site niet mogelijk.

Als iemand zin en tijd heeft, mag hij/zij mij mailen op glaanieboy[apenstaart]gmail.com, dan zal ik de link naar de site toesturen en kan je zelf een kijkje nemen. Let op, dit is geen verzoek van 'Help mij, maak mijn site voor mij', puur om te laten zien dat ik WEL volgens de standaarden heb gewerkt. Ik vind het overigens niet erg om dan een paar tips te ontvangen

[We Are Borg]

Ik denk dat als je hier een linkje plaats puur om tips te ontvangen dat het niet zo snel zal worden gezien als spam Kan je trouwens nu al vertellen dat je het in je voorbeeld en posts hebt over divs+css, maar dat is duidelijk dus niet volgens de standaarden werken.

En puur als tip: als IE het doet volgens jouw verwachtingen en FF niet, dat zitten jouw verwachting hoogstwaarschijnlijk fout en IE ook. Werk tijdens het ontwikkelen gewoon puur met FF als standaard waarin het moet werken en kijk daarna pas naar IE. Als FF het fout doet, is het fout en kijk ik niet eens meer naar IE of die het toevallig wel doet. Tuurlijk kan het ook een bug in FF zijn op zo'n moment, maar ik vind het een veiligere manier van werken dan IE te pakken als main browser om mee te testen

[Glaanie]

Werken met divs+css niet volgens de standaard? Wellicht dat ik het verkeerd begrepen heb, maar ik dacht altijd dat wanneer je met een dynamische website werkt (waar tekst en plaatjes steeds veranderen) je je site NIET mag structureren met tabellen, maar met div//span blokjes (ok, span is geen blokje, maar je begrijpt wat ik bedoel). En dat wanneer je zaken zoals positioneren, grootte, kleuren etc met css moet doen? Enlighten me, want ik wil graag leren van mijn fouten.

Je hebt gelijk als je zegt dat het eigenlijk fout is om IE te pakken als main browser, maar ik wil graag een werkende website achterlaten wanneer ik voor een week in Engeland zit en geen halfbakken product. OK, na mijn vakantie ga ik weer verder met de site om bepaalde onderdelen in te verwerken, maar ik wil graag de site afhebben. Zeker omdat de site die er nu is en opzich heel mooi uitziet, maar nu tegen de grenzen aanloopt, technisch gezien. Daarom wil de site liever gisteren dan vandaag de lucht in sturen, het liefst per 1 juni, maar daarvoor moet ik een aantal opofferingen doen, nogmaals het is niet iets waar ik trots op ben.

Vraagje aan de mods: Ga ik te ver als ik de link naar de betreffende website hier plaats om te vragen om hulp voor het werkend maken in andere browsers dan IE? Of kan ik hierover beter een nieuw topic openen of een in een ander topic reageren?

[Rowanov]

Je moet niet uitgaan van divs en spans, je moet uitgaan van het relevante elementen. Daarmee zijn divs natuurlijk niet afgeschreven, maar worden ze met een andere bedoeling gebruikt. Je gebruikt divs om secties in je website aan te brengen. Voorbeelden van die secties die veel voorkomen zijn je header, footer, menu, content en soms ook containers om het geheel heen; met hierbij een opmerking dat die divs dan ook vaak het id van header, content etc. meekrijgen.

Relevante elementen in dit geval zijn dus de h1-h6 elementen die titels aangeven, lijsten voor menu's, p voor paragrafen en q en blockquote voor quotes etc.

Een paar tips voor als je crossbrowser gaat werken:

• Gebruik altijd een juist doctype
• Let op de verschillen in het box-model; kijk dus uit met margins, paddings en borders
• Kijk vooral goed op tweakers rond hoe specifieke problemen omzeild kunnen worden, want het komt zelden voor dat je de eerste bent die een bepaal probleem tegenkomt

Ik denk overigens dat je de link naar je website hier wel kan plaatsen, mits je aangeeft wat er zoal fout gaat in de verschillende browsers. Er zullen best wel een paar mensen bereid zijn je wat tips te geven.

[Fuzzillogic]

Glaanieboy schreef op zondag 28 mei 2006 @ 18:24:
Werken met divs+css niet volgens de standaard? Wellicht dat ik het verkeerd begrepen heb, maar ik dacht altijd dat wanneer je met een dynamische website werkt (waar tekst en plaatjes steeds veranderen) je je site NIET mag structureren met tabellen, maar met div//span blokjes (ok, span is geen blokje, maar je begrijpt wat ik bedoel).

"De standaard" behelst meer dan alleen syntactisch correcte (X)HTML. Sterker nog, dat is eigenlijk een bijzaak. Het gaat vooral om de symantiek van de elementen. Neem jouw menu, zoals je dat hierboven post. Syntactisch correct, symantisch een chaos. Waarom? Omdat je de HTML-structuur niet overeenkomt met wat je probeert weer te geven. display: inline om vervolgens toch weer met een <br> menuitem 2 op een volgende regel te zetten.

Kijk eens goed naar het CSS-voorbeeldmenu uit je eigen posting. Zie je hoe hij het menu een logische structuur geeft m.b.v. unordered lists? Dat is veel netter; symantisch veel duidelijker dat het een (geneste) opsomming betreft.

Je hebt gelijk als je zegt dat het eigenlijk fout is om IE te pakken als main browser, maar ik wil graag een werkende website achterlaten [...]

Een werkend site is m.i. een site die syntactisch en symantisch correct is, ook zonder CSS en javascript goed te lezen en te navigeren is(!) en tenminste goed uitziet in de meest gebruikte recente browsers.

[Glaanie]

OK, helemaal duidelijk. Zoals ik zei onbreekt het mij aan ervaring om een professionele website op te zetten en nu blijkt maar weer dat mijn manier van denken fout was.

OK, het doel van dit topic is bij deze veranderd: Help mij mijn website werkbaar te maken in niet IE browsers. Geef mij tips, trucs en laat mij zien waar ik het fout heb gedaan. De website in kwestie is: http://dufaco.glaanieboy.nl/nieuw. Let even niet op het halfbakken menu die dus niet werkt (zoals in de TS is te zien). Mods, indien dit niet toegestaan is en jullie liever een nieuw topic zien, hoor ik het graag. Topic report met uitleg is onderweg.

[Rowanov]

Glaanieboy schreef op zondag 28 mei 2006 @ 18:51:
OK, het doel van dit topic is bij deze veranderd: Help mij mijn website werkbaar te maken in niet IE browsers. Geef mij tips, trucs en laat mij zien waar ik het fout heb gedaan. De website in kwestie is: http://dufaco.glaanieboy.nl/nieuw. Let even niet op het halfbakken menu die dus niet werkt (zoals in de TS is te zien). Mods, indien dit niet toegestaan is en jullie liever een nieuw topic zien, hoor ik het graag. Topic report met uitleg is onderweg.

Ik zei niet voor niets, mits je zelf aangeeft wat er fout gaat. Veel mensen hier hebben er een hekel aan om helpdesk te spelen

Edit:
• Om af te trappen dan maar; er bestaan andere elementen naast div's en span's. Gebruik dus elementen die het beste aangeven wat het voor moet stellen. Voor aanvulling daarop; zie de vorige posts.
• Sommige div's hebben onzinnige id namen, right en centered zeggen niets over de functie van die sectie. Container en content zijn dan betere namen.
• In plaats van genummerde id's te gebruiken (zie je mainmenu), kan je beter een class gebruiken.
• Een strict doctype kan wonderen doen om de verschillen tussen browsers te minimaliseren.
• Plaatjes die niet tot de content behoren kan je beter als achtergrond in je css zetten en in je html laten weergeven als een hx element, wat je met css onzichtbaar maakt. Ik geef hierbij je header als voorbeeld.

Css opmerkingen:
• Als je een stijlregel wilt aangeven wat voor je hele document moet gelden (zoals in jouw geval de font dingen) kan je de * selector gebruiken.
• Om je centreer methode ook moet werken in wat oudere IE versies, is het misschien verstandig om de body een text-align: center; te geven.
• Je absolute positionering is een beetje overbodig, dit kan waarschijnlijk makkelijker met floats. Een tip om floats te clearen, is om het parent element een "overlfow: auto;" te geven.
• Het is niet slim om de breedte van je links en rechts div's een breedte in procenten te geven als het element wat er omheen zit een vaste breedte heeft
• Zoals ik al eerder heb gezegd, een class gebruiken ipv. mainmenu1 t/m 4.

Dit was het kort gezegd wel zo'n beetje, ik hoop dat je er wat aan hebt

Oh ja, even een practische tip; als je je html klaar hebt en je aan de css gaat beginnen, bekijk dan na iedere toevoeging in je css in firefox en internet explorer hoe het er uit ziet. Dit heeft twee voordelen; je leert beter met css omgaan en je leert jezelf de verschillen tussen de browsers aan. Met behulp van GoT kan je de oplossing op die problemen vinden en kan je dat bij je volgende ontwerp in je achterhoofd houden.

[ Voor 75% gewijzigd door Rowanov op 28-05-2006 19:12 ]

[Glaanie]

Dank je voor de tips. Ik ga hiermee aan de slag en als ik meer vragen heb kom ik hier op terug.

[Glaanie]

OK, ik heb een aantal (maar niet alle, geef ik eerlijk toe) van je tips ter harte genomen en de pagina opnieuw opgebouwd met Firefox 1.5 en IE 6.0 in het achterhoofd. Ik heb deze pagina een plaatsje gegeven op http://dufaco.glaanieboy.nl/nieuw/2

Rowanov schreef op zondag 28 mei 2006 @ 18:53:
[...]


Ik zei niet voor niets, mits je zelf aangeeft wat er fout gaat. Veel mensen hier hebben er een hekel aan om helpdesk te spelen

Ja sorry, ik was een beetje lui

• Om af te trappen dan maar; er bestaan andere elementen naast div's en span's. Gebruik dus elementen die het beste aangeven wat het voor moet stellen. Voor aanvulling daarop; zie de vorige posts.

Gedaan. Al die div'jes in de right en left div zijn verdwenen, in plaats daarvan zijn tabellen gekomen, maar heb wel iets gesjoemeld met div'jes:o Uitleg + vraag komt straks

• Sommige div's hebben onzinnige id namen, right en centered zeggen niets over de functie van die sectie. Container en content zijn dan betere namen.

Jij vindt het onzinnig, ik vind van niet. Kunnen we lang en kort over spreken, maar wat mij betreft blijft dat zo staan.

• In plaats van genummerde id's te gebruiken (zie je mainmenu), kan je beter een class gebruiken.

Dat was even snel een copy paste om snel te kunnen kijken wat het resultaat was. Het was de bedoeling dat deze later hernoemd zouden worden. Bij de nieuwe versie zijn deze (tijdelijk) weg, ik moet hier nog een wat mooiere oplossing voor verzinnen

• Een strict doctype kan wonderen doen om de verschillen tussen browsers te minimaliseren.

Goed punt. Heb ik gelijk gedaan

• Plaatjes die niet tot de content behoren kan je beter als achtergrond in je css zetten en in je html laten weergeven als een hx element, wat je met css onzichtbaar maakt. Ik geef hierbij je header als voorbeeld.

Hx als in de h1 t/m 6 elementen? Ik begrijp niet goed wat je bedoelt hiermee. Wat ik wel heb gedaan is zowel het logo als die grijze massa met de mensen op de achtergrond beide in een aparte div gezet, zodat ik de plaatjes in CSS kon definieren.

Css opmerkingen:
• Als je een stijlregel wilt aangeven wat voor je hele document moet gelden (zoals in jouw geval de font dingen) kan je de * selector gebruiken.

Dat ga ik doen zodra alles klaar is en ik aan de controle (missende tags, uitlijning iets verbeteren etc) ga beginnen.

• Om je centreer methode ook moet werken in wat oudere IE versies, is het misschien verstandig om de body een text-align: center; te geven.

Hey, dat miste ik dus nog, vandaar dat IE niet centreerde. D'oh!

• Je absolute positionering is een beetje overbodig, dit kan waarschijnlijk makkelijker met floats. Een tip om floats te clearen, is om het parent element een "overlfow: auto;" te geven.

Hmm, moet hier nog me klooien. Ik heb ruzie gehad om het 'Laatste nieuws' container rechts van die andere div (waar nu nog automtive solutions staat) uitgelijnd te krijgen, en daarbij ook lopen te spelen met floats. Ik heb het nu wel een absolute position gegeven, met een right: 0px erbij en dat helpt prima. Tenzij jij nog een andere suggestie hebt?

• Het is niet slim om de breedte van je links en rechts div's een breedte in procenten te geven als het element wat er omheen zit een vaste breedte heeft

Gedaan, bedankt voor de tip, was me nog niet opgevallen

• Zoals ik al eerder heb gezegd, een class gebruiken ipv. mainmenu1 t/m 4.

Zoals ik al eerder heb gezegd (), zijn die nu verdwenen en was het maar tijdelijk.

Dit was het kort gezegd wel zo'n beetje, ik hoop dat je er wat aan hebt

Absoluut! Mijn dank is groot

Oh ja, even een practische tip; als je je html klaar hebt en je aan de css gaat beginnen, bekijk dan na iedere toevoeging in je css in firefox en internet explorer hoe het er uit ziet. Dit heeft twee voordelen; je leert beter met css omgaan en je leert jezelf de verschillen tussen de browsers aan. Met behulp van GoT kan je de oplossing op die problemen vinden en kan je dat bij je volgende ontwerp in je achterhoofd houden.

Ook gedaan en werkte prima! Ik heb FF als basis gebruikt en wat denk je? Bijna alles werkte!. Ik zeg expres bijna alles, want ondanks alle tips, heb ik toch een vraag:
• Internet Explorer ondersteunt geen 'border-spacing', maar toch heb ik dat nodig voor mijn tabelletje in de 'right' div. In Firefox zie ik geen overgangen naar tabel-cellen en in IE wel. Wat zou een goed alternatief zijn voor mijn specifieke probleem? Margin heb ik al geprobeerd (zoals je kan zien is die in de main.css al op 0px gezet) en een witte spacer-gif zoals werd voorgesteld in dit topic is voor mij niet interessant, aangezien alles zeker moet zijn aangesloten, anders ziet het er niet uit. Kortom, hoe kan ik het gemis aan 'border-spacing' in IE compenseren?
!!!Edit: Inmiddels opgelost door border-collapse: collapse toe te voegen voor alle table,td en tr elementen.
• Verder ben ik nog bezig met die groene balk onderaan, die moet uiteindelijk helemaal onderaan de pagina komen te staan, maar wel op zo'n manier dat'ie verder naar beneden gaat mocht de tekst daarboven te lang worden, het moet dus geen overlappend geheel worden. Ik ben hier nog mee aan het stoeien, dus schrijf hier geen verhaaltje over, maar mocht je een oplossing hebben, hoor ik het graag

Dat was het wel zo'n beetje. Iedereen bedankt voor de tips!

[ Voor 3% gewijzigd door Glaanie op 31-05-2006 21:40 ]

[Verwijderd]

Volgens mij als ik de vorige repley's doorlees was het nou niet echt de bedoeling dat alles in tabellen zou worden gezet. Wat er werd bedoeld met dat divjes fout waren was dat het meer semantisch zou moeten. Misschien dat dit je wat meer duidelijkheid brengt: http://home.parse.nl/~michiel/semantiek.html

[ Voor 4% gewijzigd door Verwijderd op 31-05-2006 22:15 . Reden: typo ]

[Glaanie]

Dank je voor de link. Ik zal het zeker doorlezen, helaas moet ik voorlopig de site in de huidige vorm (dus blijkbaar niet (goed) semantisch) laten, want de site gaat morgen live en volgende week ben ik op vakantie. In ieder geval bedankt!

[Rowanov]

Glaanieboy schreef op woensdag 31 mei 2006 @ 16:55:
Gedaan. Al die div'jes in de right en left div zijn verdwenen, in plaats daarvan zijn tabellen gekomen, maar heb wel iets gesjoemeld met div'jes:o Uitleg + vraag komt straks

Je maakt me helemaal droevig Het is nooit mijn intentie geweest om je layout een tabel in te jagen. Tabellen worden gebruikt voor tabulaire data; neem als voorbeeld de bevindingen van een meting in een wetenschappelijk onderzoek.

Hx als in de h1 t/m 6 elementen? Ik begrijp niet goed wat je bedoelt hiermee. Wat ik wel heb gedaan is zowel het logo als die grijze massa met de mensen op de achtergrond beide in een aparte div gezet, zodat ik de plaatjes in CSS kon definieren.

Zal ik even toelichten met een code voorbeeld. Als je pagina "accessible" is, zou je hem in feite in een textbrowser moeten kunnen bekijken en nog steeds dezelfde informatie er uit kunnen halen. Aangezien een textbrowser geen plaatjes weergeeft zal je dus een tekst ter vervanging moeten hebben. Dit kan je doen door middel van een title attribuut aan je plaatje te hangen, maar dat kan in het geval van je pagina header ook zo:

HTML:

<h1 class="page-title"><span class="title-hide">Hier je titel</span></h1>

Cascading Stylesheet:

.title-hide {
  display: none;
}
.pag-title {
  display: block;
  height: __px;
  width: __px;
  background: url('blaat.gif'); no-repeat left top;
}

Hiermee verstop je dus de span, en geef je in plaats van de tekst een plaatje weer op de plaats van je titel.

Hmm, moet hier nog me klooien. Ik heb ruzie gehad om het 'Laatste nieuws' container rechts van die andere div (waar nu nog automtive solutions staat) uitgelijnd te krijgen, en daarbij ook lopen te spelen met floats. Ik heb het nu wel een absolute position gegeven, met een right: 0px erbij en dat helpt prima. Tenzij jij nog een andere suggestie hebt?

Ik kan helaas je pagina niet bereiken.

Verder ben ik nog bezig met die groene balk onderaan, die moet uiteindelijk helemaal onderaan de pagina komen te staan, maar wel op zo'n manier dat'ie verder naar beneden gaat mocht de tekst daarboven te lang worden, het moet dus geen overlappend geheel worden. Ik ben hier nog mee aan het stoeien, dus schrijf hier geen verhaaltje over, maar mocht je een oplossing hebben, hoor ik het graag

Geen absolute positionering gaan gebruiken, gewoon een float icm. "clear: left;".

Edit: ik was even de thumbs up vergeten voor het zelf uitvinden van een hele hoop dingen. Ik hoop dat je je realizeert dat als je op deze manier je site in elkaar zet, je ook direct ziet waar de problemen liggen en je gerichter om de problemen heen kunt werken op den duur

[ Voor 13% gewijzigd door Rowanov op 01-06-2006 00:43 ]