• Some users have recently had their accounts hijacked. It seems that the now defunct EVGA forums might have compromised your password there and seems many are using the same PW here. We would suggest you UPDATE YOUR PASSWORD and TURN ON 2FA for your account here to further secure it. None of the compromised accounts had 2FA turned on.
    Once you have enabled 2FA, your account will be updated soon to show a badge, letting other members know that you use 2FA to protect your account. This should be beneficial for everyone that uses FSFT.

CSS Quick Hover Question

J

JOKER_JOKER

Limp Gawd
Joined
Nov 2, 2005
Messages
471
I've seen countless tutorials in which they explain how to use the hover and link classes. But how would I make it so that when someone hovers over an image, the image changes? I'm doing this for my menu, so that the text changes color, thus I'm going to need a few on each page. How would I give each link and hover class its own identity?
 
This is what I've used: Fast Rollovers with no Preload. You make images twice as wide (or twice as tall) and set the :hover states to move the image around.

This technique works best for making menus and such look good. It separates markup and layout, which is one of the best things about CSS in my opinion. If you have a plain image that needs rolling over, you're probably better off doing something else.
 
I'm kind of interested in your idea of moving the image around, although I don't understand why I should use something else if I'm just using a simple image. Say I have two states, one normal and one hover. What is to stop the entire image from showing up on the page? I have a horizontal menu by the way.
 
Take a look at the code for the example page. It includes this rule:
Code: 
	#menu a {
		display:block;
[color=green]		width:120px;[/color]
		margin: 1em 0; padding:7px 0 10px 20px;
		font: bold 14px/1 sans-serif;
		color:#c60;
		background: url("button.gif") 0 0 no-repeat;
		text-decoration: none;
		}
So since the containing block is only 120 pixels wide, only 120 pixels of the background are visible. Then, when you :hover that containing block, it moves the background over so a different part is visible.

Notice that these rollovers aren't implemented with <img> tags, and the image isn't ever referenced in the HTML file. It's just a bunch of links, except for some styling.

The reason I suggest using a different technique for real images that change is they should be in <img> tags. HTML should be semantic - what you say is what you mean. Saying you want a background when you really want an image to be shown goes against that. Try viewing your site without CSS to see if it's still readable - this is how it'll look to screen readers for blind people, or text-only browsers.
 
JOKER_JOKER said:
I'm kind of interested in your idea of moving the image around, although I don't understand why I should use something else if I'm just using a simple image. Say I have two states, one normal and one hover. What is to stop the entire image from showing up on the page? I have a horizontal menu by the way.
Click to expand...

The article that I linked to earlier: http://www.alistapart.com/articles/sprites/ explains the whole thing to you. Read it, and you will understand what is going on, and why it makes since to do it this way. This article and the one unhappy_mage gave you a link to are talking about exactly the same thing. The only difference is the one on alistapart is a bit more detailed in the why department.
 
I've been trying to figure this out for a few hours now and I'm still not getting it. All the examples that I've looked at use this format:
Code: 
 #skyline {
    width: 400px; height: 200px;
    background: url(test-3.jpg);
    margin: 10px auto; padding: 0;
    position: relative;}
  #skyline li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;}
  #skyline li, #skyline a {
    height: 200px; display: block;}

Can someone explain to me why you need all three id's, and what each one is actually doing? And you'll notice in the 3rd id above, the code reads "#skyline a {....". What is that "a" there for?
 
JOKER_JOKER said:
Can someone explain to me why you need all three id's, and what each one is actually doing? And you'll notice in the 3rd id above, the code reads "#skyline a {....". What is that "a" there for?
Click to expand...

I'll use the code from wellstyled because I think it's the simplest.

The reason there's a #menu thing in front of each rule in that particular file is you only want the rollover effect to happen on links in that one part of the page. So a " #menu a" rule set applies to elements that are inside a block with id="menu" attribute set.
#menu a { // For <a> elements inside a id="menu" block
display:block; // Don't display inline like normal
width:120px; // Prevent the rest of the image from sticking out, and make sure 120px are visible
margin: 1em 0; padding:7px 0 10px 20px; // Center the text in the tag thing
font: bold 14px/1 sans-serif; // Duh
color:#c60; // Set a good color
background: url("button.gif") 0 0 no-repeat; // Start the background in the "default" position
text-decoration: none; // no underline
} #menu a:hover { // When one hovers this element...
background-position: -157px 0; // shift the image over...
color: #E9BE75; // and change the text color
} #menu a:active { // When one clicks the element...
background-position: -314px 0; // shift to third chunk
color:white; // and change text color again.
}

