I am trying to get some tabs working for a site skin I am currently working on, everything is going fine other that I can't get my tabs working quite how I want.
Here is the relevant code:
CODE
<style>
.navbar{
}
.navbar .spacer{
background: url(images/navbar_bg.png) center bottom repeat-x transparent;
height: 33px;
display: inline;
width: 70%;
margin: 0px;
float: left;
}
.navbar_left{
background: url(images/navbar_bg_left.png) right bottom no-repeat transparent;
width: 14px;
height: 33px;
float: left;
}
.navbar_right{
background: url(images/navbar_bg_right.png) left bottom no-repeat transparent;
width: 14px;
height: 33px;
float: right;
}
a.navLink{
text-decoration: none;
color: #0066ff;
font-size: 20px;
}
span{
margin: 0px;
padding: 0px;
}
a.navLink .navLink_left{
background: url(images/current_tab_bg_left.png) bottom right no-repeat transparent;
width: 11px;
height: 33px;
float: right;
}
a.navLink .navLink_center{
background: url(images/current_tab_bg.png) bottom center repeat-x transparent;
padding: 9px 5px 0px 5px;
height: 33px;
float: right;
}
a.navLink .navLink_right{
background: url(images/current_tab_bg_right.png) bottom left no-repeat transparent;
width: 11px;
height: 33px;
float: right;
}
a.inavLink{
text-decoration: none;
color: #999999;
font-size: 20px;
}
a.inavLink:hover{
text-decoration: none;
color: #0099ff;
font-size: 20px;
}
a.inavLink:hover .navLink_left{
background: url(images/current_tab_bg_ileft.png) bottom right no-repeat transparent;
width: 4px;
height: 33px;
float: right;
}
a.inavLink:hover .navLink_center{
background: url(images/current_tab_ibg.png) bottom center repeat-x transparent;
padding: 9px 5px 0px 5px;
height: 33px;
float: right;
}
a.inavLink:hover .navLink_right{
background: url(images/current_tab_bg_iright.png) bottom left no-repeat transparent;
width: 4px;
height: 33px;
float: right;
}
a.inavLink .navLink_left{
background: url(images/navbar_bg.png) center bottom repeat-x transparent;
width: 4px;
height: 33px;
float: right;
}
a.inavLink .navLink_center{
background: url(images/navbar_bg.png) center bottom repeat-x transparent;
padding: 9px 5px 0px 5px;
height: 33px;
float: right;
}
a.inavLink .navLink_right{
background: url(images/navbar_bg.png) center bottom repeat-x transparent;
width: 4px;
height: 33px;
float: right;
}
</style>
<div class="navbar">
<div class="navbar_right"> </div>
<a href="#" class="inavLink">
<span class="navLink_right"></span>
<span class="navLink_center">Projects</span>
<span class="navLink_left"></span>
</a>
<a href="#" class="navLink">
<span class="navLink_right"></span>
<span class="navLink_center">Home</span>
<span class="navLink_left"></span>
</a>
<div class="navbar_left"> </div>
<div class="spacer"> </div>
</div>
Now, the problem is that I don't want to have to know the exact width of the navbar links to get the "spacer" to go all the way across, however when I try setting
.spacer's width to 100% is pushes everything to different lines and ruins the skin.
Here are a couple of screenshots (taken from IE 6 so the transparency isn't there, but I believe you will get the point):
Current:
When modified to 100%:
Now, I would like this skin to use current standards, but if I can't get the navbar working I will have to swap it (the navba) out for a table to do the job (which people hate I know, so help me solve it ;P). The only problem I hae with giving navbar the background that spacer currently has is that it will be behind the currently selected menu as well, which has transparency in it and would ruin any hopes of making it look like the border continues up and around the tab.
Forum Index:
Programming Help |
C and C++ |
VB6 |
Java |
VB.NET |
C# |
ASP.NET |
PHP |
ColdFusion |
Perl and Python |
Ruby |
Databases |
Other Languages |
Game Programming |
Mobile Development |
Software Development |
Computer Science |
Industry News |
Programming Tutorials |
C++ Tutorials |
Visual Basic Tutorials |
Java Tutorials |
VB.NET Tutorials |
C# Tutorials |
Linux Tutorials |
PHP Tutorials |
ColdFusion Tutorials |
Windows Tutorials |
HTML/JavaScript Tutorials |
CSS Tutorials |
Flash Tutorials |
Web Promotion Tutorials |
Graphic Design & Photoshop Tutorials |
Software Development Tutorials |
Database Tutorials |
Other Language Tutorials |
ASP.NET Tutorials |
Game Programming Tutorials |
WPF & Silverlight Tutorials |
| 
