Probleempjes in mijn navmenu

jorenman · 12 jan 2014

HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>11</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="waarschuwing">
Dit is geen echte site, dit is gewoon een gemaakte template. Alle links werken ook niet, dit is de enigste pagina.
</div>
<div id="content">
<div id="header">
</div>
<div id="navmenu">

<ul>
<li><a href="#">Home</a>

<li><a href="#">Over Finforce</a>
<ul>
<li><a href="#">Visie Finforce<a></li>
<li><a href="#">Organisatie Finforce</a></li>
<li><a href="#">Cashflow-specialisten</a></li>
<li><a href="#">Nieuws Finforce</a></li>
<li><a href="#">Weblog</a></li>
</ul></li>
<li><a href="#">Toepassingen</a>
<ul>
<li><a href="#">Budgetbeheer</a></li>
<li><a href="#">Analyseren</a></li>
<li><a href="#">Rapporteren</a></li>
<li><a href="#">Liquiditeitsbegroting</a></li>
<li><a href="#">Consolidatie</a></li>
<li><a href="#">Adviseren</a></li>
</ul></li>
<li><a href="#">Oplossingen</a>
<ul>
<li><a href="#">MKB</a></li>
<li><a href="#">Bedrijfsadviesbureaus</a></li>
<li><a href="#">Accountancy</a></li>
</ul></li>
<li><a href="#">Aanschaf</a>
<ul>
<li><a href="#">Licenties, modules en tarieven</a></li>
<li><a href="#">MijnFinforce.nl - Welkom</a></li>
<li><a href="#">Begeleiding en implementatie</a></li>
<li><a href="#">Referenties</a></li>
<li><a href="#">Prijscalculator</a></li>
</ul></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Partners Financiële Business Software</a></li>
<li><a href="#">Branche partners</a></li>
<li><a href="#">Software Partners Specifieke Bedrijfsapplicaties</a></li>
</ul></li>
<li><a href="#">FAQ</a>
<ul>
<li><a href="#">FAQ - Algemeen</a></li>
<li><a href="#">FAQ - Technische vragen</a></li>
</ul></li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Contactgevens</a></li>
<li><a href="#">Contactformulier</a></li>
</ul></li>

</ul>
</div>
<div id="body">
<div id="title">
Snel financieel inzicht en managementinformatie
</div>
<div id="boxes">
<div id="box1">
<div id="top1">
MKB
</div>
<div id="middle1">
Cash is King! Een goed onderbouwd financieel plan is goud waard voor uw kredietaanvraag! Sluit direct aan op uw administratie. 
<br>
<br>
<a href="#">Meer voor MKB</a>
</div> <!-- end #middle1 -->
</div> <!-- end #box1 -->
<div id="box2">
<div id="top2">
Bedrijfsadviesbureaus
</div> 
<div id="middle2">
MijnFinForce.nl is uw financiële tool om via het web uw klant nog effectiever te  adviseren. Professioneel, snel en foutloos rekenen en rapporteren!
<br>

<a href="#">Meer voor Bedrijfsadviesbureaus</a>
</div> <!-- #middle2 -->
</div> <!-- end #box2 -->
<div id="box3">
<div id="top3">
Accountancy
</div>
<div id="middle3">
Van jaarrekening naar toekomstgericht advies! Een belangrijke omschakeling voor veel accountants. FinForce helpt u die omslag te maken!
<br>
<br>
<a href="#">Meer voor Accountancy</a>
</div> <!-- end #middle3 -->
</div> <!-- end #box3 -->
</div> <!-- end #boxes -->
<div id="blankline">
<b>Toepassingen</b>
<hr>
</div> <!-- end #blankline -->
<div id="boxes2">
<div id="box4">
<div id="top4">
Budgetbeheer
</div>
<div id="middle4">
In 5 stappen realiseert u uw budget. Slimme rekenfuncties zorgen voor een naadloze berekening van uw winst, liquiditeit en balans! 
<br>
<br>
<a href="#">Meer info</a>
</div> <!-- end #middle4 -->

