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:
[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:
<!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
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 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?
Reply With Quote
Bookmarks