Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2002
    Posts
    86
    Thanks
    2
    Thanked 1 Time in 1 Post

    CSS Menu pushes right

    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



    Code:
    <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>
    Code:
    /* 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;
    }
    Attached Thumbnails Attached Thumbnails CSS Menu pushes right-leftmenuproblem.gif  

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    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 -
    Code:
    * {
    margin: 0;
    padding: 0;
    }
    Have a look at some more and an explanation here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Aug 2002
    Posts
    86
    Thanks
    2
    Thanked 1 Time in 1 Post
    Hey excavator,

    That fixed that one.

    Thanks alot


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •