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

@SimonRoskrowDec 16.2009

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: ~~[url]~~http://www.trainingreality.co.uk/memorable%20training.html[/url]
new: ~~[url]~~http://www.trainingreality.co.uk/memorable-training1.html[/url]

[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:

Thanks in advance!

Simon.

to post a comment

HTML

6 Comments(s) _↴

@FangDec 16.2009 — #

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 
 &lt;style type="text/css"&gt;
 * {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;}
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1 title="Memorable training"&gt;Memorable training&lt;/h1&gt;
 &lt;h2&gt;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?&lt;/h2&gt;
 &lt;p&gt;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.&lt;/p&gt;
 &lt;p&gt;It's simple really, but too often missed. so here is our approach:&lt;/p&gt;
 &lt;ol&gt;
 &lt;li&gt;Train in great locations&lt;/li&gt;
 &lt;li&gt;Run courses in small chunks&lt;/li&gt;
 &lt;li&gt;Get people to do new and different things&lt;/li&gt;
 &lt;li&gt;Constantly reinforce messages&lt;/li&gt;
 &lt;li&gt;Work on significant, personal changes&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;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.&lt;/p&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@SimonRoskrowauthorDec 17.2009 — #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: [COLOR="Red"]in-the-top-middle-of-the-image[/COLOR];">

<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 [COLOR="Red"]AS A BACKGROUND[/COLOR] 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.

@SimonRoskrowauthorDec 17.2009 — #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.

@FangDec 17.2009 — #Use elements semantically

@SimonRoskrowauthorDec 18.2009 — #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.

@FangDec 18.2009 — #Every element in html has a semantic use:

[B]p[/B] paragraph of text

[B]h1[/B] header (title) text

[B]table[/B] tabular data

[B]ol[/B] ordered list

[B]div[/B] structural markup

etc.

Look at the example html I posted.

Also in #HTML _↴

mouseover to open embedded flash?webpage repeatedly repainting Browser compatiblity problems

Success!

Help @SimonRoskrow spread the word by sharing this article on Twitter...

Tweet This

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

6 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

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

6 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #HTML _↴