Hortizontaal CSS menu sputtert tegen - Softwareontwikkeling

woensdag 29 maart 2006 09:51

Acties:

Topicstarter

Ik was van de week een beetje bezig met een menu te maken dmv html en CSS, na enkele kleine probleempjes uit de weg te hebben geholpen werkte het menu, echter alleen onder Firefox. Internet Explorer laat alleen de tekst bovenaan het menu zien. En niet hetgene wat er onder komt.

Zie alhier voor het voorbeeld

Zoals je ziet is het geen dropdown menu maar komt het menu er horizontaal onder. Alles is opgebouwd dmv een list aangezien het CMS wat ik gebruik menu's maakt dmv lijsten.
Ik heb http://www.alistapart.com/articles/horizdropdowns/ gebruikt als voorbeeld en heb zo mijn eigen versie ontwikkeld. Er was ook al gezegd dat er een javascriptje toegevoegd moest worden maar deze doet niets (http://www.sierix.nl/devv/drop_down.js).

Menu met javascript: http://www.sierix.nl/devv/menu_metjs.html
Menu zonder javascript: http://www.sierix.nl/devv/menu_zonderjs.html

Code:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
    font: normal 12px verdana bold;
    }

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 500px; /* Width of Menu Items */
    
    }

ul li {
    position: relative;
        margin-top: none;
        display: inline;
        padding-left: 7px;  
}
    
li ul {
    position: absolute;
    left: 0px; /* Set 1px less than menu width */
    top: 20;
    display: none;
    }

li:hover ul { display: block; }

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */


</style>

<title>Test horizontale list + CSS</title>

</head>

<body>
 
<ul> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">Over</a> 
    <ul> 
      <li><a href="#">Historie</a></li> 
      <li><a href="#">Het Team</a></li> 
      <li><a href="#">Lokaties</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Diensten</a> 
    <ul> 
      <li><a href="#">ontwikkeling</a></li> 
      <li><a href="#">marketing</a></li> 
      <li><a href="#">opslag</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact</a> 
    <ul> 
      <li><a href="#">Nederland</a></li> 
      <li><a href="#">Belgie</a></li> 
    </ul> 
  </li> 
</ul> 

</body>
</html>

Vraag is dus, hoe te **** krijg ik het ook werkend in IE, ik heb al zo weinig mogelijk code geprobeerd te gebruiken.

woensdag 29 maart 2006 12:01

Acties:

Martinspire

Awesomeness

zo op het eerste gezicht is dat javascript ervoor dat je ook de onderliggende links aan kunt klikken, die moet je dus wel gebruiken (dat merkte ik iig in firefox)

en bij mij werkt ie gewoon in IE hoor, al geeft ie als linkjes natuurlijk allemaal #
als je die ff vervangt door de links die je wilt kun je het zoiezo al beter testen

dus, dat javascript is wel handig

dan kun je de onderste aanklikken
anders vliegt ie namelijk als je je muis van de link afhaalt om naar de onderste te gaan, weer weg

[ Voor 21% gewijzigd door Martinspire op 29-03-2006 12:02 ]

Martinspire - PC, PS5, XSX

woensdag 29 maart 2006 12:13

Acties:

Excibular

djmantri schreef op woensdag 29 maart 2006 @ 12:01:
zo op het eerste gezicht is dat javascript ervoor dat je ook de onderliggende links aan kunt klikken, die moet je dus wel gebruiken (dat merkte ik iig in firefox)

en bij mij werkt ie gewoon in IE hoor, al geeft ie als linkjes natuurlijk allemaal #
als je die ff vervangt door de links die je wilt kun je het zoiezo al beter testen

dus, dat javascript is wel handig dan kun je de onderste aanklikken
anders vliegt ie namelijk als je je muis van de link afhaalt om naar de onderste te gaan, weer weg

In Opera 8.5 idem dito. Dus ik zou dat js script maar gebruiken.

woensdag 29 maart 2006 12:27

Acties:

MAZZA

Barbie is er weer!

Je hebt denk ik over het volgende zinnetje heen gelezen:

A tiny jot of JavaScript is required to kick IE back into action (line wraps marked » — Ed.):

Wellicht dat eea wel werkt als je die » verwijdert in het scriptje.

En in je css:
margin-top: none; bestaat niet he

En top=20; 20 meter? 20 liter? 20 euro?

[ Voor 18% gewijzigd door MAZZA op 29-03-2006 12:30 ]

woensdag 29 maart 2006 13:10

Acties:

M@rijn

Topicstarter

Bah het gaat steeds minder werken, heb hier het 1 en ander aangepast (ook het script en de CSS code), echter kan ik nu ook niet meer simpel bij de menukeuzes (waarschijnlijk de top iets lager zetten). Alleen ik snap dat het bij jullie wel werkt en bij mij niet, hij geeft hier ook nog steeds een java error.

woensdag 29 maart 2006 13:16

Acties:

XWB

Devver

djmantri schreef op woensdag 29 maart 2006 @ 12:01:
dus, dat javascript is wel handig dan kun je de onderste aanklikken
anders vliegt ie namelijk als je je muis van de link afhaalt om naar de onderste te gaan, weer weg

Dat kan ook gewoon met CSS. Javascript heb je nodig omdat IE geen hover kent.

March of the Eagles

woensdag 29 maart 2006 13:31

Acties:

XWB

Devver

Overigens, om je een oplossing te geven, ik zou het zo doen:

HTML:

ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
    width: 500px
}
  
li {
    list-style: none;
    float: left;
    position: relative;
}
 
li ul {
    display: none;
    position: absolute; 
    top: 1em;
    left: 0px;
}
  
li > ul {
    top: auto;
    left: auto;
}

li a {
    font-weight: normal;
    text-decoration: none;
    display: block;
}

ul li {
    width: 100px;
}

ul li:hover, ul li.over {
    width: 100px;
}
    
li:hover ul, li.over ul { 
    display: block;
}

Voor IE dan even een JS'je:

JavaScript:

over = function() 
{
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) 
    {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\b"), "");
        }
    }
}

if (window.attachEvent) window.attachEvent("onload", over);

Moet je ook even je menu tussen <div id="nav">hier je menu</div> zetten.

Voorbeeld

[ Voor 9% gewijzigd door XWB op 29-03-2006 13:34 ]

March of the Eagles

Pagina: 1

Reageer