FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Hover Buttons Completely with CSS





zjosie729
I'm trying to create hover buttons just using css, and I got a template at Webdesign.about.com.

It uses the <ul> tag (unordered lists) to create hover buttons, but they don't work as they should in IE. Also, I want them to position at 0,0. I tried
position:absolute;
top:0;
left:0;
but that doesn't work.

Any suggestions for how to do this?
benjad
Can you post your revised css into a pastebin, or here...

What you might need to do is to put those same attributes inside a body{ } tag. eg..

body {
position:absolute;
top:0;
left:0;
}

If this is way to simply to be the problem, then please do post your new css for us to fix.
novisdesign
try puting it like this

ul:hover {
hover syles
}
hope it helps[/i]
Donutey
what I did on my site was I created a div in css, then had the hover attributes within that div:

Then you can position the div with the links within them.
Code:

.menu
{
width: 900px;
height: 105px;
}

.menu a
{
background-image: url('tab.gif');
color: #FFFFFF;
font: 16px Arial, Verdana, sans-serif;
font-weight: bold;
text-decoration: none;
display: inline;
}

.menu a:hover
{
background-image: url('hover.gif');
color: #FFFFFF;
font: 16px Arial, Verdana, sans-serif;
font-weight: bold;
text-decoration: none;
display: inline;
}


you can specify background colors etc, instead of using a .gif image to create the hover effect.
benjad
More:

Set the body margin:0 . The top and left attribute are applied after the margins are in place. Set the body margin: 0 ....

Also, this is my favorite CSS reference...

http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html
Chris.Parsons
Hey Guys,

Thanks for all the useful information! I was searching for a post like this a few weeks ago. Unfortunately I didn't find it til now and have since written in Javascript instead. That was a bit of a pain considering its my first time using HTML, let alone anything else!

Oh well, better late than never and at least I managed to learn something new! Smile
Related topics
W3C buttons without images
Front page
I made a few more sites.
CSS - CSS Tutorial for skin maker
myspace code problems
CSS Help...
new design - opinions?
Css problem
Help setting a css for the sidebar : Blog
Best method of rollover images?
CSS a:hover and tables problem. Help really needed?
css hover
CSS
Banners, Icons, Favicons, Social Media Icons, you name it.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.