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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Linking image using Css

    http://elementalstudios.freehostia.com/ Thats my site.

    Look at the Home button, I wanna link it to the index.

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <link rel="stylesheet" type="text/css" href="firefox-stylesheet.css" />
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="IE-stylesheet.css" />
        <![endif]-->
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Elemental Studios | Montages, Graphics, Teams and more!</title>
    <link rel="shortcut icon" type="image/ico" href="Element2.ico" />
    <style type="text/css">
    <!--
    body {
    	background-repeat: no-repeat;
    }
    -->
    </style></head>
    
    <body>
    
    <div id="content">
    
    <div class="gapless" align="center">
    </div>
    
    <div class="left"></div>
    
    <div class="right">
    </div>
    
    <div class="leftpipe">
    </div>
    
    <div class="home">
    
    </div>
    
    <div class="team">
    </div>
    
    <div class="video">
    </div>
    
    <div class="graphic">
    </div>
    
    <div class="forum">
    </div>
    
    <div class="contact">
    </div>
    
    <div class="rightpipe">
    </div>
    
    <div class="headercontent">
    <h1><img src="images/Welcome.png" alt="Welcome" width="175" height="83" /></h1>
    </div>
    
    <div id="contentbox">
      <p align="center">	Hello, and Welcome to Elemental Studios. This section of Elemental Studios is for Halo 2. We are here to help you with you multimedia needs, anything from video editing, to Photoshop, and to your Halo 2 skills! We have a clan, and teams being set-up. So check out our forum, or maybe you would like to see graphicss gallery, or check out the videos! Enjoy you stay, here!</p>
      <p align="center" class="textcontent">&nbsp;</p>
    </div>
    
    <div class="footer">
    </div>
    
    </div>
    
    
    </body>
    </html>
    CSS for Home
    Code:
    .home {
    background:url(images/Home.png);
    width:70px;
    height:36px;
    margin: 0 auto;
    float:left;
    }
    So Umm how do I link it, in Dreamweaver I click the folder button the link and click index.html hit ok but it does put any text there, I wrote it in and then it disappeared. Thanks in advance.

  • #2
    New Coder
    Join Date
    Mar 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you're using Dreamweaver create an image map over the image and link each map.

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    I checked out the Dreamweaver help I cant find anything on making an image map, could you explain a bit more please?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Change
    Code:
    <div class="home">
    
    </div>
    to
    Code:
    <a class="home" href="#">Home Link</a>
    Then this
    Code:
    .home {
    background:url(images/Home.png);
    width:70px;
    height:36px;
    margin: 0 auto;
    float:left;
    }
    to this
    Code:
    .home {
    background:url(images/Home.png);
    width:70px;
    height:36px;
    margin: 0 auto;
    float:left;
    text-indent:-9999em; /*hide text for normal browsers*/
    }
    Goes to show that copying and pasting isn't always the best method especially if you don't understand what something is doing. I suggest you actually learn this stuff rather than rely on everyone else to do things for you.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    err..Thanks.


  •  

    Posting Permissions

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