...

View Full Version : CSS Menu pushes right



waps2
11-29-2009, 04:07 PM
Hi guys,

I have a little problem i am stuck on at the minute. The problem is that my css menu on the left hand side of my page has a gap where it is pushing to the right instead of keeping flush.

Here is the code I have and a screenshot for you so you can see.

Its probably something simple but im struggling to see it at the minute. :(

Any help appreciated.

Waps





<body>
<div id="container" class="maincont">
<div id="header" class="headcont">
<img src="plylogo.gif" />
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT US</a></li>
<li><a href="">EQUIPMENT</a></li>
<li><a href="">WHY US</a></li>
<li><a href="">CONDITIONS OF HIRE</a></li>
<li><a href="">CONTACT US</a></li>
</ul>
</div>
<div class="leftmenu">
<ul>
<li><a href="">Access</a></li>
<li><a href="">Air Tools</a></li>
<li><a href="">Breaking, Drilling and Fixing</a></li>
<li><a href="">Cleaning and Dust Control</a></li>
<li><a href="">Concrete and Compaction</a></li>
<li><a href="">Cutting, Grinding and Chasing</a></li>
<li><a href="">General Building and Roadworks</a></li>
<li><a href="">Generators and Welders</a></li>
<li><a href="">Heating, Cooling and Drying</a></li>
<li><a href="">Landscaping and Gardening</a></li>
<li><a href="">Lifting Equipment</a></li>
<li><a href="">Light Plant</a></li>
<li><a href="">Lighting and Site Electrics</a></li>
<li><a href="">Painting and Decorating</a></li>
<li><a href="">Plumbing and Engineering</a></li>
<li><a href="">Pumping</a></li>
<li><a href="">Safety Equipment</a></li>
<li><a href="">Surface Preperation</a></li>
<li><a href="">Survey Equipment</a></li>
<li><a href="">Trenching and Shoring</a></li>
<li><a href="">Woodworking Tools</a></li>
</ul>
</div>
<div class="middlecont">
<span class="welc">WELCOME TO:</span><span class="welc2"> TORBAY TOOL HIRE</span><p></p>
Torbay Tool Hire are the area's favourite independent hire company, but not JUST because our prices are so competitive or because our
product range is so comprehensive that you can hire anything from a basic cordless drill to a Tandem Roller. Much of our success comes
from the high level of customer support we insist upon. If you need advice on the best or most suitable product for a particular project
we won't try and talk you into hiring what happens to be in stock or earns us the most money. Call in and put us to the test today !
<img src="flash.gif" />
</div>
</div>

</body>
</html>




/* CSS Document */

body{
background: #FEC87E; padding-top: 15; padding-bottom: 15;
}


.maincont{
background: #ffffff; width: 920; height: auto; margin: auto;
}


.welc {
font-size: 15px;
font-weight: bold;
font-family: verdana, arial, helvetica, sans-serif;
color: #ff9933;
}

.welc2 {
font-size: 15px;
font-family: verdana, arial, helvetica, sans-serif;
color: #333333;
}

/* horizontal menu styles */

.headcont{
width: 920;
height: 177;
background-image: url(header_background.gif);
}

.headcont ul{
padding-top: 0px;
margin: 0px;
text-align: left;
}

.headcont ul li{
display: inline;
font-size: 11px;
font-family: verdana, arial, helvetica, sans-serif;
color: white;
}

.headcont ul li a{
color: white;
font-size: 11px;
font-weight: bold;
font-family: verdana, arial, helvetica, sans-serif;
padding: 6px 10px 7px 10px;
margin-right: 20px;
text-decoration: none;
}

.headcont ul li a:hover, .headcont ul li a.selected{
color:white;
background-color: #FEC87E;
text-decoration:none;
padding: 9px 10px 7px 10px;
}

/* left menu system */

.leftmenu{
padding-top: 30px;
width: 198;
background-image: url(available.gif);
background-repeat: no-repeat;
float: left;
}

.leftmenu ul{
width: 198;
text-align: left;
list-style-type: none;
}

.leftmenu ul li{
font-size: 11px;
font-family: verdana, arial, helvetica, sans-serif;
color: white;
border-bottom: solid 1px #999999;
border-right: solid 1px #999999;
position: relative;
}

.leftmenu ul li a{
color: #000000;
font-size: 11px;
font-family: verdana, arial, helvetica, sans-serif;
padding: 6px 6px 7px 5px;
text-decoration: none;
position: relative;
display: block;
}

.leftmenu ul li a:hover, .headcont ul li a.selected{
color: white;
background-color: #FEC87E;
text-decoration: none;
padding: 6px 6px 7px 5px;
}

/* middle main content */

.middlecont{
margin-left: 215;
padding-top: 54px;
width: 516;
background-color: #4444444;
color: #333333;
font-size: 11px;
font-family: verdana, arial, helvetica, sans-serif;
}

Excavator
11-29-2009, 04:27 PM
Hello waps2,
I didn't try your code but I'll bet it's the default margin on the ul or li. I always put a reset at the top of my CSS, something like this -


* {
margin: 0;
padding: 0;
}

Have a look at some more and an explanation here. (http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/)

waps2
11-29-2009, 04:38 PM
Hey excavator,

That fixed that one.

Thanks alot :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum