Hover style help!

Hi guys. i been looking for tutorials on how to make a decent navigation link hover like this webbusinessdirectory.com/ please see the "Related Searches:" below.. theres a white hover background when your mouse pointed on any links there.

I want to learn how to do that in css.. i will rep who will reply here with useful answer..

Kojak

 

You can do that with the pseudo-class :hover

<div id="menu"><a href="#">Link 1</a><a href="#">Link 2</a></div>

Code (markup):

#menu a{display:block;float:left;padding:5px 15px;margin:1px;background-color:#0AF;border:solid 1px #00F;color:#FFF;}
#menu a:hover{background-color:#FFF;color:#00F;}

Code (markup):

Use this to test the code above:
http://www.w3schools.com/css/tryit.asp?filename=trycss_link2

 

thanks. but how can i fix the height and width of the div? coz when i putted less word the div compress also and its not uniformed to the navigation..

thanks. rep added

Kojak

 

The somewhat proper way is to put the links in an UL:

<ul>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3 is a bit longer</a></li>
</ul>

Code (markup):

Then style it:

* {
	margin:0;
	padding:0;
}

body {
	background-color:#CCC;
}

ul {
	margin:10px;
	list-style-type:none;
}

ul li a {
	display:block;
	width:200px;
	margin:1px;
	padding:5px 10px 4px;
	border-bottom:solid 1px #00F;
	border-right:solid 1px #00F;
	background-color:#0AF;
	font:bold 12px Arial, Helvetica, sans-serif;
	color:#FFF;
	text-decoration:none;
}

ul li a:hover {
	background-color:#FFF;
	color:#08F;
}

Code (markup):

 

i wouldnt put a width to a link, since the text of the link can be from short to very long.
put a left and right padding instead. with the padding the menu would look better and the width of each link will be rendered depending on how long the text is

 

Well, he's asking for an uniform navigation. Means fixed width for all links.

 

thanks. this will surely help.. i just got one question.. can you explain this code "display:block;" coz when i try to remove it the borders compressed. i just want to know...

thanks again buddy..

Kojak

 

The a tag is an inline element by default, the "display:block;" forces it to be displayed as a block-level element, then you can assign a fixed width to it.

 

Ok thanks for answering that..

Now can you teach me how to add background image in navigation?? i know how to add but i want the background image to be flexible like even i put a lot of text. the will still be intact. i read somewhere that it needs to create a big background image.. but i dont know how to apply it right. this is the tutorial that i read http://tutorials.mezane.org/tabbed-navigation-using-css/#Step_2 but when i tried it the navigation background image is not complete. the right round border is not there when i preview it.. i try it again but still no success..

please advice again..

Kojak

 

I implemented the image navigation to the code above, to understand how it's done you simply need to compare the old code with the new code here:

<ul>
	<li><a href="#"><span>Link 1</span></a></li>
	<li><a href="#"><span>Link 2</span></a></li>
	<li><a href="#"><span>Link 3 is a bit longer</span></a></li>
</ul>

Code (markup):

CSS:

* {
	margin:0;
	padding:0;
}

body {
	background-color:#FFF;
}

ul {
	margin:10px;
	list-style-type:none;
}

/* ul li {
	float:left;
} */

ul li a {
	display:block;
	width:200px;
	margin:1px;
	padding:0 0 5px 10px;
	background:url(http://tutorials.mezane.org/tabbed-navigation-using-css/tab.png) 0 -120px #9BD;
	font:bold 12px Arial, Helvetica, sans-serif;
	color:#FFF;
	text-decoration:none;
}

ul li a span {
	display:block;
	padding:5px 10px 0 0;
	background:url(http://tutorials.mezane.org/tabbed-navigation-using-css/tab.png) 100% -120px #9BD;
}

ul li a:hover {
	background-position:0 -60px;
}

ul li a:hover span {
	background-position:100% -60px;
}

Code (markup):

Uncomment the UL LI selector and remove the width attribute of UL LI A if you want to turn it into a tabbed horizontal menu.

 

thanks.. but in the tutorial the image is full.. theres a round border also on the right side.. but in your css code its not appearing??

btw thanks.

Kojak

 

You mean the right round border doesn't appear or there is no css code?

It's the span that's responsible for displaying the right round border:

ul li a span {
	display:block;
	padding:5px 10px 0 0;
	background:url(http://tutorials.mezane.org/tabbed-navigation-using-css/tab.png) 100% -120px #9BD;
}

ul li a:hover span {
	background-position:100% -60px;
}

Code (markup):

http://xem247.com/vimf/070806-tabbed-menu/example.html

 

I see. its the span making that.. but can you explain a bit about span on how did it do that..? coz im not really familiar on that tag and it works great ..

thanks,
Kojak

 

Span is a 'meaningless' container much like a div - just it is an inline-level element instead of a block-level. While div's can contain almost any tag, spans can only contain inline-level elements. I find it is best used for either the purpose you see here, or to apply things like color, fonts and decorations to small areas of inline text.

With css, you can change the BEHAVIOR to display:block allowing you to place images in it, or position it as needed - my own approach to this problem chops up the image a little differently and does not wrap the entire thing in the span, instead making the span empty but inside the anchor thus:

<li><a href="#">Link 1<span></span></a></li>

This also gives us the option of using full-on image-replacement at a later date that degrades non-image properly without changing the html. (as opposed to the stupid text-indent:-999em nonsense which does not manage that)

There are two different CSS techniques I use to apply the span 'my way' of doing this - first is to make the anchor and span display:block then use absolute positioining inside the anchor to place the span... If you pad the right side, then place the span (as a block) over that padding - boom, done.

The other approach is nice if you want to center them as a single line - centering floats is never all that versatile, but is the only usual way to apply width and height... The technique? display:inline-block; Used to be we couldn't use it because cross-browser support was sketchy (it still is in FF) but by using display:inline-block (and the mozilla specific -moz versions of it) you can use text-align to position them. This now works in IE 5.x/6/7, FF, Opera and Safari meaning it can be deployed 'in the wild' - FINALLY.

Both techniques do the image a little differently as I put the right-side rounded edge on the left before the left edge - this is mostly just to keep the math simple.

I just tossed together an example matching VimF's appearance but with my way of coding it.

First up, the corrected image:


You can see my methods in action here:
http://battletech.hopto.org/html_tutorials/tristate/template.html

and the CSS is here:
http://battletech.hopto.org/html_tutorials/tristate/screen.css

Validates XHTML 1.0 strict, works cross-browser IE 5.5, 6, 7, FF, Opera, Safari, yada, yada, yada.

Only one 'real' hack, which I'm a little annoyed with, but at least it only targets lte IE6.

Oh, word of warning - positioning elements absolute in relation to a position:relative display:inline or inline-block element does NOT work reliably cross-browser (Opera being the worst of the lot on that one). Royal pain in the backside meaning you would likely have to use the display:block version if using cascading menus off the tabs.

Hope this helps

 

Nice deathshadow. I appreciate your effort for making that.. I will try them now.

Rep added

KOjak