www.webdeveloper.com
Results 1 to 7 of 7

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

Threaded 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 03:26 PM. Reason: better titel

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