</div> <!-- end #box4 -->
<div id="box5">
<div id="top5">
Analyseren
</div>
<div id="middle5">
Geen tijdrovende controles, maar heldere analyses, waarmee u kunt bijsturen. Directe aansluiting op uw administratie! 
<br>
<br>
<a href="#">Meer info</a>
</div> <!-- end #middle5 -->
</div> <!-- end #box5 -->
<div id="box6">
<div id="top6">
Rapporteren
</div>
<div id="middle6">
Met één druk op de knop uw management-informatie. Tussentijdse cijfers, kengetallen en grafieken geven u een  compleet beeld. 
<br>
<br>

<a href="#">Meer info</a>
</div> <!-- end #middle6 -->
</div> <!-- end #box6 -->
</div> <!-- end #boxes2 -->
<div id="boxes3">
<div id="box7">
<div id="top7">
Liquiditeitsbegroting
</div>
<div id="middle7">
In 5 stappen uw liquiditeit op orde! Belangrijk om te kunnen bepalen hoeveel geld u nodig heeft om te kunnen groeien! 
<br>
<br>

<a href="#">Meer info</a>
</div> <!-- end #middle7 -->
</div> <!-- end #box7 -->
<div id="box8">
<div id="top8">
Consolidatie
</div>
<div id="middle8">
In één oogopslag overzicht over de groep èn uw bedrijven afzonderlijk! Benchmarktool voor nu èn de toekomst! 

<br>
<a href="#">Meer info</a>
</div> <!-- end #middle8 -->
</div> <!-- end #box8 -->
<div id="box9">
<div id="top9">
Adviseren
</div>
<div id="middle9">
Ondernemingsgericht adviseren door voortdurend vooruit te kijken. Met FinForce adviseert u effectiever! 

<br>
<a href="#">Meer info</a>
</div> <!-- end #middle9 -->
</div> <!-- end #box9 -->
</div> <!-- end #boxes3 -->
<div id="blankline2">
Referenties 
<br>
<hr>
</div>
<div id="partners">
<div id="partners1">
<div id="partners1top">
Demonstratie & workshop
</div>
<div id="partners1middle">
<a href="#"><img src="playoverlay.png"></img></a>
<br>
<ul>
<li><a href="#">Live online demo aanvragen</a></li>
</ul>

</div> <!-- end #partners1middle -->
</div> <!-- end #partners1 -->
<div id="partners2">
<div id="partners2top">
Unieke samenwerking
</div>
<div id="partners2middle">
<img src="Logo-KING.jpg">
<br><br>
<p class="KING">King Liquiditeitsprognose</p>
</div> <!-- end #partners2middle -->
</div> <!-- end #partners2 -->
<div id="partners3">
<div id="partners3top">
Nieuw: onderwijsbegroting
</div>
<div id="partners3middle">
<img src="Cogix-logo1.jpg">
<br><br>
<p class="KING">Onderwijsbegroting en rapportages</p>
</div> <!-- end #partners3middle -->
</div> <!-- end #partners3 -->
<div id="partners4">
<br><br><br>
<img src="hulp-offline.gif">
</div> <!-- end #partners4 -->
</div> <!-- end #partners -->

</div> <!-- end body -->
</div> <!-- end #content -->

<div id="footer">
<p class="footer">FinForce   |   085-73 25 720   |   [email]info@finforce.nl[/email]</p>
<p class="footer2">Designed by <i>Joren Wouters</i>
</div>

</body>
</html>

Code:

