Mijn navigation menu werkt niet meer goed als ik mijn border weghaal

Status
Niet open voor verdere reacties.
J

jorenman

Gebruiker
Lid geworden
27 jul 2013
Berichten
222
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Joren Wouters</title>
</head>
<body>
<div id="container">
<div id="header">
<p>Joren Wouters</p>
</div>
<div id="navmenu">
<div class="navmenu">

<ul>
<li><a href="#">Over mij</a>
<ul>
<li><a href="#">Wie ben ik?</a></li>
<li><a href="#">Wat doe ik?</a></li>
</li></ul>

<li><a href="#">Het plan</a>
<ul>
<li><a href="#">Mijn producten</a>
<li><a href="#">Mijn paketten</a>
</li></ul>

<li><a href="#">Het idee</a></li>

<li><a href="#">Contact</a></li>

</ul>
</div>
</div>
<div id="body">
<div class="image">
<img src="Naamloos.png">
</div>
<div class="box">
<div class="top">
<p><b>Welkom</b></p>
</div>
<div class="midden">
</div>
</div>

<div class="box2">
<div class="top2">
<p><b>Het plan</b></p>
</div>
<div class="midden2">
</div>
</div>

<div class="box3">
<div class="top3">
<p><b>Wie ben ik?</b></p>
</div>
<div class="midden3">
</div>
</div>

<div class="box4">
<div class="top4">
<p><b>Wat doe ik?</b></p>
</div>
<div class="midden4">

</div>
</div>

</div>

</div>

</body>
</html>



#container {
width: 100%;
height: 600px;
}

#header {
position: absolute; top: 0px; left: 0px;
position: fixed;
height: 100px;
width: 1355px;
}
#header p {
font-family: Arial;
font-size: 35;
text-align: center;
}

#navmenu {
position: absolute; top: 100px; left: 0px;
position: fixed;
height: 50px;
width: 100%;
background: #0066CC;
}

.navmenu {
position: absolute; top: 10px; left: 350px;
height: 30px;
width: 700px;
background: #0066CC;
}
.navmenu {
margin: 0;
padding: 0;
z-index: 100;
}
.navmenu ul {
margin: 0;
padding: 0;
line-height: 30px;
list-style: none;
}
.navmenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #0066CC;
}
.navmenu ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #fff;
border: 1px solid #000;
}
.navmenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
.navmenu ul li:hover ul {
visibility: visible;
filter: alpha(opacity:70);
opacity: 0.9;
}
.navmenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
.navmenu a:hover {
color: #000;
}


#body {
position: absolute; top: 200px; left: 0px;
position: fixed;
height: 400px;
width: 100%;
}
.image {
position: absolute; top: 0px; left: 0px;
height: 423px;
width: 600px;
border: 1px solid #000;
box-shadow: 10px 10px 7px #CCC;
}

