Renegade — Fri, 09 May 2003 09:54:02 +0000

I had a little extra time on my hands so here's a working page of roughly what I would have minus most of the design:

.navigation {
width:148px;
background-color:#1F3145;
font-family:verdana;
font-size:10pt;
}
.nav-link {
display:block;
font-family:verdana;
font-size:10pt;
}
.nav-link:hover {
display:block;
background-color:#000;
}
.nav-ul {
list-style-image:url(bullet.gif);
list-style-type:none;
margin-top:0;
margin-right:10px;
margin-bottom:0;
margin-left:10px;
padding:0;
}

Just copy and paste it

Renegade — Fri, 09 May 2003 09:24:54 +0000

You have the whole navigation in a DIV, either get rid of it, ('cause you don't need it anyway)

Or set the width of the DIV to 148, the same as the TD and float it left
i.e.

becomes

But, personally I would get rid of the DIV, put the style properties in a class and set it in the TD.

i.e.

Home

Current news

Submit news

News archive

Poll archive

becomes:

Home

Current news

Submit news

News archive

Poll archive

with this going into the stylesheet:

.navigation {
width:148px;
background-color:#1F3145;
font-family:verdana;
font-size:10pt;
}

You may also find setting margin:0; and padding:0; to help when using display:block so that you can see where it would then change the values to suit.

mohd — Fri, 09 May 2003 01:14:00 +0000

heh... i dont know how but it screwed up my entire column, th whole thing moved more downwards and more on the right each table

Renegade — Thu, 08 May 2003 10:26:23 +0000

that's what display:block; with background-color:#000 does :S it makes the whole line with the link background black when you hover over it

mohd — Thu, 08 May 2003 05:47:04 +0000

i need the whole line containing the hyperlink to highlight

Renegade — Thu, 08 May 2003 05:39:07 +0000

OK you have this as your CSS

/* Mouse roll over effects */
Ahover:blue}
A{text-decoration:none}
a:hover{background-color:black;}
a{cursor:url(human_cursor.cur);}

It should be:

/* Mouse roll over effects */
A{text-decoration:none}
a:hover{
color:blue;
background-color:black;
}
a{cursor:url(human_cursor.cur);}

If you want just the navigation links to 'highlight' then make a class with it's properties. For example:

.link-nav {
display:block;
color:#00f;
text-decoration:none;
}
.link-nav:hover {
display:block;
background-color:#000;
}

and change

Home

to:

class="link-nav">Home

Note: you must have the display:block; everything else can be changed.

Suzanne — Thu, 08 May 2003 03:53:43 +0000

you can set :hover for any element -- browsers that don't support this will ignore it, and those that do will do it nicely, which leads to nice degradation and generally less annoyance for users.

Or you can find JavaScript and jss to do the same thing, with more code, that also only works in a handful of browsers.

disaster-master — Thu, 08 May 2003 01:54:09 +0000

Not sure what you mean. The hover color isn't working though. You have the page fixed where I can't view source in Internet Explorer and I am too lazy to open another browser and look at it so I can't see your code to see what you have done.

Also, if I might add.....from one webmaster to another.... that cursor hand that you are using is hideous looking.:freak:
You can hardly see it because it is almost the same color as the background and it covers several links so it is hard to tell what link you are pointing at. Do your users a favor and get rid of that. (sorry...just my observation)

mohd — Thu, 08 May 2003 01:11:03 +0000

thanks i read the CSS thing and i found it pretty easy but confusing at first, anyways if you go to my site you and click on a link..... you will see that the script it perfectly working... however i want it to highlighet the whole line the link is on any ideas?

Renegade — Tue, 06 May 2003 07:52:38 +0000

I don't really get what you mean by "highlight" so I'm only guessing here:

.link-class {
display:block;

.link-class:hover {
display:block;
background-color:#0f0;

My link

Hope that's what you were looking for.