/* CSS RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 }
body {
margin: 0;
}
p {
margin: 0;
}

body {
background: #ecf2f8;
}
#waarschuwing {
width: 100%;
background: url(footer-back.png);
line-height: 30px;
position: fixed;
z-index: 999;
text-align: center;
color:#fff;
font-family: Verdana;
font-size: 12px;
}

#content {
margin-top: 0px;
margin-left: 170px;
width: 1010px;
height: 1100px;
background: #fff;
border: 1px solid #000;
}
#header {
margin-top: 20px;
margin-left: 25px;
margin-right: 25px;
background: #000;
width: 960px;
height: 230px;

}
#navmenu {
margin-top: 0px;
margin-left: 25px;
margin-right: 25px;
height: 30px;
width: 960px;
background: url(footer-back.png);
background-repeat: repeat-x;
}

#navmenu ul {
margin-left: 0px;
margin-top: 0;
padding: 0;
list-style: none;
}
#navmenu li {
margin: 0;
padding: 0;
float: left;
background: url(footer-back.png);
background-repeat: repeat-x;
}
#navmenu ul li a {
font-family: Verdana;
display: block;
text-decoration: none;
font-size: 14px;
width: 96px;
padding: 5px;
text-align: center;
color: #fff;
}
#navmenu ul ul li{
	float: none; 
	padding: 8px;
}
#navmenu ul ul {
margin: 0;
position: absolute; 
visibility: hidden;
background: url(footer-back.png);
background-repeat: repeat-x;
width: 200px;
opacity: 0.9;
}
#navmenu li:hover {
text-decoration: underline;
}
#navmenu ul li:hover ul {
visibility: visible;
}
#body {
margin-left: 25px;
margin-right: 25px;
height: 830px;
width: 960px;
background: #fff;
border: 1px solid #000;
}
#title {
color: Red;
font-family: Verdana;
font-size: 20px;
margin-top: 20px;
}
#boxes {
margin: 0;
width: 650px;
height: 170px;
border: 1px solid #000;
float: left;
}
#box1 {
margin-top: 15px;
width: 200px;
height: 150px;
float: left;
}
#top1 {
color: red;
font-family: Verdana;
font-size: 19px;
margin: 0;
height: 25px;
width: 50px;
}
#middle1 {
color: #00203f;
font-family: Verdana;
font-size: 13px;
margin-top: 1px;
height: 125px;
float: left;
}
#middle1 a {
color: red;
text-decoration: none;
font-size: 12px;
font-family: arial;
}
#middle1 a:hover {
text-decoration: underline;
}
#box2 {
margin-top: 15px;
margin-left: 15px;
height: 150px;
width: 200px;
float: left;
}
#top2 {
color: red;
font-family: Verdana;
font-size: 19px;
margin: 0;
height: 25px;
width: 200px;
}
#middle2 {
color: #00203f;
font-family: Verdana;
font-size: 13px;
margin-top: 1px;
height: 125px;
width: 200px;
float: left;
}
#middle2 a {
color: red;
text-decoration: none;
font-size: 12px;
font-family: arial;
}
#middle2 a:hover {
text-decoration: underline;
}
#box3 {
margin-top: 15px;
margin-left: 22px;
height: 150px;
width: 200px;
float: left;
}
#top3 {
color: red;
font-family: Verdana;
font-size: 19px;
margin: 0;
height: 25px;
width: 200px;
}
#middle3 {
color: #00203f;
font-family: Verdana;
font-size: 13px;
margin-top: 1px;
height: 125px;
width: 200px;
}
#middle3 a {
color: red;
text-decoration: none;
font-size: 12px;
font-family: arial;
}
#middle3 a:hover {
text-decoration: underline;
}
#blankline {
margin-top: 10px;
background: #fff;
width: 625px;
height: 30px;
color: #00203f;
font-family: Arial;
font-size: 12px;
}
#boxes2 {
margin-top: 30px;
width: 650px;
height: 180px;
border: 1px solid #000;
float: left;
}
#box4 {
margin-top: 15px;
width: 200px;
height: 150px;
float: left;
border: 1px solid #000;
}
#top4 {
color: #00203f;
font-family: Verdana;
font-size: 19px;
margin: 0;
height: 25px;
width: 50px;
}
#middle4 {
color: #00203f;
font-family: Verdana;
font-size: 13px;
margin-top: 1px;
height: 125px;
float: left;
}
#middle4 a {
color: red;
text-decoration: none;
font-size: 12px;
font-family: arial;
}
#middle4 a:hover {
text-decoration: underline;
}
#box5 {
margin-top: 15px;
margin-left: 10px;
width: 200px;
height: 150px;
float: left;
border: 1px solid #000;
}
#top5 {
color: #00203f;
font-family: Verdana;
font-size: 20px;
margin: 0;
height: 25px;
width: 50px;
}
#middle5 {
color: #00203f;
font-family: Verdana;
font-size: 13px;
margin-top: 1px;
height: 125px;
float: left;
}
#middle5 a {
color: red;
text-decoration: none;
font-size: 12px;
font-family: arial;
}
#middle5 a:hover {
text-decoration: underline;
}
#box6 {
margin-top: 15px;
margin-left: 22px;
width: 200px;
height: 150px;
float: left;
border: 1px solid #000;
}
#top6 {
color: #00203f;
font-family: Verdana;
font-size: 20px;
margin: 0;
height: 25px;
width: 50px;
}
#middle6 {
color: #00203f;
font-family: Verdana;
font-size: 13px;
margin-top: 1px;
height: 125px;
float: left;
}
#middle6 a {
color: red;
text-decoration: none;
font-size: 12px;
font-family: arial;
}
#middle6 a:hover {
text-decoration: underline;
}
#boxes3 {
margin: 0;
width: 650px;
height: 170px;
border: 1px solid #000;
float: left;
}
#box7 {
margin-top: 15px;
width: 200px;
height: 150px;
float: left;
border: 1px solid #000;
}
#top7 {
color: #00203f;
font-family: Verdana;
font-size: 19px;
margin: 0;
height: 25px;
width: 50px;
}
#middle7 {
color: #00203f;
font-family: Verdana;
font-size: 13px;
margin-top: 1px;
height: 125px;
float: left;
}
#middle7 a {
color: red;
text-decoration: none;
font-size: 12px;
font-family: arial;
}
#middle7 a:hover {
text-decoration: underline;
}
#box8 {
margin-top: 15px;
margin-left: 10px;
width: 200px;
height: 150px;
float: left;
border: 1px solid #000;
}
#top8 {
color: #00203f;
font-family: Verdana;
font-size: 20px;
margin: 0;
height: 25px;
width: 50px;
}
#middle8 {
color: #00203f;
font-family: Verdana;
font-size: 13px;
margin-top: 1px;
height: 125px;
float: left;
}
#middle8 a {
color: red;
text-decoration: none;
font-size: 12px;
font-family: arial;
}
#middle8 a:hover {
text-decoration: underline;
}
#box9 {
margin-top: 15px;
margin-left: 22px;
width: 200px;
height: 150px;
float: left;
border: 1px solid #000;
}
#top9 {
color: #00203f;
font-family: Verdana;
font-size: 20px;
margin: 0;
height: 25px;
width: 50px;
}
#middle9 {
color: #00203f;
font-family: Verdana;
font-size: 13px;
margin-top: 1px;
height: 125px;
float: left;
}
#middle9 a {
color: red;
text-decoration: none;
font-size: 12px;
font-family: arial;
}
#middle9 a:hover {
text-decoration: underline;
}
#blankline2 {
margin-top: 10px;
background: #fff;
width: 625px;
height: 30px;
color: #00203f;
font-family: Arial;
font-size: 12px;
}

#partners {
color: red;
font-size: 17px;
font-family: Verdana;
margin-top: -80px;
margin-left:650px;
height: 750px;
width: 300px;
background: #ecf2f8;
border: 1px solid #000;
}
#partners1 {
margin-left: 10px;
margin-top: 10px;
height: 190px;
width: 250px;
border: 1px solid #000;
}
#partners1top {
margin: 0;
height: 30px;
width: 250px;
border: 1px solid #000;
}
#partners1middle {
text-align: center;
margin-top: 2px;
height: 160px;
width: 250px;
border: 1px solid #000;
}

#partners1middle ul {
margin-left: 23px;
margin-top: 10px;
padding: 0;
z-index: 357;
}
#partners1middle li {
margin: 0;
padding: 0;
float: center;
list-style: none;
}
#partners1middle ul li a {
font-size: 15px;
font-family: Arial;
text-align: center;
text-decoration: none;
background: url(footer-back.png);
line-height: 30px;
padding: 5px;
width: 200px;
list-style: none;
color: #fff;
display: block;
}
#partners1middle li:hover {
text-decoration: underline;
}
#partners2 {
margin-top: 20px;
margin-left: 10px;
height: 160px;
width: 250px;
border: 1px solid #000;
}
#partners2top {
margin: 0;
height: 30px;
width: 250px;
border: 1px solid #000;
}
#partners2middle {
margin-top: 5px;
height: 130px;
width: 250px;
border: 1px solid #000;
}
.KING {
font-size: 10px;
color: #00203f;
}
#partners3 {
margin-top: 20px;
margin-left: 10px;
height: 160px;
width: 250px;
border: 1px solid #000;
}
#partners3top {
margin: 0;
height: 30px;
width: 250px;
border: 1px solid #000;
}
#partners3middle {
margin-top: 5px;
height: 130px;
width: 250px;
border: 1px solid #000;
}
#partners4 {
margin-top: 20px;
margin-left: 10px;
height: 160px;
width: 250px;
border: 1px solid #000;
}
#footer {
margin: 0;
border: 1px solid #999;
width: 100%;
height:130px;
background: url(footer-back.png);
background-repeat: repeat-x;
}
.footer {
margin-left: 170px;
margin-top: 5px;
font-family: Verdana;
color: #fff;
font-size: 15px;
}
.footer2 {
margin-left: 170px;
margin-top: 60px;
color: #fff;
font-family: Verdana;
font-size: 11px;
}

Dit is een HTML en een CSS bestand.
Maar ik heb een paar vraagjes:
Hoe zorg ik ervoor dat de li's onder 'Over FinForce' niet zo'n grote height hebben?
Hoe zorg ik ervoor dat de li's verder uit elkaar staan?

phobix · 13 jan 2014

Beste Jorenman,

Hoe zorg ik ervoor dat de li's onder 'Over FinForce' niet zo'n grote height hebben?

#navmenu ul ul li {
padding: 8px;
}

Staat op 8px, dat betekend: 8px top, 8px right, 8px bottom, 8px left. Wil je specifiek bepaalde maten aanpassen dan kan dat heel gemakkelijk. Padding: top right bottom left. Dus in dit geval kun je: 2px 8px 2px 8px.

Dan is de ruimte tussen je menu items een stuk kleiner.

Hoe zorg ik ervoor dat de li's verder uit elkaar staan? (Ik neem aan de menu items?)

#navmenu li {

margin: 0px;

}

aanpassen naar:

#navmenu li {

margin-right: 10px;

}

Ik hoop dat ik begrepen heb waar je problemen lagen zo niet dan hoor ik het graag.

Groeten.

Phobix

bron · 13 jan 2014

Waarom gebruik je niet dit universele cross-browser menu?
http://www.helpmij.nl/forum/attachment.php?attachmentid=201659&d=1389292213
Dan hoef je je alleen maar bezig te houden met styling.

Probleempjes in mijn navmenu

jorenman

Gebruiker

phobix

Gebruiker

bron

Moderator

Nieuwste berichten

Wij waarderen jouw privacy