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
    New Coder
    Join Date
    Jul 2006
    Posts
    81
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Text over images

    This is probably something really simple but its been racking my brain for ages now. Basically what i want to do is write some text over an image. But for some reason it won't let me.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>Untitled Page</TITLE>
    </HEAD>
    <BODY bgcolor="#FFFFFF" text="#000000">
    
    <IMG src="C:\Documents and Settings\Owner\My Documents\My Pictures/logo.gif" style="position:absolute;left:150px;top:1686px;width:699px;height:45px;z-index:37">
    
    
    <DIV style="position:absolute;left:393px;top:1698px;width:150px;height:16px;z-index:1" align="left">
    <FONT style="font-size:13px" color="#000000" face="Arial">Hello, insert text here</FONT>
    </DIV>
    
    
    </BODY>
    </HTML>
    Thanks

  • #2
    New Coder
    Join Date
    Feb 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The only way to do this, is using an image as a background.
    By using a div you can set the background image to the image you wish to write over, and then simply write over the image.

    Lets use your div as an example:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>Untitled Page</TITLE>
    </HEAD>
    <BODY bgcolor="#FFFFFF" text="#000000">
    
    <DIV style="position:absolute;left:393px;top:1698px;width:150px;height:16px;z-index:1; background-image: url('C:\Documents and Settings\Owner\My Documents\My Pictures/logo.gif')" align="left">
    <FONT style="font-size:13px" color="#000000" face="Arial">Hello, insert text here</FONT>
    </DIV>
    
    
    </BODY>
    </HTML>
    Also, try and restrain from using folders and extensions which have spaces... such as "My Pictures". If your images are in the same folder/directory as your webpages you can simple reference them as logo.gif without adding the rest of the directories.
    Last edited by drippin; 02-04-2007 at 06:32 PM.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Wardy,
    make the logo image your background. Then you can put text over it.
    Typically you would have a header div with a background... like this:
    Code:
    #header {
    width: 699px;
    height: 45px;
    background-image: url(My Pictures/logo.gif);
    }
    
    <div id-"header"><p>Hello, insert text here</p></div>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    I see that you are using a lot of deprecated (compared to current techniques) and needless code for what you wanna achieve.
    I won't get into every detail but there is no text attribute and the font element is outdated and shouldn't be used anymore.

    Let me guess, you don't know HTML and CSS and you're using a WYSIWYG (what you see is what you get) editor, right? You should learn a little HTML and CSS because those editors (especially the bad ones) don't help very much and one shouldn't trust them (what we can see as we speak).

    You can place text over an image by making the image a background of the element where the text is inside, like:
    Code:
    <div style="background: url(image path) no-repeat; height: 200px; width: 400px;">text here</div>
    or by using the positioning correctly:
    Code:
    <img src="image path" alt="" style="position: absolute; top: 10px; left: 20px;">
    <p style="position: absolute; top: 10px; left: 20px;>text here</p>
    But I don't recommend the latter method as this isn't very flexible and will lead to more problems if you don't know what yu're doing.

    Edit: Damn, I was too slow again. However, after looking at your code again it seems that the folloing is the actual direct problem:
    Code:
    <IMG ... style="... z-index:37">
    <DIV style="... z-index:1" align="left">
    The image will be above the text unless its z index is lower than the text's. Or to say it vice versa: The element with higher z index will be above elements with lower z index.
    Last edited by VIPStephan; 02-04-2007 at 06:32 PM.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    A very simple example, properly coded (Live Copy):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en-US">
      <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>CF 106694</title>
    
        <style type="text/css">
          html {
            background-color: white;
            }
          p {
            width: 699px;
            height: 45px;
            margin: 0 auto;
            background: url("fire.gif") center;
            color: white;
            text-align: center;
            font: 13px/45px Arial, sans-serif;
            }
        </style>
    
      </head>
      <body>
    
        <p>To boldly go where no one has gone before.</p>
    
      </body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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