[HTML & CSS] Need help with Navigation Tabs
Heya guys. I'm in development of a Layout that I want to try and code, to test my HTML & CSS abilities. It's going fairly well at the moment, but I'm having alittle bit of diffculties. I have created a Tabbed Navigation (Similar to habbos) with CSS functions, as the tab changes on hover etc etc etc.
Anyway. I have the Tabbed Navigation above the black seprator line which I would like the tabs to sit on, and I have edited every bloodly rule and it doesn't seem to be doing anything.
Here's a screen shot.
http://imagehoster.webs.com/screenshot.png
And here's the source
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
</head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#container {
text-align: center;
top: 20px;
}
#navmenu {
width: 750px;
height: 100px;
padding: 0px;
margin: 0px auto;
}
#navmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
#navmenu ul li {
width: 142px;
float: left;
margin: 4px;
}
#navmenu ul li a {
font-family: verdana;
text-decoration: none;
display: block;
width: 150px;
height: 30px;
line-height: 30px;
font-size: 12pt;
background-image: url(tabs.png)
}
#navmenu a:hover {
background-position: 0px -30px;
font-weight: bold;
color: #FFF;
}
#homePage #homePageLink {
background-position: 0px -60px;
font-weight: bold;
color: #000;
}
#header-container {
background-repeat: repeat-x;
background-image: url(topbg.png);
background-position: 0 100%;
background-color: #bce0ee;
z-index: 10;
}
</style>
<body vlink="#FFFFFF" alink="#FFFFFF" link="#FFFFFF" id="homePage">
<div id="header-container">
<div id="container">
<div id="navmenu">
<ul>
<li><a id="homePageLink">Item 1</a></li>
<li><a href="item-1.html" id="page7link">Item 2</a></li>
<li><a href="#" id="page7link">Item 3</a></li>
<li><a href="#" id="page7link">Item 4</a></li>
<li><a href="#" id="page7link">Item 5</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
re: [HTML & CSS] Need help with Navigation Tabs
Code:
#navmenu {
width: 750px;
height: 100px;
padding: 0px;
margin: 0px auto;
}
Change 100px to like 30px or 40px, it should fit perfectly.
Or if you want to have them lowered to the black line then do..
Code:
#navmenu ul li {
width: 142px;
float: left;
margin: 70px 4px 4px 4px;
}
That just makes the margin-top: 70px, and margin left, right and bottom 4px.
re: [HTML & CSS] Need help with Navigation Tabs
Thanks Parker.
Helped alot. ^.^
