PDA

View Full Version : Webpage with image as a background. With text in a table.



jackwaller
Feb 24th, 2012, 11:51 AM
Hi,

I am editing an E-learning product for a client and need to link out to a html page with more information on it. The page needs to consist of:

- a black background with an image in the middle of the browser.

- I then need to add some text in a designated area of the image.

I have aligned my background image to the middle. Added a table with a <div> around it for the text moved it into the appropriate position. But when I preview it in my browser and increase the size of the web page it doesn't uniformally scale with the background image.

Any help you guys could give me would be greatly appreciated.

Thanks in advanced

Jack

VIPStephan
Feb 24th, 2012, 01:50 PM
You know, it’s hard to know how your site looks like without seeing any hint whatsoever. Provide a link or your code.

What I can tell already, however, is that a table it wrong in this context.

jackwaller
Feb 24th, 2012, 02:02 PM
http://dl.dropbox.com/u/20107557/middle.jpg

Heres what it looks like at the moment. I want the text to be in the darker panel on the right.

and heres the code:


<div style="position:absolute; left:432px; top:133px; padding-left: 0px; width: 558px;">
<table width="565" border="0">
<tr>
<td valign="top"width="390" height="520"><p class="BodyText">text goes here/p></td>
</tr>
</table>
</div>

VIPStephan
Feb 24th, 2012, 02:53 PM
No, all code. The entire HTML document (and CSS, if applicable). Even better would be a link to the page in question.

jackwaller
Feb 24th, 2012, 02:55 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-image: url();
background-repeat: no-repeat;
background-color: #000;
background-position:center;



}
.BodyText {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 14px;
font-style: normal;
color: #FFF;

}
.Main {
text-align: center;
padding: 0;
margin: 4px;
color: black;
background: yellow;
display: inline;
}

</style>
</head>

<body>
<div align="center">

<img src="coachbg.png" width="994" height="652" align="top" />


<div class="BodyText">
<td background="coachbg.png" width="567" height="22" style="padding-left:26px">&nbsp;</td>
<div style="position:absolute; left:432px; top:133px; padding-left: 0px; width: 558px;">
<table width="565" border="0">
<tr>
<td valign="top"width="390" height="520"><p class="BodyText">Please note that the Porter's five forces powerful framework provides a snapshot of the market. In order to maximise your insights in the market dynamics and somehow reduce Porter's static nature, you need to apply Poter's five forces continually (or several times) over an extended period.</p></td>
</tr>
</table>
</div>
</div>
</body>
</html>

Riku
Feb 24th, 2012, 03:38 PM
If I were you I would do this;

1) Make one wrapper div that wraps all your content together, give it a desired width.

2) Make header, photo and content wrappers.

3) Float divs and give then margins to get some space between them. Don't use position absolute with such an high values (will break down) Also try to avoid huge margins (Over 150px I would say).

Just my opinion and way. Hope this helps abit.

-Riku

jackwaller
Feb 24th, 2012, 04:37 PM
http://dl.dropbox.com/u/20107557/m20_t05_015_coach_icon.html

Heres a link to the website