css rollover buttons

This is a discussion on "css rollover buttons" within the Web Page Design section. This forum, and the thread "css rollover buttons are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Oct 19th, 2007, 14:36
Junior Member
Join Date: Oct 2007
Location: england
Age: 23
Posts: 36
Thanks: 0
Thanked 0 Times in 0 Posts
css rollover buttons

hey guys i was wondering if any one could help me out with some css rollovers put myself a bit in the deep end and dont really know how to go about it. heres my progress so far http://www.you-wont.com/new/index.html as you can see i cant even make the div line up yet. basically want a rollover for each postit. thanks
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Oct 19th, 2007, 14:39
Junior Member
Join Date: Jun 2007
Location: Presteigne, UK
Age: 17
Posts: 41
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rollover buttons

Use the a:hover selector to do this - then specify what you want it to do when you hover over. For example, change the background image.

Here's a brief example:

Quote:
a:hover {background: url("newBackground.png") top left no-repeat;}
Hope this helps
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Oct 19th, 2007, 14:47
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rollover buttons

That's the problem with some designs ... they are great for print but a nightmare to put on the web.

You should removed those buttons from the background image.

You are going to have to do some major positioning with all of those.

Good luck!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Oct 19th, 2007, 15:09
Junior Member
Join Date: Oct 2007
Location: england
Age: 23
Posts: 36
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rollover buttons

i have the buttons seprate to the background as well would it be easier to go about it that way.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Oct 20th, 2007, 12:53
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rollover buttons

For sure. You need to take the post its off the background. I would use the post it image as a background and keep your text separate. Using a lists to position the text. Then you can add hover css to the lists.

Since you have post-its tipped, I think you are going to find this impossible. There is no way to tilt text with css.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Oct 22nd, 2007, 08:49
Junior Member
Join Date: Oct 2007
Location: england
Age: 23
Posts: 36
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rollover buttons

lol right so it aint gonna be easy then. Any one wanna do it for me. =). will just have to give it my best shot not very confident tho. cheers for the help tho.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Oct 22nd, 2007, 09:16
Reputable Member
Join Date: Sep 2007
Location: UK
Age: 42
Posts: 130
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rollover buttons

if that whole section is a nav section you can do rollovers so that another image is shown. you would need to space them out a bit tho
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old Oct 22nd, 2007, 09:28
Most Reputable Member
Join Date: May 2007
Location: UK
Age: 27
Posts: 1,111
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rollover buttons

Quote:
Originally Posted by lostyboy View Post
lol right so it aint gonna be easy then. Any one wanna do it for me. =). will just have to give it my best shot not very confident tho. cheers for the help tho.
To be honest, I think you would be better using a simpler design. I don't like your design at all; it looks like an early 90's idea of a killer design.

"Cool, I made a webpage look like a desk, with themed graphics". Cool for you maybe, but no-one else cares -- especially your users, who will find the over-elaborate graphical design distracting. If you're trying to sell your web design services, it's even worse: one look at your site says, "this guy knows absolutely nothing about web design."

Things have moved on. Save yourself the trouble, and make a simple design. I'm sorry to be so brutal, but I hope it may save you many hours of wasted effort.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #9  
Old Oct 22nd, 2007, 09:40
Junior Member
Join Date: Oct 2007
Location: england
Age: 23
Posts: 36
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rollover buttons

So.... how do we do the rollovers then?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #10  
Old Oct 22nd, 2007, 09:45
Most Reputable Member
Join Date: May 2007
Location: UK
Age: 27
Posts: 1,111
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rollover buttons

Quote:
Originally Posted by lostyboy View Post
So.... how do we do the rollovers then?
*sigh*

If you're hell-bent on making this (why?), the only sensible solution is to make an image-map.

Now I feel dirty.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #11  
Old Oct 22nd, 2007, 11:45
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rollover buttons

HAHA!!! I was gonna suggest an imagemap but I was like .... ewwww ... imagemap ...
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #12  
Old Oct 22nd, 2007, 15:08
Most Reputable Member
Join Date: May 2007
Location: UK
Age: 27
Posts: 1,111
Thanks: 0
Thanked 0 Times in 0 Posts
Re: css rollover buttons

Quote:
Originally Posted by karinne View Post
HAHA!!! I was gonna suggest an imagemap but I was like .... ewwww ... imagemap ...
My sentiments exactly.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
variable pass from rollover buttons to AS on frame shwnew Flash & Multimedia Forum 1 Nov 5th, 2007 03:19
Rollover and disjointed rollover on same items? jtyoungs Web Page Design 37 Oct 1st, 2007 14:05
help with fwd/backwrd buttons affecting other buttons typeofdoug Flash & Multimedia Forum 5 Feb 4th, 2007 03:48
Buttons disappear on Rollover ONLY on PC zoelinn Web Page Design 5 Jun 26th, 2006 23:42
Rollover buttons Brooksi Web Page Design 3 Jun 26th, 2006 16:18


All times are GMT. The time now is 14:27.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42