Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question I need help with tabs that uses the hover effect

    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:

    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;
    }
    #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

    Would become

    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.
    Last edited by Emaj; 07-06-2007 at 08:34 PM.

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    You have to make it a link instead of a div class.

    Code:
    a#home {
    background: url(Home.gif);
    width: 125px;
    height: 31px;
    float: left;
    }
    a#home:hover {
    background: url(Home_hover.gif);
    width: 125px;
    height: 31px;
    }
    Code:
    <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 )
    Last edited by Jutlander; 07-06-2007 at 08:57 PM.
    .
    .

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks a lot! I finally figured out how to create the effect. I have one problem though, how can I position the tab?

  • #4
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    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.
    .
    .

  • #5
    New Coder
    Join Date
    Jul 2007
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for helping me Jutlander . Here's the code:
    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>

  • #6
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    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.

    But try with this CSS:

    Code:
    * {
    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:

    Code:
    <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>
    .
    .

  • #7
    New Coder
    Join Date
    Jul 2007
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    OK, try and see if this falls in your taste:

    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">
    * {
    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.
    .
    .

  • #9
    New Coder
    Join Date
    Jul 2007
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #10
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Yep, by using that scale like button just below my username. Thanks.
    .
    .

  • #11
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Jutlander View Post
    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. 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.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">

  • #12
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    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.
    .
    .

  • #13
    New Coder
    Join Date
    Jul 2007
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you guys Also I gave rep to Jutlander and Koyama for clearing things up


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •