CSS help!

[Ferret]

I'm trying to make a website, and I want to make the the lunks in my navagation bar change 'decoration' when I hover over. I know I can't do this in IE without java, but I should beable to add this sort of thing:

.navbar:hover a {
	text-decoration:underline, overline;
!important}

But it doesn't work. and I'm wondering why

Also if anyone knows how to make a navigation bar stretch down the page, could you let me in on the secret?

Thanks

 

[Ilium]

I'm no expert, but I've been doing some CSS stuff here at work. I had a very similar requirement and here's what my stylesheet looks like:

.right-side a:link {color: white; text-decoration: underline; cursor:help; }
.right-side a:active {color: white; text-decoration: underline;}
.right-side a:visited {color: white; text-decoration: underline;}
.right-side a:hover {color: white; cursor:help; }

Note I have the class name (.right-side) followed by a:hover. I think your syntax is just a little off.

 

[Ilium]

Also if anyone knows how to make a navigation bar stretch down the page, could you let me in on the secret?

Thanks

I don't understand the question. What exactly do you want to do?

 

[IcyCool]

Ilium has the right of it. If that still doesn't work, be sure to follow your specificity rules (do a google search on "css specificity", if you don't know what that is), as that might be what is fouling it up. Also, I just tried it (sans classes) in IE, and it works fine. (For reference, I think the <A> tag's hover is the ONLY psuedo-class that IE actually supports).

As to your second question, what do you mean? Do you mean you want your navigation to always be at the top of your browser window?

 

[Ferret]

For the second part I've seen navigation bars that take up the whole of one side of a page, no matter how much information there is on the page.

Nav | Content
XXXOOOOOOOOOO
XXXOOOOOOOOOO
XXXOOOOOOOOOO
XXXOOOOOOOOOO
XXXOOOOOOOOOO
XXXOOOOOOOOOO
XXXOOOOOOOOOO
XXXOOOOOOOOOO
XXXOOOOOOOOOO

Even if the nav bar only hase a few links on it and doesn't stretch all the way down.

I don't think it liked me having just an a:hover in there I needed an a: link as well.

Thanks guys

 

[Ilium]

Ok, to answer your navbar question, I have to ask one of my own: how are you doing your layout? Are you using tables, or are you using divs? If you don't know the answer to this question we're going to be here for a while.

 

[Ferret]

Lol, I'm using divs! Don't worry! Its so much easier!

So can you help?

 

[Kurashu]

.classname:hover a {
      text-decoration: overline underline; }

No comma. But IE won't support this, you'll need to use .classname a:hover.

As for the page-stretching navigation, you need to use fuax columns. Something like....

div#navi {
     width: 25%;
     float: left;
     margin-left: 1%
     }

div#content {
     margin-left: 27%;
     margin-right: 1%;
     float: left;
     width: 70%;
     border-left: 1px solid #000;
}

That's a basic two column layout.

 

[reanjr]

As for the page-stretching navigation, you need to use fuax columns. Something like....

div#navi {
     width: 25%;
     float: left;
     margin-left: 1%
     }

div#content {
     margin-left: 27%;
     margin-right: 1%;
     float: left;
     width: 70%;
     border-left: 1px solid #000;
}

That's a basic two column layout.[/QUOTE]

That nav won't go all the way down the page, though. There are several ways to accomplish this, though.

First, there's the way it SHOULD be done:

#nav { display: table-cell; }
#content { display: table-cell; }

No IE support, of course. You can use the Dean Edwards IE7 js library to get this to work properly in IE I believe (http://dean.edwards.name/IE7/)

Then there is the common and easy hack of creating an image for the background of the page that makes it APPEAR to have a column. The exact implementation is highly dependent upon several factors, primarily whether you are using liquid layout or not. Just remember you can use percentage value with background-position. Then use repeat-y to make it go all the way down the page.

There are also javascript solutions that measure the height of the page and then set a block or inline-block element to have the same height.

As to the underline/overline thing, use something like this instead if you are having trouble with browser support:

.navbar a {
border-top: 1px none;
border-bottom: 1px none;
}

.navbar:hover a {
border-top: 1px solid;
border-bottom: 1px solid;
}

Also, are you sure you have that :hover in the right place? It would make alot more sense as .navbar a:hover...

 

[Ilium]

Would this work (too lazy to actually test it, of course...):

div#navi {
     width: 25%;
     float: left;
     margin-left: 1%;
     height: 110%;
     }

I've done something similar for a floating div that covers my entire page. It automatically re-sizes with the window. At least under IE.