Snitz Forums 2000 - CSS Question?

Snitz Forums 2000

Username:	Password:
Save Password
Forgot your Password?

All Forums

Community Forums

Community Discussions (All other subjects)

CSS Question?

New Topic

Topic Locked

Printer Friendly

Author

Topic

JJenson
Advanced Member

USA
2121 Posts

Posted - 02 January 2008 : 13:12:11

Its been a while since asking one of these questions but I have a quirky thing I want to do and wondered if it was possible with CSS?

Here is my problem I have a set nav that has a background that repeats. I am doing this is a table broken up with td's I want to put a white border on the right of each of these td's except for the last one. Not sure how I would go abotu this this is my code for the nav.

*edit new code below

Thanks for any suggestions

Ok I think I am close just can't get the right syntax. This is what I have got.


.mainNav
{
	background-image: url(images/navBG.jpg);
	background-position: top left;
	background-repeat: repeat-x;
	border-right: 1px solid White;
}

.mainNav td#last
{
	background-image: url(images/navBG.jpg);
	background-position: top left;
	background-repeat: repeat-x;
	border: 0px;
}

.mainNav a:hover, .mainNav a.selected
{
	font-family: Arial;
	font-size: 12px;
	color: #FBB040;
	font-weight: bold;
	text-decoration: none;
}

.mainNav a
{
	font-family: Arial;
	font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}

This is what I have on my tds to display this code:


<td width="134" height="45" align="center" valign="middle" class="mainNav"><a href="index.html" class="selected">HOME</a></td>
  <td width="134" align="center" valign="middle" class="mainNav"><a href="about.html">ABOUT US</a></td>
  <td width="134" align="center" valign="middle" class="mainNav"><a href="retailers.html">RETAILERS</a></td>
  <td width="134" align="center" valign="middle" class="mainNav"><a href="manufacturers.html">MANUFACTURERS</a></td>
  <td width="134" align="center" valign="middle" class="mainNav"><a href="consumers.html">CONSUMERS</a></td>
  <td width="134" align="center" valign="middle" class="mainNav"><a href="siras.html">SIRAS P.I.</a></td>
  <td width="134" align="center" valign="middle" class="mainNav" id="last"><a href="contact.html">CONTACT US</a></td>

Edited by - JJenson on 02 January 2008 13:38:10

muzishun
Senior Member

United States
1079 Posts

Posted - 02 January 2008 : 13:39:37

The simplest way would just be to add class="last" to your final td, then have the following css:


.mainNav td {border-right: 1px solid #fff;}
.mainNav td.last {border: 0;}

The more specific code for the td.last will override the previous setting.

Bill Parrott
Senior Web Programmer, University of Kansas
Co-Owner and Code Monkey, Eternal Second Designs (www.eternalsecond.com)
Personal Website (www.chimericdream.com)

JJenson
Advanced Member

USA
2121 Posts

Posted - 02 January 2008 : 13:44:42

Thanks muz I did that and it actually crapped out my background images mainly cause there was no more mainNav class on the td. But I basically did something like that. This is what I did just got it.

class="mainNav last"

css

.mainNav
{
background-image: url(images/navBG.jpg);
background-position: top left;
background-repeat: repeat-x;
border-right: 1px solid White;
}

.last { border: 0px; }

But at least its working.

thanks for the suggestion.

muzishun
Senior Member

United States
1079 Posts

Posted - 02 January 2008 : 15:25:46

Ah, sorry. I didn't realize the tds were already class="mainNav". What you did is right, just adding a second class to it. I assumed you had a table or other container called mainNav and the tds were inside that.

Glad you got it working.

Bill Parrott
Senior Web Programmer, University of Kansas
Co-Owner and Code Monkey, Eternal Second Designs (www.eternalsecond.com)
Personal Website (www.chimericdream.com)

JJenson
Advanced Member

USA
2121 Posts

Posted - 02 January 2008 : 15:38:52

Yeah sorry should have shown the code. I am trying to learn CSS more so I can use it for different things so trying to expand the horizon lol.

muzishun
Senior Member

United States
1079 Posts

Posted - 02 January 2008 : 16:07:07

CSS is a fantastic tool. I've been using it pretty much exclusively for my layouts for a couple years now (which is one of the reasons I keep trying to get a really good port of Snitz that is 100% CSS).

Bill Parrott
Senior Web Programmer, University of Kansas
Co-Owner and Code Monkey, Eternal Second Designs (www.eternalsecond.com)
Personal Website (www.chimericdream.com)

cripto9t
Average Member

USA
881 Posts

Posted - 02 January 2008 : 16:14:19

If you want all the cells in the table affected you can cut down on the html doing something like this

table#mainNav {}
table#mainNav td {
	          background-image: url(images/navBG.jpg);
	          background-position: top left;
	          background-repeat: repeat-x;
	          border-right: 1px solid White;
                 }
table#mainNav td.last {
	                border: 0px;
                       }
table#mainNav td a {	
                    font-family: Arial;	
                    font-size: 12px;	
                    color: #FFFFFF;	
                    font-weight: bold;	
                    text-decoration: none;
                   }
table#mainNav td a:hover, a.selected {	
                                   color: #FBB040;
                                  }

Then just id the table and add the class for last and selected

likewise if it is just that 1 row, you can single it out by id'ing the table and give the row a class

table#mainNav tr.navClass td {
	          background-image: url(images/navBG.jpg);
	          background-position: top left;
	          background-repeat: repeat-x;
	          border-right: 1px solid White;
                 }

_-/Cripto9t\-_

Topic

New Topic

Topic Locked

Printer Friendly

Jump To:

Snitz Forums 2000

This page was generated in 0.21 seconds.