Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Enkele vraagjes

15 antwoorden
  • Hoi, Momenteel heb ik diverse vraagjes die ik tegelijk wil stellen. De volgende navigatie in een in ontwikkeling zijnde website met de volgende code: [code:1:56e707796c] <ul> <li id="active"><a href="#" title="Geef geld">geef geld</a> <ul> <li id="subnav"><a href="gift.php" title="eenmalige gift">eenmalige gift</a></li> </ul> <ul> <li id="subnav"><a href="donateurschap.php" title="donateurschap">donateurschap</a></li> </ul> <ul> <li id="subnav"><a href="schenking.php" title="periodieke schenking">periodieke schenking</a></li> </ul> <ul> <li id="subnav"><a href="nalaten.php" title="nalatenschap">nalatenschap</a></li> </ul> <ul> <li id="subnav"><a href="moment" title="speciaal moment">speciaal moment</a></li> </ul> </li> <li id="active"><a href="Geef tijd.htm" title="Geef tijd">geef tijd</a> <ul> <li id="subnav"><a href="vrijwilligers.php" title="vrijwilligers">vrijwilligers</a></li> </ul> </li> <li id="active"><a href="Geef als bedrijf.htm" title="Geef als bedrijf">geef als bedrijf</a> <ul> <li id="subnav"><a href="sponsoring in geld.php" title="sponsoring in geld">sponsoring in geld</a></li> </ul> <ul> <li id="subnav"><a href="sponsoring in natura.php" title="sponsoring in natura">sponsoring in natura</a></li> </ul> </li> <li id="active"><a href="Acties.htm" title="Acties">acties</a> <ul> <li id="subnav"><a href="lopen voor ms.php" title="lopen voor ms">lopen voor ms</a></li> </ul> <ul> <li id="subnav"><a href="rally.php" title="ms klassieker tour rally">ms klassieker tour rally</a></li> </ul> </li> <li id="active"><a href="Projecten.htm" title="Projecten">projecten</a> <ul> <li id="subnav"><a href="onderzoek.php" title="wetenschappelijk onderzoek">wetenschappelijk onderzoek</a></li> </ul> <ul> <li id="subnav"><a href="huisvesting.php" title="huisvesting">huisvesting</a></li> </ul> <ul> <li id="subnav"><a href="uitbreiding disciplines.php" title="uitbreiding disciplines">uitbreiding disciplines</a></li> </ul> <ul> <li id="subnav"><a href="kwaliteitsmedewerker.php" title="kwaliteitsmedewerker">kwaliteitsmedewerker</a></li> </ul> <ul> <li id="subnav"><a href="tuin winterklaar maken.php" title="tuin winterklaar maken">tuin winterklaar maken</a></li> </ul> <ul> <li id="subnav"><a href="training.php" title="training gesprekstechniek infotheek">training gesprekstechniek infotheek</a></li> </ul> </li> <li id="active"><a href="De stichting.htm" title="De stichting">de stichting</a> <ul> <li id="subnav"><a href="doelstelling.php" title="doelstelling">doelstelling</a></li> </ul> <ul> <li id="subnav"><a href="bestuur.php" title="bestuur">bestuur</a></li> </ul> <ul> <li id="subnav"><a href="keurmerk" title="keurmerk">keurmerk</a></li> </ul> </li> <li id="active"><a href="Nieuwsbrief.htm" title="Nieuwsbrief">nieuwsbrief</a> </li> </ul> [/code:1:56e707796c] en de volgende CSS [code:1:56e707796c] /* CSS Document */ a:link {color:#479DD6;} a:visited {color:#CC0000;} a:hover {color: #479DD6;} html, body { height: 100%; background: #FFFFFF; color: #000000; } body { margin: 0; padding: 0; text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 500; } #wrap { position: relative; height: 100%; width: 40em; } #middle { position: relative; height: auto; min-height: 100%; border-right: 9em solid #479DD6; width: 46.5em; background: #FFFFFF; } #header { position: absolute; top: 0; left: 0; height: 10em; width: 100%; overflow: hidden; background: #FFFFFF; z-index: 3; } #search span { font-size: 14px; } #nav { position: relative; display:block; float: right; width: 14em; margin-right: -14.8em; } * html #nav, * html #content { overflow:hidden; } #nav ul { text-align: left; list-style-type: none; padding-top: 2px; margin-top: 2px; padding-left: 0px; margin-left: 0px; } #nav ul ul { position: relative; } #nav li { position: relative; } div#nav ul ul { display: none; } div#nav ul li:hover ul { display: block; } #nav a { font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #0033FF; text-decoration: none; } #nav a:hover { color: #333333; } #active a { font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #0033FF; font-weight: 600; display: block; width: 6.5em; padding: .2em .2em; } #subnav a { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400; display: block; width: 6.5em; padding: .2em .2em; } /* content styles */ .big { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight:bold; color: #479DD6; } .xbig { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #479DD6; } .style3 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; } #content { position: relative; float: left; width: 43em; margin-left: 2px; margin-right: 2px; } /* Kop van de content */ .testclass { border-width: 2px; border-style: solid; border-color: #FFFFFF; color: #0033FF; font: 28px arial,helvetica; font-style: normal; font-weight: bold; text-align: left; z-index: 10; } #test { position: absolute; top: 105px; left: 461px; width: 270px; text-align: left; } /* style voor dankwoord startpagina en contact */ .footer { font-family: "Times New Roman", Times, serif; font-size: 16px; color: #479DD6; } #voet { clear: both; position: relative; width: 100%; height: 5em; } #lijst { font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight: 500; line-height: 22px; position:relative; left: 20px; text-align: left; } /* Opmaak m.b.t. de links om terug te gaan naar het begin van het anker. */ #backlink1 { font-family: "MS Sans Serif"; font-size: 14px; font-weight: 500; position: relative; left: 98%; top: -15px; } /* Termen in 'uitleg_over_ms */ #termen { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-style: italic; font-weight: 500; color: #479DD6; line-height: 22px; } /* positionering tekst wanneer pull-down menu aanwezig is */ #uitleg { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-style: normal; font-weight: 500; line-height: 22px; position: relative; left: 0px; top: -14px; } [/code:1:56e707796c] Dit levert problemen op in de zin dat het gewenste (hover)effect wel zichtbaar is in FF maar niet in IE. [list:56e707796c]kan iemand er naar kijken wat het probleem is? (heeft het soms met de volgorde in het CSS-file te maken...zo ja, wat is onjuist?)[/list:u:56e707796c] [list:56e707796c]hoe kan ik ervoor zorgen dat een submenu na een hover uitgeklapt blijft totdat er op de 'hoofdlink' in het menu wordt geklikt?[/list:u:56e707796c] [list:56e707796c]in FF blijkt de gehele width van de site iets te groot te zijn gezien het verschijnen van de scrollbalk. In IE blijkt de grootte juist te zijn. ik heb met de lengtes gegoocheld en ik ben nu de bomen door het bos kwijt. wat kan het grootte-probleem zijn in FF?[/list:u:56e707796c] Dank je. M.vr.gr., Dalertje
  • in IE kan een li niet hoveren maak van de regel div#nav ul li:hover ul { het volgende: div#nav ul li:hover ul, div#nav ul li.hover ul { en voeg deze code toe in je header: [code:1:739b9c95b7]sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); [/code:1:739b9c95b7] http://www.htmldog.com/articles/suckerfish/dropdowns/ Dan zou de hover moeten werken Het probleem van de breedte: op welke resolutie staat je scherm. Wanneer je m goed zou maken voor 1024x768 klopt ie natuurlijk nog niet voor 800x600
  • Hoi, Erg bedankt Marientje. Ik heb de uri gebookmarked. De hover werkt nu in IE, maar wanneer ik de hoofdlink verlaat om naar een sublink te gaan, sluit deze gelijk. Ik kan dus geen enkele sublink bereiken. Overigens, dit betreft allleen IE. In werkt FF werkt het juist, met dien verstande dat ik wel in het menu blijf. Ga ik uit het menu, klapt het submenu daar ook dicht. Zo kom ik ook een beetje bij die andere vraag hoe ik de stand van het uitgeklapte menu na een hover kan laten staan en pas wanneer ik op de hoofdlink klik, deze dan inklapt. Wat betreft die andere vraag: sorry ja mijn resolutie is 1024*768, maar de resolutie van FF en IE zijn op dat moment hetzelfde. In FF krijg ik na het scrollen naar rechts een wit gedeelte. Wrap en Middle heb ik al verkleind, maar dit mocht ook niet baten. M.vr.gr., Dalertje
  • voor je 1e probleem: http://forum.computertotaal.nl/phpBB/viewtopic.php?t=152671 misschien heb je daar wat aan. over je 2e probleem je krijgt wel weer problemen wanneer de site 800x600 wordt bekeken. Misshcien moet je m smaller maken en dan kan je evt een IE-only-regel invoegen opdat de site in IE weer ietsjes breder wordt. Heb je een voorbeel online?
  • Hoi, Morgen zal ik hierop terugkomen. Dank je wel. M.vr.gr., Dalertje
  • Hoi, Het probleem lijkt er in 1e instantie op, maar het is het toch niet helemaal.....volgens mij. Wanneer een submenu geopend is, moet deze blijven staan totdat op een andere willekeurige 'hoofdlink' geklikt word. Als voorbeeld geef ik deze link [url]http://tutorials.alsacreations.com/deroulant/menu-vertical.htm#[/url]. Het submenu blijft ook staan totdat op een andere hoofdlink wordt geklikt. Het enige verschil met dit voorbeeld is dat op mijn site een hoofdlink niet aangeklikt hoeft te worden, maar dat een hover volstaat. Overigens, de site nu staat online in een testomgeving op . Let wel, dit is alleen nog maar een karkas (waar ook nog eens e.e.a. bijgeschaafd moet worden). [url]http://test.mssteunfonds.nl[/url]. Waarschijnlijk maakt dit dit punt wat duidelijker. Tevens het probleem met de grootte in FF wordt zichtbaar. M.vr.gr., Dalertje
  • Over de width: Ik zie dat die rechterbalk een border van middle is. Misschien kan je beter die achtergrond aan de ul geven. De eerste li moet je dan een eind naar beneden plaatsen. Dan kan je je nav helemaal recht laten plaatsen en hoef je volgens mij niet moeilijk te deon met margin-right: -14.8em; Ik denk nl dat t daar mis gaat. Door daar wat aanpasingen te doen kreeg ik t in de goede reicting maar net niet helemaal. Het is ook logischer (vind ik tenmistne) om je nav die blauwe achtergrond te geven en niet de nav over je middel te plaatsen die rechts toevaliig blauw is gekleurd. Je links blijven wel openstaan in FF :D Ik denk dat t iets met de hover is, maar ben er nog niet uit. Hopelijk kan ik er snel verder naar kijken, ik moet nu weer naar college :(
  • Hoi, Jouw commentaar wat betreft de width, ga ik straks behandelen en verwerken. Over de hover spreek ik je nog. In ieder geval heel hartelijk dank voor je adviezen tot nu toe. Ook hiervan steek ik veel op M.vr.gr., Dalertje
  • Hoi, De 'middle' heb ik er helemaal uitgegooid en ik ben aan het stoeien met de widths en positions van de 'nav' en de 'content'. Er moet nog wat aan gespijkerd worden, maar het lijkt erop dat dat nu goed gaat komen. De navigatie in IE doet heel vreemd. De ene keer blijven de sublinks wel staan (dus uitgeklapt) en de andere keer niet. Het lijkt willekeurig. In ieder geval kan ik nog niet bepalen wanneer het goed lijkt te gaan en wanneer niet. Alles boven de link 'acties' verdwijnt wanneer 'acties' of 'projecten wordt benaderd. Ook het scrollen lukt niet. Strange. In FF werkt alles prima. M.vr.gr., Dalertje
  • Ziet er zo idd goed uit! Bij mij verdwijnt alleen alles boven acteis wnneer ik over projecten ga. Een oplossing voor dat probleem zie ik echter niet. Ik kan nl de oorzaak van t probleem niet vinden :) Ook het probleem dat in IE het menuutje niet uitgeklapt blijft, heb ik geen olossing voor. Ik heb een hele tijd lopen stoeien om t goed te krijgen, maar zonder succes. Wellicht kan een ander forumlid je hier verder mee helpen.
  • Hoi, Kan iemand anders mij helpen met het hover-probleempje in IE? En waarom in IE een aantal links verdwijnen wanneer de bovenstaande gebeurtenis plaatsvindt? Ik ben ook constant aan het proberen, maar het lukt niet. Bijzonder graag (enige) hulp. M.vr.gr., Dalertje
  • Wat is de URL van de probleem-site? Dan kijk ik even.
  • Hoi, De site staat in een test/probeeromgeving. Deze is dus nog verre van juist. [url]http://test.mssteunfonds.nl[/url]. Nu blijkt ook dat de search-engine zowel in FF als in IE niet meer werkt (er kan niets meer ingegeven worden). In FF lijkt zelfs de hele header 'bevroren'. Normaal gesproken save ik eerst het (css)bestand voordat ik aanpassingen verricht, maar door een bepaalde oorzaak ben ik dit die keer vergeten. Dank je dat je even wilt kijken. M.vr.gr., Dalertje
  • Zoekveld werkt gewoon bij mij... Voordat je iets verandert een paar tips: [list:e821baf0c6] [*:e821baf0c6]Zet alle JavaScript in één bestand, dat je dan aanroept via <script type="text/javascript" src="bestand"></script>. Nu staan functies meerdere keer gedeclareerd wat de boel er niet overzichtelijker op maakt. [*:e821baf0c6]Gebruik twee spaties in plaats van tabs. Daardoor behoud je de inspringing terwijl de code toch overzichtelijk blijft. [/list:u:e821baf0c6] Je dropdowns werken niet in IE omdat je de Suckerfish-javascript niet in je site hebt staan. Zonder deze javascript ziet IE niet dat er met de muis over een <li> gegaan wordt, omdat IE :hover alleen op a-elementen ondersteunt. Maar omdat je een iets andere werken wilt kun je beter het script opnieuw schrijven. Ik had even niets te doen dus heb ik het maar gedaan 8) [code:1:e821baf0c6] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>MS-steunfonds</title> <style type="text/css"> ul li ul { display: none; } .sfhover ul { display: block; } .actiefSubmenu ul { display: block; } </style> <script language="JavaScript" type="text/javascript" src="js.js"> <!-- window.onload = function() { var lis = document.getElementById('navlist').getElementsByTagName('LI'); for(var i=0;i<lis.length;i++) { lis[i].onmouseover=function() { for(var i=0;i<lis.length;i++) lis[i].className=lis[i].className.replace(new RegExp('actiefSubmenu\\b'), ''); this.className+=' sfhover'; this.className+=' actiefSubmenu'; } lis[i].onmouseout=function() { this.className=this.className.replace(new RegExp('sfhover\\b'), ''); } } } --> </script> </head> <body> <ul id="navlist"> <li> <a href="#">Hoofdmenu 1</a> </li> <li><a href="#">Hoofdmenu 2</a> <ul> <li><a href="#">Submenu</a></li> <li><a href="#">Submenu</a></li> <li><a href="#">Submenu</a></li> </ul> </li> </ul> </body> </html> [/code:1:e821baf0c6] - Alle li's in de <ul> met id "navlist" laten hun submenu alleen zien als er met de muis overheen wordt gegaan - Als er met de muis overheen wordt gegaan blijft het menu open totdat er met de muis over een ander "hoofdmenu-li" wordt gegaan.
  • Hoi, Tot slot wilde ik toch nog even reageren op het laatste antwoord. Omdat de problemen opgelost moeten worden ben ik verder aan de slag gegaan. Min of meer toevallig vond ik het probleem m.b.t. het 'bevriezen' van de zoekfunctie. Waarschijnlijk heb jij gekeken toen ik de oplossing al doorgevoerd had. De oorzaak lag aan een z-index in de css van de header. Ook was ik aan het stoeien met het (sub)menu. De hover van suckerfish was ik er aan het uitgooien. Op enig moment had ik het javascript reeds verwijderd, maar stond er nog wel een verwijzing in de css. Inmiddels heb ik de hover functie sowel in FF als in IE voor elkaar. Daarbij heb ik eigen kennis samen met tips op dit forum gebruikt. De tips die jij aanhaalde ben ik aan het toepassen. Daarvoor hartelijk dank. Ik heb nog een ander klein probleempje met de background. Daarvoor zal ik, alvorens hier een nieuw topic te openen, kijken of ik het op internet of reeds in dit forum (de weg naar) het antwoord kan vinden. M.vr.gr., Dalertje

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.