...

View Full Version : I need help with tabs that uses the hover effect



Emaj
07-06-2007, 09:32 PM
Here's a site that I designed http://i2.photobucket.com/albums/y9/emaj/3b73a56d.png
After I designed it, I sliced it up in Adobe Fireworks and exported all the images into a css file. I noticed most Web 2.0 sites has a tab where it changes colors or image when your mouse hovers the tab. I want to apply the same effect to my site. The problem is, how do I do that?

Here is the css for my site:


<html>

<head>

<title>Apple2.png</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="FW MX CSS Layer">

<style type="text/css">
#Header {
position:absolute;
left:62px;
top:53px;
width:666px;
height:162px;
z-index:1;
visibility:visible;
}
#Topnav {
position:absolute;
left:62px;
top:215px;
width:666px;
height:16px;
z-index:2;
visibility:visible;
}
#Content {
position:absolute;
left:62px;
top:231px;
width:666px;
height:532px;
z-index:3;
visibility:visible;
}
#Bottomnav {
position:absolute;
left:62px;
top:763px;
width:666px;
height:13px;
z-index:4;
visibility:visible;
}
#Bara {
position:absolute;
left:91px;
top:179px;
width:63px;
height:13px;
z-index:5;
visibility:visible;

}
#Barb {
position:absolute;
left:221px;
top:179px;
width:63px;
height:13px;
z-index:6;
visibility:visible;
}
#Barc {
position:absolute;
left:351px;
top:179px;
width:63px;
height:13px;
z-index:7;
visibility:visible;
}
#Bard {
position:absolute;
left:481px;
top:179px;
width:63px;
height:13px;
z-index:8;
visibility:visible;
}
body {
background-color: #000000;
}
</style>
</head>

<body>

<div id="Header"><img name="Header_img" src="http://i2.photobucket.com/albums/y9/emaj/trs/Header.png" width="666" height="162" border="0"><br>
</div>
<div id="Bara"><img name="Header_img" src="http://i2.photobucket.com/albums/y9/emaj/trs/bars/Home.gif" width="125" height="31" border="0"></div>
<div id="Barb"><img name="Header_img" src="http://i2.photobucket.com/albums/y9/emaj/trs/bars/Audio.gif" width="125" height="31" border="0"></div>
<div id="Barc"><img name="Header_img" src="http://i2.photobucket.com/albums/y9/emaj/trs/bars/Profile.gif" width="125" height="31" border="0"></div>
<div id="Bard"><img name="Header_img" src="http://i2.photobucket.com/albums/y9/emaj/trs/bars/Contact.gif" width="146" height="31" border="0"></div>
<div id="Topnav"><img name="Top_nav" src="http://i2.photobucket.com/albums/y9/emaj/trs/Top_nav.png" width="666" height="16" border="0"></div>
<div id="Content"><img name="Content_img" src="http://i2.photobucket.com/albums/y9/emaj/trs/Content.png" width="666" height="532" border="0"></div>
<div id="Bottomnav"><img name="Bottom_nav" src="http://i2.photobucket.com/albums/y9/emaj/trs/Bottom_nav.png" width="666" height="13" border="0"></div>

</body>
</html>


I want the tabs to change into a different image when the the mouse hovers over the tab.
e.g
http://i2.photobucket.com/albums/y9/emaj/trs/bars/Home.gif
Would become
http://i2.photobucket.com/albums/y9/emaj/trs/bars/Home_hover.gif
When hovered.
Updated site, with no working links :
http://www.freewebs.com/tharealshaif/test.html
If possible, how do I write in the content area without disrupting the layout, do I switch the content image to a background image?

Keep in mind, I'm a old school web coder (I still use tables but decided to migrate to CSS/XHTML), so I don't know most css codings.

Jutlander
07-06-2007, 09:39 PM
You have to make it a link instead of a div class.



a#home {
background: url(Home.gif);
width: 125px;
height: 31px;
float: left;
}
a#home:hover {
background: url(Home_hover.gif);
width: 125px;
height: 31px;
}




<a href="http://www.example.com" id="home"></a>


You have to set a background to the link and a new background when it is hovered. Have a look at the background properties.

EDIT: also height, width and float must be added for it to work (good I doublechecked :P )

Emaj
07-07-2007, 03:49 AM
Thanks a lot! I finally figured out how to create the effect. I have one problem though, how can I position the tab?

Jutlander
07-07-2007, 11:11 AM
Let it position itself naturally into your layout. HTML is read from left to right and from top to bottom by the browser. If you can post all of your code we might be able to help. :)

Emaj
07-07-2007, 08:07 PM
Thanks for helping me Jutlander :) . Here's the code:

<html>

<head>

<title>Apple2.png</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="FW MX CSS Layer">

<style type="text/css">
#Header {
position:absolute;
left:62px;
top:53px;
width:666px;
height:162px;
z-index:1;
visibility:visible;
}
#Topnav {
position:absolute;
left:62px;
top:215px;
width:666px;
height:16px;
z-index:2;
visibility:visible;
}
#Content {
position:absolute;
left:62px;
top:231px;
width:666px;
height:532px;
z-index:3;
visibility:visible;
}
#Bottomnav {
position:absolute;
left:62px;
top:763px;
width:666px;
height:13px;
z-index:4;
visibility:visible;

}
#Barb {
position:absolute;
left:221px;
top:179px;
width:63px;
height:13px;
z-index:6;
visibility:visible;
}
#Barc {
position:absolute;
left:351px;
top:179px;
width:63px;
height:13px;
z-index:7;
visibility:visible;
}
#Bard {
position:absolute;
left:481px;
top:179px;
width:63px;
height:13px;
z-index:8;
visibility:visible;
}
a#home {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Home.gif);
width: 125px;
height: 31px;
float: left;
right:200px;
top:379px;

}
a#home:hover {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Home_hover.gif);
width: 125px;
height: 31px;

}
body {
background-color: #000000;
}
</style>
</head>

<body>

<div id="Header"><img name="Header_img" src="http://i2.photobucket.com/albums/y9/emaj/trs/Header.png" width="666" height="162" border="0"><br>
</div>
<a href="http://www.example.com" id="home"></a>
<div id="Barb"><img name="Header_img" src="http://i2.photobucket.com/albums/y9/emaj/trs/bars/Audio.gif" width="125" height="31" border="0"></div>
<div id="Barc"><img name="Header_img" src="http://i2.photobucket.com/albums/y9/emaj/trs/bars/Profile.gif" width="125" height="31" border="0"></div>
<div id="Bard"><img name="Header_img" src="http://i2.photobucket.com/albums/y9/emaj/trs/bars/Contact.gif" width="146" height="31" border="0"></div>
<div id="Topnav"><img name="Top_nav" src="http://i2.photobucket.com/albums/y9/emaj/trs/Top_nav.png" width="666" height="16" border="0"></div>
<div id="Content"><img name="Content_img" src="http://i2.photobucket.com/albums/y9/emaj/trs/Content.png" width="666" height="532" border="0"></div>
<div id="Bottomnav"><img name="Bottom_nav" src="http://i2.photobucket.com/albums/y9/emaj/trs/Bottom_nav.png" width="666" height="13" border="0"></div>

</body>
</html>

Jutlander
07-07-2007, 08:41 PM
For some reason IE 6 is playing stupid wiseass right now and won't center the layout even though I've wrapped it in a #wrapper and applied margin: 0 auto and a set width. :eek:

But try with this CSS:



* {
margin: 0;
padding: 0;
}
body {
background: #000;
}
#wrapper {
margin: 0 auto;
width: 680px;
}
#Header {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/Header.png);
width:666px;
height:162px;
}
a#home {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Home.gif);
width: 125px;
height: 31px;
float: left;
}
a#home:hover {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Home_hover.gif);
width: 125px;
height: 31px;
}
a#audio {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Audio.gif);
width: 125px;
height: 31px;
float: left;
}
a#audio:hover {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Audio_hover.gif);
width: 125px;
height: 31px;
}
a#profile {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Profile.gif) center;
width: 125px;
height: 31px;
float: left;
}
a#profile:hover {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Profile_hover.gif) center;
width: 125px;
height: 31px;
}
a#contact {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Contact.gif) center;
width: 140px;
height: 31px;
float: left;
}
a#contact:hover {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Contact_hover.gif) center;
width: 140px;
height: 31px;
}
#menu {
padding-top: 125px;
padding-left: 25px;
}


And this HTML:



<div id="wrapper">

