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 to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Navigation Menu Problems

    Basically it is a little navigation menu for a user to choose which page to go to and it will show the user which page they are currently on (if any). As you can see from the code below. I am not keen on this technique and I am pretty poor at CSS so some help would be greatly appreciated, the things I want to do are...

    • Is there a simpler way of achieving the same result?
    • How do I get it to centre, rather than using fixed positions?


    Also, in IE the bullet points from the list still show even when the image is visible. They don't show in Opera or Firefox though.

    Example: link

    Here is all the code used...

    Image used for background here

    Style2.css code
    Code:
    body {
    	background: #ffffff;
    }
    
    #search {
    	margin: 0 auto 0 auto;
    	position: static;
    	width: 700px;
    	padding: 0;
    	border: 0;
    	height: 10px;
    }
    
    
    ul#searchby li {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 90px;
    	text-indent: -9000px;
    	text-decoration: none;
    	padding: 60px 0 0 0;
    	overflow: hidden;
    	height: 0px !important;
    	height /**/:22px; /* IE5/Win */
    	background: transparent url(nav1.jpg) no-repeat;
    }
    ul#searchtype li a {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 500px;
    	text-indent: -9000px;
    	text-decoration: none;
    	padding: 60px 0 0 0;
    	overflow: hidden;
    	height: 0px !important;
    	height /**/:22px; /* IE5/Win */
    	background: transparent url(nav1.jpg) no-repeat;
    }
    /*NAVIGATION ON MISC PAGE*/
    body#misc li#sby 			{ background-position: 0 -13px; width: 155px; left: 95px; }
    body#misc li#sby hover		{ background-position: 0 -13px; }
    body#misc li#pri a 			{ background-position: -155px -82px;	width: 225px; left: 250px; }
    body#misc li#pri a:hover	{ background-position: -155px -13px; }
    body#misc li#car a 			{ background-position: -380px -13px; width: 328px; left: 475px; }
    body#misc li#car a:hover	{ background-position: -380px -82px; }
    
    /*NAVIGATION ON PRINTER PAGE*/
    body#printer li#sby 			{ background-position: 0 -13px; width: 155px; left: 95px; }
    body#printer li#sby hover		{ background-position: 0 -13px; }
    body#printer li#pri a 			{ background-position: -155px -13px;	width: 225px; left: 250px; }
    body#printer li#pri a:hover		{ background-position: -155px -13px; }
    body#printer li#car a 			{ background-position: -380px -13px; width: 328px; left: 475px; }
    body#printer li#car a:hover		{ background-position: -380px -82px; }
    
    /*NAVIGATION ON CARTRIDGE PAGE*/
    body#cartridge li#sby 			{ background-position: 0 -13px; width: 155px; left: 95px; }
    body#cartridge li#sby hover		{ background-position: 0 -13px; }
    body#cartridge li#pri a 			{ background-position: -155px -82px;	width: 225px; left: 250px; }
    body#cartridge li#pri a:hover		{ background-position: -155px -13px; }
    body#cartridge li#car a 			{ background-position: -380px -82px; width: 328px; left: 475px; }
    body#cartridge li#car a:hover		{ background-position: -380px -82px; }
    Index.html code
    Code:
    <head>
    <title>Navigation</title>
    <link rel="stylesheet" href="style2.css" type="text/css" />
    </head>
    <body id="misc">
    <div id="search"> 
        <ul id="searchby">
        	<li id="sby"></li>
        </ul>
        <ul id="searchtype">
       	  <li id="pri"><a href="printer.html"></a></li>
       	  <li id="car"><a href="cartridge.html"></a></li>
        </ul>
    </div>
    </body>
    </html>
    cartridge.html code
    Code:
    <head>
    <title>Navigation</title>
    <link rel="stylesheet" href="style2.css" type="text/css" />
    </head>
    <body id="cartridge">
    <div id="search"> 
        <ul id="searchby">
        	<li id="sby"></li>
        </ul>
        <ul id="searchtype">
       	  <li id="pri"><a href="printer.html"></a></li>
       	  <li id="car"><a href="cartridge.html"></a></li>
        </ul>
    </div>
    </body>
    </html>
    printer.html code
    Code:
    <head>
    <title>Navigation</title>
    <link rel="stylesheet" href="style2.css" type="text/css" />
    </head>
    <body id="printer">
    <div id="search"> 
        <ul id="searchby">
        	<li id="sby"></li>
        </ul>
        <ul id="searchtype">
       	  <li id="pri"><a href="printer.html"></a></li>
       	  <li id="car"><a href="cartridge.html"></a></li>
        </ul>
    </div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Try using:

    Code:
    list-style-type: none;
    in the CSS. That should remove the bullets altogther from any browser.

  • Users who have thanked kaitco for this post:

    seanmt (10-24-2007)

  • #3
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for that. Anyone have any ideas of how to centre the whole thing or a simpler way in general?


  •  

    Posting Permissions

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