...

View Full Version : CSS Navigation Menu Problems



seanmt
10-22-2007, 11:51 PM
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 (http://fm-base.co.uk/sean/css/navigation/)

Here is all the code used...

Image used for background here (http://www.fm-base.co.uk/sean/css/navigation/nav1.jpg)

Style2.css 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

<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

<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

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

kaitco
10-23-2007, 06:00 AM
Try using:


list-style-type: none;

in the CSS. That should remove the bullets altogther from any browser.

seanmt
10-24-2007, 10:22 AM
Thanks for that. Anyone have any ideas of how to centre the whole thing or a simpler way in general?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum