www.webdeveloper.com
Results 1 to 7 of 7

Thread: Text on image alignment - a simple one for you brilliant people!

Hybrid View

  1. #1
    Join Date
    Nov 2009
    Posts
    20

    Text on image alignment - a simple one for you brilliant people!

    Have to say, this site has been incredible in helping me with my initial site set up, and now, a redesign (partly aesthetic, partly cleaning up the html - I used iWeb to start with, but have re-written most pages now).

    Bit of a problem though...I'm trying to align some text over an image on pretty much every page (different image and text on each one). As examples of the new v old, take a look at:

    old: http://www.trainingreality.co.uk/mem...0training.html
    new: http://www.trainingreality.co.uk/mem...training1.html

    [new page name will be without the "1" in the final version!]

    The text in white, "memorable training" should be centred over the picture, and it is on my 17" mac screen. On my wife's 15" PC-laptop, it is too far right.

    I'm pretty sure that's because I've set a text box a certain distance left, and it works on a wider screen but not a narrower one. The code I've used is:

    <div align="right"><img src="masterimg/training-to-remember.jpg" alt="memorable training"/></div>
    <div class="textbox" style="height: 195px; position: absolute; left: 810px; top: 100px; width: 406px;">
    <div class="paragraph Title_White">Memorable training</div>
    </div>

    Anyone willing to come up with a beautifully simple, elegant solution? Do I need to specify a page width boundary in the code? Currently I have:

    <body style="background: #f5f3f3">
    <div style="margin-left: auto; margin-right: auto; background: #f5f3f3; width: 750px;">

    Thanks in advance!

    Simon.
    Last edited by SimonRoskrow; 12-16-2009 at 02:26 PM. Reason: better titel

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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=utf-8">
    
    <style type="text/css">
    * {margin:0;padding:0;}
    body {
    font-size:0.9em;
    color: #666;
    width: 750px;
    margin: auto;
    background: #f5f3f3;
    font-family: 'HelveticaNeue-Bold', 'Helvetica Neue', Arial, sans-serif;
    }
    h1 {
    float:right;
    height:436px;
    width:300px;
    margin-left:1em;
    text-align:center;
    background:transparent url(training-to-remember.jpg) no-repeat;
    color: #ffffff;
    font-size: 28px;
    font-weight:bold;
    padding-top:10px;
    }
    h2 {
    margin:1em 0;
    padding-top:10px;
    font-size:1.2em;
    color: #000;
    }
    p {margin:0.5em 0;}
    ol {list-style-position:inside;}
    </style>
    
    </head>
    <body>
    <h1 title="Memorable training">Memorable training</h1>
    <h2>How many training courses seem great at the time, are full of information, present fantastic, robust theories, all of which leaves your mind the moment you get back to your usual workplace?</h2>
    <p>As clients, we've been there, done that. But we've also had some great training, where the people, the environment, and the things that were said and done continue to live. We've learnt from that, and apply those skills in every training course we run.</p>
    <p>It's simple really, but too often missed. so here is our approach:</p>
    <ol>
        <li>Train in great locations</li>
        <li>Run courses in small chunks</li>
        <li>Get people to do new and different things</li>
        <li>Constantly reinforce messages</li>
        <li>Work on significant, personal changes</li>
    </ol>
    <p>Those things, brought together, mean that people continue, spontaneously, to talk about where they were, what they did, what they learnt, and just how great it was. They remember. Training this way is genuinely an investment, not an expense.</p>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Nov 2009
    Posts
    20
    Thanks for the reply, Fang.

    If I've understood correctly (which is not always the case), the "h1" tag you suggest is directly linked to one particular picture - which would mean that I'd need different "h1" versions for every page on the site, whereas currently I have one defined h1 in a .css which is valid throughout the site.

    What I think I'm after is something like this (excuse the bizarre mix of html and English...)

    <div align="right"><img src="masterimg/training-to-remember.jpg" alt="memorable training"/></div>
    <div class="textbox" style="height: 195px; position: in-the-top-middle-of-the-image;">
    <div class="paragraph Title_White">Memorable training</div>
    </div>

    or

    <div class="textbox" style="height: 195px; position: ;">
    <div align="right" class="paragraph Title_White">Memorable training</div>
    <img AS A BACKGROUND src ="masterimg/training-to-remember.jpg" alt="memorable training"/>
    </div>

    Does that make any sense at all?

    I guess the other way of doing it (which is the way I think it originally was when I used the iWeb code) was that the pixel count for the text was from the left of the PAGE, not the left of the SCREEN. Is this easy/possible?

    Thanks again, Simon.

  4. #4
    Join Date
    Nov 2009
    Posts
    20
    Hi Fang

    Have been playing around, and have fixed it with a straight replacement of

    <div align="right"><img src="masterimg/training-to-remember.jpg" alt="memorable training"/></div>
    <div class="textbox" style="height: 195px; position: absolute; left: 810px; top: 100px; width: 406px;">
    <div class="paragraph Title_White">Memorable training</div>
    </div>

    with

    <div class="paragraph Title_White"
    style="float: right;
    height: 435px;
    width:300px;
    margin-left: 1em;
    text-align: center;
    padding-top:10px;
    background: transparent url(masterimg/training-to-remember.jpg) no-repeat; ">
    memorable training</div>

    Should be easier for me to make all the changes on every other page that way. Thanks for all your help - again!

    Cheers, Simon.

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Use elements semantically
    At least 98% of internet users' DNA is identical to that of chimpanzees

  6. #6
    Join Date
    Nov 2009
    Posts
    20
    Hi Fang

    Have taken a look at that link, but have to say I'm none the wiser. Any chance you could explain a little more - and in basic language?!

    Thanks, Simon.

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Every element in html has a semantic use:
    p paragraph of text
    h1 header (title) text
    table tabular data
    ol ordered list
    div structural markup
    etc.

    Look at the example html I posted.
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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