Help - Search - Members - Calendar
Full Version: Help!
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
dyindyinjohnsonlayouts
Jul 22 2009, 03:41 AM
Okay, I finally got the rollover thing down except I need to move my rollover image somewhere else.
How?



CODE
<style type="text/css">
div, table, tr, td, tbody {background-color:white;}

a.home{
display: block;
height: 50px;
width: 116px;
overflow: hidden;
background-image: url("http://img24.imageshack.us/img24/2995/homexzf.png");
background-position: center;
background-repeat: no-repeat;
}

a.home:hover{
background-image: url("http://img24.imageshack.us/img24/9471/home2w.png");
background-position: center;
background-repeat: no-repeat;
}
</style>


<a href="http://www.google.com/" class="home">
Mikeplyts
Jul 22 2009, 04:02 AM
Exactly what do you mean? Do you need to position the rollover?

Just make DIV container to position it:
CODE
<div style="position:absolute; top:###px; _top:###px; left:50%; _left:50%; margin-left:-###px; _margin-left:-###px;">
<a href="http://www.google.com/" class="home">
</div>
dyindyinjohnsonlayouts
Jul 22 2009, 04:04 AM
Thank you! I was just putting the DIV container in the wrong place.
Thanks!
Mikeplyts
Jul 22 2009, 04:05 AM
lol, no problem. happy.gif
dyindyinjohnsonlayouts
Jul 22 2009, 04:37 AM


Okay how do I get the rollovers in one line? (Not stacked)

CODE
<style type="text/css">
div, table, tr, td, tbody {background-color:transparent;}

a.home{
display: block;
height: 50px;
width: 116px;
overflow: hidden;
background-image: url("http://img24.imageshack.us/img24/2995/homexzf.png");
background-position: center;
background-repeat: no-repeat;
}

a.home:hover{
background-image: url("http://img24.imageshack.us/img24/9471/home2w.png");
background-position:center;
background-repeat: no-repeat;
}

a.message{
display: block;
height: 50px;
width: 176px;
overflow: hidden;
background-image: url("http://img193.imageshack.us/img193/5378/message2p.png");
background-position: center;
background-repeat: no-repeat;
}

a.message:hover{
background-image: url("http://img22.imageshack.us/img22/9484/messagexma.png");
background-position:center;
background-repeat: no-repeat;
}

a.comment{
display: block;
height: 50px;
width: 192px;
overflow: hidden;
background-image: url("http://img30.imageshack.us/img30/4681/commentlhk.png");
background-position: center;
background-repeat: no-repeat;
}

a.comment:hover{
background-image: url("http://img33.imageshack.us/img33/2288/comment2.png");
background-position:center;
background-repeat: no-repeat;
}
</style>



<div style="position:absolute; top:20px; _top:50px; left:50%; _left:50%; margin-left:-250px; _margin-left:-150px;">

<a href="http://home.myspace.com/index.cfm?fuseaction=user" class="home"></a>
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX" class="message"></a>
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX&MyToken=8b2108be-2301-4485-a399-e782c86fa854" class="comment"></a>

</div>
Mike
Jul 22 2009, 05:23 AM
Replace your code with this:

CODE
<style type="text/css">
div, table, tr, td, tbody {background-color:transparent;}

a.home{
height: 50px;
width: 116px;
overflow: hidden;
background-image: url("http://img24.imageshack.us/img24/2995/homexzf.png");
background-position: center;
background-repeat: no-repeat;
}

a.home:hover{
background-image: url("http://img24.imageshack.us/img24/9471/home2w.png");
background-position:center;
background-repeat: no-repeat;
}

a.message{
height: 50px;
width: 176px;
overflow: hidden;
background-image: url("http://img193.imageshack.us/img193/5378/message2p.png");
background-position: center;
background-repeat: no-repeat;
}

a.message:hover{
background-image: url("http://img22.imageshack.us/img22/9484/messagexma.png");
background-position:center;
background-repeat: no-repeat;
}

a.comment{
height: 50px;
width: 192px;
overflow: hidden;
background-image: url("http://img30.imageshack.us/img30/4681/commentlhk.png");
background-position: center;
background-repeat: no-repeat;
}