.box {
position: absolute; top: 0px; left: 700px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top p {
position: absolute; top: 2px; left: 82px;
font-family: Arial;
font-size: 15;
}
.midden {
height: 140px;
width: 225px;
}

.box2 {
position: absolute; top: 230px; left: 700px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top2 {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top2 p {
position: absolute; top: 2px; left: 82px;
font-family: Arial;
font-size: 15;
}
.midden2 {
height: 140px;
width: 225px;
}

.box3 {
position: absolute; top: 0px; left: 1050px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top3 {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top3 p {
position: absolute; top: 2px; left: 72px;
font-family: Arial;
font-size: 15;
}
.midden3 {
height: 140px;
width: 225px;
}

.box4 {
position: absolute; top: 230px; left: 1050px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top4 {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top4 p {
position: absolute; top: 2px; left: 72px;
font-family: Arial;
font-size: 15;
}
.midden4 {
height: 140px;
width: 225px;
}



Dit is een HTML en een CSS bestand.
Alleen er is een probleempje,
Als ik bij mijn navigation menu de border weghaal, dan werkt ie niet goed meer als ik eroverheen ga met mijn muis, wie weet hoe je er voor zorgt dat ik de border kan weghalen en dat mijn navigation menu goed blijft werken?
 
Hoi,

Ik heb even alle overbodige dignen eruit gehaald en alleen het menu aangepast.
De kleurtjes moet je nog aanpassen. Suc6.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joren Wouters</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">

<div id="header">
<p>Phasellus at ante libero, id eleifend nibh. Duis pretium nunc nec enim molestie tempor. Etiam et tellus ac nisl condimentum elementum. Etiam nunc felis, iaculis et porta in, tincidunt tristique augue. Suspendisse tristique dolor eget tortor adipiscing cursus ornare mauris rhoncus. Aenean elementum vehicula felis, sit amet lacinia nisl pretium at. Nulla dignissim rutrum pellentesque. Aenean vitae eros est. Ut ullamcorper arcu a lacus aliquet vehicula. Sed ullamcorper ornare lorem, ut pharetra mauris laoreet ornare. Morbi pharetra eros non arcu placerat in dictum diam suscipit. Curabitur condimentum nunc vel lectus pulvinar malesuada. Fusce nulla augue, tristique sed ultricies nec, imperdiet at augue. Vivamus sagittis venenatis elit, eget tempor tortor rutrum ut. Morbi purus odio, pretium et ornare ac, gravida ac erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque posuere egestas risus, vel sagittis diam vulputate et. Aenean et mauris at orci fringilla rutrum. Fusce faucibus interdum augue aliquet eleifend. Morbi in velit at lectus iaculis viverra vitae quis sem. Duis luctus, nulla et faucibus lacinia, nibh metus porttitor massa, non tristique velit velit quis risus. In orci enim, placerat vitae dictum eget, dignissim ac lacus. Proin lobortis hendrerit leo nec rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus dictum sagittis dolor, a euismod est cursus a. Praesent vitae libero id erat ultrices aliquam vel eget eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed bibendum mi. Quisque molestie justo in odio pulvinar placerat. Aenean eget urna sem, nec volutpat mi. Morbi in erat quam, bibendum egestas nunc.</p>
</div>

<div id="navmenu">
  <ul class="navmenu">
    <li><a href="#">Over mij</a>
      <ul>
        <li><a href="#">Wie ben ik?</a></li>
        <li><a href="#">Wat doe ik?</a></li>
      </ul>
    </li>
    <li><a href="#">Het plan</a>
      <ul>
        <li><a href="#">Mijn producten</a></li>
        <li><a href="#">Mijn paketten</a></li>
      </ul>
    </li>
    <li><a href="#">Het idee</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

</div>
</body>
</html>

Code: 
/* menu framework - niet wijzigen */
.navmenu, .navmenu ul, .navmenu li {
  margin: 0; padding: 0; list-style-type: none; }
.navmenu {
  position: relative; z-index: 597; float: left; }
.navmenu li {
  float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; }
.navmenu li:hover {
  position: relative; z-index: 599; cursor: default; }
.navmenu a {
  display: block; text-decoration: none; }
.navmenu span {
  display: block; }
.navmenu ul {
  visibility:hidden;position:absolute;top:100%;left:0;z-index:598;margin-top:0; }
.navmenu ul li {
  float: none; }
.navmenu ul ul {
  top: 1px; left: 99%; }
.navmenu li:hover > ul {
  visibility: visible; }

#container {
width: 100%;
height: 600px;
}

#header {
width: 100%;
}

/* container menu */
#navmenu {
width: 100%;
height: 50px;
top: 50px;
position: absolute;
}

/* wrapper toplevel ul */
.navmenu {
margin-left: 200px;
}

/* opmaak */
.navmenu li a {
width: 150px;
height: 28px; /* tekst vertical align: height-padding */
padding-top: 2px;
font-family: arial, sans-serif;
text-align: center;
background: #0066CC;
color: #fff;
}

/* opmaak mouse-over */
.navmenu li:hover a {
background: #f00;
color: #000;
}

/* opmaak submenu */
.navmenu li:hover li a {
background: #ff0;
color: #00f;
}

/* opmaak submenu mouse-over */
.navmenu li:hover li:hover a {
background: #000;
color: #ccc;
}

/* opacity submenu */
.navmenu li:hover ul {
filter: alpha(opacity:80);
opacity: 0.8;
}
 
Kan je misschien zeggen wat je eruit hebt gehaald anders moet ik heel de code nagaan?
 
Vrijwel alles is uit de html en css gehaald :d behalve het menu gedeelte:
Code: 
*** iets gewijzigd...
<div id="navmenu">
  <ul class="navmenu">
    .....
  </ul>
</div>
Dit was voor mij de snelste manier om het menu in orde te maken.
Ik maak gebruik van een handig universeel menu (cross-browser ie7+) wat ik heb toegevoegd aan de css.

Maak een zekerheidskopie van de bestanden...
Verwijder dan alles wat met #navmenu en .navmenu te maken heeft in de css.
Voeg dan het bovenstaande toe aan je css.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan