Hoi iedereen,
ik wil graag een eenvoudig dropdownmenu in mijn site plaatsen (ik denk ook nog aan een dynamische horizontale). ik heb enkele voorbeelden gezien die via een nr en ZIP te downloaden waren, maar ik heb geen idee waar ik ze kan vinden. ik raak telkens de weg kwijt. Wie kan mij deze info geven?
Daarmee wil ik eerst aan de slag voordat ik een of meerdere vragen ga stellen.
Herman
dropdownmenu met ZIP
-
Goeroeboeroe
- Beheerder
- Berichten: 313
- Lid geworden op: zo 21 nov 2010, 02:08
- Contacteer:
Re: dropdownmenu met ZIP
Hallo,
Ik neem aan dat je op deze site verdwaalt? Oei, dat is niet de bedoeling. Kun je misschien proberen aan te geven hoe je verdwaalt, want mogelijk zitten er dan onduidelijkheden in de site.
De bedoeling is dat je op de homepage http://www.css-voorbeelden.nl via de grote witte knoppen kiest voor 'Menu'. Op de pagina menu kun je dan kiezen voor de soort menu. Als je boven een van de grote witte knoppen gaat hangen, krijg je kleine voorbeeldjes te zien.
Als je de soort menu hebt gekozen, kun je kiezen voor het uiteindelijke menu, ook weer via 'n knop met een thumbnail van het voorbeeld.
Je komt dan op de pagina met het voorbeeld. Elk menu heeft zo'n pagina, en op al die pagina's zit rechts boven een link 'Download hier code en uitleg'. Als je daarop klikt, zou de zip met het voorbeeld moeten gaan downloaden. In de zip zit een voorbeeldpagina html) en een uitleg (pdf).
Je kunt ook naar de sitemap met thumbnails gaan:
http://css-voorbeelden.nl/sitemap-thumbs.html
Als je bovenaan kiest voor Menu, ga je naar halverwege da pagina waar álle menu's onder elkaar staan in de vorm van een thumbnail. Als je boven 'n thumbnail gaat hangen met de cursor, opent een groter voorbeeld. Als je bij een van de menu's op 'voorbeeld' klikt, ga je weer naar de pagina met het voorbeeld van dat menu, en daar zit rechtsboven weer die link met 'Download hier code en uitleg'.
Als je op 'uitleg' klikt, ga je naar de online uitleg. Maar diezelfde uitleg zit dus ook in de download, en persoonlijk lijkt dat me veel makkelijker lezen en zo.
De nummers zijn niet zo belangrijk. Toen er nog geen forum was kwamen er nogal wat vragen per e-mail van 'Ik heb een menu gedownload en nou...'. Geen flauw idee om welk menu het ging. Het nummer op allerlei plaatsen en in de downloads identificeert het soort menu e.d. snel. Maar dat speelt dus pas als je vragen hebt over 'n bepaald iets.
Ik hoop dat het nu duidelijk is.
Ik neem aan dat je op deze site verdwaalt? Oei, dat is niet de bedoeling. Kun je misschien proberen aan te geven hoe je verdwaalt, want mogelijk zitten er dan onduidelijkheden in de site.
De bedoeling is dat je op de homepage http://www.css-voorbeelden.nl via de grote witte knoppen kiest voor 'Menu'. Op de pagina menu kun je dan kiezen voor de soort menu. Als je boven een van de grote witte knoppen gaat hangen, krijg je kleine voorbeeldjes te zien.
Als je de soort menu hebt gekozen, kun je kiezen voor het uiteindelijke menu, ook weer via 'n knop met een thumbnail van het voorbeeld.
Je komt dan op de pagina met het voorbeeld. Elk menu heeft zo'n pagina, en op al die pagina's zit rechts boven een link 'Download hier code en uitleg'. Als je daarop klikt, zou de zip met het voorbeeld moeten gaan downloaden. In de zip zit een voorbeeldpagina html) en een uitleg (pdf).
Je kunt ook naar de sitemap met thumbnails gaan:
http://css-voorbeelden.nl/sitemap-thumbs.html
Als je bovenaan kiest voor Menu, ga je naar halverwege da pagina waar álle menu's onder elkaar staan in de vorm van een thumbnail. Als je boven 'n thumbnail gaat hangen met de cursor, opent een groter voorbeeld. Als je bij een van de menu's op 'voorbeeld' klikt, ga je weer naar de pagina met het voorbeeld van dat menu, en daar zit rechtsboven weer die link met 'Download hier code en uitleg'.
Als je op 'uitleg' klikt, ga je naar de online uitleg. Maar diezelfde uitleg zit dus ook in de download, en persoonlijk lijkt dat me veel makkelijker lezen en zo.
De nummers zijn niet zo belangrijk. Toen er nog geen forum was kwamen er nogal wat vragen per e-mail van 'Ik heb een menu gedownload en nou...'. Geen flauw idee om welk menu het ging. Het nummer op allerlei plaatsen en in de downloads identificeert het soort menu e.d. snel. Maar dat speelt dus pas als je vragen hebt over 'n bepaald iets.
Ik hoop dat het nu duidelijk is.
Re: dropdownmenu met ZIP
Bedankt Goeroeboeroe, ik ga het proberen.
herman
ps ik ga nog wat rondkijken op de site en zal je van mijn ervaringen op de hoogte houden.
Ik was wel erg moe gisteren, misschien lag het daar aan.
herman
ps ik ga nog wat rondkijken op de site en zal je van mijn ervaringen op de hoogte houden.
Ik was wel erg moe gisteren, misschien lag het daar aan.
-
Goeroeboeroe
- Beheerder
- Berichten: 313
- Lid geworden op: zo 21 nov 2010, 02:08
- Contacteer:
Re: dropdownmenu met ZIP
Dat zou kunnen. Maar omdat deze site is bedoeld om te laten zien wat je kunt doen met css, is de navigatie enigszins 'apart'. Ik heb me al vaker afgevraagd of het niet te 'apart' is (om het netjes te zeggen, grinnik). Dus op het moment dat ik echt concrete problemen hoor, ga ik dat zeker bekijken.
Re: dropdownmenu met ZIP
Hoi iedereen,
Ik wilde een navigatie-menu in mijn site plaatsen en heb uiteindelijk gekozen voor "dropdownmenu, twee nivo´s diep".
Nadat ik de begeleidende tekst van css-voorbeelden had doorgelezen heb ik de code doorgekeken. Ik zag dat de verwijzingen in de body van de html "lu en li lijsten" naar de css in de html-head was geplaatst. Nu heb ik een externe stylesheet en ik heb geprobeerd de code naar die stylesheet te vertalen.
Het menu wil ik graag in een aparte div (of nav?) recht onder de titelcontainer hebben (zie tekening bijlage) en dat lukt maar niet. Hoe krijg ik die menu div (nav?)-container daar vast op zijn plek? Er lijkt me genoeg ruimte om de knoppen van de menu "ingangen" daar neer te zetten zodat het submenu zich opent (welliswaar over de content heen maar dat vind ik niet zo erg; ik heb een voorkeur voor verticale menu´s). En wat is de goede code (verwijzingen) naar en in de css stylesheet?
Maar misschien dat ik het bij de structuur van de containers beter anders aan kan pakken?
De rest van de site-opzet klopt op een paar puntjes wel redelijk (ahum).
Groet, Herman
ps: het is de 1e keer dat ik met css werk, voorheen, 7 jaar geleden, nog met tabellen. Ja, ja.
en het is de 2e keer dat ik een site maak. Dus ... maak je borst maar nat.
Ik wilde een navigatie-menu in mijn site plaatsen en heb uiteindelijk gekozen voor "dropdownmenu, twee nivo´s diep".
Nadat ik de begeleidende tekst van css-voorbeelden had doorgelezen heb ik de code doorgekeken. Ik zag dat de verwijzingen in de body van de html "lu en li lijsten" naar de css in de html-head was geplaatst. Nu heb ik een externe stylesheet en ik heb geprobeerd de code naar die stylesheet te vertalen.
Het menu wil ik graag in een aparte div (of nav?) recht onder de titelcontainer hebben (zie tekening bijlage) en dat lukt maar niet. Hoe krijg ik die menu div (nav?)-container daar vast op zijn plek? Er lijkt me genoeg ruimte om de knoppen van de menu "ingangen" daar neer te zetten zodat het submenu zich opent (welliswaar over de content heen maar dat vind ik niet zo erg; ik heb een voorkeur voor verticale menu´s). En wat is de goede code (verwijzingen) naar en in de css stylesheet?
Maar misschien dat ik het bij de structuur van de containers beter anders aan kan pakken?
De rest van de site-opzet klopt op een paar puntjes wel redelijk (ahum).
Groet, Herman
ps: het is de 1e keer dat ik met css werk, voorheen, 7 jaar geleden, nog met tabellen. Ja, ja.
en het is de 2e keer dat ik een site maak. Dus ... maak je borst maar nat.
- Bijlagen
-
- Dibujo-containers2.jpg (56.73 KiB) 42354 keer bekeken
-
Goeroeboeroe
- Beheerder
- Berichten: 313
- Lid geworden op: zo 21 nov 2010, 02:08
- Contacteer:
Re: dropdownmenu met ZIP
Hallo,
Even vooraf om teleurstelling te voorkomen: de 'allemaal' hier is eigenlijk alleen maar ik. Ik kreeg te veel mailtjes om nog te beantwoorden, en toen heb ik dit forum erop gezet. De drempel voor 'n forum is hoger, dus nu komen er veel minder vragen en is het te behappen. (En het vereist enige motivatie om lid te worden, dus ik ben gelijk van die vragen als 'Ik kan de x niet vinden op m'n toetsenbord' af, grinnik.) Maar het kan dus best even duren voordat je antwoord krijgt. En omdat ik in feite hier in m'n eentje antwoord, is de kans op fouten en eenzijdige meningen ook groter. Op 'n forum met meer mensen is de kans dat 'n fout wordt opgemerkt groter. Dus als je dat belangrijk vindt, kun je beter naar 'n groter forum uitwijken.
Als je die dingen niet zo'n punt vindt, ben je hier van harte welkom. En met vragen over dat menu ben je hier natuurlijk helemaal aan het goede adres, want ik heb dat ding gemaakt, dus ik ken 't redelijk.
In principe zou je de css uit de head gewoon moeten kunnen kopiëren naar de externe stylesheet. Ik neem aan dat de pagina met de html al aan die externe stylesheet is gekoppeld.
Dan kan het wel zijn dat dingen uit de css gaan 'botsen'. Ik het voorbeeld staat bijvoorbeeld ul { ... }. Dat gaat leuk als je maar één ul op de pagina hebt, als er meer zijn moet je met id's of classes gaan werken: <ul id="menu"> in de html, en in de css ul#menu.
Of zoiets.
Als de knoppen passen (je kunt de maat natuurlijk ook nog aanpassen) in die ruimte, past het menu per definitie ook. Dat het opent over de content is precies de bedoeling: anders zou je 'n hele grote ruimte leeg moeten laten.
In principe zou dat menu daar moeten kunnen staan. Maar ik kan zo niet zeggen, hoe je dat zou moeten doen. Het ligt eraan hoe je de andere divs hebt neergezet (ik neem aan dat de drie kolommen uit divs bestaan). Daarvoor zou ik de code even moeten zien. Je kunt die hier neerzetten, maar makkelijker is als het ergens online is te bekijken.
Het voordeel van online is dat allerlei hulpprogrammaatjes van mij makkelijker en sneller werken, en ik kan dan ook zien wat er misgaat met die css in het externe stylesheet.
<nav> of <div> maakt op dit ogenblik nog weinig uit. In de toekomst gaan screenreaders, zoekmachines, enz. dat mogelijk gebruiken. Maar er zijn meer van dat soort elementen, en als je alleen <nav> gebruikt en de andere niet, heeft dat niet zo heel veel zin. Ik zou het voorlopig even gewoon op divs houden, dat is iets simpeler. Voor een <nav> (en andere soortgelijke elementen) moet je bovendien voor Internet Explorer 7 en 8 JavaScript gaan toevoegen.
Je zou ook <nav> al kunnen gebruiken, en dan ooit die andere nieuwe elementen ook.
Beetje vage antwoorden, maar dat is ook gelijk de lol van css en zo: je hebt vaak legio mogelijkheden om iets te doen.
Trouwens lekker duidelijke tekening, zo weet ik gelijk waar je het over hebt!
Even vooraf om teleurstelling te voorkomen: de 'allemaal' hier is eigenlijk alleen maar ik. Ik kreeg te veel mailtjes om nog te beantwoorden, en toen heb ik dit forum erop gezet. De drempel voor 'n forum is hoger, dus nu komen er veel minder vragen en is het te behappen. (En het vereist enige motivatie om lid te worden, dus ik ben gelijk van die vragen als 'Ik kan de x niet vinden op m'n toetsenbord' af, grinnik.) Maar het kan dus best even duren voordat je antwoord krijgt. En omdat ik in feite hier in m'n eentje antwoord, is de kans op fouten en eenzijdige meningen ook groter. Op 'n forum met meer mensen is de kans dat 'n fout wordt opgemerkt groter. Dus als je dat belangrijk vindt, kun je beter naar 'n groter forum uitwijken.
Als je die dingen niet zo'n punt vindt, ben je hier van harte welkom. En met vragen over dat menu ben je hier natuurlijk helemaal aan het goede adres, want ik heb dat ding gemaakt, dus ik ken 't redelijk.
In principe zou je de css uit de head gewoon moeten kunnen kopiëren naar de externe stylesheet. Ik neem aan dat de pagina met de html al aan die externe stylesheet is gekoppeld.
Dan kan het wel zijn dat dingen uit de css gaan 'botsen'. Ik het voorbeeld staat bijvoorbeeld ul { ... }. Dat gaat leuk als je maar één ul op de pagina hebt, als er meer zijn moet je met id's of classes gaan werken: <ul id="menu"> in de html, en in de css ul#menu.
Of zoiets.
Als de knoppen passen (je kunt de maat natuurlijk ook nog aanpassen) in die ruimte, past het menu per definitie ook. Dat het opent over de content is precies de bedoeling: anders zou je 'n hele grote ruimte leeg moeten laten.
In principe zou dat menu daar moeten kunnen staan. Maar ik kan zo niet zeggen, hoe je dat zou moeten doen. Het ligt eraan hoe je de andere divs hebt neergezet (ik neem aan dat de drie kolommen uit divs bestaan). Daarvoor zou ik de code even moeten zien. Je kunt die hier neerzetten, maar makkelijker is als het ergens online is te bekijken.
Het voordeel van online is dat allerlei hulpprogrammaatjes van mij makkelijker en sneller werken, en ik kan dan ook zien wat er misgaat met die css in het externe stylesheet.
<nav> of <div> maakt op dit ogenblik nog weinig uit. In de toekomst gaan screenreaders, zoekmachines, enz. dat mogelijk gebruiken. Maar er zijn meer van dat soort elementen, en als je alleen <nav> gebruikt en de andere niet, heeft dat niet zo heel veel zin. Ik zou het voorlopig even gewoon op divs houden, dat is iets simpeler. Voor een <nav> (en andere soortgelijke elementen) moet je bovendien voor Internet Explorer 7 en 8 JavaScript gaan toevoegen.
Je zou ook <nav> al kunnen gebruiken, en dan ooit die andere nieuwe elementen ook.
Beetje vage antwoorden, maar dat is ook gelijk de lol van css en zo: je hebt vaak legio mogelijkheden om iets te doen.
Trouwens lekker duidelijke tekening, zo weet ik gelijk waar je het over hebt!
Re: dropdownmenu met ZIP
Bedankt voor je reactie en je uitleg.
Ik zal mijn situatie ook uitleggen.
Momenteel woon ik in Catalunya (Spanje) omdat mijn dochter daar met mijn ex-vrouw (catalaanse) woont. Het probleem hier is werk zien te vinden. Financieel ligt Spanje zo´n beetje op zijn gat. In de Ned. media zul je dat misschien niet lezen maar de situatie hier is bedroevend. Bezuinigingen, bezuinigingen en nogmaals bezuinigingen en ontslagen. Nieuwe vaste banen zijn zeer schaars, iedereen die nu geen vaste baan meer heeft scharrelt z´n kostje links en rechts bij elkaar. Daarom probeer ik werk te vinden om in mijn levensonderhoud te voorzien met mijn foto-audiovisuals (zie onder). En daarvoor is een website onontbeerlijk.
Gelukkig heb ik hier een olijfboomgaard met een simpele casita. Dat is gratis en daar woon ik nu. Geen electriciteit, stomend water, etc. Niet erg confortabel maar het heeft zeker z´n charmes. De enige energie via zonnepaneel en baterij is net niet voldoende om op een geleende pc (OS XP van microsoft, noodzakelijk voor mijn editing programma, en IE8) te werken daarom heb ik een kleine ruimte gehuurd in een nabijgelegen dorp. Helaas is de internetverbinding van mijn "huisbaas" afgesloten vanwege een geschil. En zonder internet ... . Maar daar wordt aan gewerkt.
Omdat ik geen printer heb kan ik geen tutorials uitprinten en moet ik alles opschrijven. Leerzaam maar traag.
Tot overmaat van ramp was mijn laptop defect (viel telkens uit) maar die heb ik eergisteren met behulp van een aadige jongen hier enigzins gerepareerd (uit elkaar gehaald, schoongemaakt, contacten vastgezet). Ik kan weer een beetje communiceren via wifi. Tot zover mijn situatie.
De website. O ja. Ik heb totaal geen ervaring met websites bouwen (pm 5 a 6 jaar geleden de website over mijn boomgaard "Olivar Salvage" met tabellen gemaakt).
Ik heb dus een HTML-bestand en een daaraan gekoppeld CSS-bestand.
Gisteren heb ik het tot nu gemaakte resultaat van mijn AV-website op mijn (oude) laptop gezet en met firefox geopend. En daar werkte het dropdownmenu dus wel. Voel me enigzins in mijn ... genaa.. (excuse my French). Dat verandert dan niet alles maar toch veel. De code was dus wel oke. Alleen moet ik al mijn onnodige pogingen en veranderingen om het voor IE werkbaar te krijgen dus er weer uit halen. Ga ik maandag mee beginnen en dan zal ik je de code sturen als je dat goed vindt want er zullen zeer waarschijnlijk nog veel fouten inzitten.
Bvb ik heb het met "transitional 4.01" gemaakt omdat ik met "strict 4.01" de div´s (containers) maar niet op z´n plaats kreeg. Ik heb eerst met "div" s de 7 basis-containers aangemaakt (zie tekening) in % en daarna een content-div om daarin de inhoud te plaatsen. Of dat verstandig is weet ik niet (heb de basiscode van internet gehaald en aan mijn eisen aangepast).
Helaas kan ik het nog niet on-line zetten, ik heb nog geen provider, etc (of is er een andere manier?). Maar nu moet ik het dan gaan aanpassen aan IE 8/9 met een javascriptje heb ik gelezen. Want 70-80 % of meer gebruikt IE 8/9 geloof ik. En ik weet nog niet wat mijn code doet op IE9.
Enfin, ik heb nog vele vragen want het een en ander snap ik nog niet zo goed.
groetjes Herman.
Als je interesse hebt, hier een voorbeeld van wat ik maak.
My village revisited XR:
http://exposureroom.com/23421ce35c3c413 ... 69c8547e9/
Ik zal mijn situatie ook uitleggen.
Momenteel woon ik in Catalunya (Spanje) omdat mijn dochter daar met mijn ex-vrouw (catalaanse) woont. Het probleem hier is werk zien te vinden. Financieel ligt Spanje zo´n beetje op zijn gat. In de Ned. media zul je dat misschien niet lezen maar de situatie hier is bedroevend. Bezuinigingen, bezuinigingen en nogmaals bezuinigingen en ontslagen. Nieuwe vaste banen zijn zeer schaars, iedereen die nu geen vaste baan meer heeft scharrelt z´n kostje links en rechts bij elkaar. Daarom probeer ik werk te vinden om in mijn levensonderhoud te voorzien met mijn foto-audiovisuals (zie onder). En daarvoor is een website onontbeerlijk.
Gelukkig heb ik hier een olijfboomgaard met een simpele casita. Dat is gratis en daar woon ik nu. Geen electriciteit, stomend water, etc. Niet erg confortabel maar het heeft zeker z´n charmes. De enige energie via zonnepaneel en baterij is net niet voldoende om op een geleende pc (OS XP van microsoft, noodzakelijk voor mijn editing programma, en IE8) te werken daarom heb ik een kleine ruimte gehuurd in een nabijgelegen dorp. Helaas is de internetverbinding van mijn "huisbaas" afgesloten vanwege een geschil. En zonder internet ... . Maar daar wordt aan gewerkt.
Omdat ik geen printer heb kan ik geen tutorials uitprinten en moet ik alles opschrijven. Leerzaam maar traag.
Tot overmaat van ramp was mijn laptop defect (viel telkens uit) maar die heb ik eergisteren met behulp van een aadige jongen hier enigzins gerepareerd (uit elkaar gehaald, schoongemaakt, contacten vastgezet). Ik kan weer een beetje communiceren via wifi. Tot zover mijn situatie.
De website. O ja. Ik heb totaal geen ervaring met websites bouwen (pm 5 a 6 jaar geleden de website over mijn boomgaard "Olivar Salvage" met tabellen gemaakt).
Ik heb dus een HTML-bestand en een daaraan gekoppeld CSS-bestand.
Gisteren heb ik het tot nu gemaakte resultaat van mijn AV-website op mijn (oude) laptop gezet en met firefox geopend. En daar werkte het dropdownmenu dus wel. Voel me enigzins in mijn ... genaa.. (excuse my French). Dat verandert dan niet alles maar toch veel. De code was dus wel oke. Alleen moet ik al mijn onnodige pogingen en veranderingen om het voor IE werkbaar te krijgen dus er weer uit halen. Ga ik maandag mee beginnen en dan zal ik je de code sturen als je dat goed vindt want er zullen zeer waarschijnlijk nog veel fouten inzitten.
Bvb ik heb het met "transitional 4.01" gemaakt omdat ik met "strict 4.01" de div´s (containers) maar niet op z´n plaats kreeg. Ik heb eerst met "div" s de 7 basis-containers aangemaakt (zie tekening) in % en daarna een content-div om daarin de inhoud te plaatsen. Of dat verstandig is weet ik niet (heb de basiscode van internet gehaald en aan mijn eisen aangepast).
Helaas kan ik het nog niet on-line zetten, ik heb nog geen provider, etc (of is er een andere manier?). Maar nu moet ik het dan gaan aanpassen aan IE 8/9 met een javascriptje heb ik gelezen. Want 70-80 % of meer gebruikt IE 8/9 geloof ik. En ik weet nog niet wat mijn code doet op IE9.
Enfin, ik heb nog vele vragen want het een en ander snap ik nog niet zo goed.
groetjes Herman.
Als je interesse hebt, hier een voorbeeld van wat ik maak.
My village revisited XR:
http://exposureroom.com/23421ce35c3c413 ... 69c8547e9/
Re: dropdownmenu met ZIP
Daar ben ik weer.
Heb net een beetje over je site gedwaald op zoek naar meer info voor mijn site.
Ik heb de "driekoloms layout" gevonden en dat ga ik doorlezen en vergelijken met wat ik allemaal heb neergezet.
De opzet van je site is inderdaad, zoals je eerder al zei, een beetje ongewoon. Maar als je de tijd neemt en alles leest, is het allemaal prima uitgelegd en is alles wel te vinden. Maar je weet hoe surfers zijn (ik dus ook). Snel, snel en het liefst nog sneller.
Het lijkt me dat een kleine intro met uitleg -die meteen goed zichtbaar is- wel kan helpen tot meer overzichtelijkheid, als je de site via bvb google opent, wordt je nu als het ware direct in het diepe gegooid. Je beweegt je muis en er plopt van alles op. Het duurde even voordat ik door had dat daarmee ook de achtergrond info veranderde en je verder kunt gaan met kiezen. Maar dat kan zeker ook aan mij liggen.
En: lijkt het je een idee om de html en de css apart te beschrijven? Naast elkaar bvb, in twee kolommen, zodat je direct ziet hoe de html code verwijst naar de css code?
groet herman.
Heb net een beetje over je site gedwaald op zoek naar meer info voor mijn site.
Ik heb de "driekoloms layout" gevonden en dat ga ik doorlezen en vergelijken met wat ik allemaal heb neergezet.
De opzet van je site is inderdaad, zoals je eerder al zei, een beetje ongewoon. Maar als je de tijd neemt en alles leest, is het allemaal prima uitgelegd en is alles wel te vinden. Maar je weet hoe surfers zijn (ik dus ook). Snel, snel en het liefst nog sneller.
Het lijkt me dat een kleine intro met uitleg -die meteen goed zichtbaar is- wel kan helpen tot meer overzichtelijkheid, als je de site via bvb google opent, wordt je nu als het ware direct in het diepe gegooid. Je beweegt je muis en er plopt van alles op. Het duurde even voordat ik door had dat daarmee ook de achtergrond info veranderde en je verder kunt gaan met kiezen. Maar dat kan zeker ook aan mij liggen.
En: lijkt het je een idee om de html en de css apart te beschrijven? Naast elkaar bvb, in twee kolommen, zodat je direct ziet hoe de html code verwijst naar de css code?
groet herman.
-
Goeroeboeroe
- Beheerder
- Berichten: 313
- Lid geworden op: zo 21 nov 2010, 02:08
- Contacteer:
Re: dropdownmenu met ZIP
Nou, dat is wel 'n heel aparte situatie. Er wordt hier wel wat over Spanje geschreven, maar eigenlijk bedroevend weinig. De overheersende sfeer is helaas in Nederland tegenwoordig toch enigszins dat al die Zuid-Europeanen, vooral de Grieken, feestvieren op kosten van Onze Belastingcenten. Je kunt wel wat meer achtergrondinfo over de situatie in bijvoorbeeld Spanje vinden, maar in de grote media wordt er inderdaad vrij weinig over geschreven, en al helemaal weinig over hoe het dagelijkse leven van veel mensen dramatisch is verslechterd. Ik houd erover op, anders begin ik weer te schuimbekken over Wilders, Rutte, enz. (Als je met 'n Catalaanse getrouwd bent geweest en in Spanje woont, gok ik er even op dat je geen last hebt van xenofobie.)
Ik heb wel wat met historische foto's en zo. Ik heb die clip bekeken. Ik vind het mooi gemonteerd, met die bewegende foto's over elkaar en zo. Heb ik nog nooit eerder gezien. Maar ik ben geen expert op dat gebied, dus dat zegt weinig. In ieder geval vind ik het knap om alleen met foto's toch diepte en beweging en zo te suggereren.
De site. Eerst even m'n eigen. Ik wilde 'n apart soort navigatie, omdat dat gelijk toont wat er mogelijk is. Maar ik heb me nooit gerealiseerd dat het inderdaad volstrekt niet duidelijk is dat je gewoon op zo'n thumb kan klikken. Als je dat niet weet, is het meer 'n soort lichtshow, inderdaad. Ik ga dat op een of andere manier duidelijk aangeven. Dus ik denk niet dat dat helemaal aan jou ligt. Het staat inderdaad wel in de tekst in het midden, maar er is geen hond die ooit dat soort teksten leest, dus dat schiet niet op. Dank voor deze tip.
De html en de css apart beschrijven is me niet helemaal duidelijk. Soms bestrijkt 'n css-regel meerdere elementen binnen de html, dus naast elkaar lijkt me wat lastig. Ik heb wel regelmatig overwogen om de css in een extern bestand onder te brengen in plaats van in de head. Maar dan gaan mensen die externe stylesheet gewoon vastknopen aan hun eigen, en dan krijg je problemen. Omdat het nu echt gekopieerd moet worden vanuit de head naar iets externs hoop ik dat daar iets meer bij wordt nagedacht. Bovendien zou je tot vijf externe stylesheets krijgen, omdat voor dat fantastische Internet Explorer soms wel vier aparte stylesheets nodig zijn.
Maar ik sta altijd open voor betere ideeën.
Jouw site. In principe zou dat menu ook gewoon in IE 8 moeten werken, als het in Firefox werkt. Ook als je <nav> hebt gebruikt en er iets is misgegaan met het JavaScript, want <nav> wordt alleen gebruikt om het menu te centreren en makkelijker te kunnen klikken. Dus daar gaat iets mis in de code, kennelijk. En het moet inderdaad absoluut werken in IE 8, want helaas gebruikt een groot deel van de mensheid dat onding nog. (Onding, omdat Microsoft nooit iets toevoegt, waardoor elke versie van IE eigenlijk bij het verschijnen al is verouderd en 'n blok aan het been wordt.)
Ja, die code sturen (hier neerzetten) is 'n prima idee, want dan kan ik hopelijk de fout eruit halen.
Als je nog geen provider hebt, zul je ook nog geen site hebben, en dan wordt het heel moeilijk het ergens neer te zetten. Er zijn wel mogelijkheden om het ergens 24 uur of zo neer te zetten en er dan samen aan te werken, maar dat is best wel ingewikkeld, zeker als je geen betrouwbare internet-verbinding hebt.
Als ik het goed begrijp, werkt alleen dat menu niet in IE 8. Ik zou even wachten met JavaScript-oplossingen en zo, want in principe zou 't ding zo ook gewoon moeten werken, dus ik vermoed dat er iets anders mis is. Als jouw code hier staat, kan ik het zelf even proberen in IE 8. Als het trouwens heel veel code is en dat levert problemen op, is er altijd de mogelijkheid het per mail te sturen in een zip, maar hier op 't forum heb ik liever, als dat enigszins mogelijk is.
Ik kan ook wel even kijken, als je dat wilt, waarom die divs niet op hun plaats blijven staan met strict.
Mooi weer, ik ga lekker rennen!
(Grinnik: bij overlezen: ik grossier in 'en zo'...)
Ik heb wel wat met historische foto's en zo. Ik heb die clip bekeken. Ik vind het mooi gemonteerd, met die bewegende foto's over elkaar en zo. Heb ik nog nooit eerder gezien. Maar ik ben geen expert op dat gebied, dus dat zegt weinig. In ieder geval vind ik het knap om alleen met foto's toch diepte en beweging en zo te suggereren.
De site. Eerst even m'n eigen. Ik wilde 'n apart soort navigatie, omdat dat gelijk toont wat er mogelijk is. Maar ik heb me nooit gerealiseerd dat het inderdaad volstrekt niet duidelijk is dat je gewoon op zo'n thumb kan klikken. Als je dat niet weet, is het meer 'n soort lichtshow, inderdaad. Ik ga dat op een of andere manier duidelijk aangeven. Dus ik denk niet dat dat helemaal aan jou ligt. Het staat inderdaad wel in de tekst in het midden, maar er is geen hond die ooit dat soort teksten leest, dus dat schiet niet op. Dank voor deze tip.
De html en de css apart beschrijven is me niet helemaal duidelijk. Soms bestrijkt 'n css-regel meerdere elementen binnen de html, dus naast elkaar lijkt me wat lastig. Ik heb wel regelmatig overwogen om de css in een extern bestand onder te brengen in plaats van in de head. Maar dan gaan mensen die externe stylesheet gewoon vastknopen aan hun eigen, en dan krijg je problemen. Omdat het nu echt gekopieerd moet worden vanuit de head naar iets externs hoop ik dat daar iets meer bij wordt nagedacht. Bovendien zou je tot vijf externe stylesheets krijgen, omdat voor dat fantastische Internet Explorer soms wel vier aparte stylesheets nodig zijn.
Maar ik sta altijd open voor betere ideeën.
Jouw site. In principe zou dat menu ook gewoon in IE 8 moeten werken, als het in Firefox werkt. Ook als je <nav> hebt gebruikt en er iets is misgegaan met het JavaScript, want <nav> wordt alleen gebruikt om het menu te centreren en makkelijker te kunnen klikken. Dus daar gaat iets mis in de code, kennelijk. En het moet inderdaad absoluut werken in IE 8, want helaas gebruikt een groot deel van de mensheid dat onding nog. (Onding, omdat Microsoft nooit iets toevoegt, waardoor elke versie van IE eigenlijk bij het verschijnen al is verouderd en 'n blok aan het been wordt.)
Ja, die code sturen (hier neerzetten) is 'n prima idee, want dan kan ik hopelijk de fout eruit halen.
Als je nog geen provider hebt, zul je ook nog geen site hebben, en dan wordt het heel moeilijk het ergens neer te zetten. Er zijn wel mogelijkheden om het ergens 24 uur of zo neer te zetten en er dan samen aan te werken, maar dat is best wel ingewikkeld, zeker als je geen betrouwbare internet-verbinding hebt.
Als ik het goed begrijp, werkt alleen dat menu niet in IE 8. Ik zou even wachten met JavaScript-oplossingen en zo, want in principe zou 't ding zo ook gewoon moeten werken, dus ik vermoed dat er iets anders mis is. Als jouw code hier staat, kan ik het zelf even proberen in IE 8. Als het trouwens heel veel code is en dat levert problemen op, is er altijd de mogelijkheid het per mail te sturen in een zip, maar hier op 't forum heb ik liever, als dat enigszins mogelijk is.
Ik kan ook wel even kijken, als je dat wilt, waarom die divs niet op hun plaats blijven staan met strict.
Mooi weer, ik ga lekker rennen!
(Grinnik: bij overlezen: ik grossier in 'en zo'...)
Re: dropdownmenu met ZIP
Leuk dat mijn fotocompositie, ik noem ze "moving images" je beviel.
Met dat soort werk voor musea, fotoarchieven etc. wil ik proberen hier wat geld te verdienen.
Ik realiseer me dat dit in deze tijd van bezuinigingen en vooral in deze sector niet gemakkelijk zal zijn. Maar niet geschoten ...
En ja, ik heb geen last van xenofobie. Purpelpaars met spikkeltjes aan de buitenkant, het maakt me niet uit. Als het van binnen maar goed zit.
Het nieuws over Nederland volg ik niet zo maar ik begrijp dat Rutte en trawanten nog steeds op oorlogspad zijn. En ik houd m´n hart vast over fort Europa. De oplossingen die nu worden bedacht zullen eerder de situatie verslechteren dan verbeteren. En dat ze in het zuiden niet werken is niet waar. Er is alleen weinig organisatie, innovatie en efficientie, en de politiek stuurt weinig aan; die "volksvertegenwoordigers" denken het eerst aan zichzelf. En wat misschien het allerbelangrijkste is, het volk heeft gewoon een andere mentaliteit. Niet beter of slechter, gewoon anders. Het noord-Europese model met zijn werkethos en consumptisme kun je hier niet zomaar implanteren, dat leidt tot een tragedie. De politiek wil het, maakt nieuwe regels etc, maar het volk snapt het niet. Natuurlijk willen ze allemaal een Mercedes rijden maar als je zo wilt leven zoals ze hier leven -en daarvoor ben ik o.a hier naar toe gegaan-, zit dat er gewoon niet in.
Wat ik wel regelmatig las waren de analyses op "money for nothing" een Nederlandstalige site over economie. Er wordt ook het een en ander uitgelegd over het monetaire systeem. Interessante site.
Over jouw site. Wat ik bedoelde met css en html in 2 kolommen is niet dat je rechts (HTML) direct kunt lezen wat er links in CSS gebeurd. Meer dat je de verwijscode in html naar de css-code wat beter kunt overzien. Je zult inderdaad wat moeten zoeken. Mij zou het waarschijnlijk wel helpen.
Ik heb nu het een en ander gelezen op diverse sites, soms denk ik dat ik het begin te snappen om een half uur later met andere informatie door de bomen het bos niet meer te zien. Websites bouwen is voor mij, als je geen ervaring hebt, een complexe materie geworden.
Waar ik ook hoorndol van word, zijn de verschillende DOCTYPE´s (strict, stid, transitional) en wat het doet in al die verschillende browsers.
Op mijn laptop heb ik firefox. Op mijn werk-PC waarop ik de site maak heb ik IE8 (en vanwege omstandigheden al lang niet ge-updated). Omdat het gros van de mensen nog IE8/9 gebruikt (waarschijnlijk vooral mijn toekomstige klanten) en ik natuurlijk wil dat zij het ook goed kunnen zien, dacht ik dat het gebruik van "mijn" IE8 een goede controle zou zijn.
En met mijn eerdere ervaring (die olivar-site met tabellen) ben ik vol goede moed en te weinig onderzoek (shame me) begonnen en heb ik de complicaties onderschat.
Voor de olivarsite (5/6 jaar geleden) heb ik Editplus gebruikt maar ik ben nu overgestapt naar de freeware KIT-editor.
Nu heb KIT ook op mijn laptop gezet en wat gebeurt er? In de KIT doet het menu het ook niet, wel als ik de index in firefox open. Misschien moet ik wat in de KIT aanpassen. Ga dat nu bekijken.
Daarna ga ik de HTML/CSS code weer terugbrengen naar mijn eerste opzet (basis van internet gehaald). Dat was geloof ik in "strid". Maar het is me niet helemaal duidelijk waar dit nu voor staat.
Daarna zet ik de codes op je site. Ren ze.
Groet Herman
Met dat soort werk voor musea, fotoarchieven etc. wil ik proberen hier wat geld te verdienen.
Ik realiseer me dat dit in deze tijd van bezuinigingen en vooral in deze sector niet gemakkelijk zal zijn. Maar niet geschoten ...
En ja, ik heb geen last van xenofobie. Purpelpaars met spikkeltjes aan de buitenkant, het maakt me niet uit. Als het van binnen maar goed zit.
Het nieuws over Nederland volg ik niet zo maar ik begrijp dat Rutte en trawanten nog steeds op oorlogspad zijn. En ik houd m´n hart vast over fort Europa. De oplossingen die nu worden bedacht zullen eerder de situatie verslechteren dan verbeteren. En dat ze in het zuiden niet werken is niet waar. Er is alleen weinig organisatie, innovatie en efficientie, en de politiek stuurt weinig aan; die "volksvertegenwoordigers" denken het eerst aan zichzelf. En wat misschien het allerbelangrijkste is, het volk heeft gewoon een andere mentaliteit. Niet beter of slechter, gewoon anders. Het noord-Europese model met zijn werkethos en consumptisme kun je hier niet zomaar implanteren, dat leidt tot een tragedie. De politiek wil het, maakt nieuwe regels etc, maar het volk snapt het niet. Natuurlijk willen ze allemaal een Mercedes rijden maar als je zo wilt leven zoals ze hier leven -en daarvoor ben ik o.a hier naar toe gegaan-, zit dat er gewoon niet in.
Wat ik wel regelmatig las waren de analyses op "money for nothing" een Nederlandstalige site over economie. Er wordt ook het een en ander uitgelegd over het monetaire systeem. Interessante site.
Over jouw site. Wat ik bedoelde met css en html in 2 kolommen is niet dat je rechts (HTML) direct kunt lezen wat er links in CSS gebeurd. Meer dat je de verwijscode in html naar de css-code wat beter kunt overzien. Je zult inderdaad wat moeten zoeken. Mij zou het waarschijnlijk wel helpen.
Ik heb nu het een en ander gelezen op diverse sites, soms denk ik dat ik het begin te snappen om een half uur later met andere informatie door de bomen het bos niet meer te zien. Websites bouwen is voor mij, als je geen ervaring hebt, een complexe materie geworden.
Waar ik ook hoorndol van word, zijn de verschillende DOCTYPE´s (strict, stid, transitional) en wat het doet in al die verschillende browsers.
Op mijn laptop heb ik firefox. Op mijn werk-PC waarop ik de site maak heb ik IE8 (en vanwege omstandigheden al lang niet ge-updated). Omdat het gros van de mensen nog IE8/9 gebruikt (waarschijnlijk vooral mijn toekomstige klanten) en ik natuurlijk wil dat zij het ook goed kunnen zien, dacht ik dat het gebruik van "mijn" IE8 een goede controle zou zijn.
En met mijn eerdere ervaring (die olivar-site met tabellen) ben ik vol goede moed en te weinig onderzoek (shame me) begonnen en heb ik de complicaties onderschat.
Voor de olivarsite (5/6 jaar geleden) heb ik Editplus gebruikt maar ik ben nu overgestapt naar de freeware KIT-editor.
Nu heb KIT ook op mijn laptop gezet en wat gebeurt er? In de KIT doet het menu het ook niet, wel als ik de index in firefox open. Misschien moet ik wat in de KIT aanpassen. Ga dat nu bekijken.
Daarna ga ik de HTML/CSS code weer terugbrengen naar mijn eerste opzet (basis van internet gehaald). Dat was geloof ik in "strid". Maar het is me niet helemaal duidelijk waar dit nu voor staat.
Daarna zet ik de codes op je site. Ren ze.
Groet Herman
Re: dropdownmenu met ZIP
Nou daargaatiedan Goeroegoeroe en alle anderen die ook eens willen genieten.
Ik heb uiteindelijk gekozen om mijn "strid" versie hier neer te zetten, die komt het dichtste bij wat ik voor ogen heb. Het dropdown-menu met submenu werkt. Alleen de containers staan niet goed, ze schuiven over en door elkaar heen in mijn IE8 browser.
(Helaas kan ik het niet meer met firefox uitproberen want mijn laptop waar ik firefox gebruik heeft weer kuren; hij slaat telkens af.)
Ook bij het smaller maken van het venster gebeuren er rare dingen: dan duikt de titel_container (Movimag in rood) onder de nav_container. Maar dat is wellicht op te lossen door de grootte van de inhoud op elkaar af te stemmen. Er klopt nog wel meer niet maar daar heb ik niet veel aan gedaan omdat ik eerst de containers en het menu goed wilde hebben.
In de "strict" versie heb ik gekozen om de nav_container onder de logo-, titel- en taal_container te plaatsen. Ik heb het gevoel dat dat ook beter -logischer- is. Die laatste 3 maak ik dan wat minder hoog zodat het geheel van de bovenste 3 containers met daaronder de nav_container ongeveer dezelfde hoogte krijgt als in deze "strid" versie waar ik de titel container en de nav_container tussen de logo- en taal_container heb gezet. Maar die "strict" versie is met al dat ge-experimenteer een ongelofelijke puinhoop geworden. Een combinatie van Dada en Picasso op late leeftijd.
Kan iedereen het nog volgen?
Enfin, ik weet niet wat het beste is. Kiezen voor "strid" of "strict".
Later wil ik ook nog wat doen met vertragingen.
Groet herman
ps: ik heb nog niks bijgevoegd omdat ik het html en css bestand niet ge-upload krijg. Hoe pak ik dat aan?
Ik heb uiteindelijk gekozen om mijn "strid" versie hier neer te zetten, die komt het dichtste bij wat ik voor ogen heb. Het dropdown-menu met submenu werkt. Alleen de containers staan niet goed, ze schuiven over en door elkaar heen in mijn IE8 browser.
(Helaas kan ik het niet meer met firefox uitproberen want mijn laptop waar ik firefox gebruik heeft weer kuren; hij slaat telkens af.)
Ook bij het smaller maken van het venster gebeuren er rare dingen: dan duikt de titel_container (Movimag in rood) onder de nav_container. Maar dat is wellicht op te lossen door de grootte van de inhoud op elkaar af te stemmen. Er klopt nog wel meer niet maar daar heb ik niet veel aan gedaan omdat ik eerst de containers en het menu goed wilde hebben.
In de "strict" versie heb ik gekozen om de nav_container onder de logo-, titel- en taal_container te plaatsen. Ik heb het gevoel dat dat ook beter -logischer- is. Die laatste 3 maak ik dan wat minder hoog zodat het geheel van de bovenste 3 containers met daaronder de nav_container ongeveer dezelfde hoogte krijgt als in deze "strid" versie waar ik de titel container en de nav_container tussen de logo- en taal_container heb gezet. Maar die "strict" versie is met al dat ge-experimenteer een ongelofelijke puinhoop geworden. Een combinatie van Dada en Picasso op late leeftijd.
Kan iedereen het nog volgen?
Enfin, ik weet niet wat het beste is. Kiezen voor "strid" of "strict".
Later wil ik ook nog wat doen met vertragingen.
Groet herman
ps: ik heb nog niks bijgevoegd omdat ik het html en css bestand niet ge-upload krijg. Hoe pak ik dat aan?
-
Goeroeboeroe
- Beheerder
- Berichten: 313
- Lid geworden op: zo 21 nov 2010, 02:08
- Contacteer:
Re: dropdownmenu met ZIP
Hoi,
Ja, precies. Je moet de Noord-Europese mentaliteit niet klakkeloos op Zuid-Europa bombarderen. En ook niet omgekeerd trouwens. Dat is vragen om ellende en heeft niets met 'beter' of 'slechter' te maken. En dat ik waar ik zo van baal. Niet dat Rutte c.s. rechts zijn, maar dat ze de xenofobie van Wilders tolereren, legitimeren en daarmee in feite aanmoedigen.
De site. In principe zou dat menu gewoon moeten werken in IE 8, maar daar moet ik de code voor zien. Terzijde: ik heb nauwelijks ervaring met mobiel, want dat is na mijn tijd, zeg maar. Maar zo'n menu met hoveren werkt waarschijnlijk niet goed op mobieltjes en zo. Ik weet niet hoe belangrijk dat in Spanje is, maar mogelijk iets om rekening mee te houden? Alles met hoveren werkt niet/slecht/anders op mobiele apparatuur.
Als je gaat zoeken op internet, raak je snel in verwarring. Er zijn meestal tig manieren om iets te doen, en nogal wat mensen vinden hun manier de enig juiste. Verder is het overgrote deel van de handleidingen en zo hartstikke verouderd en/of volkomen foutief. Dat klinkt arrogant, maar dat kan ik ook niet helpen, het is gewoon zo. Op mijn pagina met links vind je links naar betrouwbare sites.
Over het doctype is heel veel onzin geschreven. Veel mensen denken dat het doctype bepaalt hoe een site wordt weergegeven. Dit lees je heel vaak, maar is absoluut onjuist.
Ooit bestond er geen doctype. Je had toen ook niet echt een standaard. Dat was de tijd van de zogenaamde 'browser war'. Netscape, een heel vroege voorloper van Firefox, en Internet Explorer vochten om de hegemonie. Ze gaven dezelfde code op hun eigen manier weer, en dan ook nog per versie verschillend. Daarnaast had je ook nog kleinere browsers als Opera en Safari, die het ook weer anders deden. Je moest in die tijd letterlijk meerdere sites maken: eentje voor elke browser, en dan vaak ook nog verschillend per versie.
Toen werd min of meer afgedwongen dat browsers zich gingen houden aan de standaarden van w3c, de overkoepelende club voor standaarden op internet. (Ongeveer, ze doen nog meer, en er zijn meer clubs bij betrokken.) Als een browser zich aan de standaarden houdt, geeft hij bijvoorbeeld een marge op dezelfde manier weer. Vroeger was dat niet zo. Als je 'n breedte opgaf aan een element, telde de ene browser de marge erbij op en de andere zetten de marge binnen de breedte. En nog tig andere heel grote verschillen.
Uiteindelijk won Internet Explorer de strijd. En Internet Explorer had lak aan de standaard. Maar iedereen maakte daar sites voor, want iedereen gebruikte nou eenmaal IE. Die sites voldeden dus ook niet aan de standaard. Toen herrees Firefox uit de as van Netscape. En Firefox hield zich aan de standaard. Net als Safari, Opera, enz. Hierdoor werd ook IE gedwongen zich aan de standaard te gaan houden.
Maar er waren dus tig sites speciaal gemaakt voor IE. En die werden volkomen verkeerd weergegeven als ze volgens de standaard werden weergegeven. Daarom is het doctype bedacht.
Een site die een doctype bovenaan de pagina heeft staan, wordt volgens de standaard weergegeven. Dat is de énige functie van het doctype. De sitemaker geeft ermee aan, dat de marge bij de breedte komt en niet erbinnen, bijvoorbeeld.
Het is wel nodig dat het doctype foutloos is, anders werkt het niet goed.
html 4.01 (en eerder) heeft een onwijs lang doctype. In html5 hebben de makers van de standaard gekeken wat er nou echt nodig is van dat doctype om te zorgen dat elke browser toch volgens de standaard weergeeft. En dat blijkt niet meer te zijn dan <!DOCTYPE html>. Vandaar dat het zo kort is. Gewoon 'n pragmatische oplossing. Er staat ook geen versie meer achter, want het gaat alleen om wel of geen standaardweergave.
Bij eerdere doctypes is er dan nog strict of transitional. Html5 kent dat verschil niet meer, dat is gewoon strict.
Bij strict wordt alles wat voor de lay-out, het uiterlijk, wordt gebruikt apart in de css gezet. Dingen zoals lettergrootte, kleuren, enz. Vroeger had je alleen html en geen css, toen kon dat niet. Toen moest je op tig plaatsen de lettergrootte aangeven, de kleur, enz.
Met strict geef je aan, dat je de lay-out in de css zet en de echte inhoud, de tekst en zo, in de html. Maar de weergave is gewoon hetzelfde: standaard. Om fouten uit de html te kunnen halen, wordt een validator gebruikt. Fouten kunnen tot de wildste resultaten leiden, en een computer (validator) is vaak veel beter in het vinden van 'stomme' fouten als 'n vergeten kommaatje dan mensen. En voor die validator is 'strict' wel van belang: je krijg nu 'n foutmelding als je dingen die in de css horen in de html hebt staan.
Maar omdat er al zoveel sites bestonden, die niet allemaal omgebouwd gingen worden, werd ook een transitional variant ingevoerd. Dan kun je de validator gebruiken, terwijl je toch lay-out in je html hebt staan. De naam zegt het al: 'transitional', overgang.
Gevalideerde code is van belang omdat het fouten in de weergave voorkomt. Bovendien zijn toekomstige versies van html terugwaarts compatibel met valide code. Als iets nu toevallig goed wordt weergeven, maar de code is verkeerd, is er geen enkele garantie dat dat in de toekomst ook goed blijft gaan. Met gevalideerde code is die garantie er min of meer wel. Een site die goed is gemaakt in html 3, wordt ook in de nieuwste browsers probleemloos weergegeven.
Als je nu een site gaat bouwen, is het veel en veel beter om html 4.01 strict te gebruiken. (Of html5, dat is altijd strict). Niet voor de weergave, want die is hetzelfde, als je gevalideerde code hebt. Maar omdat het veel minder werk is en makkelijker te onderhouden. Het is veel makkelijker om op één plaats in je css de lettergrootte aan te geven, dan op tig plaatsen in de html. In html5 worden allerlei lay-out-codes uit de html niet meer gebruikt. Als je gelijk zo werkt, of als je html 4.01 strict gebruikt, is je site gelijk geschikt voor de toekomst. Als je transitional gebruikt, wordt het heel lastig om nieuwe elementen uit html5 (en later) te gebruiken.
Voor de weergave maakt het dus niet uit, maar je site is geschikt voor de toekomst met strict of html5.
transitional is bedoeld voor sites die eigenlijk niet meer veranderen, maar verder goed zijn. Waarom zou je die helemaal gaan ombouwen?
Nou, heel verhaal. Hoop dat het nu wat duidelijker is.
Ja, precies. Je moet de Noord-Europese mentaliteit niet klakkeloos op Zuid-Europa bombarderen. En ook niet omgekeerd trouwens. Dat is vragen om ellende en heeft niets met 'beter' of 'slechter' te maken. En dat ik waar ik zo van baal. Niet dat Rutte c.s. rechts zijn, maar dat ze de xenofobie van Wilders tolereren, legitimeren en daarmee in feite aanmoedigen.
De site. In principe zou dat menu gewoon moeten werken in IE 8, maar daar moet ik de code voor zien. Terzijde: ik heb nauwelijks ervaring met mobiel, want dat is na mijn tijd, zeg maar. Maar zo'n menu met hoveren werkt waarschijnlijk niet goed op mobieltjes en zo. Ik weet niet hoe belangrijk dat in Spanje is, maar mogelijk iets om rekening mee te houden? Alles met hoveren werkt niet/slecht/anders op mobiele apparatuur.
Als je gaat zoeken op internet, raak je snel in verwarring. Er zijn meestal tig manieren om iets te doen, en nogal wat mensen vinden hun manier de enig juiste. Verder is het overgrote deel van de handleidingen en zo hartstikke verouderd en/of volkomen foutief. Dat klinkt arrogant, maar dat kan ik ook niet helpen, het is gewoon zo. Op mijn pagina met links vind je links naar betrouwbare sites.
Over het doctype is heel veel onzin geschreven. Veel mensen denken dat het doctype bepaalt hoe een site wordt weergegeven. Dit lees je heel vaak, maar is absoluut onjuist.
Ooit bestond er geen doctype. Je had toen ook niet echt een standaard. Dat was de tijd van de zogenaamde 'browser war'. Netscape, een heel vroege voorloper van Firefox, en Internet Explorer vochten om de hegemonie. Ze gaven dezelfde code op hun eigen manier weer, en dan ook nog per versie verschillend. Daarnaast had je ook nog kleinere browsers als Opera en Safari, die het ook weer anders deden. Je moest in die tijd letterlijk meerdere sites maken: eentje voor elke browser, en dan vaak ook nog verschillend per versie.
Toen werd min of meer afgedwongen dat browsers zich gingen houden aan de standaarden van w3c, de overkoepelende club voor standaarden op internet. (Ongeveer, ze doen nog meer, en er zijn meer clubs bij betrokken.) Als een browser zich aan de standaarden houdt, geeft hij bijvoorbeeld een marge op dezelfde manier weer. Vroeger was dat niet zo. Als je 'n breedte opgaf aan een element, telde de ene browser de marge erbij op en de andere zetten de marge binnen de breedte. En nog tig andere heel grote verschillen.
Uiteindelijk won Internet Explorer de strijd. En Internet Explorer had lak aan de standaard. Maar iedereen maakte daar sites voor, want iedereen gebruikte nou eenmaal IE. Die sites voldeden dus ook niet aan de standaard. Toen herrees Firefox uit de as van Netscape. En Firefox hield zich aan de standaard. Net als Safari, Opera, enz. Hierdoor werd ook IE gedwongen zich aan de standaard te gaan houden.
Maar er waren dus tig sites speciaal gemaakt voor IE. En die werden volkomen verkeerd weergegeven als ze volgens de standaard werden weergegeven. Daarom is het doctype bedacht.
Een site die een doctype bovenaan de pagina heeft staan, wordt volgens de standaard weergegeven. Dat is de énige functie van het doctype. De sitemaker geeft ermee aan, dat de marge bij de breedte komt en niet erbinnen, bijvoorbeeld.
Het is wel nodig dat het doctype foutloos is, anders werkt het niet goed.
html 4.01 (en eerder) heeft een onwijs lang doctype. In html5 hebben de makers van de standaard gekeken wat er nou echt nodig is van dat doctype om te zorgen dat elke browser toch volgens de standaard weergeeft. En dat blijkt niet meer te zijn dan <!DOCTYPE html>. Vandaar dat het zo kort is. Gewoon 'n pragmatische oplossing. Er staat ook geen versie meer achter, want het gaat alleen om wel of geen standaardweergave.
Bij eerdere doctypes is er dan nog strict of transitional. Html5 kent dat verschil niet meer, dat is gewoon strict.
Bij strict wordt alles wat voor de lay-out, het uiterlijk, wordt gebruikt apart in de css gezet. Dingen zoals lettergrootte, kleuren, enz. Vroeger had je alleen html en geen css, toen kon dat niet. Toen moest je op tig plaatsen de lettergrootte aangeven, de kleur, enz.
Met strict geef je aan, dat je de lay-out in de css zet en de echte inhoud, de tekst en zo, in de html. Maar de weergave is gewoon hetzelfde: standaard. Om fouten uit de html te kunnen halen, wordt een validator gebruikt. Fouten kunnen tot de wildste resultaten leiden, en een computer (validator) is vaak veel beter in het vinden van 'stomme' fouten als 'n vergeten kommaatje dan mensen. En voor die validator is 'strict' wel van belang: je krijg nu 'n foutmelding als je dingen die in de css horen in de html hebt staan.
Maar omdat er al zoveel sites bestonden, die niet allemaal omgebouwd gingen worden, werd ook een transitional variant ingevoerd. Dan kun je de validator gebruiken, terwijl je toch lay-out in je html hebt staan. De naam zegt het al: 'transitional', overgang.
Gevalideerde code is van belang omdat het fouten in de weergave voorkomt. Bovendien zijn toekomstige versies van html terugwaarts compatibel met valide code. Als iets nu toevallig goed wordt weergeven, maar de code is verkeerd, is er geen enkele garantie dat dat in de toekomst ook goed blijft gaan. Met gevalideerde code is die garantie er min of meer wel. Een site die goed is gemaakt in html 3, wordt ook in de nieuwste browsers probleemloos weergegeven.
Als je nu een site gaat bouwen, is het veel en veel beter om html 4.01 strict te gebruiken. (Of html5, dat is altijd strict). Niet voor de weergave, want die is hetzelfde, als je gevalideerde code hebt. Maar omdat het veel minder werk is en makkelijker te onderhouden. Het is veel makkelijker om op één plaats in je css de lettergrootte aan te geven, dan op tig plaatsen in de html. In html5 worden allerlei lay-out-codes uit de html niet meer gebruikt. Als je gelijk zo werkt, of als je html 4.01 strict gebruikt, is je site gelijk geschikt voor de toekomst. Als je transitional gebruikt, wordt het heel lastig om nieuwe elementen uit html5 (en later) te gebruiken.
Voor de weergave maakt het dus niet uit, maar je site is geschikt voor de toekomst met strict of html5.
transitional is bedoeld voor sites die eigenlijk niet meer veranderen, maar verder goed zijn. Waarom zou je die helemaal gaan ombouwen?
Nou, heel verhaal. Hoop dat het nu wat duidelijker is.
-
Goeroeboeroe
- Beheerder
- Berichten: 313
- Lid geworden op: zo 21 nov 2010, 02:08
- Contacteer:
Re: dropdownmenu met ZIP
Ah, we hebben elkaar gekruist.
Ik dacht dat het doctype 'strid' een typefout was: er bestaat geen doctype strid. Je hebt transitional en strict (en eentje voor frames, maar da's 'n geval apart).
Je kunt de code hier neerzetten door hem te kopiëren. Dus gewoon vanuit je computer kopiëren en hier in het tekstvak neerzetten.
Als je dan de html selecteert en op 'xhtml' rechts boven het tekstveld klikt, krijg je mooie kleurtjes en regelnummertjes en zo.
Als je de css selecteert en op css klikt idem.
Met regelnummers en zo is het wat makkelijker om erover te schrijven.
Ik dacht dat het doctype 'strid' een typefout was: er bestaat geen doctype strid. Je hebt transitional en strict (en eentje voor frames, maar da's 'n geval apart).
Je kunt de code hier neerzetten door hem te kopiëren. Dus gewoon vanuit je computer kopiëren en hier in het tekstvak neerzetten.
Als je dan de html selecteert en op 'xhtml' rechts boven het tekstveld klikt, krijg je mooie kleurtjes en regelnummertjes en zo.
Als je de css selecteert en op css klikt idem.
Met regelnummers en zo is het wat makkelijker om erover te schrijven.
Re: dropdownmenu met ZIP
Bedankt voor de uitvoerige uitleg, GG.
Ik heb hierdoor een veel beter beeld gekregen.
Ik heb helaas geen tijd meer gehad om jouw drie-koloms-layout te lezen. Sorry, maar ga ik nog doen.
Ik heb er nog de hele middag aan gewerkt om de code zo kaal mogelijk te houden.
De verschillende containerkleuren zijn alleen om de plaatsing goed te kunnen zien. Dat moet later anders natuurlijk.
Bij het kleiner maken van het browservenster verplaatsen de containers zich door elkaar heen, dat is natuurlijk niet de bedoeling.
(een probleem wat zich in deze kale versie niet meer voordoet was dat veel content automatisch een a-link meekreeg en dat was niet de bedoeling)
Ik heb de indruk dat er veel overbodige code inzit maar op deze manier kreeg ik de lay-out (in KIT en mijn oude IE8) ogenschijnlijk "goed".
Ik heb ook begrepen dat de invulling van de sub-containers erg nauw komt, hebben de voorgenoemde verschuivingen hiermee te maken?
En is het zo dat je in de containers met "%" of/en met "em" werkt en in de sub-containers met absolute eenheden?
Enfin, zo heb ik nog vele vragen.
En hier is mijn bouwwerk dan.
Eerst de html code, daarna de css.
Shoot. Ik trek me ondertussen even terug.
Groet herman
Ik heb hierdoor een veel beter beeld gekregen.
Ik heb helaas geen tijd meer gehad om jouw drie-koloms-layout te lezen. Sorry, maar ga ik nog doen.
Ik heb er nog de hele middag aan gewerkt om de code zo kaal mogelijk te houden.
De verschillende containerkleuren zijn alleen om de plaatsing goed te kunnen zien. Dat moet later anders natuurlijk.
Bij het kleiner maken van het browservenster verplaatsen de containers zich door elkaar heen, dat is natuurlijk niet de bedoeling.
(een probleem wat zich in deze kale versie niet meer voordoet was dat veel content automatisch een a-link meekreeg en dat was niet de bedoeling)
Ik heb de indruk dat er veel overbodige code inzit maar op deze manier kreeg ik de lay-out (in KIT en mijn oude IE8) ogenschijnlijk "goed".
Ik heb ook begrepen dat de invulling van de sub-containers erg nauw komt, hebben de voorgenoemde verschuivingen hiermee te maken?
En is het zo dat je in de containers met "%" of/en met "em" werkt en in de sub-containers met absolute eenheden?
Enfin, zo heb ik nog vele vragen.
En hier is mijn bouwwerk dan.
Eerst de html code, daarna de css.
Shoot. Ik trek me ondertussen even terug.
Groet herman
Code: Selecteer alles
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Strict//EN">
<HTML>
<HEAD>
<TITLE> moving_images </TITLE>
<link rel="stylesheet" type="text/css" href="SS_movimag_10B-strict-kaal4.css">
</HEAD>
<body>
<div id="main_container"> <!-- OMSLUIT ALLE CONTAINERS TOT FOOT_CONTAINER -->
<div id="logo_container">
<div id="logo">
logo_container <!-- hier komt afbeelding van logo jpeg -->
</div>
</div> <!-- sluit LOGO_container -->
<div id="taal_container">
<div id="taal" >
vlaggen_container <!-- hier komen 5 of 6 png/gif nationale vlaggen voor taalkeuze -->
</div>
</div> <!-- sluit TAAL_container. -->
<div id="title_container">
<div id="title">
titel_container
</div>
</div> <!-- sluit TITLE_container. -->
<div id="nav">
<ul>
<li><a href="#">HOME</a></li>
</ul>
<ul>
<li><a class="top_parent" href="#">MOVIMAG</a>
<ul>
<li><a href="#">wat</a></li>
<li><a href="#">wie</a></li>
<li><a href="#">filosofie</a></li>
<li><a href="#">voorwaarden</a></li>
<li><a href="#">???</a></li>
</ul>
</li>
</ul>
<ul>
<li><a class="top_parent" href="#">COMPOSITIES</a>
<ul>
<li><a href="#">promotie</a></li>
<li><a href="#">documentair</a></li>
<li><a href="#">15-30-60</a></li>
<li><a href="#">vrijwerk</a></li>
<li><a href="#">???</a></li>
</ul>
</li>
</ul>
<ul>
<li><a class="top_parent" href="#">MOVING_IMAGES</a>
<ul>
<li><a href="#">moving_images</a></li>
<li><a href="#">fotografie</a></li>
<li><a href="#">concept</a></li>
<li><a href="#">werkwijze</a></li>
<li><a href="#">???</a></li>
</ul>
</li>
</ul>
<ul>
<li><a class="top_parent" href="#">ARRANGEMENTEN</a>
<ul>
<li><a href="#">excl. fotografie</a></li>
<li><a href="#">incl. fotografie</a></li>
<li><a href="#">15-30-60</a></li>
<li><a href="#">voorwaarden</a></li>
<li><a href="#">???</a></li></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">CONTACT</a></li>
</ul>
</div> <!-- sluit nav_container -->
<div id="links_container">
<div id="links">
links_container: 3 foto´s onder elkaar<!-- hier komen 3 jpeg foto´s pm 160x90 -->
</div>
</div> <!-- sluit links_container -->
<div id="rechts_container">
<div id="rechts">
rechts_container: ook 3 foto´s onder elkaar <!-- hier komen ook 3 jpeg foto´s pm 160x90 -->
</div>
</div> <!-- sluit rechts_container -->
<div id="content_container">
<div id="content">
afbeelding van diafragma<BR>
en<BR>na activeren vh submenu de de content met tekst en foto´s
</div>
</div> <!-- sluit content_container -->
</div> <!-- sluit main_container -->
<div id="footer_container">logo_container
<div id="footer_linxs">footer-linxs</div>
<div id="footer">opmerkingen<!-- hier komt tekst/opmerkingen die ik soms wil wijzigen --></div>
</div> <!-- sluit footer_container -->
</body>
</html>Code: Selecteer alles
body, html{
margin: 0;
height: 100%;
}
#main_container{
background-color: purple;
float: left;
width: 100%;
min-height: 100%;
margin: -34px 0 0 0;
}
/* SUB MAIN_CONTAINER BOXEN */
#logo_container{
background-color: maroon;
float: left;
width: 27%;
padding: 34px 0 0 0;
text-align: center;
}
#title_container{
background: navy;
width: 100%;
padding: 34px 0 0 0;
text-decoration: none;
}
#nav-container {
background: yellow;
margin: 0 0 0 0;
width: 100%;
text-decoration: none;
}
#nav {
background-color: silver;
height: 30px;
font-size: 0.6em;
font-family: arial, helvetica, sans-serif;
width:100%;
float:center;
padding: 0 0 0 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
#taal_container{
background: maroon;
float: right;
width: 27%;
padding: 34px 0 0 0;
text-align: center;
}
#links_container{
background: orange;
margin: 0 0 0 0;
float: left;
clear: both;
min-height: 100%;
width: 27%;
}
#content_container{
background: green;
margin: 0 27% 0 27%;
width:100%%;
text-decoration: none;
}
#rechts_container{
background: orange;
margin: 0 0 0 0;
float: right;
width: 27%;
}
#footer_container{
background: fuchsia;
clear: both;
height: 34px;
width: 100%;
text-align: center;
text-decoration: none;
}
/* CONTENT BOXEN */
#logo {
background-color: gray;
height: 120px;
padding: 0 0 0 0;
text-align: left;
}
#title {
background: red;
height: 90px;
padding: 0 0 0 0;
text-align: center;
}
#taal{
background-color: gray;
height: 120px;
padding: 0 0 0 30px;
text-align: right;
}
#links {
background-color: aqua;
padding: 10px 30px 10px 30px;
text-align: left;
text-decoration: none;
}
#content{
background-color: teal;
padding: 10px 30px 0 30px;
text-align: left;
text-decoration: none;
}
#rechts {
background-color: aqua;
padding: 10px 30px 10px 30px;
text-align: left;
text-decoration: none;
}
#footer{
background-color: teal;
height: 17px;
text-align: left;
}
#footer_linxs {
background-color: grey;
height: 34px;
width: 300px;
float: left;
}
/* DE CODE VOOR HET NAVIGATIE-MENU */
#nav a {
height: 16px;
text-align: center;
display: block;
border: 0;
white-space: nowrap;
margin: 0 10px 0 0; /* 10px is de ruimte tussen de menu-blokken */
padding: 7px; /* beter in em ?; */
}
/* menu at rest */
#nav a:link, #nav a:visited, #nav a:active {
background-color: silver;
color: black;
text-decoration:none;
}
/* menu on mouse-over */
#nav a:hover {
color: #ffffff;
background-color: grey;
text-decoration: none;
}
/* attaches down-arrow to all top-parents */
#nav a.top_parent, #nav a.top_parent:hover {
}
/* attaches side-arrow to all parents */
#nav a.parent, #nav a.parent:hover {
}
#nav ul {
background-color: none;
list-style:none;
margin: 0 0 0 0;
padding:0 0 0 0;
float:left;
width: 12em;
}
#nav li {
position: relative;
min-height: 1px;
vertical-align: bottom;
height: 40px; /* kleine H-ruimte tussen de dropdown-submenu´s */
}
#nav ul ul {
position: absolute;
z-index:500;
top:auto;
display:none;
padding: 1.0em;
margin: -1em 0 0 -1em;
}
#nav ul ul ul {
top:0;
left:100%;
}
div#nav li:hover {
cursor:pointer;
z-index:100;
}
div#nav li:hover ul ul,
div#nav li li:hover ul ul,
div#nav li li li:hover ul ul,
div#nav li li li li:hover ul ul
{display:none;}
div#nav li:hover ul,
div#nav li li:hover ul,
div#nav li li li:hover ul,
div#nav li li li li:hover ul
{display:block;}Re: dropdownmenu met ZIP
Ben ik nog vergeten te melden: ik heb het doctype na jouw info toch maar in de "strict" gezet.
-
Goeroeboeroe
- Beheerder
- Berichten: 313
- Lid geworden op: zo 21 nov 2010, 02:08
- Contacteer:
Re: dropdownmenu met ZIP
Hoi,
Dat ziet er in ieder geval heel overzichtelijk uit. Ik heb je css even van de html losgemaakt, dan krijgt dat ook kleurtjes en zo.
Dan ga ik zo maar 'ns spelen.
O, en wat ik nog vergat bij dat verhaal over strict en zo: html zonder lay-out e.d. is veel toegankelijker voor speciale programma's zoals spraakbrowsers. Een zoekmachine is redelijk goed te vergelijken met een blinde. Als een site toegankelijk is voor 'n blinde, is die haast automatisch ook goed te indexeren door 'n zoekmachine. Mooi voorbeeld van samengaan van sociaal gedrag en eigenbelang.
Dat ziet er in ieder geval heel overzichtelijk uit. Ik heb je css even van de html losgemaakt, dan krijgt dat ook kleurtjes en zo.
Dan ga ik zo maar 'ns spelen.
O, en wat ik nog vergat bij dat verhaal over strict en zo: html zonder lay-out e.d. is veel toegankelijker voor speciale programma's zoals spraakbrowsers. Een zoekmachine is redelijk goed te vergelijken met een blinde. Als een site toegankelijk is voor 'n blinde, is die haast automatisch ook goed te indexeren door 'n zoekmachine. Mooi voorbeeld van samengaan van sociaal gedrag en eigenbelang.
-
Goeroeboeroe
- Beheerder
- Berichten: 313
- Lid geworden op: zo 21 nov 2010, 02:08
- Contacteer:
Re: dropdownmenu met ZIP
Nou, daar was ik even mee bezig. Voor 'n groot deel omdat het niet werkte in IE 8: de onderkant bleef wegvallen, wat ik ook deed. Soms begin ik toch aan m'n bovenkamer te twijfelen. Ik had de resolutie veranderd en was dat even vergeten. Oeps.
Ik geef eerst de code en dan de uitleg. Als het niet naar je zin is, moet je dat vooral melden. Er zitten hoe dan ook nog dingen in die niet goed zijn, maar daar moet jij eerst even 'n besluit over nemen. In principe is deze pagina gewoon te kopiëren naar andere pagina's, waarbij je dan gewoon de inhoud kunt veranderen. Maar de grote blokken kunnen, gok ik, hetzelfde blijven.
Ik maak er twee berichten van, want om een of andere reden kan ik na de css geen tekst meer toevoegen. Ik ben niet zo'n held met 'n forum, dus dit is het simpelste.
De html
De css:
Ik geef eerst de code en dan de uitleg. Als het niet naar je zin is, moet je dat vooral melden. Er zitten hoe dan ook nog dingen in die niet goed zijn, maar daar moet jij eerst even 'n besluit over nemen. In principe is deze pagina gewoon te kopiëren naar andere pagina's, waarbij je dan gewoon de inhoud kunt veranderen. Maar de grote blokken kunnen, gok ik, hetzelfde blijven.
Ik maak er twee berichten van, want om een of andere reden kan ik na de css geen tekst meer toevoegen. Ik ben niet zo'n held met 'n forum, dus dit is het simpelste.
De html
Code: Selecteer alles
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Omschrijving van je site komt hier te staan, ongeveer even lang als deze tekst.">
<title> moving_images </title>
<link rel="stylesheet" type="text/css" href="SS_movimag_10B-strict-kaal4.css">
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie-7.css">
<![endif]-->
</head>
<body>
<div id="main_container"> <!-- OMSLUIT ALLE CONTAINERS TOT FOOT_CONTAINER -->
<div id="logo_container">
<div id="logo">
logo_container <!-- hier komt afbeelding van logo jpeg -->
</div>
</div> <!-- sluit LOGO_container -->
<div id="taal_container">
<div id="taal" >
vlaggen_container <!-- hier komen 5 of 6 png/gif nationale vlaggen voor taalkeuze -->
</div>
</div> <!-- sluit TAAL_container. -->
<div id="title_container">
<div id="title">
titel_container
</div>
</div> <!-- sluit TITLE_container. -->
<div id="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a class="top_parent" href="#">MOVIMAG</a>
<ul>
<li><a href="#">wat</a></li>
<li><a href="#">wie</a></li>
<li><a href="#">filosofie</a></li>
<li><a href="#">voorwaarden</a></li>
<li><a href="#">???</a></li>
</ul>
</li>
<li><a class="top_parent" href="#">COMPOSITIES</a>
<ul>
<li><a href="#">promotie</a></li>
<li><a href="#">documentair</a></li>
<li><a href="#">15-30-60</a></li>
<li><a href="#">vrijwerk</a></li>
<li><a href="#">???</a></li>
</ul>
</li>
<li><a class="top_parent" href="#">MOVING_IMAGES</a>
<ul>
<li><a href="#">moving_images</a></li>
<li><a href="#">fotografie</a></li>
<li><a href="#">concept</a></li>
<li><a href="#">werkwijze</a></li>
<li><a href="#">???</a></li>
</ul>
</li>
<li><a class="top_parent" href="#">ARRANGEMENTEN</a>
<ul>
<li><a href="#">excl. fotografie</a></li>
<li><a href="#">incl. fotografie</a></li>
<li><a href="#">15-30-60</a></li>
<li><a href="#">voorwaarden</a></li>
<li><a href="#">???</a></li>
</ul>
</li>
<li><a href="#">CONTACT</a></li>
</ul>
</div> <!-- sluit nav -->
<div id="links_container">
<div id="links">
links_container: 3 foto's onder elkaar<!-- hier komen 3 jpeg foto's pm 160x90 -->
</div>
</div> <!-- sluit links_container -->
<div id="rechts_container">
<div id="rechts">
rechts_container: ook 3 foto's onder elkaar <!-- hier komen ook 3 jpeg foto's pm 160x90 -->
</div>
</div> <!-- sluit rechts_container -->
<div id="content_container">
<div id="content">
afbeelding van diafragma<br>en<br>na activeren vh submenu de de content met tekst en foto's
</div>
</div> <!-- sluit content_container -->
</div> <!-- sluit main_container -->
<div id="footer_container">logo_container
<div id="footer_linxs">footer-linxs</div>
<div id="footer">opmerkingen<!-- hier komt tekst/opmerkingen die ik soms wil wijzigen --></div>
</div> <!-- sluit footer_container -->
</body>
</html>Code: Selecteer alles
body, html{
margin: 0;
height: 100%;
}
#main_container{
background-color: purple;
float: left;
width: 100%;
min-height: 100%;
margin: -34px 0 0 0;
}
/* SUB MAIN_CONTAINER BOXEN */
#logo_container{
float: left;
width: 27%;
padding: 34px 0 0 0;
text-align: center;
}
#title_container{
padding: 34px 0 0 0;
}
#nav {
background-color: silver;
height: 30px;
font-size: 0.6em;
font-family: arial, helvetica, sans-serif;
margin: 0 27%;
}
#taal_container{
float: right;
width: 27%;
padding: 34px 0 0 0;
text-align: center;
}
#links_container{
background: orange;
float: left;
clear: both;
width: 27%;
margin-top: -10px;
}
#content_container{
margin: 0 27% 0 27%;
}
#rechts_container{
background: orange;
margin-top: -10px;
float: right;
width: 27%;
}
#footer_container{
background: fuchsia;
clear: both;
height: 40px;
width: 100%;
text-align: center;
position: fixed;
bottom: 0;
}
/* CONTENT BOXEN */
#logo {
background-color: gray;
height: 120px;
padding: 0;
text-align: left;
}
#title {
background: red;
height: 90px;
padding: 0;
text-align: center;
}
#taal{
background-color: gray;
height: 120px;
padding: 0;
text-align: right;
}
#links {
background-color: aqua;
padding: 10px 30px 10px 30px;
}
#content{
background-color: teal;
padding: 10px 30px 0 30px;
margin-bottom: 45px;
}
#rechts {
background-color: aqua;
padding: 10px 30px 10px 30px;
}
#footer{
background-color: teal;
height: 23px;
text-align: left;
}
#footer_linxs {
background-color: grey;
height: 40px;
width: 300px;
float: left;
}
/* DE CODE VOOR HET NAVIGATIE-MENU */
#nav a {
height: 16px;
text-align: center;
display: block;
border: 0;
white-space: nowrap;
padding: 7px; /* beter in em ?; */
}
/* menu at rest */
#nav a:link, #nav a:visited, #nav a:active {
background-color: silver;
color: black;
text-decoration:none;
}
/* menu on mouse-over */
#nav a:hover {
color: #ffffff;
background-color: grey;
text-decoration: none;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
float: left;
position: relative;
height: 40px; /* kleine H-ruimte tussen de dropdown-submenu´s */
width: 16.66%;
}
#nav ul ul {
position: absolute;
display: none;
}
#nav ul ul li {
display: block;
width: 100%;
}
#nav li:hover {
cursor:pointer;
}
#nav li:hover ul {
display:block;
}-
Goeroeboeroe
- Beheerder
- Berichten: 313
- Lid geworden op: zo 21 nov 2010, 02:08
- Contacteer:
Re: dropdownmenu met ZIP
Vervolge vorige bericht.
Nog wat aparte css voor IE 7:
Nou, nu kan ik wel tekst toevoegen. Mogelijk omdat er twee stukken css achter elkaar stonden. Nou ja, hier komt de toelichting. Beetje door elkaar. Ook de vragen die je stelde staan erbij. Ik geef gelijk ook wat algemene opmerkingen.
Wat er nu staat werkt in IE 7/8/9, Opera, Firefox, Google Chrome en Safari. In grote en kleine vensters, en ook als je zoomt of de lettergrootte verandert.
* De css voor IE 7 moet je kopiëren naar een bestand met als naam ie-7.css. Dat zet je op dezelfde plaats als het andere css-bestand.
* Dat KIT wat je gebruikt, is dat toevallig htmlkit? Ik heb er geen ervaring mee, maar dat schijnt 'n goede editor te zijn.
* Procenten worden vaak gebruikt om de grote blokken van een pagina in te delen: maak de linkerkolom 25% breed ten opzichte van de pagina. Een maat in bijvoorbeeld px is altijd even breed langs de lineaal, procenten niet. (Dit is wel even heel simpel gesteld.) Procenten is een relatieve eenheid, px een absolute.
em is ook een relatieve maat. De lettersoort krijgt een bepaalde maat in em. Standaard is dat 1 em, als je dat niet verandert. Als je dan 'n andere letter 2 em maakt, is die twee keer zo groot als de originele. Als je een kolom 10 em breed maakt, wordt die tien keer zo breed als de letter 'm'. Althans: dat was oorspronkelijk zo in de grafische wereld. Bij computers is dat niet meer zo. Maar 10 em betekent nog steeds tien keer de em die bij een bepaalde lettersoort hoort. De maat is dus gerelateerd aan de lettergrootte.
Voor de grote blokken gebruik je vaak zo'n relatieve maat. Binnen die blokken gebruik je regelmatig iets als px. Maar echte regels zijn er niet, het ligt heel erg aan waarvoor je het gebruikt.
* Ik heb het doctype aangevuld. Je had maar 'n half, en dat kan problemen geven. Achter <html> staat de taal van de site: nl is Nederlands. Spaans is "es" en Engels "en". Dit is van belang voor zoekmachines.
Maar je kunt het doctype dus ook gewoon veranderen in <!DOCTYPE html>, dat werkt precies hetzelfde en scheelt nogal in lengte.
Het zou dan worden:
* Je had geen charset (tekenset) opgegeven. Elke letter enz. heeft een bepaalde code. Als je niet aangeeft welke set je gebruikt, gaat de computer 'raden' bij accenten, apostrofes, enz. Ik kreeg in plaats van de komma in foto's Russisch met 'n Grieks accent te zien daardoor.
Dit is de regel
Als je als doctype toch html5 neemt, wordt die regel ook simpeler:
[codel]<meta charset="utf-8">[/code]
Dit moet de eerste regel in de head zijn.
Jij gebruikt grafische komma's in 'foto's'. Dat is een teken dat problemen geeft. Ik zou 'n gewone ' gebruiken. Als je toch zo'n mooi kommaatje wilt, moet je ’ typen. Het woord foto's wordt dan:
* Als je die charset toevoegt en je krijgt dan plotsklaps zelf vreemde tekens, moet je dat even melden. Dan worden je bestanden vermoedelijk niet goed opgeslagen. Opslaan in utf-8 is het beste, want daar zitten álle tekens van álle talen in en nog veel meer.
* Bovenaan in de <head> description toegevoegd. Die kun je vervangen door een beschrijving van ongeveer dezelfde lengte. Als die beschrijving goed is, wordt die vaak getoond in zoekmachines, dus dat is belangrijk. De beschrijving moet voor elke pagina uniek zijn, echt de pagina kort beschrijven.
* Je <title> is wel heel erg kort. Ook dat is van belang voor zoekmachines. Ik zou hem veranderen in 'Moving images' (en iets langer maken), want mensen zoeken wel op 'moving images', maar niet op het woord moving_images (neem ik aan...)
* Je gebruikt in tags (<BR>, <HEAD>, e.d.) hoofd- en kleine letters door elkaar. Dat kan enorme problemen geven. Op sommige systemen is een hoofdletter iets heel anders dan 'n kleine letter. Ik zou me aanwennen altijd hoofd- of kleine letters te gebruiken, dat voorkomt fouten. Ik heb alles in kleine letters veranderd, maar dat is puur 'n kwestie van smaak.
* Dan eindelijk de code, hoera!
Het menu. Je had dat nogal, laat ik zeggen, creatief gecodeerd. Er stond een hele verzameling <ul>'s en </ul>'s in, die er niet in hoorden. Die heb ik eruit gehaald, en ook de bijbehorende css is verdwenen.
Je begint het menu met een <ul> en eindigt met een </ul>
Elke ingang in het menu komt dan tussen <li> en </li> te staan.
Als er geen submenu is, is dat voldoende.
Als er wel een submenu is wordt het:
Zitten toch wat rarigheden in dat forum, ik krijg nu kleine letters. Ga in 'n volgend bericht door.
Nog wat aparte css voor IE 7:
Code: Selecteer alles
/* css voor ie 7 */
#nav li {height: 30px;}
#nav ul ul li {width: 100px;}Wat er nu staat werkt in IE 7/8/9, Opera, Firefox, Google Chrome en Safari. In grote en kleine vensters, en ook als je zoomt of de lettergrootte verandert.
* De css voor IE 7 moet je kopiëren naar een bestand met als naam ie-7.css. Dat zet je op dezelfde plaats als het andere css-bestand.
* Dat KIT wat je gebruikt, is dat toevallig htmlkit? Ik heb er geen ervaring mee, maar dat schijnt 'n goede editor te zijn.
* Procenten worden vaak gebruikt om de grote blokken van een pagina in te delen: maak de linkerkolom 25% breed ten opzichte van de pagina. Een maat in bijvoorbeeld px is altijd even breed langs de lineaal, procenten niet. (Dit is wel even heel simpel gesteld.) Procenten is een relatieve eenheid, px een absolute.
em is ook een relatieve maat. De lettersoort krijgt een bepaalde maat in em. Standaard is dat 1 em, als je dat niet verandert. Als je dan 'n andere letter 2 em maakt, is die twee keer zo groot als de originele. Als je een kolom 10 em breed maakt, wordt die tien keer zo breed als de letter 'm'. Althans: dat was oorspronkelijk zo in de grafische wereld. Bij computers is dat niet meer zo. Maar 10 em betekent nog steeds tien keer de em die bij een bepaalde lettersoort hoort. De maat is dus gerelateerd aan de lettergrootte.
Voor de grote blokken gebruik je vaak zo'n relatieve maat. Binnen die blokken gebruik je regelmatig iets als px. Maar echte regels zijn er niet, het ligt heel erg aan waarvoor je het gebruikt.
* Ik heb het doctype aangevuld. Je had maar 'n half, en dat kan problemen geven. Achter <html> staat de taal van de site: nl is Nederlands. Spaans is "es" en Engels "en". Dit is van belang voor zoekmachines.
Maar je kunt het doctype dus ook gewoon veranderen in <!DOCTYPE html>, dat werkt precies hetzelfde en scheelt nogal in lengte.
Het zou dan worden:
Code: Selecteer alles
<!DOCTYPE html>
<html lang="nl">Dit is de regel
Code: Selecteer alles
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">[codel]<meta charset="utf-8">[/code]
Dit moet de eerste regel in de head zijn.
Jij gebruikt grafische komma's in 'foto's'. Dat is een teken dat problemen geeft. Ik zou 'n gewone ' gebruiken. Als je toch zo'n mooi kommaatje wilt, moet je ’ typen. Het woord foto's wordt dan:
Code: Selecteer alles
foto’s* Bovenaan in de <head> description toegevoegd. Die kun je vervangen door een beschrijving van ongeveer dezelfde lengte. Als die beschrijving goed is, wordt die vaak getoond in zoekmachines, dus dat is belangrijk. De beschrijving moet voor elke pagina uniek zijn, echt de pagina kort beschrijven.
* Je <title> is wel heel erg kort. Ook dat is van belang voor zoekmachines. Ik zou hem veranderen in 'Moving images' (en iets langer maken), want mensen zoeken wel op 'moving images', maar niet op het woord moving_images (neem ik aan...)
* Je gebruikt in tags (<BR>, <HEAD>, e.d.) hoofd- en kleine letters door elkaar. Dat kan enorme problemen geven. Op sommige systemen is een hoofdletter iets heel anders dan 'n kleine letter. Ik zou me aanwennen altijd hoofd- of kleine letters te gebruiken, dat voorkomt fouten. Ik heb alles in kleine letters veranderd, maar dat is puur 'n kwestie van smaak.
* Dan eindelijk de code, hoera!
Het menu. Je had dat nogal, laat ik zeggen, creatief gecodeerd. Er stond een hele verzameling <ul>'s en </ul>'s in, die er niet in hoorden. Die heb ik eruit gehaald, en ook de bijbehorende css is verdwenen.
Je begint het menu met een <ul> en eindigt met een </ul>
Elke ingang in het menu komt dan tussen <li> en </li> te staan.
Als er geen submenu is, is dat voldoende.
Als er wel een submenu is wordt het:
Code: Selecteer alles
<li>Composities
<ul>
<li>promoties</li>
...
<li>vrijwerk</li>
</ul> <!--hier sluit je de <ul> waar het submenu in staat-->
</li> <!--en hier sluit je de ingang waar het submenu in staat-->-
Goeroeboeroe
- Beheerder
- Berichten: 313
- Lid geworden op: zo 21 nov 2010, 02:08
- Contacteer:
Re: dropdownmenu met ZIP
Tweede vervolg
* #nav: float: center bestaan niet, weggehaald
* #content_container stond 100%% (twee keer procent)
* #nav ul: background-color: none: none is geen kleur. Dat is transparent, maar de hele regel kan weg
* margin: 0 heb ik op allerlei plaatsen weggehaald. Dat is standaard en meestal overbodig.
* width: 100% is meestal standaard in een blok-element, dus ook vaak verwijderd. (Een blok-element is het makkelijkst te herkennen aan dat het op een nieuwe regel begint, zoals een <div> of <p>)
* text-decoration: none op tig plaatsen weggehaald. Hoeft alleen in links (<a>), op andere plaatsen werkt het niet.
* De height: 100% bij body, html leverde in combinatie met de footer een verticale scrollbalk op. Foeilelijk en niet nodig. Dat komt omdat de footer iets uitsteekt buiten de body. En als je de body dan 100% maakt, past de footer nét niet meer binnen het venster. Bovendien viel 'n klein stukje van de tekst weg (de onderste lussen van de 'g' en zo).
Ik heb dit opgelost door bij #footer_container toe te voegen:
position: fixed;
bottom: 0;
fixed wil zeggen: vaststaan ten opzichte van het venster van de browser, dus scrolt ook niet mee.
bottom: 0 wil zeggen: op 0 px vanaf de onderkant, dus onderaan het venster
De hoogte binnen de footer heb ik ook wat aangepast, want dat kwam niet helemaal lekker uit (bij #footer_container, #footer en #footer_linxs)
Belangrijk: bij #content moet worden toegevoegd: margin-bottom: 45px
Die fixed footer staat gewoon overal asociaal overheen. Dus ook over het onderste deel van de inhoud van #content, als er meer tekst en zo in staat. Door een marge aan de onderkant te geven, staat de footer over een leeg stuk heen, en dat is niet erg.
* Bij #content_container moet width: 100% weg. Dit maakt deze div 100% breed ten opzichte van het venster van de browser, dus de volle breedte. Maar links en rechts komt er nog 27% in de breedte bij van de linker- en rechterkolom. De totale breedte wordt dan 154%. Dat past niet en levert een horizontale scrollbalk op, die overbodig is.
* margin: 0 0 0 0 mag ook als margin: 0. Is overzichtelijker
En margin-top: 0; margin-bottom: 0; enz. mag ook als margin: 0
* De linker- en rechterkolom een breedte van 27% is dus prima. Dan past de breedte zich aan aan de breedte van het venster. En de middelste kolom een marge links en rechts van 27% is ook prima, want dus staat nu dus altijd netjes tussen de linker- en rechterkolom in. Ongeacht hoe breed het scherm is en zo.
* text-align: left weggehaald op tig plaatsen. Is standaard, dus meestal overbodig.
* Zag de vraag toevallig in de css: bij padding is px prima. Meestal maakt het bij padding niet zo heel veel uit als de verhoudingen iets veranderen bij 'n andere lettergrootte of zo. Hooguit bij 'n héél grote letter.
* Ik zou de font-family verhuizen van #nav naar body. Dan geldt die voor de hele pagina, behalve de delen die eventueel anders moeten.
* #nav zelfde breedte gegeven als content_container met behulp van margin: 0 27% (als je geen waarde voor onder en links opgeeft, krijgen die dezelfde waarde als boven en rechts, dus eigenlijk staat hier margin: 0 27% 0 27%
Nu #nav altijd exact boven de middelste kolom, ongeacht de breedte van het venster. Voor dit soort dingen zijn procenten dus prima.
* min-height bij #links_container weggehaald. Werkt alleen in Opera en geeft daarin dan ook nog problemen.
* #links_container en #rechts_container met behulp van margin-top: -10px (negatief) 10 px omhoog gezet. De height bij #nav li die voor de openingen zorgt in het menu, duwt de twee kolommen ook iets omlaag, en dit corrigeert het.
* marge bij #nav a weggehaald, omdat de links in het hoofdmenu daardoor niet goed te verdelen waren
* Menu verdeeld: elke ingang krijgt 16,66%. Procenten is altijd ten opzichte van de ouder. De menu-ingangen zitten in een <li>, en de ouder daarvan is de <ul>. Oftewel: de menu-ingangen zijn nu over zes gelijke stukken neergezet in de <ul> met het hoofdmenu.
Alleen onstaat er dan een probleem: niet alle woorden passen, zeker niet op iets kleinere schermen. Er is gewoon geen ruimte. Een aantal mogelijkheden, de keuze is aan jou:
* Je vindt dat niet erg (kan ik me niet voorstellen, maar goed)
* Kleinere letter. Die wordt dan wel érg klein
* Kortere woorden (beste oplossing!) Maar dan moet je wel kortere woorden bedenken.
* Elke ingang een andere breedte geven. Alle zes de <li>'s uit het hoofdmenu een eigen id geven, en dan bij de eerste met 'Home' bijvoorbeeld width: 12%; bij 'Arrangementen' width: 20%. Zoiets. Dit is ook 'n goede oplossing, maar vereist enig gepuzzel. Hoewel ik 'n symmetrische verdeling persoonlijk het mooiste vindt, maar dat is een kwestie van smaak.
* De css voor het menu was ernstig mishandeld
De correcties:
#nav ul ul {position: absolute; display: none;}
Elke <ul> die binnen een andere <ul> zit, die weer binnen #nav zit. Dit zijn dus de <ul>'s waarbinnen de submenu's zitten, één <ul> voor elk submenu.
Normaal genomen worden ze verborgen met display: none;
position: absolute zorgt ervoor dat ze óver de content heen komen te staan. Anders zouden ze bij openen de hele pagina omlaag schuiven.
#nav ul ul li {display: block; width: 100%;}
De ingangen binnen een <ul> die weer binnen een <ul> binnen #nav ligt. Aan deze voorwaarde voldoen alleen de <li>'s van de submenu's, want alleen die liggen binnen twéé <ul>'.s
Elders heb ik alle <li>'s naar links gefloat, waardoor ze niet onder elkaar, maar naast elkaar komen te staan. Maar de <li>'s van de submenu's moeten wel onder elkaar. Daar zorgt display: block voor. (Een blok-element begint op 'n nieuwe regel.)
Ik had ook een breedte van 16.66% opgegeven. Dat was leuk voor het hoofdmenu, maar ook deze <li>'s krijgen die breedte. En omdat de <ul>'s van de submenu's smal zijn, is 16.66 % daarvan héél smal. Ik geef ze 'n breedte van 100%. In procenten, dat is ten opzichte van de ouder, dus even breed als de ouder. Dat is de <ul> van het submenu. En die is weer even breed als de <li> uit het hoofdmenu. Oftewel: de submenu's zijn nu even breed als de knoppen in het hoofdmenu.
#nav li:hover ul {display:block;} Maak zichtbaar
Als ik over een <li> hover, maak dan de daarin zittende <ul> zichtbaar. Als ik over een tekst in het hoofdmenu hover, maak dan het bijbehorende submenu zichtbaar.
* Internet Explorer 7 heeft wat afwijkingen in de marge. Geen belangrijke dingen. De ondersteuning voor dit onding wordt ook door mij langzaamaan afgebouwd, dus aan dit soort onbelangrijke verschillen ga ik geen tijd meer verspillen. Er zijn wel twee belangrijke dingen die gecorrigeerd moeten worden. Daarvoor is voor IE 7 'n eigen kleine stylesheet toegevoegd. De koppeling staat al in de <head>, werkt verder precies hetzelfde als 'n normale.
Het stukje met
is een toverspreuk die zorgt dat alleen IE 7 dit ziet.
#nav li {height: 30px;}
De openingen tussen de ingangen weggehaald, want in IE 7 sluit het menu als de cursor op zo'n opening komt, en dat is 'n beetje sadistisch. Dit ziet er ook goed uit en het werkt.
#nav ul ul li {width: 100px;}
Anders maakt IE 7 de submenu's niet breder dan de tekst die erin staat, en dat oogt heel lelijk.
Nou, dat was het. Ik hoor het wel als er iets nog niet bevalt, of als je nog vragen hebt.
Ik neem trouwens aan dat niet alles gelijk duidelijk is. Maar als je iets niet begrijpt en bijvoorbeeld 10 px even verandert in 20 px, zie je vaak gelijk wat het effect is.
Veel leesplezier. (Hmmm, hoop ik
)
* #nav: float: center bestaan niet, weggehaald
* #content_container stond 100%% (twee keer procent)
* #nav ul: background-color: none: none is geen kleur. Dat is transparent, maar de hele regel kan weg
* margin: 0 heb ik op allerlei plaatsen weggehaald. Dat is standaard en meestal overbodig.
* width: 100% is meestal standaard in een blok-element, dus ook vaak verwijderd. (Een blok-element is het makkelijkst te herkennen aan dat het op een nieuwe regel begint, zoals een <div> of <p>)
* text-decoration: none op tig plaatsen weggehaald. Hoeft alleen in links (<a>), op andere plaatsen werkt het niet.
* De height: 100% bij body, html leverde in combinatie met de footer een verticale scrollbalk op. Foeilelijk en niet nodig. Dat komt omdat de footer iets uitsteekt buiten de body. En als je de body dan 100% maakt, past de footer nét niet meer binnen het venster. Bovendien viel 'n klein stukje van de tekst weg (de onderste lussen van de 'g' en zo).
Ik heb dit opgelost door bij #footer_container toe te voegen:
position: fixed;
bottom: 0;
fixed wil zeggen: vaststaan ten opzichte van het venster van de browser, dus scrolt ook niet mee.
bottom: 0 wil zeggen: op 0 px vanaf de onderkant, dus onderaan het venster
De hoogte binnen de footer heb ik ook wat aangepast, want dat kwam niet helemaal lekker uit (bij #footer_container, #footer en #footer_linxs)
Belangrijk: bij #content moet worden toegevoegd: margin-bottom: 45px
Die fixed footer staat gewoon overal asociaal overheen. Dus ook over het onderste deel van de inhoud van #content, als er meer tekst en zo in staat. Door een marge aan de onderkant te geven, staat de footer over een leeg stuk heen, en dat is niet erg.
* Bij #content_container moet width: 100% weg. Dit maakt deze div 100% breed ten opzichte van het venster van de browser, dus de volle breedte. Maar links en rechts komt er nog 27% in de breedte bij van de linker- en rechterkolom. De totale breedte wordt dan 154%. Dat past niet en levert een horizontale scrollbalk op, die overbodig is.
* margin: 0 0 0 0 mag ook als margin: 0. Is overzichtelijker
En margin-top: 0; margin-bottom: 0; enz. mag ook als margin: 0
* De linker- en rechterkolom een breedte van 27% is dus prima. Dan past de breedte zich aan aan de breedte van het venster. En de middelste kolom een marge links en rechts van 27% is ook prima, want dus staat nu dus altijd netjes tussen de linker- en rechterkolom in. Ongeacht hoe breed het scherm is en zo.
* text-align: left weggehaald op tig plaatsen. Is standaard, dus meestal overbodig.
* Zag de vraag toevallig in de css: bij padding is px prima. Meestal maakt het bij padding niet zo heel veel uit als de verhoudingen iets veranderen bij 'n andere lettergrootte of zo. Hooguit bij 'n héél grote letter.
* Ik zou de font-family verhuizen van #nav naar body. Dan geldt die voor de hele pagina, behalve de delen die eventueel anders moeten.
* #nav zelfde breedte gegeven als content_container met behulp van margin: 0 27% (als je geen waarde voor onder en links opgeeft, krijgen die dezelfde waarde als boven en rechts, dus eigenlijk staat hier margin: 0 27% 0 27%
Nu #nav altijd exact boven de middelste kolom, ongeacht de breedte van het venster. Voor dit soort dingen zijn procenten dus prima.
* min-height bij #links_container weggehaald. Werkt alleen in Opera en geeft daarin dan ook nog problemen.
* #links_container en #rechts_container met behulp van margin-top: -10px (negatief) 10 px omhoog gezet. De height bij #nav li die voor de openingen zorgt in het menu, duwt de twee kolommen ook iets omlaag, en dit corrigeert het.
* marge bij #nav a weggehaald, omdat de links in het hoofdmenu daardoor niet goed te verdelen waren
* Menu verdeeld: elke ingang krijgt 16,66%. Procenten is altijd ten opzichte van de ouder. De menu-ingangen zitten in een <li>, en de ouder daarvan is de <ul>. Oftewel: de menu-ingangen zijn nu over zes gelijke stukken neergezet in de <ul> met het hoofdmenu.
Alleen onstaat er dan een probleem: niet alle woorden passen, zeker niet op iets kleinere schermen. Er is gewoon geen ruimte. Een aantal mogelijkheden, de keuze is aan jou:
* Je vindt dat niet erg (kan ik me niet voorstellen, maar goed)
* Kleinere letter. Die wordt dan wel érg klein
* Kortere woorden (beste oplossing!) Maar dan moet je wel kortere woorden bedenken.
* Elke ingang een andere breedte geven. Alle zes de <li>'s uit het hoofdmenu een eigen id geven, en dan bij de eerste met 'Home' bijvoorbeeld width: 12%; bij 'Arrangementen' width: 20%. Zoiets. Dit is ook 'n goede oplossing, maar vereist enig gepuzzel. Hoewel ik 'n symmetrische verdeling persoonlijk het mooiste vindt, maar dat is een kwestie van smaak.
* De css voor het menu was ernstig mishandeld
De correcties:#nav ul ul {position: absolute; display: none;}
Elke <ul> die binnen een andere <ul> zit, die weer binnen #nav zit. Dit zijn dus de <ul>'s waarbinnen de submenu's zitten, één <ul> voor elk submenu.
Normaal genomen worden ze verborgen met display: none;
position: absolute zorgt ervoor dat ze óver de content heen komen te staan. Anders zouden ze bij openen de hele pagina omlaag schuiven.
#nav ul ul li {display: block; width: 100%;}
De ingangen binnen een <ul> die weer binnen een <ul> binnen #nav ligt. Aan deze voorwaarde voldoen alleen de <li>'s van de submenu's, want alleen die liggen binnen twéé <ul>'.s
Elders heb ik alle <li>'s naar links gefloat, waardoor ze niet onder elkaar, maar naast elkaar komen te staan. Maar de <li>'s van de submenu's moeten wel onder elkaar. Daar zorgt display: block voor. (Een blok-element begint op 'n nieuwe regel.)
Ik had ook een breedte van 16.66% opgegeven. Dat was leuk voor het hoofdmenu, maar ook deze <li>'s krijgen die breedte. En omdat de <ul>'s van de submenu's smal zijn, is 16.66 % daarvan héél smal. Ik geef ze 'n breedte van 100%. In procenten, dat is ten opzichte van de ouder, dus even breed als de ouder. Dat is de <ul> van het submenu. En die is weer even breed als de <li> uit het hoofdmenu. Oftewel: de submenu's zijn nu even breed als de knoppen in het hoofdmenu.
#nav li:hover ul {display:block;} Maak zichtbaar
Als ik over een <li> hover, maak dan de daarin zittende <ul> zichtbaar. Als ik over een tekst in het hoofdmenu hover, maak dan het bijbehorende submenu zichtbaar.
* Internet Explorer 7 heeft wat afwijkingen in de marge. Geen belangrijke dingen. De ondersteuning voor dit onding wordt ook door mij langzaamaan afgebouwd, dus aan dit soort onbelangrijke verschillen ga ik geen tijd meer verspillen. Er zijn wel twee belangrijke dingen die gecorrigeerd moeten worden. Daarvoor is voor IE 7 'n eigen kleine stylesheet toegevoegd. De koppeling staat al in de <head>, werkt verder precies hetzelfde als 'n normale.
Het stukje met
Code: Selecteer alles
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie-7.css">
<![endif]-->#nav li {height: 30px;}
De openingen tussen de ingangen weggehaald, want in IE 7 sluit het menu als de cursor op zo'n opening komt, en dat is 'n beetje sadistisch. Dit ziet er ook goed uit en het werkt.
#nav ul ul li {width: 100px;}
Anders maakt IE 7 de submenu's niet breder dan de tekst die erin staat, en dat oogt heel lelijk.
Nou, dat was het. Ik hoor het wel als er iets nog niet bevalt, of als je nog vragen hebt.
Ik neem trouwens aan dat niet alles gelijk duidelijk is. Maar als je iets niet begrijpt en bijvoorbeeld 10 px even verandert in 20 px, zie je vaak gelijk wat het effect is.
Veel leesplezier. (Hmmm, hoop ik
)Re: dropdownmenu met ZIP
Nou GG dat is een flinke kluif. Je hebt er werk van gemaakt.
Hier moet ik even voor gaan zitten.
Alhoewel, ik zit eigenlijk al.
Ik heb het snel even door gekeken (aiai) en ga er morgen mee beginnen.
En bedankt voor het me toedichten van creatieve eigenschappen.
Ja, je moet wat als je het niet zo best snapt.
Bedankt, en ik hoop morgen een uitgebreide reactie te kunnen geven. Alhoewel, morgen...
Groet herman
Hier moet ik even voor gaan zitten.
Alhoewel, ik zit eigenlijk al.
Ik heb het snel even door gekeken (aiai) en ga er morgen mee beginnen.
En bedankt voor het me toedichten van creatieve eigenschappen.
Ja, je moet wat als je het niet zo best snapt.
Bedankt, en ik hoop morgen een uitgebreide reactie te kunnen geven. Alhoewel, morgen...
Groet herman