dropdown menu

marc 05 · 19 jul 2011

Hallo allemaal,

ik gebruik onderstaand dropdown menu:

HTML:

http://csswizardry.com/demos/css-dropdown/#

Als je (hover) doet verschijnen de submenu`s.... ik heb dit ingebouwd in de site van me en stuit op het volgende probleem. Als je hover doet blijft aan de rechtekant de achtergrondkleur bestaan. Wit in dit geval bij het voorbeeld.

Voor de linkerzijde heb ik ook een kleine aanpassing moeten maken anders kwam het uischuifgedeelte niet recht onder de "hoofdlink"..... kan dit verschil zitten in het -ik gebruik html4.0 strict- doctype?

Zie hieronder het gedeelte wat ik aangepast heb in css... heb er een padding-left ingezet. Dacht dat ik de background rechts(zwarte gedeelte) dus ook kon wegkrijgen door een padding-right erin te zetten?

Code:

#nav ul{
	background: black;
	list-style:none;
	position:absolute;
	left:-9999px;
	padding-left: 0px;

grumbkow · 19 jul 2011

Padding kan achtergronden doorbreken. Maak van die padding eens margin-left

P.s. ik zie in firefox niets raars?

marc 05 · 19 jul 2011

dat kan zijn omdat het vorbeeld dus een witte achtergrond heeft... maar ik heb daar dus een zwarte van gemaakt. margin left haalt hier niets uit.... wel padding-left, dan staat het paarse gedeelte mooi in lijn met de bovenste link. maar aan de rechterkant naast de uischijflinkjes in het paars komt ook nog een klein stukje zwart. Voor jou wit tevoorschijn.

Dit wou ik ook weg hebben maar lukt niet met margin-right of padding right.

heb het volgende gedaan.

Code:

#nav ul{
	background: black;
	list-style:none;
	position:absolute;
	left:-9999px;
	padding-left: 0px;

Hierboven de padding-left laten staan.

en in

Code:

#nav ul li{
	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
	margin-right: 0px;
}

margin-right toegevoegd: zo werkt deze nu bij mij wel.... denk dat het aan het doc-type ligt wat ik gebruik?

grumbkow · 19 jul 2011

Ik ben eerlijk gezegd niet zo bekend met HTML 4.0 etc ik werk altijd in xHTML strict omdat ik dit gewoon de veiligste manier van HTML vindt. Maar t is een CSS probleem dus de doctype maakt weinig uit denk ik.

csshunter · 19 jul 2011

Hoi-hoi,
Een Doctype kan wel iets uitmaken voor de css-behandeling, maar of je nu html4.01 of xhtml1.0 gebruikt maakt niet zo heel veel uit. Belangrijker is, dat de Doctype-vermelding correct is, anders schiet IE in de "quirksmode" (= fratsen-toestand), en het verschil tussen de Strict- en de Transitional-variant. De Transitional-variant was in 1999 bedoeld voor toen oude websites, om die nog een beetje toonbaar te houden. De Strict-variant is helemaal volgens de standaarden, dat is de beste.

Zie: www.w3.org/QA/2002/04/valid-dtd-list.html
en www.webrichtlijnen.nl/richtlijnen/webrichtlijnen-1/r-pd-6-1

Maar het concrete geval is nu een beetje droogzwemmen: zonder een complete testpagina valt daar moeilijk iets over te zeggen. Want bv. de volgorde der <div>'s en andere css (buiten het menu) kunnen ook een rol spelen.
Heb je een link naar een testpagina?

Met vriendelijke groet,
CSShunter

marc 05 · 20 jul 2011

Hallo csshunter,

Neem aan dat mijn script goed is... heb wel iets moeten afwijken van het orgineel wou ik het mooi recht onder mekaar krijgen. Dit zoals ik al eerder schreef.

Als ik het script gewoon 1 op 1 overneem uit:

http://csswizardry.com/demos/css-dropdown/#

Dan krijg ik bij uischuiven dat ze niet recht onder mekaar schuiven dit heb ik dus iets aangepast.

Verder nog de vraag over het javascript wat nodig is om dit te laten werken in IE6...

..... plaats ik gewoon dit script erin of moet ik dat op een manier doen zodat het alleen aangesproken wordt bij IE6. Of gebeurt dit automatisch?

Moet ik dan zelf ook nog iets aan de css daarvoor veranderen...want het is me niet helemaal duidelijk uit de topic die ik over dit script las.

Moet ik hier iets mee.... kun je daar ook een javascipt in plaatsen??



Groeten, Marc :thumb:

csshunter · 20 jul 2011

Hoi marc,

Neem aan dat mijn script goed is... heb wel iets moeten afwijken van het origineel wou ik het mooi recht onder mekaar krijgen.

Je hebt hiervoor toegevoegd:

Code:

#nav ul {               
   padding-left: 0px;
}

Maar in het origineel staat deze padding al op 0, via de "RESET" styles (voor alle li: padding:0;), en in het origineel staat daarmee alles wel mooi recht onder elkaar. Het kan niet anders dan dat je dit stukje van de RESET hebt aangepast, of overruled met een eigen stylesheet: anders was deze specifieke padding-left niet nodig.
- Niet helemaal toevallig vroeg ik om een complete testpagina.

Maar het staat nu in elk geval keurig onder elkaar.

=====

margin-right toegevoegd: zo werkt deze nu bij mij wel.... denk dat het aan het doc-type ligt wat ik gebruik?

Nee, dat is het hier niet. Het origineel gebruikt xhtml1.0 Strict, en jij gebruikt html4.0 Strict. Daar zit geen ruimte tussen. Maar waarom gebruik je niet gewoon html4.01 Strict, de laatste versie?

Waar zit het wel in?
Alle list-items in de #nav hebben een rechter-margin gekregen, om de hoofdmenu-items een stukje van elkaar af te krijgen:

Code:

#nav li {
   margin-right: 10px;
   ...
}

Die margin-right geldt nu ook voor de submenu's (ten opzichte van de <ul> waar ze in zitten). Dat hebben ze in het origineel gemakshalve niet teruggebracht tot 0, en dat hoefde ook niet: want dat stukje margin van 10px was toch transparant, en de volgende <li> staat er onder, en niet ernaast.

Als het <ul>-blokje van de submenu's echter geen transparante background heeft, zoals bij jou, zie je die margin opeens wel: als strookje met de background-kleur.
Vandaar dat het opgelost is door de margin van de <li>'s binnen de submenu's terug op 0 te zetten (#nav ul li {margin-right: 0;})

=====

Verder nog de vraag over het javascript wat nodig is om dit te laten werken in IE6...
... plaats ik gewoon dit script erin of moet ik dat op een manier doen zodat het alleen aangesproken wordt bij IE6. Of gebeurt dit automatisch?
Moet ik dan zelf ook nog iets aan de css daarvoor veranderen...want het is me niet helemaal duidelijk uit de topic die ik over dit script las.

Even kleine correctie: het csshover.htc is geen normaal javascript (dat client-side wordt uitgevoerd), maar het gebeurt server-side (een alternatief is het sfHover-javascript, dat wel client-side wordt uitgevoerd).

De css "behavior"-eigenschap wordt alleen door IE ondersteund; andere browsers pakken het daarom niet op, en voor hogere IE-versies dan IE6 kan het voor zover ik weet (nog) geen kwaad.
Daarmee zou het rechtstreeks in de css gezet kunnen worden, ware het niet dat het geen valid css is, want deze eigenschap bestaat niet in de standaard.

Voorbeeld: csswizardry-dropdown-nw1.htm geeft een mooie css validatiefout.

Met:

HTML:

<!--[if IE 6]>
	<style type="text/css">
	body { behavior: url("stylesheets/csshover.htc"); } 
	</style>
<![endif]-->

vlak voor de </head> ben je van alles af.

Voorbeeld: csswizardry-dropdown-nw2.htm heeft schone css.

Met vriendelijke groet,
CSShunter

marc 05 · 20 jul 2011

Hallo csshunter,

Allereerst staan in de css ook een aantal dingen die niet echt nodig zijn toch:

address, caption, cite, code, dfn, th, var enzv. Dus heb ik toch niet alles nodig uit de Reset??

Als ik besluit het javascript in te sluiten moet dat dan ook op onderstaande manier;

Code:

<!--[if IE 6]>
    <style type="text/css">
    body { behavior: url("stylesheets/csshover.htc"); } 
    </style>
<![endif]-->

dus in de js zo misschien



Het doctype wat ik gebruik is wel 4.01 dat had ik hier verkeerd neergezet.

Tot slot hoe kan ik zien hoe een website eruit ziet in IE6 als ik daar geen versie meer van heb.... kan ik dat toch op een manier testen?

csshunter · 20 jul 2011

Hoi marc,

Allereerst staan in de css ook een aantal dingen die niet echt nodig zijn toch?

Indendraad, dat is bij dat soort reset's heel vaak het geval. Vaak moet je ook later weer onnodig dingen gaan corrigeren, bijvoorbeeld voor normale <li>'s die opeens geen bullets meer hebben. Naar mijn idee: van die algemene "reset-bibliotheken" heb je meer last dan gemak, en ik gebruik ze ook nooit.
Ook de "uitvinder" van reset.css, css-goeroe Eric Meyer, gebruikt het zelf niet op de pagina waar hij het beschrijft, en waarschuwt dat je dit niet klakkeloos moet gaan gebruiken.

=====

dus in de js zo misschien : ...

Jawel, het sFhover-script kan je op soortgelijke manier aanroepen (zonder het language="JavaScript", dat hoeft en mag volgens de standaarden niet meer):

HTML:

<!--[if IE 6]>
   <script type="text/javascript" src="sfHover.js">
<![endif]-->

=====

hoe kan ik zien hoe een website eruit ziet in IE6 als ik daar geen versie meer van heb....

Tja, voor een eerste indruk kan je terecht op browsershots.org, die levert een screenshot van een pagina in de opgegeven browser(s).
Maar je kan er geen functionaliteit mee testen, want hoveren/klikken op een screenshot heeft geen effect.

Er zijn verschillende manieren om "in het echt" op IE6 te testen:

Er zijn programma's in omloop die dat kunnen (zeggen ze; bv. de Ultimate IE Tester). Daar heb ik geen ervaring mee.
Er zijn programma's in omloop waarmee je verschillende IE-versies naast elkaar op je computer kan zetten (normaal kan dat niet, omdat ze dezelfde registry-settings gebruiken). Multiple IE is daarvan de bekendste; niet voor alle Window-versies geschikt. Mijn ervaring (van al jaren geleden): niet 100% betrouwbaar. Ook de maker geeft signalen van onbetrouwbaarheid, en onderhoudt het programma niet meer.
Hier vriendelijk vragen of iemand een testpagina van je wil testen in IE6. - Maar dan ben je afhankelijk van anderen, en kan je niet vlot ontwikkelen.
Zelf gebruik ik de "Microsoft Virtual PC", waarbinnen ik Windows98SE (jawel!) met IE6 geïnstalleerd heb. Dat werk als een sandbox binnen mijn XP, en dit is dus "echt echt". Ervaring: prima (o.a. semi-transparante png's zonder png-fix en drop-downs zonder sfHover vallen goed door de mand), maar soms een beetje traag en niet goed in het renderen van de kleuren. Maar daar gaat het meestal niet om.

Met vriendelijke groet,
CSShunter

marc 05 · 21 jul 2011

Hallo csshunter,

als ik het javascript gebruik hoef ik verder buiten de css dus geen extra stukje css in te zetten om het goed te laten werken?

Het script maakt zelf iets aan van css?

Voor het onderstaande heb ik dus een windows versie nodig van 98.... is daar nog aan te komen dan?

Zelf gebruik ik de "Microsoft Virtual PC", waarbinnen ik Windows98SE (jawel!) met IE6 geïnstalleerd heb. Dat werk als een sandbox binnen mijn XP, en dit is dus "echt echt". Ervaring: prima (o.a. semi-transparante png's zonder png-fix en drop-downs zonder sfHover vallen goed door de mand), maar soms een beetje traag en niet goed in het renderen van de kleuren. Maar daar gaat het meestal niet om.

Groeten, Marc

csshunter · 21 jul 2011

Als ik het javascript gebruik hoef ik verder buiten de css dus geen extra stukje css in te zetten om het goed te laten werken? Het script maakt zelf iets aan van css?

Maar héél weinig extra css!

Met this.className+=" sfhover"; plakt het javascript voor IE6 een extra class "sfhover" aan elke <li> vast, en verwijdert die weer bij het verlaten van de hover met this.className.replace(new RegExp(" sfhover\\b"), ""); (= waar de class sfhover staat, moet deze vervangen worden door "" > door niets dus).
In je css moet de sfhover-class toegevoegd worden aan wat je de li:hover voor de andere browsers laat doen:

Code:

#nav li:hover ul, 
#nav li.sfhover ul {
   ...
   }

=====

windows versie nodig van 98.... is daar nog aan te komen dan?

Niet nog een oude CD-rom met 98 op de rommelzolder liggen?
Of anders een kennis, of ... Google, met als 7e hit: "Premade Windows 98 Virtual Machine for use with older games". Niet geprobeerd, maar ziet er redelijk veelbelovend uit. In Win98 zit standaard IE6, en anders is die hier bij oldapps.com ook nog apart te halen.

marc 05 · 21 jul 2011

Dus dit #nav li.sfhover ul ook toevoegen aan alle onderstaande css, begrijp ik dat goed?

Code:

#nav li:hover a

Code:

#nav li:hover ul a

en bij onderstaande dus 2 keer sfhover erin plaatsen?

Code:

#nav li:hover ul li a:hover

csshunter · 21 jul 2011

De .sfhover classes moeten toegevoegd worden overal waar li:hover staat; niet waar a:hover staat (waar a:hover staat, kan IE6 het al).

Complete css in: www.developerscorner.nl/csshunter/tests/csswizardry-dropdown-nw3.htm.

Deze getest in IE6, resultaat:

Huh? De hovers werken nu, maar wat csswizardry er nog niet bij vertelde, is dat IE6 een bug heeft die grote gaten slaat tussen de <li>'s van het submenu.
Hier kan je van af komen door de notatie van de html te veranderen (zou niets uit mogen maken, maar voor IE6 wel...).
In plaats van bij de submenu's:

HTML:

<li>
    <a href="#" title="The services we offer">Services</a>
    <ul>
        <li><a href="#">Service one</a></li>
        <li><a href="#">Service two</a></li>
        <li><a href="#">Service three</a></li>
        <li><a href="#">Service four</a></li>
    </ul>
</li>

... schrijf je het zo:

HTML:

<li>
    <a href="#" title="The services we offer">Services</a>
    <ul>
        <li><a href="#">Service one</a></li><li>
        <a href="#">Service two</a></li><li>
        <a href="#">Service three</a></li><li>
        <a href="#">Service four</a></li></ul>
</li>

Dus:

de begin <li>'s steeds op het eind van de regel met de </li> van de vorige, en
de laatste </ul> direct achter de laatste </li>.

Hiermee wordt het resultaat:

Slotversie, ook voor IE6: www.developerscorner.nl/csshunter/tests/csswizardry-dropdown-nw4.htm
Kijk:

Eindelijk! :d

Met vriendelijke groet,
CSShunter

dropdown menu

marc 05

Gebruiker

grumbkow

Gebruiker

marc 05

Gebruiker

grumbkow

Gebruiker

csshunter

Meubilair

marc 05

Gebruiker

csshunter

Meubilair

marc 05

Gebruiker

csshunter

Meubilair

marc 05

Gebruiker

csshunter

Meubilair

marc 05

Gebruiker

csshunter

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy