...

View Full Version : Resolved Span with CSS Hover



arunforce
05-19-2010, 12:37 AM
<style type="text/css">
.nav_block
{
padding: 4px;
margin-right: 10px;
display: inline;
background-color:#09F;
}

.nav_block a:hover
{
background-color:#FFFFFF;
color: #000000;
padding: 4px;
}
</style>

<span class="nav_block"><a href="test">Home</a></span>

That's my code, but when you hover over the span, there is extra blue padding on the left and right of it, how do I fix it?

shepherd
05-19-2010, 02:11 AM
I'm guessing you want the nav block to change color on hover?

if so this should work:


.nav_block:hover {

}



if it is for a menu you can make each link an image, ofcourse this has its own advantages and disadvantages and is frustrating to get a hold of if you are new to css.

or if this is just to have a background to a link all you need to do is set up a class for nav links and give them a bg color and some padding to make the background area bigger.

let me know if you need help on that.

hope this is helpful.

shepherd
05-19-2010, 03:13 AM
if you mean you want to make a menu like that one this was a really useful tutorial for me:

http://www.webdesignerwall.com/tutorials/advanced-css-menu/

arunforce
05-19-2010, 04:03 AM
Firefox seems to have an issue with it, Chrome doesn't. I'll just convert it to javascript.

Thanks, though.

Kor
05-19-2010, 09:46 AM
Firefox seems to have an issue with it, Chrome doesn't. I'll just convert it to javascript.

Thanks, though.
It looks like you didn't understand the difference between an inline element and a block element

A block element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance). Examples of native block elements: DIV, P...

An inline element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width. Examples of native inline elements: SPAN, A...

You should probably use some block elements, floated:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.nav_block
{
width:100px;
margin-right: 10px;
background-color:#09F;
float:left;
}
.nav_block a
{
text-align:center;
display:block;
padding:4px;
}
.nav_block a:visited{
color:#000;
}
.nav_block a:hover{
background-color:#FFF;
color: #000;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div>
<div class="nav_block"><a href="test">Home</a></div>
<div class="nav_block"><a href="test">Products</a></div>
<div class="nav_block"><a href="test">Contact</a></div>
<div class="clear"></div>
</div>
</body>
</html>

arunforce
05-19-2010, 03:50 PM
It looks like you didn't understand the difference between an inline element and a block element

A block element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance). Examples of native block elements: DIV, P...

An inline element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width. Examples of native inline elements: SPAN, A...

You should probably use some block elements, floated:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.nav_block
{
width:100px;
margin-right: 10px;
background-color:#09F;
float:left;
}
.nav_block a
{
text-align:center;
display:block;
padding:4px;
}
.nav_block a:visited{
color:#000;
}
.nav_block a:hover{
background-color:#FFF;
color: #000;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div>
<div class="nav_block"><a href="test">Home</a></div>
<div class="nav_block"><a href="test">Products</a></div>
<div class="nav_block"><a href="test">Contact</a></div>
<div class="clear"></div>
</div>
</body>
</html>


I know spans are natively inline (I read up on it recently when I was looking at a tutorial), I was swapping between divs and spans originally. I was thinking CSS would be a more efficient way to do it, but eventually I'm probably going to make the links have a dropdown. There's probably some hack to make a CSS dropdown, but it's probably messy.

The reason I wasn't using floating divs was because I didn't want a defined width. It just hit me that I could make them inline and remove the custom width in your example, and it should work fine.

Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum