So, for some reason, in Dreamweaver it looks fine
But on my site it is not floating them properly in any browser, I tried FireFox, Chrome, and IE8:
Link to my site if you care: http://addisonbwilson.com/Portfolio/SUBPAGES/Photography.php
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Addison Wilson: Photography</title>
<link rel="stylesheet" type="text/css" href="../CODE/pcss.css">
</head>
<body>
<?php include ("../INCLUDES/navbarsubpages.php"); ?>
<div id="imagewrapper">
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0001-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0002-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0003-preview-320w.jpg">
</div> <!--imagecontainer-->
</div><!--wrapper-->
<div id="imagewrapper">
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0004-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0005-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0006-preview-320w.jpg">
</div> <!--imagecontainer-->
</div><!--wrapper-->
<div id="imagewrapper">
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0007-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0008-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
</div> <!--imagecontainer-->
</div><!--wrapper-->
</body>
</html>
My CSS:
#charset "UTF-8";
/* CSS Document */
/*The body is responsiable for the background image, the rest of the site is divided between the sub wrapper and the includes */
/*bground tile is from http://subtlepatterns.com/white-brushed/ created by Andre Schouten, crediting him here as per the usage agreement */
body {margin-top: 0px; background-image:url(../Portfolio/IMAGES/brushed_#2X.png);}
/* navbar is a php include*/
#wrapper{width:980px; height:auto;}
#imagewrapper{width:auto; height:auto;}
#subwrapper{width: 980px; height: auto;}
#imagefull{width: auto; height: auto; background-color:#FFF; margin:3px 3px 3px 3px;}
#imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;}
#textcontainer{width: 320px; height: 320px; background-color:#FFF; margin:3px 3px 3px 3px; float:right;}
/* navbar and its many variations are for the navbar include*/
#navbarwrapper{positon: absolute; width:980px; height: 120px; z-index:30; background-color:#FFF;}
#navbar{width:980px; height:120px; background-repeat:repeat-x; z-index:31;}
#navbarlogo{width:210px; height:120px; float:left; z-index:32;}
#navbarcontent{width:770px; height:120px; padding-top:75px; float:left; font-family:Verdana, Geneva, sans-serif; background-repeat:repeat-x; z-index:32;}
/*Unordered lists which are used to handle drop down nav bar*/
#nav{
list-style:none;
font-family:Helvetica, Arial, sans-serif;
margin-bottom:10px;
float: right;
width:100%;
position:relative;
}
#nav li{float:left; margin-right:10px; width: 120px; position:relative;}
#nav a{display:block; padding:5px; color:#000; text-decoration:none;}
#nav a:hover{color:#fff; background:#000; text-decoration:none;}
/* drop down */
#nav ul{
background:#fff;
background:rbga(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px ;}
#nav ul li{ padding-top:1px; float:none; list-style:none;}
#nav ul a{white-space:nowrap;}
#nav li:hover ul{left:0;}
#nav li:hover a{background:#ccc; text-decoration:underline;}
#nav li:hover ul a{text-decoration:none;}
#nav li:hover ul li a:hover{background:#000;}
/* general tag overides*/
h1{font-size:large}
h2{font-size:larger}
h3{font-size:medium}
img {border:none}
ul{ padding: 0; margin: 0;}
li{padding: 0;}
/*link modification*/
a:link{ text-decoration: none; color:#FFF; font-family: Helvetica, Arial, sans-serif}
a:visited{text-decoration: none;color:#FFF; font-family: Helvetica, Arial, sans-serif}
a:active{text-decoration: none;color:#FFF; font-family: Helvetica, Arial, sans-serif}
a:hover{text-decoration: none; color:#FFF; font-family: Helvetica, Arial, sans-serif}
You just need to add float: left; to the #imagecontainer styles. It's not there in the online version.
Change this:
#imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;}
to:
.imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;}
and replace every <div id="imagecontainer" with <div class="imagecontainer"
For each image float:left;
This floats each container that contain each image. Use this for what you have right now.
#imagecontainer
{
float:left;
}
You can also do the same with inline styles. But CSS is cleaner.
Also, do not use multiple elements with the same ID. Use classes. Also, is there a reason you are using containers for each image? You could have one container with many images and use
.container img
{
float:left;
}
Also, keep in mind that img {float:left;} will float ALL images on your page.
Try
#imagecontainer{
display:inline;
margin: 0px
}
#imagecontainer {
background-color: #FFFFFF;
float: left;
margin: 3px 1%;
width: 31%;
}
and this
img {
border: medium none;
height: auto;
width: 100%;
}
check it, perfect as you wanted. Responsive too ;)
Related
I thought setting all margin and padding to 0 would fix this problem. I notice when I took out the p tags out of the sign div that the margin decreases a little but there looks to still be 1px of white margin between to the topbar div and newbar div that I cannot get rid of. Could someone take a look at this? Here's the code --> http://codepen.io/Chris-Brennan/pen/JYYqrN
Thanks,
Chris
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="bearLogo">
<img src="http://hrsbstaff.ednet.ns.ca/hughson/images/Icons/Icon.bear.gif" alt"bear">
</div>
<div id="signin">
<a href="#"><img src="https://cdn4.iconfinder.com/data/icons/berlin/32x32/sign-out.png"><p>Topbar</p>
</div></a>
<div id="topmenu">
<ul>
<li>Home</li>
<li>News</li>
<li>Food</li>
<li>Weather</li>
<li>Iplayer</li>
<li>Bears</li>
<li>More...</li>
</ul>
</div> <!--end-topmenu-->
<div id="searchBox">
<input type="text" placeholder="Search" />
</div>
</div> <!--end-fixedwidth-->
</div> <!--end-topbar-->
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
newsbar
</div>
</div>
</div> <!--end-container-->
*{
border-box:sizing;
padding:0px;
margin:0px;
font-family:verdana,helvetica,arial,sans-serif;
}
/*----------------
TOP BAR
-----------------*/
#topbar {
background:#009966;
width:100%;
height:40px;
color:white;
margin:0px;
padding:0px;
}
.fixedwidth {
width:1000px;
height:40px;
margin:0 auto;
padding:0px;
}
#bearLogo{
float:left;
border-right:1px solid #99CCCC;
padding-right:30px;
}
#signin{
float:left;
border-right:1px solid #D8D8D8;
padding:0px 20px 0 20px;
font-weight:bold;
font-size:0.8em;
width:160px;
}
#signin img{
position:relative;
left:5px;
top:5px;
}
#signin p{
position:relative;
top:-23px;
left:44px;
}
#signin a{
color:white;
text-decoration:none;
}
#topmenu{
}
#topmenu ul{
list-style:none;
}
#topmenu li{
padding:12px 20px 12px 20px;
border-right:1px solid #D8D8D8;
float:left;
font-size:0.8em;
}
#topmenu a{
color:white;
}
#searchBox{
float:left;
padding:8px 0px 0 10px;
}
#searchBox input{
width:105px;
height:20px;
border:none;
padding:0px 6px;
font-size:0.7em;
background-image:url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR2KAItPd4K87egTfclFiqNByGRK94bRks2XTO_5Vbyo8W0O_pPSA");
background-repeat:no-repeat;
background-position:right center;
}
.break{
clear:both;
}
/*----------------
NEWS BAR
-----------------*/
#newsbar{
float:left;
width:100%;
height:100px;
background:red;
}
A lot of mistakes:
Your #signin div has an extra margin which is coming outside.
Your markup is invalid. You have encapsulated <li> inside <a> tag, which is a crime.
Solutions
#signin {height: 40px;}
#container {background-color: #009966 !important;}
The above is a hack.
Preview:
Fiddle: http://codepen.io/anon/pen/QjyWBd
Like previously mentioned your code could do with a little restructuring but the issue that's causing this specific problem is the top css statement:
#signin p {
position:relative;
top:-23px;
left:44px;
}
I tend not to use negative margins for this reason. If you remove the top statement, the margin disappears. It does move your p tag out of its intended position, but this can be fixed by adding a float:left; to #signin img{ and line-height:36px; to #signin p{ (I would also probably use 3em insetad of 36px).
https://jsfiddle.net/ac0qv98t/
Setting the height of div with id "signin" would solve this problem easily
#signin {
border-right: 1px solid #d8d8d8;
float: left;
font-size: 0.8em;
font-weight: bold;
height: 100%;
padding: 0 20px;
width: 160px;
}
I'm sure I've just made a silly error with this, but I can't seem to make it work it out.
My list items in my nav are not starting at the edge of my div, it's almost like there is a margin on the left.
HTML
<div class="container">
<div id="topline"> blah blah </div>
<div class="leftbox">
<img src="images/totalbulllogo.svg" alt="Total Bull Clothing Company Logo" />
</div>
<div id="banner">
<img src="images/totalbullbanner2.jpg" alt="Total Bull Clothing Company Logo" />
</div>
<div id="navmenu">
<ul>
<li class="active">HOME</li>
<li>ABOUT</li>
<li>STORE</li>
<li>SALE ITEMS</li>
<li>CONTACT</li>
</ul>
</div>
<div id="mainContent"> FEATURED ITEMS</div>
</div>
CSS
html, body {
margin:0;
padding:0;
font-family: Calibri, Arial, sans-serif;
}
#font-face {
font-family:'Neon 80s';
src:url('../fonts/neon.ttf'),
url('../fonts/neon.eot');
}
.container {
clear: both;
margin: 0 auto;
padding: 0;
width: 58%;
background-color: #FFFFFF;}
#topline { float:left;
text-align:right;
padding: 0;
width: 100%;
height: 5%;
background-color: #FFF;
margin-top:2%;
margin-bottom:2%;}
.leftbox {
float:left;
padding: 0;
width: 30%;
background-color: #5D2F92;}
.leftbox img {width: 96%;
margin-left: 3%
margin-right:1%;}
#banner img {width: 100%;}
#banner {float:left;
width:68%;
margin-left:2%;}
#navmenu {
float:left;
padding: 0;
width: 30%;
background-color: #5D2F92;
height: 100%;
margin-top:0.5%;
font-family:'Neon 80s';
font-size:18pt;
text-align:left;
}
#navmenu li {
list-style:none;
margin: 0;
}
#navmenu li a {text-decoration:none;
color:#FFFFFF;
margin: 0;
display:block;
padding:20px 0px;}
#navmenu li.active a {background-color:#C49A6C;}
#mainContent {float:left;
width:68%;
background-color:red;
text-align:center;
margin-top:0.5%;
margin-left:2%;}
You forgot to reset the browser ul default CSS values.
By default, depending on the browser, there are some attribute values assigned to some elements, in case of the ul has some margin and padding. So in order to fix this, you should reset these values as follows:
http://jsfiddle.net/gespinha/dW9wB/1/
#navmenu ul{
margin:0;
padding:0;
}
So I have a list, but I want them to act as "blocks" so the whole thing is clickable and the background changes color. But I can not have both inline and block as display in css. How do I fix this?
The links at the top.
http://serenex.hostzi.com/
HTML
<html>
<head>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<title>Serenex - Index</title>
<head>
<body>
<div id="wrapper">
<div id="top">
<div id="logo">
<a href="http://www.http://serenex.hostzi.com/"> <img src="images/logo1.png" border="0" />
</a></div>
<div id="inbar">
<ul id="topbar">
<li>Home</li>
<li>News</li>
<li>Play</li>
<li>Vote</li>
<li>Forums</li>
</ul>
</div>
</div>
<div id="midsection">
</div>
</div>
</body>
</html>
css
body{
background:#363636;
}
#wrapper{
width:900px;
height:2000px;
margin: 0 auto;
}
#top{
width:100%
height:150px;
background:white;
border: 1px solid black;
}
#inbar{
height:30px;
width:100%;
background:#dedede;
border-top: 1px solid #b0b0b0;
}
#topbar{
position:relative;
top:-10px;
margin-left:-35px;
}
#topbar{
display: block;
}
#topbar li{
display:inline;
padding-left:20px;
padding-right:20px;
border-right: 1px solid black;
padding-bottom:5px;
padding-top:6px;
}
#topbar li a{
color:#363636;
display:block;
font: bold 14px arial, sans-serif;
display:inline;
}
Set the padding to the anchor a not the list item li. And it has to have the display: block.
This would cause it to jumb to a new line, which is why we use float: left on the list-item li and not display: inline.
#topbar li{
float: left;
border-right: 1px solid black;
}
#topbar li a{
color:#363636;
display:block;
padding: 20px 20px 5px 6px;
font: bold 14px arial, sans-serif;
}
But I can not have both inline and block as display in css
There is a way to have an element placed as an inline element and that behaves as a block element:
display: inline-block
As like the title, here is my case.
The header part is ok for me, i manage to center it, but the menu part, i just cant figure it.
This is the HTML Part:
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<div id="menu">
<div id="menu_button">
HOME
</div>
<div id="menu_button">
PRODUCTS
</div>
<div id="menu_button">
GALLERY
</div>
<div id="menu_button">
INFO
</div>
<div id="menu_button">
ABOUT US
</div>
</div>
</div>
Here is the CSS part:
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
float:left;
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu #menu_button{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu #menu_button a:link, #container #menu #menu_button a:visited{
text-decoration:none;
color:inherit;
}
#container #menu #menu_button:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
Looking forward to your reply, thanks.
it is semantically better not to use div for menu (instead use followed by
it's wrong to repeat many times an id (instead use classes, or combine css selectors - for your html #menu-button is the same as #menu div).
Here the html + css corrected with the centered menu
<html>
<head>
<style>
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu li{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu li a:link, #container #menu li a:visited{
text-decoration:none;
color:inherit;
}
#container #menu li:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
/*centered menu */
nav ul{
margin: 10px auto;
width: 755px;
}
</style>
</head>
<body
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<nav id="menu">
<ul>
<li>
HOME
</li>
<li>
PRODUCTS
</li>
<li>
GALLERY
</li>
<li>
INFO
</li>
<li>
ABOUT US
</li>
</ul>
</nav>
</div>
</body>
</html>
The centering is obtained giving a specific width to the ul (it could have also been a div or whatever) and giving it an "auto" margin for right and left.
well floating something will mean its taken out of the flow (somewhat) and just, as the title suggests, floating left.
try and remove it:
float:left;
So:
#container #menu {
background: none repeat scroll 0 0 #FFC341;
float: left;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
#container #menu #menu_button {
background: none repeat scroll 0 0 #FFC341;
border-right: thin solid #FF9900;
color: #000000;
display: inline-block;
float: left;
font-size: 18px;
margin: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 150px;
}
Since the width for #menu is set as 100%, it takes up the whole width of the parent element, i.e #container, whose width is auto, i.e the width of the window.
So, you need to set the width of #menu and align it to the center, by getting rid of the float and the following changes :
#container #menu {
width: 755px; /* 151px x 5 elements */
margin:0 auto; /* Instead of padding */
position:relative;
overflow:hidden;
}
and for the yellow background, just wrap your #menu around with a #menuWrapper div, and also as Italy specified, id should be unique on a page. Use class instead.
HTML :
<div id="menuWrapper">
<div id="menu">
<div class="menu_button">
HOME
</div>
<div class="menu_button">
PRODUCTS
</div>
<div class="menu_button">
GALLERY
</div>
<div class="menu_button">
INFO
</div>
<div class="menu_button">
ABOUT US
</div>
</div>
</div>
CSS :
#menuWrapper {
background:#ffc341;
}
Also, it's better to use ul-li elements for the menu items instead of div
Full HTML + CSS : JSFiddle
You may try to modify the container menu in the css part
#container #menu
{
margin:auto;
width:85%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
Try this and comment here for any issues..
I've been battling this for the better part of the afternoon and can't find a resolution to what I'm working with. I was changing some .asp pages to reflect a new page that we were adding to the site and after added to the menu, I decided to re-align the text. I removed the padding-left: 140px CSS and replace it with text-align: center;
This caused the nav-menu to go all screwy(pic2). I changed the CSS file back to the original however, in IE and Chrome it still displays oddly but in Firefox it works fine. Here's the code, trimmed to what I feel is relevant. I can post all of it if necessary.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Description" content="CompanyName CompanyProduct">
<title>CompanyName CompanyProduct</title>
<link rel="stylesheet" type="text/css" href="_style.css" media="screen">
<!-- Use after inserting the tabs above navigation bar
<script src="_tabrollover.js" type="text/javascript">
</script>
-->
<style type="text/css">
<!--
body,td,th {
font-family: Tahoma,Arial,Helvetica,sans-serif;
}
-->
</style>
<link href="/_toolbox/_green_button_rollover.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main_container">
<div id="header">
<!--#include virtual="/_ssi/header.asp" -->
<div id="menu">
<ul>
<li><a class="current">Home</a></li>
<li>Why CompanyProduct?</li>
<li>Features</li>
<li>Services</li>
<li>Pricing</li>
<li>Resources</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div class="green_box">
<div class="clock"></div>
<div class="text_content">
<h1><a href="/features/index.asp">Power of<br>
stuff</a></h1>
</div>
<!--begin div for right nav w rollovers, listing top 5 features-->
<!--#include virtual="/_ssi/div_right_nav.asp" -->
<!--end div for right nav w rollovers, listing top 5 features-->
And the rest:
body {
background-color:#D7DFE2;
margin:0px;
padding:0px;
color:#416271;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
}
h1{
padding:5px 0 5px 0;
margin:0px;
font-size:22px;
color:#000004;
font-family: Tahoma, Arial, Helvetica, sans-serif;
text-align: left;
}
h3{
padding:0 0 5px 0;
margin:0px;
font-size:12px;
color:#3898ac;
}
#main_container{
height:auto;
margin:auto;
background-color:#FFFFFF;
width: 900px;
}
#header{
width:900px;
height:auto;
margin:auto;
}
#menu{
width:900px;
height:32px;
padding:0px;
background-color:#416271;
clear: both;
}
#menu ul{
list-style:none;
margin: auto;
display:block;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 140px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}
#menu ul li{
list-style:none;
display:inline;
float:left;
width:auto;
height:32px;
padding:0px;
line-height:31px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight: bold;
}
#menu ul li a{
height:32px;
width: auto;
float:left;
text-decoration:none;
padding:0 0 0 25px;
margin:0px 3px 0px 3px;
color:#fff;
text-align:center;
position: static;
}
#menu ul li a:hover{
height:31px;
width: auto;
text-decoration:none;
color: #fff;
background:url(images/menu_arrow.gif) no-repeat left;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
}
#menu ul li a.current{
height:32px;
width: auto;
float:left;
text-decoration:none;
color: #fff;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
background-image: url(images/menu_arrow.gif);
background-repeat: no-repeat;
background-position: left;
}
How it should look(looks like this in FF): pic1 http://itsza.ch/pic1.png
How it currently looks(in IE and Chrome): pic2 http://itsza.ch/pic2.png
Use this as a base for the top menu, li's are blocks so you don't need to make them inline.
CSS:
#menu ul li {
list-style:none;
float:left;
}
.clear {
clear:both;
}
HTML:
<div id="menu">
<ul>
<li>...
</ul>
<div class="clear"></div>
</div>
You also have a bunch of redundant rules, try and remove them so it's easier to maintain and read. For example the following rule
#menu ul li a.current {
height:32px;
width: auto;
float:left;
text-decoration:none;
color: #fff;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
background-image: url(images/menu_arrow.gif);
background-repeat: no-repeat;
background-position: left;
}
is equivalent to this
#menu ul li a.current {
background:url(images/menu_arrow.gif) left no-repeat;
}
This is because you've just redone rules that already exist on #menu ul li
For list based menus:
Float your LI, not your A-tag
Use display:block on your A-tag
Don't forget to clear your floats.
See my tutorial: I love Lists