Need some CSS help

Toggle sidebar Toggle sidebar
W

WannaFly

Platinum Member
Jan 14, 2003
2,811
1
0
So, I'll admit - I don't know CSS very well, my work requires 90% windows apps, so I don't do to much web development anymore.

I need some assistance, I am using a tabs css file to make a page look tabbed- but i want to change the background color on one of the tabs. Could anyone assist me with this?
I want to change one of the "not selected" tabs - not the current one.

Here is a url to the page:
http://exilum.com/projects/index.html

Thanks in advance for any help.
 
NiKeFiDO

NiKeFiDO

Diamond Member
May 21, 2004
3,901
1
76
you're tabs are going to be separate DIV's, no? Or are you just replacing the innerHTML of the same div?

You aren't looking for something this simple, are you?
Class for red background:

.myColored {
background-color:#ff0000;
}

If you are doing it via javascript, that's a diferent thing. could be something like:

getElementById('someDiv').style.backgroundColor = '#ff0000';
 
C

Chosonman

Golden Member
Jan 24, 2005
1,136
0
0
You can use Yahoo UI (YUI for short) They have a tab view api that makes developing Tabs so much simpler. I'll try to post up some code if I have time.
 
C

Chosonman

Golden Member
Jan 24, 2005
1,136
0
0
http://developer.yahoo.com/yui...abview/fromscript.html

Heres some example code I'm researching for a project

<!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" lang="en" xml:lang="en">


<style type="text/css">
/* default space between tabs */
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li,
.yui-navset .yui-navset-bottom .yui-nav li {
margin:0 0.5em 0 0; /* horizontal tabs */
}
.yui-navset-left .yui-nav li,
.yui-navset-right .yui-nav li {
margin:0 0 0.5em; /* vertical tabs */
}

/* default width for side tabs */
.yui-navset .yui-navset-left .yui-nav,
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-left .yui-nav,
.yui-navset-right .yui-nav { width:6em; }

.yui-navset-top .yui-nav,
.yui-navset-bottom .yui-nav {
width:auto;
}
.yui-navset .yui-navset-left,
.yui-navset-left { padding:0 0 0 6em; } /* map to nav width */
.yui-navset-right { padding:0 6em 0 0; } /* ditto */



/* .yui-navset defaults to .yui-navset-top */
.yui-skin-sam .yui-navset .yui-nav,
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav { /* protect nested tabviews from other orientations */
border:solid #2647a0; /* color between tab list and content */
border-width:0 0 5px;
Xposition:relative;
zoom:1;
}

.yui-skin-sam .yui-navset .yui-nav li,
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav li {
margin:0 0.16em 0 0; /* space between tabs */
padding:1px 0 0; /* gecko: make room for overflow */
zoom:1;
}

.yui-skin-sam .yui-navset .yui-nav .selected,
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav .selected {
margin:0 0.16em -1px 0; /* for overlap */
}

.yui-skin-sam .yui-navset .yui-nav a,
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav a {
background:#d8d8d8 url(../../../../assets/skins/sam/sprite.png) repeat-x; /* tab background */
border:solid #a3a3a3;
border-width:0 1px;
color:#000;
text-decoration:none;
}

.yui-skin-sam .yui-navset .yui-nav a em,
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav a em {
border:solid #a3a3a3;
border-width:1px 0 0;
cursor:hand;
padding:0.25em .75em;
left:0; right: 0; bottom: 0; /* protect from other orientations */
top:-1px; /* for 1px rounded corners */
position:relative;
}

.yui-skin-sam .yui-navset .yui-nav .selected a,
.yui-skin-sam .yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-skin-sam .yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
background:#2647a0 url(../../../../assets/skins/sam/sprite.png) repeat-x left -1400px; /* selected tab background */
color:#fff;
}

.yui-skin-sam .yui-navset .yui-nav a:hover,
.yui-skin-sam .yui-navset .yui-nav a:focus {
background:#bfdaff url(../../../../assets/skins/sam/sprite.png) repeat-x left -1300px; /* selected tab background */
outline:0;
}

.yui-skin-sam .yui-navset .yui-nav .selected a em {
padding:0.35em 0.75em; /* raise selected tab */
}

.yui-skin-sam .yui-navset .yui-nav .selected a,
.yui-skin-sam .yui-navset .yui-nav .selected a em {
border-color:#243356; /* selected tab border color */
}

.yui-skin-sam .yui-navset .yui-content {
background:#edf5ff; /* content background color */
}

.yui-skin-sam .yui-navset .yui-content,
.yui-skin-sam .yui-navset .yui-navset-top .yui-content {
border:1px solid #808080; /* content border */
border-top-color:#243356; /* different border color */
padding:0.25em 0.5em; /* content padding */
}

</style>


<!-- Dependencies -->
<!-- Sam Skin CSS for TabView -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2.../skins/sam/tabview.css">

<!-- JavaScript Dependencies for Tabview: -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2...ent/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2...nt/element-beta-min.js"></script>

<!-- Source file for TabView -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2...tabview/tabview-min.js"></script>



<div id="demo1" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>

<div id="demo2">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>

<div id="demo3" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>

<script type="text/javascript">
var tabView = new YAHOO.widget.TabView('demo1');
var tabView = new YAHOO.widget.TabView('demo2');
var tabView = new YAHOO.widget.TabView('demo3');
</script>
 
W

WannaFly

Platinum Member
Jan 14, 2003
2,811
1
0
Originally posted by: NiKeFiDO
you're tabs are going to be separate DIV's, no? Or are you just replacing the innerHTML of the same div?

You aren't looking for something this simple, are you?
Class for red background:

.myColored {
background-color:#ff0000;
}

If you are doing it via javascript, that's a diferent thing. could be something like:

getElementById('someDiv').style.backgroundColor = '#ff0000';
Click to expand...


This is what i'm trying to do, but the tabs CSS is much more complicated and I cannot figure out howto change it without affecting the layout of the tabs. The Tab's are not divs, but links to plain html pages that contain the content.

Chosonman: Thanks for the suggestion, but i've already used these CSS tabs in most of the application, I just need to make the color change.
 
PhatoseAlpha

PhatoseAlpha

Platinum Member
Apr 10, 2005
2,131
21
81
The color of the tab is actually being determined by the anchor inside the list item that is the tab. Change the background-color of the anchor to change the color of the tab. Either apply it inline, or give the anchor an ID or class and apply it in the style sheet.


Ie, change:

 
You must log in or register to reply here.

TRENDING THREADS

COMPANY
RESOURCES
FOLLOW
Top Bottom