Probleempjes in mijn navigation menu

Status
Niet open voor verdere reacties.
J

jorenman

Gebruiker
Lid geworden
27 jul 2013
Berichten
222
<html>
<head>
<title>jWebDeveloping</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="container">
<div id="header">
<div class="logo">
<font face="Arial" size="20" color="#2C2CA0"><sup>J<sup></font>
<font face="Arial" size="20">Web</font>
<font face="Arial" size="20" color="#2C2CA0"><sub>Development<sub></font>
</div>
<div class="search">
</div>

</div>
<div id="navmenu">
<div class="navmenu">

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Web Hosting</a></li>
<li><a href="#">Web Development</a>
<ul>
<li><a href="#">Onze templates</a></li>
<li><a href="#">Persoonlijke Site</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>






</div>


</div>
<div id="body">
</div>
<div id="footer">
</div>

</div>

</body>
</html>

#container {
position: absolute; top: 0px; left: 0px;
width: 100%;
max-width: 100%;
height: 1500px;
background: linear-gradient(#D8D8D8 , #fff);
}
#header {
position: absolute; top: 0px; left: 0px;
width: 100%;
height: 200px;
border: 1px solid #000;
}
.logo {
position: absolute; top: 40px; left: 200px;
width: 400px;
height: 120px;
border: 1px solid #000;
}
.search {
position: absolute; top: 40px; left: 930px;
width: 200px;
height: 80px;
border: 1px solid #000;
}
#navmenu {
position: absolute; top: 200px; left: 200px;
height: 70px;
width: 932px;
background: #333;
border: 1px solid #000;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: none;
border-bottom-left-radius: none;
}
.navmenu {
position: absolute; top: 0px; left: 160px;
height: 70px;
width: 932px;
}
.navmenu {
z-index: 100;
margin: 0;
padding: 0;
}
.navmenu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 30px;
}
.navmenu li {
text-align: center;
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none;
border: 1px solid #999;
border-top: none;
border-bottom: none;
}
.navmenu ul li a {
font-family: Arial;
text-decoration: none;
height: 70px;
width: 150px;
display: block;
background: #333;
color: #fff;
}
.navmenu ul ul {
position: absolute;
visibility: hidden;
background: #999;
}
.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: 270px; left: 200px;
height: 1030px;
width: 932px;
background: #999;
}
#footer {
position: absolute; top: 1300px; left: 200px;
height: 180px;
width: 932px;
background: #333;
border: 1px solid #000;
border-top-left-radius: none;
border-top-right-radius: none;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

Dit is een HTML en een CSS bestand.
Alleen er zijn 2 probleempjes:
In de hoogte staat de tekst in de list-items niet in het midden, weet iemand hoe ik dit voor mekaar krijg?
Als je goed kijkt, zie je als je met je muis over 'Web Development' gaat, dat de list-items die daar onderuit komen niet mooi aansluiten op het gehele menu, hoe zorg ik ervoor dat het wel aan elkaar mooi aansluit?
 
Haal in de html het volgende weg zodat je het menu kunt testen.
<div id="body">
</div>
<div id="footer">
</div>
Wijzig de html
<div id="navmenu">
<ul class="nav">
Vervang in de css alles wat met navmenu te maken heeft in de onderstaande css
Tip: Gebruik zo weinig mogelijk position/top/left. Beter is float/margin
Code: 
<!DOCTYPE html lang="nl">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
  <div id="header">
    <div class="logo">
      <font face="Arial" size="20" color="#2C2CA0"><sup>J<sup></font>
      <font face="Arial" size="20">Web</font>
      <font face="Arial" size="20" color="#2C2CA0"><sub>Development<sub></font>
    </div>
    <div class="search">
    </div>
  </div>
  <div id="navmenu">
    <ul class="nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="#">Web Hosting</a></li>
      <li><a href="#">Web Development</a>
        <ul>
          <li><a href="#">Onze templates</a></li>
          <li><a href="#">Persoonlijke Site</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
</body>
</html>

css:
Code: 
/* als eerste bovenaan in css (neem hiervoor een betere reset) */
* {
margin: 0;
padding: 0;
border: 0;
}

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

#navmenu {
/* 201 vanwege de border erboven */
position: absolute; top: 201px; left: 200px;
width: 932px;
background: #333;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: none;
border-bottom-left-radius: none;
}

ul.nav {
/* menu iets naar rechts vanwege radius */
margin-left: 15px;
}

ul.nav li {
border: 1px solid #999;
border-top: none;
border-bottom: none;
background: #333;
}

ul.nav a {
width: 150px;
/* hieronder: horizontaal centreren */
text-align: center;
/* hieronder: padding en font-size tesamen voor afmeting/vert.centreren */
padding: 23px 0 24px 0;
font-size: 16px;
font-family: arial, sans-serif;
color: #fff;
}

ul.nav ul {
background: #999;
}

ul.nav li:hover {
background: #ccc;
}

ul.nav li:hover a {
color: #000;
}

ul.nav li:hover ul {
filter: alpha(opacity:70);
opacity: 0.9;
}
 
Buiten het structurele probleem is ook de syntax nog niet perfect. Er ontbreken hier en daar nog wat dingen <sup> ] </sup>
zelfde voor de sub
<li> zonder </li>

kijk het nog eens goed na

Ron
 
Gebruik "inspringen" van de html code tijdens je ontwerp/test (zie hierboven) dan kan je makkelijker controleren of alles klopt :)
 
Waarom is het slim om zo min mogelijk position top left te gebruiken en zo veel mogelijk margin float?
 
In de bijlage heb ik een voorbeeld gedaan van
- een default css met cross-browser reset (dit bestand niet wijzigen)
- een index.html met css zonder gebruik van position.
Position zorgt ervoor dat de pagina layout later zeer moeilijk is aan te passen.
In de html worden beide css bestanden in de head gelinked.
Bestand: Bekijk bijlage html-css.zip

***edit
Niet "...zo veel mogelijk float...", maar alleen indien nodig.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan