1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS Link to a CSS definition

Discussion in 'Web Development' started by ascend6, Oct 3, 2007.

  1. ascend6

    ascend6 New Member

    My CSS sheet has a definition and I replaced the original image with one of my own. The design works fine but I can't figure out how to link to the image as it does not appear in my .HTML pages but in the .CSS sheet.

    Anyone know how I can fix this? The .CSS definition follows:

    #mmagic {
    background: url(images/mynewimage.gif) no-repeat;
    position: absolute;
    top: 46px;
    left: 680px;
    width: 48px;
    height: 238px;
    background-image: url(images/mynewimage.gif);
    }

    I would like to make the "mynewimage.gif" a linked image.

    Thanks for any help you can give.
     
    ascend6, Oct 3, 2007
    #1
  2. elegos

    elegos New Member

    uhm... if I'm understanding what you've requested...
    between the HEAD tags:
    <link href="YOUR.CSS.FILE.css" rel="stylesheet" type="text/css" />

    and between the BODY tags:
    <div id='mmagic'></div>
     
    elegos, Oct 4, 2007
    #2
  3. ascend6

    ascend6 New Member

    More information.

    Actually, I have the following code in my .CSS

    #mmagic {
    background: url(images/talkhockey_blog.gif) no-repeat;
    position: absolute;
    top: 46px;
    left: 680px;
    width: 48px;
    height: 238px;
    background-image: url(images/talkhockey_blog.gif);

    and it is referenced in my .HTML page like this

    <div id="mmagic"> </div>

    No matter what I try, I can't make the image link to an external URL. I have tried surrounding every reference to the .gif with an "<a href=" command that I use everywhere else but it either doesn't show up or the actual text of the command shows up in weird places.

    My assumption is that becasue the background images are defined in .CSS they can not be "linked" by the foreground .HTML program. I wish there were a way around this.
     
    ascend6, Oct 5, 2007
    #3
  4. elegos

    elegos New Member

    ok follow these easy steps:

    between the HEAD tags of your HTML file:

    Code:
    <link href="YOUR.CSS.FILE.css" rel="stylesheet" type="text/css" />
    i.e.
    Code:
    <HTML>
...
<HEAD>
...
<link href="PATH/TO/YOUR.CSS.FILE.css" rel="stylesheet" type="text/css" />
...
</HEAD>
<BODY>
...
<div id="mmagic"></div>[COLOR=Blue][/COLOR]
...
</BODY>
</HTML>
    note that the image's path will be loaded from the HTML position, not the CSS file one (if they're in different folders)
     
    elegos, Oct 5, 2007
    #4