a.comment:hover{
background-image: url("http://img33.imageshack.us/img33/2288/comment2.png");
background-position:center;
background-repeat: no-repeat;
}
</style>



<div style="position:absolute; top:20px; _top:50px; left:50%; _left:50%; margin-left:-250px; _margin-left:-150px;">

<a href="http://home.myspace.com/index.cfm?fuseaction=user" class="home"></a>
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX" class="message"></a>
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX&MyToken=8b2108be-2301-4485-a399-e782c86fa854" class="comment"></a>

</div>
theerinkal
Jul 22 2009, 05:44 AM
^^ You could've just told him to remove the display: block; in the code.
Mike
Jul 22 2009, 08:16 AM
OMG you noticed the difference! Want a cookie?
dyindyinjohnsonlayouts
Jul 22 2009, 02:26 PM
QUOTE(Mike @ Jul 22 2009, 05:23 AM) *
Replace your code with this:

CODE
<style type="text/css">
div, table, tr, td, tbody {background-color:transparent;}

a.home{
height: 50px;
width: 116px;
overflow: hidden;
background-image: url("http://img24.imageshack.us/img24/2995/homexzf.png");
background-position: center;
background-repeat: no-repeat;
}

a.home:hover{
background-image: url("http://img24.imageshack.us/img24/9471/home2w.png");
background-position:center;
background-repeat: no-repeat;
}

a.message{
height: 50px;
width: 176px;
overflow: hidden;
background-image: url("http://img193.imageshack.us/img193/5378/message2p.png");
background-position: center;
background-repeat: no-repeat;
}

a.message:hover{
background-image: url("http://img22.imageshack.us/img22/9484/messagexma.png");
background-position:center;
background-repeat: no-repeat;
}

a.comment{
height: 50px;
width: 192px;
overflow: hidden;
background-image: url("http://img30.imageshack.us/img30/4681/commentlhk.png");
background-position: center;
background-repeat: no-repeat;
}

a.comment:hover{
background-image: url("http://img33.imageshack.us/img33/2288/comment2.png");
background-position:center;
background-repeat: no-repeat;
}
</style>
<div style="position:absolute; top:20px; _top:50px; left:50%; _left:50%; margin-left:-250px; _margin-left:-150px;">

<a href="http://home.myspace.com/index.cfm?fuseaction=user" class="home"></a>
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX" class="message"></a>
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX&MyToken=8b2108be-2301-4485-a399-e782c86fa854" class="comment"></a>

</div>

yeah that made them just disappear.
Mikeplyts
Jul 22 2009, 02:37 PM
Put them all in a separate DIV container.

CODE
<div style="position:absolute; top:###px; _top:###px; left:50%; _left:50%; margin-left:-###px; _margin-left:-###px;">
<a href="#" class="home">
</div>

<div style="position:absolute; top:###px; _top:###px; left:50%; _left:50%; margin-left:-###px; _margin-left:-###px;">
<a href="#" class="message">
</div>

<div style="position:absolute; top:###px; _top:###px; left:50%; _left:50%; margin-left:-###px; _margin-left:-###px;">
<a href="#" class="comment">
</div>

Replace the pound symbols with the appropriate values. You don't have to remove the display:block; from your codes. aniwink.gif


EDIT:
Or are you putting them all in one DIV container? If you are, you should use a different rollover code. mellow.gif
dyindyinjohnsonlayouts
Jul 22 2009, 02:42 PM
Well I had them all in one DIV container but putting them in separate ones like you said, worked.
Mikeplyts
Jul 22 2009, 02:46 PM
Ok. There is another code you could use though that will allow you to have them all in on DIV container. I could tell you if you want. shrug.gif
dyindyinjohnsonlayouts
Jul 22 2009, 02:50 PM
If you want to, I mean if the code is easier, than sure.
Mike
Jul 22 2009, 02:52 PM
Try this method.
Mikeplyts
Jul 22 2009, 03:02 PM
^ What Mike posted can work, or you could also try one of my favorite methods which can be found here. wink.gif
dyindyinjohnsonlayouts
Jul 22 2009, 03:07 PM
^That one is kinda confusing. XD
But with the one Mike posted works, except for having them staked up again. mad.gif
Mikeplyts
Jul 22 2009, 03:18 PM
You could also do the same method that I linked to but just more simpler.



