www.webdeveloper.com
Results 1 to 8 of 8

Thread: layering text over image

  1. #1
    Join Date
    Sep 2010
    Posts
    4

    layering text over image

    I got a simple problem, should be easy to fix except I don't know much beyond basic HTML.

    I'm trying to layer a text over an image, and have both be links to the same link. I used simple tables, with div tags for the text. I'm trying to avoid making an image for every link, trying to go for minimal data transfer needed. So instead of nine images, I have one that serves as the background for all of them. It works in IE, but not in Firefox. What gives?

    Is there a more elegant solution?

    http://staco.net23.net/formstest.html

    Thanks in advance.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Use a background image
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    a:link {color:#FFF;}      /* unvisited link */
    a:visited {color:#FFF;}  /* visited link */
    a:hover {color:#FFF;}  /* mouse over link */
    a:active {color:#FFF;}  /* selected link */
    a:link, a:visited, a:hover, a:active {text-decoration:none;}
    .foo {
    display:block;
    background:#000 url(formstest_files/FormGradient.jpg) no-repeat;
    line-height:5em;;
    height:150px; 
    width:150px; ; 
    color: rgb(255, 255, 255);
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight:bold; 
    font-size: 22px;
    }
    </style>
    
    </head>
    <body>
    <p>
    <a href="http://staco.net23.net/AAA.html" class="foo">AAA</a>
    </p>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Sep 2010
    Posts
    4
    Hi Fang,

    Thanks for the reply. Unfortunately, if I make the image a background, then I can't use it as a link anymore. I would like to use both image and text as links if possible. Got any other methods?

  4. #4
    Join Date
    Sep 2010
    Posts
    4
    Wait, actually let me try it out first... haha thanks Fang!!

  5. #5
    Join Date
    Jan 2010
    Posts
    34
    I believe if you make the entire div an anchor, it should work. Though if you're making it clickable, there's no reason to use a background image.

    With the text directly below the image, use the position & top css properties to move the text up far enough so that it overlaps!

    Happy hunting.

  6. #6
    Join Date
    Sep 2010
    Posts
    4
    Fang,

    Your code works pretty well, except when the text I put in there takes up more than one row. Do you have any ideas? I really appreciate your help so far. http://staco.net23.net/formcss.html


    iRedMedia,

    Can you show me some sample code? I have no idea how to implement what you are talking about... Thanks!

  7. #7
    Join Date
    Jan 2010
    Posts
    34
    HTML Code:
    <img src="image.png" />
    <h1 style="margin-top:-50px">A happy negative</h1>
    Note: using positions is tricky business. I usually don't like relative, because it removes the element from the flow, while leaving behind the space it previously took up, uninhabitable.

    Some may find it *slightly* anoying.

    IE 6 and negative margins anyone?

  8. #8
    Join Date
    Jan 2010
    Posts
    34
    Ah, now I see what you're doing. His code will work. If you set the line height, and with w/h to the correct size of the image, using a BG image for the link is much more semantic. However, if you were using it like a portfolio or something (which i figured you were) then the other way would be more suitable. I recommend giving his way a shot first!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles