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

Thread: CSS menu help

  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS menu help

    I need some help with a menu.
    I want to make a menu that is divided in two, one to the left and one to the right. Between them I want a gap/space that is 200px wide.
    The gap will be between Link3 and Link4 (se code)

    Like this:

    Link1 Link2 Link3 //////GAP////// Link4 Link5 Link6

    This is the code I have so far:

    <ul id="navlist">
    <li id="active"><a href="#" id="current">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>

    <li><a href="#">Link4</a></li>
    <li><a href="#">Link5</a></li>
    <li><a href="#">Link6</a></li>
    </ul>
    </div>

    #navlist li
    {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    }

  • #2
    New Coder
    Join Date
    Dec 2009
    Posts
    96
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Not sure if this is the solution you need, but you can try this:

    Code:
    <div style="position: absolute; left: 0px; top: 0px; width: 100px">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    </ul>
    </div>
    <div style="position: absolute; left: 200px; top: 0px; width: 100px">
    <ul id="navlist">
    <li><a href="#">Link4</a></li>
    <li><a href="#">Link5</a></li>
    <li><a href="#">Link6</a></li>
    </ul>
    </div>

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,682
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Something like this estigma?
    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 {
    	font: 100% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    #nav {
    	overflow: hidden;
    	position: relative;
    	margin: 10px 0 400px; /*for display only*/
    }
    	ul#navlist { 
    		float: left;
    		list-style: none;
    		position: relative;
    		left: 50%;
    	}
    		#navlist li {
    			float: left;
    			position: relative;
    			right: 50%;
    			padding: 0 20px;
    		} 
    			#gap {margin: 0 200px 0 0;}
    			ul#navlist li a:hover {color: #f00;}
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="nav">
                <ul id="navlist">
                    <li id="active"><a href="#" id="current">Link1</a></li>
                    <li><a href="#">Link2</a></li>
                    <li id="gap"><a href="#">Link3</a></li>        
                    <li><a href="#">Link4</a></li>
                    <li><a href="#">Link5</a></li>
                    <li><a href="#">Link6</a></li>
                </ul>
            <!--end nav--></div>
        <!--end container--></div>
    </body>
    </html>
    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

  • #4
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks alot for the help!


  •  

    Posting Permissions

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