Some spacing between divs Options

[whoopy91]

Hello,

Since this is my first post, a short introduction. I'm Wouter and a first year student of information sciences.

I am having troubles with a spacing in my code:

HTML:

CODE

<div id="container">

            <div id="balk"><div id="koptekst">Home</div></div>
            <div id="textvlak">
             <div id='cssmenu'>
                     <ul>
                           <li><a href='index.htm'><span>Home</span></a></li>
                           <li><a href='menu.htm'><span>Menu</span></a></li>
                            <li><a href='contact.htm'><span>Contact</span></a></li>
                       </ul>
            </div>
               </div>    
      <div id="footer"></div>
</div>

CSS:

CODE

@charset "utf-8";
/* CSS Document */


#balk {
/* positionering */
width:700px;
height:300px;
/* layout */
background-image: url('achtergrond1.jpg');
background-repeat: no-repeat;
}
#achtergrond {
background-image: url('subtlenet2.png');
background-repeat:repeat;
}
#container {
    /* positionering */
    width: 700px;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #dddddd
}
#textvlak {
    /* positioneren en grootte */
    width:700px;
    min-height:400px;
    background-color:#FFFFFF;
    text-align:center;
    font-family:Verdana;
}
#footer {
    width: 700px;
    clear: both;
    color:#FFFFFF;
}
#koptekst{
    color:#FFFFFF;
    font-family:Verdana;
    font-size:130px;
    font-weight:bold;
    text-transform:uppercase;
}
#subkop {
    color:#c8c8c8;
    font-family:Verdana;
    font-size:40px;
}
#menulijst {
color:#c8c8c8;
font-family:Verdana;
list-style:none;
float:left;
}
#menukop {
font-size:30px;
}
/*  Opmaak voor div soupen in menu.htm */
#soupen {
height:220px;
}
#soupafbeelding{
background-image: url('soup.jpg');
float:right;
height:200px;
width:200px;
border: 1px solid #dddddd;
margin-right:80px;
}
/* einde opmaak voor soupen */
/*  Opmaak voor div antipasti in menu.htm */
#antipasti {
height:220px;
}
#antipastiafbeelding{
background-image: url('antipasti.jpg');
float:right;
height:200px;
width:200px;
border: 1px solid #e6e6e6;
margin-right:80px;
}
/* einde opmaak voor antipasti */
/* http://cssmenumaker.com/builder*/
#cssmenu {
  width: 700px;                                            
  height: 40px;
  border 1px solid #000000;
  background-color:#000000;
}
#cssmenu ul {
  list-style: none;
  padding-left: 60px;
  background-color:#FFFFFF;
  width:640px;
}
#cssmenu ul li {
  float: left;
  margin: 0;
}
#cssmenu ul li a {
  display: block;
  height: 20px;
  float: center;
  text-transform: uppercase;
  font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;
    font-weight:bold;
  font-size: 20px;
  color: #6e6e6e;
  text-decoration: none;
}
/* zorgt dat de items stukje uit elkaar staan */
#cssmenu ul li a span {
  display: block;
  float: left;
  padding-right: 35px;
}
/* wanneer er over een item wordt gegaan wordt de kleur FFC870. */
#cssmenu ul li a:hover {
  color:#dddddd;
}

The problem is between the DIV with ID "balk" and the DIV with ID "textvlak". There is a spacing between these divs that I don't want:



Can anyone help my how this can be?


Yours sincerely,

Wouter

[pandy]

The margin many browsers add to UL maybe. Try setting it to 0.

[whoopy91]

The margin many browsers add to UL maybe. Try setting it to 0.

That whas correct, thanks a lot!