So in the HTML bit, you need a <div id="menu"> with several <a> elements inside it.

Hope that clarifies things. Post your code if you need more help.
 
Here's what I have so far.

CSS:
Code: 
#menubar {
	width: 100&#37;;
	height: 35px;
	}

#menu1 a {
	display: block;
	width: 100px;
	height: 35px;
	background: url("Images/Menu/Home.gif") 0 0 no-repeat;
	}

#menu1 a:hover {
	background: url("Images/Menu/Home.gif");
	background-position: 100px 0;
	}
	
#menu2 a {
	display: block;
	width: 100px;
	height: 35px;
	background: url("Images/Menu/Net Neutrality.gif") 0 0 no-repeat;
	}

#menu2 a:hover {
	background: url("Images/Menu/Net Neutrality.gif");
	background-position: 100px 0;
	}

And the HTML:
Code: 
	<div id="menubar">
		<div id="menu1">
		<a href="Index.html"></a>
		</div>
		<div id="menu2">
		<a href="Net Neutrality.html"></a>
		</div>
	</div>

I think I've got this figured out. But how would I get the two menu items to be side by side instead of above and below like it's doing?

EDIT: Nevermind, I've figured it out. Thanks guys.

I know it's not much yet, but what do you guys think of this thus far? http://www.restrikted.com
 
Take "display:block;" out of your #menu1 a block, or add "clear: none;".
 
I would hate to bother you guys again but I need someone to take a look at my site.
www.restrikted.com
For some reason, I can't get the text to wrap. I tried using "word-wrap: break-word" in the css file but it's not budging. Does anyone know what's happening here?
 
Here's what the site looks like on my machine. Is the "lorem ipsum" supposed to be centered under the rest of the content? Should the box wrap around the buttons as well? Why aren't you using text for those buttons, or at least specifying alt text?

I'll be back in a few minutes with some changes in the markup; in the meantime, describe what you want the page to look like.
 
For the Lorem Ipsum title, no, it's suppose to be on the side like that. And no, the text shouldn't wrap around the buttons, mainly because it's an image. I just added the alt text, I never thought of putting it in there. The reason I'm using an image instead of text is because I wanted my menu buttons to be in the same font as my title, and the font, I'm guessing, isn't supported by most browsers; its called Pump Demi Bold LET. Also, I have never come across a precise way to center text or whatever it is, on a page. The best I know to do is to put the margin-left and margin-right as auto. How would you center text in css? I just know how to center it in html.

EDIT: I sort of stumbled on a solution to the problem. I just decreased the size of the div from 300 to 275 pixels, and the text fits fine on the sidebar, which is weird because the sidebar has a width of 300px. But still, how does one center text in css?
 
JOKER_JOKER said:
For the Lorem Ipsum title, no, it's suppose to be on the side like that. And no, the text shouldn't wrap around the buttons, mainly because it's an image. I just added the alt text, I never thought of putting it in there. The reason I'm using an image instead of text is because I wanted my menu buttons to be in the same font as my title, and the font, I'm guessing, isn't supported by most browsers; its called Pump Demi Bold LET. Also, I have never come across a precise way to center text or whatever it is, on a page. The best I know to do is to put the margin-left and margin-right as auto. How would you center text in css? I just know how to center it in html.

EDIT: I sort of stumbled on a solution to the problem. I just decreased the size of the div from 300 to 275 pixels, and the text fits fine on the sidebar, which is weird because the sidebar has a width of 300px. But still, how does one center text in css?
Click to expand...

Okay. I'd rather have the text as actual text, and lay the background behind it as a real background, but as long as there's a fallback for imageless media it's okay, I guess.

Setting left and right margins to auto is it.

Your site doesn't look any different to me; is it uploaded yet?

Last point: index.html and Index.html shouldn't be different things, probably. Might want to check that out. And linking to "/" is perfectly valid for the "Home" button.
 
unhappy_mage said:
Last point: index.html and Index.html shouldn't be different things, probably. Might want to check that out.
Click to expand...

What? It's weird that you said that because I realized a few days ago that when I uploaded the index as Index.html, the site displayed as a menu with folders for my images and such, but when I changed it back to index.html it was fine. And I just uploaded a second ago.
 
You're probably on Linux hosting. Linux is case sensitive. So Index.html and index.html are two different files. Compare this and this. I noticed you're linking to Index.html in index.html (the "Home" link) so I was suggesting that you point to "/" instead. It'll work the same, but... better :p
 
You must log in or register to reply here.
Back
Top