<div id="Header">
<div id="menu">
<a href="http://www.example.com" id="home"></a>
<a href="http://www.example.com" id="audio"></a>
<a href="http://www.example.com" id="profile"></a>
<a href="http://www.example.com" id="contact"></a>
</div>
</div>

<div><img name="Top_nav" src="http://i2.photobucket.com/albums/y9/emaj/trs/Top_nav.png" width="666" height="16" border="0"></div>
<div><img name="Content_img" src="http://i2.photobucket.com/albums/y9/emaj/trs/Content.png" width="666" height="532" border="0"></div>
<div><img name="Bottom_nav" src="http://i2.photobucket.com/albums/y9/emaj/trs/Bottom_nav.png" width="666" height="13" border="0"></div>

</div>

Emaj
07-07-2007, 09:48 PM
THANK YOU! THANK YOU! THANK YOU! THANK YOU! Thanks for cleaning up and adding the appropriate codings. Also I was wondering, how were you able to position the tabs in the right area? and how can make the "content" section writable (so I can write content and articles in it)?
Sorry if I'm asking too much.

Jutlander
07-07-2007, 11:32 PM
OK, try and see if this falls in your taste:



<html>

<head>

<title>Apple2.png</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="FW MX CSS Layer">

<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #000;
}
#wrapper {
margin: 0 auto;
width: 666px;
}
#Header {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/Header.png);
width:666px;
height:162px;
}
a#home {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Home.gif);
width: 125px;
height: 31px;
float: left;
}
a#home:hover {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Home_hover.gif);
width: 125px;
height: 31px;
}
a#audio {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Audio.gif);
width: 125px;
height: 31px;
float: left;
}
a#audio:hover {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Audio_hover.gif);
width: 125px;
height: 31px;
}
a#profile {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Profile.gif) center;
width: 125px;
height: 31px;
float: left;
}
a#profile:hover {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Profile_hover.gif) center;
width: 125px;
height: 31px;
}
a#contact {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Contact.gif) center;
width: 140px;
height: 31px;
float: left;
}
a#contact:hover {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/bars/Contact_hover.gif) center;
width: 140px;
height: 31px;
}
#menu {
padding-top: 125px;
padding-left: 25px;
}
#content {
background: url(http://i2.photobucket.com/albums/y9/emaj/trs/Content.png);
padding: 20px;
}
</style>
</head>

<body>

<div id="wrapper">

<div id="Header">
<div id="menu">
<a href="http://www.example.com" id="home"></a>
<a href="http://www.example.com" id="audio"></a>
<a href="http://www.example.com" id="profile"></a>
<a href="http://www.example.com" id="contact"></a>
</div>
</div>

<div><img name="Bottom_nav" src="http://i2.photobucket.com/albums/y9/emaj/trs/Top_nav.png" width="666" height="13" border="0"></div>

<div id="content">

<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<div><img name="Bottom_nav" src="http://i2.photobucket.com/albums/y9/emaj/trs/Bottom_nav.png" width="666" height="13" border="0"></div>

</div>
<!-- --><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="freewebs.com";urchinTracker();}</script></body>
</html>


What we've done is, add a #content ID and place that between the top and bottom images (because html is read from top and down). The #content has a background assigned to it and you must have content in it for it to expand.

Emaj
07-07-2007, 11:55 PM
Thanks a lot! You have been a real help to me. Not only that I learned a lot from it, such as how to create the hover effect and how to design a site using css. I'm going to check out some CSS tutorials. Well if a run into a problem or need help, i'll be sure to come back to this site. Anyways thanks for your help!
Is there a way to give you a rep?

Jutlander
07-07-2007, 11:58 PM
Yep, by using that scale like button just below my username. :) Thanks.

koyama
07-08-2007, 12:32 PM
For some reason IE 6 is playing stupid wiseass right now and won't center the layout even though I've wrapped it in a #wrapper and applied margin: 0 auto and a set width.
That is because the page is rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html). And in IE quirks mode auto margins are not supported.

You can use e.g this document type to trigger standards mode so that auto margins will work in IE too.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

Jutlander
07-08-2007, 01:18 PM
Ah of course, forgot that there was no doctype. I'm used to things just working, because I use one (HTML 4.01 strict).

Things cleared up then.

Emaj
07-08-2007, 07:21 PM
Thank you guys :) Also I gave rep to Jutlander and Koyama for clearing things up :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum