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 8 of 8
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation How to place text on to a picture. html

    What is the proper way to put a text caption on the picture (using html) .

    I seem to have a blind spot here. The DIV will do it, but I have been told that I should not do it that way.

    Any help gladly received.

    effpeetee

    This page to be found at, and code below.

    http://www.exitfegs.co.uk/SteveandPhilb.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">
        
    body {
    	background-color: #000000;
    	font-family: Arial, Helvetica, sans-serif;
    	color: white;
    	font-weight: bold;
          width:100%;
    }
         
    h4 
       {
       font-sixe:1em;
       text-align: center;
       }
    </style>
    
    <title>Steven and Philip.</title>
    
    </head>
    <body>  
        <A href="steve.html"><IMG style="Z-INDEX: 100; LEFT: 92px; POSITION: absolute; TOP: -2px" height=600 src="SteveandPhil.jpg" width=800 ></A>
    
    <div style="Z-INDEX: 101; LEFT: 258px; WIDTH: 549px; POSITION: auto;">
        <center><span class="t14aw"><p><h4>But a nice photo.</h4></p></span></center>
    </div>
     
    </body>
    </html>

  • #2
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Couldn't you use absolute positioning, sure its CSS but its quite simple

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by kosstr12 View Post
    Couldn't you use absolute positioning, sure its CSS but its quite simple
    I'm still struggling with CSS. I'll give it a whirl and see what transpires.
    Should give the purists a laugh if nothing else. Watch this space.

    http://www.exitfegs.co.uk/SteveandPhilb.html

    effpeetee

  • #4
    New Coder
    Join Date
    Jun 2007
    Location
    VA
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How much text are you looking to apply? Are you planning on changing the text? You could always pull it into an image editing software. Less coding involved and you have more control on the text formatting that you do with CSS.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by ddanatzko View Post
    How much text are you looking to apply? Are you planning on changing the text? You could always pull it into an image editing software. Less coding involved and you have more control on the text formatting that you do with CSS.
    ddanatzko,

    It's only a descriptive phrase or so; but I have over 120 pages to use the procedure on.

    CSS is obviously the way to go in the circumstances. I am still with the 'L' plates with CSS I'm afraid, but I will get there in the end.

    I can put the text where I want to using:-

    div style="Z-INDEX: 101; LEFT: 258px; WIDTH: 549px; POSITION: absolute; TOP: 584px; HEIGHT: 50px">
    <center><span class="t14aw"><p style="COLOR: #ffffff; BACKGROUND-COLOR: #00364a">Ybut a nice photo.</p></span></center>
    </div>


    But is it a bit pedestrian and one ot two of the high level coders have suggested that I use another way.


    Thank you for your input. Everything helps.

    effpeetee
    Last edited by effpeetee; 06-02-2007 at 03:33 PM. Reason: Missing text.

  • #6
    New Coder
    Join Date
    Jun 2007
    Location
    VA
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you're going to be adding text to that many photos, it's not very practical to edit each one. Definitely easier with CSS and positioning. If you capture the CSS in a style sheet, you won't have to use inline formatting and you can save yourself some key strokes.

    http://www.w3schools.com has a great tutorial on CSS (as well as others)

  • #7
    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
    See an example document that I made using one of your photos. That’s an example of how you would code your documents. If something doesn’t make sense, let me know.

    I’ve noticed that you carefully position each caption over the image; if you begin to find individual positioning of the captions tedious, then I would either position them above or below the image or in one of the four corners over the image. If you place it in one of the four corners, I would also give the caption text a background color, so that the text is readable regardless of what the colors of a given image are.

    By the way, do note that, in my demo, viewers will miss out on a minor special effect if their browser does not support the :before pseudo‐element and the text-decoration: blink declaration. Internet Explorer is one such browser. The effect is not essential to the page.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thank you Arbitrator,

    I will use this code if you don't mind.

    Although, so far, I have not managed to use it locally.

    I have another thread on similar lines running at the moment. It is to use a style sheet for control of the text on the pages.

    Unfortunately, my css is not up to it, so your input is very welcome.

    Kind regards,

    effpeetee
    Last edited by effpeetee; 06-03-2007 at 12:19 PM.


  •  

    Posting Permissions

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