Simply open the image that represents the normal state of the rollover. Now make the canvas size's height twice as high as the original image's height. Make sure your normal state is in the top half. Now paste the image that represents the hover state of the rollover into the bottom half. Save that image and upload it to the web.

Once you have the URL of the image, use this code:
CODE
<style>
a.CLASS_NAME {width:###px; height:###px; background-image: url("URL_OF_SAVED_IMAGE"); background-repeat:no-repeat; background-position:top left;}
a.CLASS_NAME:hover {width:###px; height:###px; background-image: url("URL_OF_SAVED_IMAGE"); background-repeat:no-repeat; background-position:bottom left;}</style>

I assume you know how to replace the fillers and such. One thing though, when you're putting in the value for the height, put half of the height of the saved image since your saved image is double the height of the rollover. We do this because you'll notice for the background position, we have top left as the value before the rollover and bottom left as the value after rollover. Since we inserted half the height, we cut the saved image in two halves and the background position tells the image to display either the top or bottom half.

Now, all you have to do is add your DIV code and your done. (Remember, just repeat the first code for every new rollover.)
CODE
<div style="position:absolute; top:###px; _top:###px; left:50%; _left:50%; margin-left:-###px; _margin-left:-###px;">
<a href="#" class="CLASS_NAME"> <a href="#" class="CLASS_NAME2"> <a href="#" class="CLASS_NAME3">
</div>

Just replace the fillers accordingly.

Hopefully that wasn't too confusing. tongue.gif
dyindyinjohnsonlayouts
Jul 22 2009, 03:20 PM
Filters as in the class name?
Mikeplyts
Jul 22 2009, 03:21 PM
Yep. Along with the pound signs and all that mumbo jumbo.
dyindyinjohnsonlayouts
Jul 22 2009, 03:25 PM
Haha. Okay. And for the images it would look like this:
Correct?
Mikeplyts
Jul 22 2009, 03:58 PM
Correct. _smile.gif
Mike
Jul 22 2009, 04:25 PM
My method should be able to display the links on a single line. Just remove display: block; from each rollover class.
Mikeplyts
Jul 22 2009, 04:36 PM
^Or that. haha. laugh.gif



I didn't even see his codes had display:block; in them. LOL. xD
dyindyinjohnsonlayouts
Jul 22 2009, 04:54 PM
I'm just going to use my old code, and us seperate DIV Containers, that seems to work the best. And the quality of the images looks best when I do it that way.
Thanks you two!
Mike
Jul 22 2009, 04:58 PM
Is this alright for closing then?
fixtatik
Jul 22 2009, 04:59 PM
Float, float, float.

Whenever you have something with a block display, and you want them lined up next to each other, use float:left;. You can also use display:inline-block;, but that doesn't work in older browsers, specifically Firefox 2.
dyindyinjohnsonlayouts
Jul 22 2009, 05:27 PM
^ Thanks. Works, much easier than having like 6 Div Containers.


If I wanted to put a space between each rollover, instead of being pushed together, wouldn't I use: &nbsp;?
Mike
Jul 22 2009, 05:37 PM
Posts merged.

That should do. If not, just add a spacer image in between or something. Or you can add padding on each link to move the next link over.
alek
Jul 26 2009, 07:23 PM
or you could always add positioning elements to the link itself, this really cleans up your code

CODE
<style type="text/css">
div, table, tr, td, tbody {background-color:white;}

a.home{
display: block;
height: 50px;
width: 116px;
overflow: hidden;
background-image: url("http://img24.imageshack.us/img24/2995/homexzf.png");
background-position: center;
background-repeat: no-repeat;

position:absolute;
top: #px;
left: #px;
}

a.home:hover{
background-image: url("http://img24.imageshack.us/img24/9471/home2w.png");
background-position: center;
background-repeat: no-repeat;
}
</style>


<a href="http://www.google.com/" class="home"></a>
Mike
Jul 26 2009, 07:30 PM
^That's recommended if the links are on different spots. In this case, it's unnecessary because the links are all in one line. Anyway, this is already resolved so I'll go ahead and close it. OP, PM me if you need it reopened. Topic closed & moved.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.