Hello
Can anyone help me with a problem wih my css menu. The page is :
<!-- w --><a class="postlink" href="http://www.amalgam-models.co.uk/james/test1.htm">www.amalgam-models.co.uk/james/test1.htm</a><!-- w -->
The menu item portfolio is highlighted but if u roll over it the other menu items jump 1px to the left.
The css is:
.nav {
float:right;
font:10px Arial;
padding:20px 0px 7px 0px;
color:#fff;
}
.nav a {
color:#fff;
text-decoration:none;
background-color:#3D434B;
padding:20px 8px 7px 8px;
}
.nav a:hover {
border-right:1px solid #00ff00;
text-decoration:none;
background-color:#3D434B;
padding:20px 7px 7px 8px;
color:#00FF00;
}
#youarehere{border-right:1px;
display:inline;
text-decoration:none;
background-color:#3D434B;
padding:20px 8px 7px 8px;
color:#00FF00;
}
and the code that calls it is:
<div class="nav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm">HOME </a><a href="about.htm"> ABOUT US </a><a href="what.htm"> WHAT WE DO </a><a href="port.htm" id="youarehere"> PORTFOLIO </a><a href="cont.htm"> CONTACT</a></div>
thankyou<html>
<head>
<style>
.nav {
float:right;
font:10px Arial;
padding:20px 0px 7px 0px;
color:#fff;
}
.nav a {
color:#fff;
text-decoration:none;
background-color:#3D434B;
padding:20px 8px 7px 8px;
}
.nav a:hover {
border-right:1px solid #00ff00;
text-decoration:none;
background-color:#3D434B;
padding:20px 7px 7px 8px;
color:#00FF00;
}
#youarehere{border-right:1px;
display:inline;
text-decoration:none;
background-color:#3D434B;
padding:20px 8px 7px 8px;
color:#00FF00;
}
</style>
</head>
<body>
<div class="nav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm">HOME </a><a href="about.htm"> ABOUT US </a><a href="what.htm"> WHAT WE DO </a><a href="port.htm" id="youarehere"> PORTFOLIO </a><a href="cont.htm"> CONTACT</a></div>
</body>
</html>This is where I am at the moment, its the closest I can get to what I want. What I really want to happen is that a line also appears between portfolio and contact, any ideas?
<html>
<head>
<style>
.nav {
float:right;
font:10px Arial;
padding:20px 0px 7px 0px;
color:#fff;
}
.nav a {
color:#fff;
text-decoration:none;
background-color:#3D434B;
padding:20px 8px 7px 8px;
}
.nav a:hover {
border-right:1px solid #00ff00;
text-decoration:none;
background-color:#3D434B;
padding:20px 7px 7px 8px;
color:#00FF00;
}
#youarehere{border-right:1px solid #3D434B;
display:inline;
text-decoration:none;
background-color:#3D434B;
padding:20px 8px 7px 8px;
color:#00FF00;
}
</style>
</head>
<body>
<div class="nav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm">HOME</a><a href="about.htm">ABOUT US</a><a href="what.htm">WHAT WE DO</a><a href="port.htm" id="youarehere">PORTFOLIOa><a href="cont.htm">CONTACT</a></div>
</body>
</html>Your page showed a 404 error when I tried to visit it.<style type="text/css">
#nav {
float:right;
font:10px Arial;
padding:20px 0px 7px 0px;
margin:0;
color:#fff;
}
#nav li {
float:left;
padding:0;
margin:0;
list-style:none;
}
#nav a {
color:#fff;
text-decoration:none;
background-color:#3D434B;
padding:20px 8px 7px 8px;
border-right:1px solid #3d434b;
}
#nav a:hover {
border-right:1px solid #00ff00;
background-color:#3D434B;
color:#00FF00;
}
#nav #youarehere a {
border-right:1px solid #3D434B;
background-color:#3D434B;
padding:20px 8px 7px 8px;
color:#00FF00;
}
#nav #youarehere a:hover {
border-right:1px solid #00ff00;
}
</style>
....
<body>
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm">HOME</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.htm">ABOUT US</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"what.htm">WHAT WE DO</a></li>
<li id="youarehere"><a href=http://www.webdeveloper.com/forum/archive/index.php/"port.htm">PORTFOLIO</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"cont.htm">CONTACT</a></li>
</ul>
</body>
here (<!-- m --><a class="postlink" href="http://bonrouge.com/test/greenmenu.htm">http://bonrouge.com/test/greenmenu.htm</a><!-- m -->)Hi thanks this works brilliantly and tidies up my amateurish coding.
Whats a 404 error?Glad you like it .
A 404 is when the file can't be found on the server - often because of a bad link or something.
Can anyone help me with a problem wih my css menu. The page is :
<!-- w --><a class="postlink" href="http://www.amalgam-models.co.uk/james/test1.htm">www.amalgam-models.co.uk/james/test1.htm</a><!-- w -->
The menu item portfolio is highlighted but if u roll over it the other menu items jump 1px to the left.
The css is:
.nav {
float:right;
font:10px Arial;
padding:20px 0px 7px 0px;
color:#fff;
}
.nav a {
color:#fff;
text-decoration:none;
background-color:#3D434B;
padding:20px 8px 7px 8px;
}
.nav a:hover {
border-right:1px solid #00ff00;
text-decoration:none;
background-color:#3D434B;
padding:20px 7px 7px 8px;
color:#00FF00;
}
#youarehere{border-right:1px;
display:inline;
text-decoration:none;
background-color:#3D434B;
padding:20px 8px 7px 8px;
color:#00FF00;
}
and the code that calls it is:
<div class="nav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm">HOME </a><a href="about.htm"> ABOUT US </a><a href="what.htm"> WHAT WE DO </a><a href="port.htm" id="youarehere"> PORTFOLIO </a><a href="cont.htm"> CONTACT</a></div>
thankyou<html>
<head>
<style>
.nav {
float:right;
font:10px Arial;
padding:20px 0px 7px 0px;
color:#fff;
}
.nav a {
color:#fff;
text-decoration:none;
background-color:#3D434B;
padding:20px 8px 7px 8px;
}
.nav a:hover {
border-right:1px solid #00ff00;
text-decoration:none;
background-color:#3D434B;
padding:20px 7px 7px 8px;
color:#00FF00;
}
#youarehere{border-right:1px;
display:inline;
text-decoration:none;
background-color:#3D434B;
padding:20px 8px 7px 8px;
color:#00FF00;
}
</style>
</head>
<body>
<div class="nav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm">HOME </a><a href="about.htm"> ABOUT US </a><a href="what.htm"> WHAT WE DO </a><a href="port.htm" id="youarehere"> PORTFOLIO </a><a href="cont.htm"> CONTACT</a></div>
</body>
</html>This is where I am at the moment, its the closest I can get to what I want. What I really want to happen is that a line also appears between portfolio and contact, any ideas?
<html>
<head>
<style>
.nav {
float:right;
font:10px Arial;
padding:20px 0px 7px 0px;
color:#fff;
}
.nav a {
color:#fff;
text-decoration:none;
background-color:#3D434B;
padding:20px 8px 7px 8px;
}
.nav a:hover {
border-right:1px solid #00ff00;
text-decoration:none;
background-color:#3D434B;
padding:20px 7px 7px 8px;
color:#00FF00;
}
#youarehere{border-right:1px solid #3D434B;
display:inline;
text-decoration:none;
background-color:#3D434B;
padding:20px 8px 7px 8px;
color:#00FF00;
}
</style>
</head>
<body>
<div class="nav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm">HOME</a><a href="about.htm">ABOUT US</a><a href="what.htm">WHAT WE DO</a><a href="port.htm" id="youarehere">PORTFOLIOa><a href="cont.htm">CONTACT</a></div>
</body>
</html>Your page showed a 404 error when I tried to visit it.<style type="text/css">
#nav {
float:right;
font:10px Arial;
padding:20px 0px 7px 0px;
margin:0;
color:#fff;
}
#nav li {
float:left;
padding:0;
margin:0;
list-style:none;
}
#nav a {
color:#fff;
text-decoration:none;
background-color:#3D434B;
padding:20px 8px 7px 8px;
border-right:1px solid #3d434b;
}
#nav a:hover {
border-right:1px solid #00ff00;
background-color:#3D434B;
color:#00FF00;
}
#nav #youarehere a {
border-right:1px solid #3D434B;
background-color:#3D434B;
padding:20px 8px 7px 8px;
color:#00FF00;
}
#nav #youarehere a:hover {
border-right:1px solid #00ff00;
}
</style>
....
<body>
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm">HOME</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.htm">ABOUT US</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"what.htm">WHAT WE DO</a></li>
<li id="youarehere"><a href=http://www.webdeveloper.com/forum/archive/index.php/"port.htm">PORTFOLIO</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"cont.htm">CONTACT</a></li>
</ul>
</body>
here (<!-- m --><a class="postlink" href="http://bonrouge.com/test/greenmenu.htm">http://bonrouge.com/test/greenmenu.htm</a><!-- m -->)Hi thanks this works brilliantly and tidies up my amateurish coding.Whats a 404 error?Glad you like it
.A 404 is when the file can't be found on the server - often because of a bad link or something.