The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

CSS Roll Over Help Needed Please

View previous topic View next topic Go down

CSS Roll Over Help Needed Please

Post by StoneRaven on August 27th 2010, 4:53 pm

Can anyone tell me how to use this code but make the images line up like in the pic?


I want them to line up like this and not one on top of the other like this. But with the above code.


This is my normal code and they line up, but I would like the above code that preloads the images but I cant get them to line up they go one on top of the other.
Code:
#i_icon_mini_index {
background-image: url(http://i34.servimg.com/u/f34/11/44/92/27/i_icon20.png);
width:100px;
height:44px;
}
#i_icon_mini_index:hover {
background-image: url(http://i34.servimg.com/u/f34/11/44/92/27/i_icon21.png);
width:100px;
height:44px;
}
#i_icon_mini_portal {
background-image: url(http://i34.servimg.com/u/f34/11/44/92/27/i_icon22.png);
width:100px;
height:44px;
}
#i_icon_mini_portal:hover {
background-image: url(http://i34.servimg.com/u/f34/11/44/92/27/i_icon23.png);
width:100px;
height:44px;
}
Thanks to anyone that can figure this out for me.


Last edited by StoneRaven on August 29th 2010, 4:10 pm; edited 2 times in total

StoneRaven
Forumember

Male Posts : 142
Reputation : 0
Language : English

Back to top Go down

Re: CSS Roll Over Help Needed Please

Post by boffer10 on August 27th 2010, 5:47 pm

Just a wild guess:

In your example, they declared the vertical position of the background-image as -20px

You haven't declared a position for the bg image?

boffer10
Forumember

Male Posts : 311
Reputation : 10
Language : english
Location : Go Seahawks!

http://squarefoot.creatingforum.com/

Back to top Go down

Re: CSS Roll Over Help Needed Please

Post by Klutz on August 27th 2010, 5:51 pm

Can you paste your HTML for this please?

I can help.

edit: I would also suggest using javascript to make images have roll-over effects.

Klutz
New Member

Male Posts : 9
Reputation : 0
Language : English
Location : United Kingdom

http://www.eo-edit.forumotion.com

Back to top Go down

Re: CSS Roll Over Help Needed Please

Post by StoneRaven on August 27th 2010, 7:05 pm

It's done in the css sheet and can't use html in that.

And yes my images are 44px so I made the adjustments to 44px and -44px as you can see in this code.

Code:
#i_icon_mini_index{
  display: block;
  width: 100px;
  height: 44px;
  background: url("http://i34.servimg.com/u/f34/11/44/92/27/index_12.png") no-repeat 0 0;
}
#i_icon_mini_index:hover
{  background-position: 0 -44px;
}

#i_icon_mini_portal{
  display: block;
  width: 100px;
  height: 44px;
  background: url("http://i34.servimg.com/u/f34/11/44/92/27/portal11.png") no-repeat 0 0;
}
#i_icon_mini_portal:hover
{  background-position: 0 -44px;
}

But this is what happens when I use this code.



StoneRaven
Forumember

Male Posts : 142
Reputation : 0
Language : English

Back to top Go down

Re: CSS Roll Over Help Needed Please

Post by Klutz on August 27th 2010, 8:00 pm

If you want the images to be loaded before a user mouses over it, you can have javascript load the image when the page is loaded.

I'm still pretty unsure of exactly what you are trying to do. I might of read something wrong, please do tell what your main objective is in detail.

Klutz
New Member

Male Posts : 9
Reputation : 0
Language : English
Location : United Kingdom

http://www.eo-edit.forumotion.com

Back to top Go down

Re: CSS Roll Over Help Needed Please

Post by StoneRaven on August 27th 2010, 8:09 pm

It's for the hover over to change images. As it is through the css it has to load 2 images and it isnt as friendly to people with slow connections as it takes it a second or 2 for te second image to load when hovered on. The above code that I wanted to use makes use of 1 image like this one.

That way it has to only load one image which makes the hover over more of a fluid motion and no wait time on the image load. I hope that made sense the way I described it.

StoneRaven
Forumember

Male Posts : 142
Reputation : 0
Language : English

Back to top Go down

Re: CSS Roll Over Help Needed Please

Post by Klutz on August 27th 2010, 8:35 pm

Well, I've never really used hover effects with CSS so I'm afraid I can't help you with your script.

Here's a way you could do it with javascript:
(in your header)
Code:

<head>
<script language="javascript">
<!-- Begin

index1 = new image ();
index1.src = "images/index1.png";
index2 = new image ();
index2.src = "images/index2.png";

portal1 = new image();
portal1.src = "images/portal1.png";
portal2 = new image();
portal2.src = "images/portal2.png";

// End -->
</script>
</head>

and in your html body:

Code:

<a href="index.html">
<span onMouseOver="index.src=index2.src;" onMouseOut="index.src=index1.src;">
<img name="index" src="images/index1.png" border="0" />
</span>
</a>
<a href="portal.html">
<span onMouseOver="portal.src=portal2.src;" onMouseOut="portal.src=portal1.src;">
<img name="portal" src="images/portal1.png" border="0" />
</span>
</a>

This will do exactly what you're looking for but I'm unsure of the alignment, it's old-school, but it always worked fine for me. This will also automatically load the image as the users load the page.

Klutz
New Member

Male Posts : 9
Reputation : 0
Language : English
Location : United Kingdom

http://www.eo-edit.forumotion.com

Back to top Go down

Re: CSS Roll Over Help Needed Please

Post by StoneRaven on August 27th 2010, 8:43 pm

How would I go about using this? I only ask because what I am needing this for is my forums main navigation, so I have no idea where or how to use this since it's not a html page that I have made.

StoneRaven
Forumember

Male Posts : 142
Reputation : 0
Language : English

Back to top Go down

Re: CSS Roll Over Help Needed Please

Post by Klutz on August 27th 2010, 8:51 pm

It's been a long time since I used forumotion but, there should be some options to edit your template in advanced admin cp, I may be wrong.
Anyways, if you do access the template, you will search for the overall_header to enter the code.

I forgot that forumotion limits access to the template, so you may have difficulty adding this code.

I highly advise saving a copy of anything you edit before saving any changes.

edit: In case anyones wondering, I've never tried this with forumotion.
But an example of this I made is used here: http://www.webdump.99k.org/index.php (if linking to other sites is against the rules I'll remove this immediately)

Klutz
New Member

Male Posts : 9
Reputation : 0
Language : English
Location : United Kingdom

http://www.eo-edit.forumotion.com

Back to top Go down

Re: CSS Roll Over Help Needed Please

Post by StoneRaven on August 28th 2010, 2:01 pm

Still needing help with the css for this please.

Sanket this was one of your posts on another site, so I have been told. So maybe you could help me out on this one since you know how to do this already. Please.

StoneRaven
Forumember

Male Posts : 142
Reputation : 0
Language : English

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum