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 6 of 6

Thread: css menu help

  1. #1
    New Coder twistedsoul's Avatar
    Join Date
    Jul 2008
    Location
    UK
    Posts
    94
    Thanks
    3
    Thanked 1 Time in 1 Post

    css menu help

    Hi,

    I'm having a little trouble with a simple meu I'm working with. Basically it won't line up next to div below, it has padding or a margin on the first link which I can't seem to get rid of.

    Any help would be great, thanks.

    Code:
    	<div class="span-24" id="nav">
    	<ul>
    			  
    			<li><a href="/" title="Go to the Welcome" class="current"><span>Home</span></a></li>
    			<li><a href="/website-design/" title="Go to the Website design" class="link"><span>Design</span></a></li>
    			<li><a href="/content-management-systems/" title="Go to the Content management systems" class="link"><span>Content Management Systems</span></a></li>
    			<li><a href="/ecommerce-systems/" title="Go to the eCommerce systems" class="link"><span>eCommerce</span></a></li>
    			<li><a href="/search-engine-services/" title="Go to the Search engine services" class="link"><span>Search</span></a></li>
    			<li><a href="/pro-image-manager/" title="Go to the Pro Image Manager" class="link"><span>PIM</span></a></li>
    			<li><a href="/news/" title="Go to the News" class="link"><span>News</span></a></li>
    			<li><a href="/our-clients/" title="Go to the Our clients" class="link"><span>Our clients</span></a></li>
    			<li class="last"><a href="/contact-us/" title="Go to the Contact us" class="link"><span>Contact us</span></a></li>
    
    	</ul>
    </div>
    and the css.

    Code:
    #nav {
    	margin-top: 10px;
    	}
    #nav ul li {
    	display:inline;
    	border-right:1px solid #CCCCCC;
    	}	
    #nav ul li.last {		
    	border-right:none;
    	}
    #nav ul li a {
    	padding: 10px 10px 10px 10px;	
    	color:#999999;
    	font-weight:normal;
    	font-size:1em;
    	}
    #nav ul li a:hover {	
    	text-decoration:underline;
    	}
    Whatever you do, do not click me!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello twistedsoul,
    Sometimes it helps to put a background color on each element, just so you can see what it's doing.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	background: #fc6;
    }
    #nav {
    	margin-top: 10px;
    	background: #0F0;
    	}
    #nav ul li {
    	display:inline;
    	border-right:1px solid #CCCCCC;
    	background: #F00;
    	}	
    #nav ul li.last {
    	border-right:none;
    	background: #9C6;
    	}
    #nav ul li a {
    	padding: 10px 10px 10px 10px;
    	color:#999999;
    	font-weight:normal;
    	font-size:1em;
    	background: #FF0;
    	}
    #nav ul li a:hover {	
    	text-decoration:underline;
    	}
    </style>
    </head>
    <body>
        <div class="span-24" id="nav">
            <ul>			  
                <li><a href="/" title="Go to the Welcome" class="current"><span>Home</span></a></li>
                <li><a href="/website-design/" title="Go to the Website design" class="link"><span>Design</span></a></li>
                <li><a href="/content-management-systems/" title="Go to the Content management systems" class="link"><span>Content Management Systems</span></a></li>
                <li><a href="/ecommerce-systems/" title="Go to the eCommerce systems" class="link"><span>eCommerce</span></a></li>
                <li><a href="/search-engine-services/" title="Go to the Search engine services" class="link"><span>Search</span></a></li>
                <li><a href="/pro-image-manager/" title="Go to the Pro Image Manager" class="link"><span>PIM</span></a></li>
                <li><a href="/news/" title="Go to the News" class="link"><span>News</span></a></li>
                <li><a href="/our-clients/" title="Go to the Our clients" class="link"><span>Our clients</span></a></li>
                <li class="last"><a href="/contact-us/" title="Go to the Contact us" class="link"><span>Contact us</span></a></li>
            </ul>
        </div>
    </body>
    </html>
    Do you have firebug for your FireFox yet? That's the best way to find this sort of thing.
    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
    Jan 2010
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post
    http://www.brightyoursite.com/blog/2...rizontal-menu/ same menu with clean codes.u can use this directly

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I'm having a little trouble with a simple meu I'm working with. Basically it won't line up next to div below, it has padding or a margin on the first link which I can't seem to get rid of.
    Can we have a link to your page?
    Last edited by abduraooft; 01-13-2010 at 07:22 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder twistedsoul's Avatar
    Join Date
    Jul 2008
    Location
    UK
    Posts
    94
    Thanks
    3
    Thanked 1 Time in 1 Post
    Still can't seem to figure it out, sorry it's not actually online as of yet
    Whatever you do, do not click me!

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by twistedsoul View Post
    Still can't seem to figure it out, sorry it's not actually online as of yet
    I'd like to ask the same question that I've asked here, a while ago.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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