I Need A Bit Of Help With My Site's Css. Hovering over links and whatnot.

Hey guys. I am working on my websites CSS, and you can see said site at http://forums.xisto.com/no_longer_exists/ , and the Cascading Style Sheet is http://forums.xisto.com/no_longer_exists/ . I need help with the navigation links, the links on the left side.

 

There is a problem with them that I just can't solve, I want the hovering Gray box to be a fixed size, like my friend Ricapar. See how his navigation blocks are all one size? I want mine to be like that. I am also going to edit the block so that the gray has a lighter blue border, but I can do the simple things myself.

 

Then, there is one more thing I wanted to do. I want to have it so that the Content section (the one that currently has the "DeathMatchin'" Title.) to have its own little scrollbar, sort of like a sudo-frame. basically, I want the site to stay one fixed height, and this would fix it. I want the site to be 800-1024 pixels tall (ill see which looks better) then with those the little scrolly section.

 

I don't know how to do the top part at all, I just learned CSS this year, coming from archaic HTML lessons, circa 1997.

 

Thanks to anyone who helps,

 

- Arcanis

I guess you want to have navigation bar like this. Oke first you need to do is definition of Navigation bar in CSS which is:

/***************** Navigation *****************/#Menu {padding:0px 0px 0px 0px;margin:0px;width: 109px;}ul {	margin: 0;	padding: 0;	list-style: none;	font: normal 11px verdana, serif;	width: 109px; /* Width of Menu Items */	border-bottom: 1px solid #56A4DC;	}ul li {	position: relative;	}	li ul {	position: absolute;	left: 149px; /* Set 1px less than menu width */	top: 0;	width:70px;	font: normal 10px verdana, serif;	display: none;	}/* Styles for Menu Items */ul li a {	display: block;	text-decoration: none;	color: #605E5E;	background: #A2BFD2; /* IE6 Bug */	padding:2px 1px 2px 10px;	border: 1px solid #56A4DC;	border-bottom: 0;	border-right:0;	}/* Fix IE. Hide from IE Mac \*/* html ul li { float: left; height: 1%; }* html ul li a { height: 1%; }/* End */ul li a:hover { color: #AECBAF; background:#FFFFFF; } /* Hover Styles */ul li#uberlink a:hover { color: #AECBAF; background:#FFFFFF;} /* Hover Styles */  li ul li a { padding: 2px 2px 2px 18px; } /* Sub Menu Styles */  li:hover ul, li.over ul { display: block; } /* The magic */li#uberlink a { color: #605E5E; background:#FFFFFF; }

Div #Menu defines area of your navigation bar. #Menu width defines width of navigation. Ul font defines your fonts, li ul code defines sub-menus but you will probably not need them, but leave them there for future if needed then. border can be set to 0 if not needed, if needed you can change their width (1px=1pixel, 2px=2pixels). Color of borders is changed with changing all codes of borders #56A4DC to your needs. Background and color of links is set by:

ul li a {	color: #605E5E;	background: #A2BFD2; /* IE6 Bug */

Color is for font colors and background for background of links.

Hover effect background and color of font is changed here:

ul li a:hover { color: #AECBAF; background:#FFFFFF; } /* Hover Styles */

Active link are defines by declaration of li id name to this:

<li id="uberlink"><a href="index.htm">Home</a></li>

Meaning that this page has this li id's name set to be active and it is presented with this CSS declaration:

li#uberlink a { color: #605E5E; background:#FFFFFF; }

Again backgeound and color of active links can be changed in this part of code. Other pages will not have index page set as active, but li id will be set to uberlink if we have page named gallery.htm to this code:

<li id="uberlink"><a href="gallery.htm">Home</a></li>

If you don't need active links then just name every link in HTML to:

<li><a href="index.htm">Home</a></li>

You noticed there is no uberlink declaration. Hope this was helpful.

Working example is:here.

Cya.

Then, there is one more thing I wanted to do.  I want to have it so that the Content section (the one that currently has the "DeathMatchin'" Title.) to have its own little scrollbar, sort of like a sudo-frame.  basically, I want the site to stay one fixed height, and this would fix it.  I want the site to be 800-1024 pixels tall (ill see which looks better) then with those the little scrolly section.

<div style="overflow: auto; height: ##; width: ##">[Put content in here]</div>

Change ## with a defined number.

There is a problem with them that I just can't solve, I want the hovering Gray box to be a fixed size

ul li a { display: block; width: x; height: x; }

LOL, I wrote totaly new script, but arcanistherogue just wanted solution for his problem. I guess I have tutorial sindrom.

The easiest way to get the background hover to be the same size is just to put all those in a table like structure using divs like my site and just use the onmouseover part of the link tag to change the class of the div to a new class that has background color the one you want Just check out my code for leftmenu to see how that is done if you want.

The easiest way to get the background hover to be the same size is just to put all those in a table like structure using divs like my site and just use the onmouseover part of the link tag to change the class of the div to a new class that has background color the one you want.

That's not the easiest way - that's a harder way to do it. The hover element in CSS is there so you don't need to use javascript.

Try writing styles for each of the following: #navigation, #navigation ul, #navigation ul li, #navigation ul li a, and #navigation ul li a:hover. Put size rules in #navigation ul li -- that way they will carry over to #navigation ul li a and a:hover.