Dropdown-menu op website lukt maar niet... :(

zondag 13 november 2016 18:39

Acties:

0 Henk 'm!

Topicstarter

Beste forumleden, ik heb een vraag over mijn CSS-code:

Ik moet voor school (4 Havo informatica) een website over mezelf maken. Hierbij mag je volledig gebruik maken van internet, maar de docent mag je niet helpen. Nu vind ik het mooi om op m'n website een dropdown-menu te hebben, dit is tevens ook verplicht. Ik ben hier constant mee bezig geweest en heb voor hulp deze site gebruikt:

http://www.w3schools.com/...me=trycss_dropdown_navbar

Het staat volgens mij echt ontzettend duidelijk op de site, maar het lukt me steeds maar niet. Ik kan de items onder elkaar zetten, maar het lukt maar niet om ervoor te zorgen dat de menu-items naar beneden gaan als je er met je muis overheen gaat. Kunnen jullie me misschien helpen? Mijn code is hier te downloaden:

https://mega.nz/#!icIFlII...fIet_Dzee53VT7uGvHTDqDUYY

Alvast echt ONTZETTEND bedankt :-)

Met vriendelijke groet,

Milan

Mijn code staat ook hieronder, maar ik weet niet zeker of dat mag

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website over mij</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url("background.jpg");
}

.navigatie ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.navigatie li {
font-family: 'Century Gothic', sans-serif;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
float: center;
}

.navigatie a {
text-decoration: none;
color: white;
display: block;
transition: .3s background-color;
font-weight: bold;
font-size:21px
}

.navigatie a:hover {
background-color: #e84c3d;
}

.navigatie a.active {
background-color: #fff;
color: #444;
cursor: default;
}

.dropdown-content {
display: block
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}



</style>
</head>
<body>
<body>
<header>
<div class="navigatie">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Over mij</a></li>
<li class=dropdown">
<a href="#" class="dropbtn">Hobby's</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<li><a href="#">Games</a></li>
<li><a href="#">Bedrijf</a></li>
</ul>
</div> 
<h1> Hoi! Welkom op mijn website :-).</h1>
</header>
</body>
</html>

zondag 13 november 2016 18:57

Acties:

0 Henk 'm!

ByteMe_

Dubbele body en controleer de CSS op fouttekens/afsluiting

[ Voor 58% gewijzigd door ByteMe_ op 13-11-2016 19:34 ]

Mijn laatste reviews: Xiaomi Mi 9T | Mpow H12

zondag 13 november 2016 18:59

Acties:

0 Henk 'm!

pictogram

Gebruik een code-editor als hulpmiddel (bijv: https://www.sublimetext.com).
Na even door je code te puzzelen zag ik in Dreamweaver (mijn code-editor, http://www.adobe.com/nl/products/dreamweaver.html), dat je een ; mist bij:
.dropdown-content {
display: block <----
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
Succes ermee!

maandag 14 november 2016 09:23

Acties:

0 Henk 'm!

V-rg

Als eerste, zou je je code in code tags (zoals hieronder) kunnen plaatsen.... maakt het een stuk leesbaarder.

code:

1	[code]Je HTML code[/code]

Als ik je code even snel uittest zie ik dat er wel meer dingen niet helemaal lekker lopen, daarnaast zou ik je CSS code ook even in een aparte bestand opslaan. Denk niet dat de leraar het helemaal goed gaat vinden als je styling in dezelfde HTML bestand plaatst. Je hebt ook bijv. 2x <body>, daarnaast weet ik niet als een h1 met een welkom bericht in de header zou moeten.

Ik heb even snel een google search gedaan en dan zie ik bijv. deze als resultaat staan met werkende voorbeelden. Of kijk even hier.

[ Voor 3% gewijzigd door V-rg op 14-11-2016 09:24 ]

maandag 14 november 2016 09:27

Acties:

+1 Henk 'm!

Alternative

@milanvanharen. Er zitten een aantal fouten in je code. Zo werkt het wel

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website over mij</title>
<style>
body {
    margin: 0;
    padding: 0;
    background-image: url("background.jpg");
}
.navigatie ul {
    list-style: none;
    background-color: #444;
    text-align: center;
    padding: 0;
    margin: 0;
}
.navigatie li {
    font-family: 'Century Gothic', sans-serif;
    line-height: 40px;
    height: 40px;
    border-bottom: 1px solid #888;
    float: center;
}
.navigatie a, .dropbtn {
    text-decoration: none;
    color: white;
    display: block;
    transition: .3s background-color;
    font-weight: bold;
    font-size: 21px;
}
.navigatie a:hover, .dropdown:hover .dropbtn {
    background-color: #e84c3d;
}
.navigatie a.active {
    background-color: #fff;
    color: #444;
    cursor: default;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {
    background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
    display: block;
}
<!--

@media screen and (min-width: 600px) {
.navigatie li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
}
.navigatie li {
    display: inline-block;
    margin-right: -4px;
}
}
-->
</style>
</head>
<body>
<header>
  <div class="navigatie">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Over mij</a></li>
      <li class="dropdown"><a href="#" class="dropbtn">Hobby's</a>
        <div class="dropdown-content"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div>
      </li>
      <li><a href="#">Games</a></li>
      <li><a href="#">Bedrijf</a></li>
    </ul>
  </div>
  <h1>Hoi! Welkom op mijn website :-)</h1>
</header>
</body>
</html>

maandag 14 november 2016 15:48

Acties:

0 Henk 'm!

Yoram

En gebruik vooral de inspector(of inspecteren) in Chrome of firebug in firefox, zit bij je rechtermuisknop menu onderaan. Daar heb je een tabje met console. Als je een fout hebt in je javascript kan je dat meestal daar wel zien. iig ik vind het enorm handig.

[ Voor 4% gewijzigd door Yoram op 14-11-2016 15:48 ]

Hallo!

maandag 14 november 2016 19:24

Acties:

0 Henk 'm!

Alternative

Yoram schreef op maandag 14 november 2016 @ 15:48:
Als je een fout hebt in je javascript kan je dat meestal daar wel zien. iig ik vind het enorm handig.

Welk javascript? Het is puur html en css

dinsdag 15 november 2016 09:23

Acties:

0 Henk 'm!

Yoram

Alternative schreef op maandag 14 november 2016 @ 19:24:
[...]

Welk javascript? Het is puur html en css

Ik kan met de inspector toevallig heel goed m'n CSS debuggen wijsneus...

Hallo!

dinsdag 15 november 2016 09:32

Acties:

+1 Henk 'm!

Alternative

Yoram schreef op dinsdag 15 november 2016 @ 09:23:
[...]

Ik kan met de inspector toevallig heel goed m'n CSS debuggen wijsneus...

Dat zal gerust...jij had het over javascript, en daar ging het hier niet om. Verder is je wijsneus opmerking niet gepast. Spreek mensen normaal aan, of zeg niks

Onderwerpen