overlap problem

i would like to make a menu bar.
On the left i put a picture. On the right i have a first line with ul of 5 elements (links), next a horizontal line, and last a textfield and a dropdownbox with a button on one line.

It looks good.
But when i minimize the screen, the li's are no longer beside each other (on a row), but they come in one column.

Any ideas.

PS: this is the first time i write html and css, any tips are welcome


  #menu img
{
float:left;
}
#menu ul
{
list-style-type:none;
margin:0;
margin-left:200;
padding:0;
padding-top:6px;
padding-bottom:6px;
}

#menu ul li
{
display:inline;
}

#menu ul li a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
width:100px;
height:25px
position:relative;
}

#menu ul li a:hover,a:active
{
background-color:#7a991a;
}


<body>

<div id="topmenu">

<div id="menu">
<img border="0" src="logo.png" width="200" height="120"/>
<ul>
<li><a href="#kopen">KOPEN</a></li>
<li><a href="#verkopen">VERKOPEN</a></li>
<li><a href="#beheren">BEHEREN</a></li>
<li><a href="#help">HELP</a></li>
<li><a href="#afmelden">AFMELDEN</a></li>
</ul>
</div>


<hr color=#006400 style="width:520" align="left"/>

<div id="searchmenu">
<fieldset style="width:520">
<legend>
Search menu
</legend>
<form name="input" action="">
<input type="text" name="searchterm" style="width: 250px" />
in :
<select name="categories" style="width: 140px">
<option value="categorie1" selected="selected">categorie1</option>
<option value="categorie2">categorie2</option>
<option value="categorie3">categorie3</option>
<option value="categorie4">categorie4</option>
</select>
<input type="submit" value="SEARCH" />
</form>
</fieldset>
</div>

<hr color=#006400 style="width:725" align="left"/>

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

overlap problem

poelske88

ninenote

poelske88

ninenote

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week