Help with html/css text placing issue

Get Started
1

Hi, I was really wondering if anyone can help me with this little problem I’m having. I’ve programmed sites in flash before, but this is the first time I try using HTML/CSS and I’ve encountered the following problem. The website layout should look something like this

and I’m having problems aligning the text within the image border. The thing is I tried using the absolute div’s but I want the content of the site to stay centered even when the browser get’s minimized.

I’ve attached the html file+images in this zip so you can take a look through the code in case you need to. It would be lovely if someone could explain the method so that i understand what has to be done for future reference.

Thanks !

2

Thank you very much for the response ! The code works very well ( in dreamweaver ) but when I open the index file I only see the text with no background … :frowning:

I attached the files ( my original ones ) again here

PS: I noticed the attachments are still pending approval so I uploaded the files to mediafire http://www.mediafire.com/?kakvcyklxzoacws

3

Can’t open the zip file as yet but I can just imagine. Lets say your image has a width 900 pxls

So your div would be something like:


#content {
    width: 900px; background: url(yourimg.gif) no repeat;
}

The blue bar is approx. 1/3 or 300px of the entire image, so you could follow this up by:


#content p {
    margin: 20px 20px 20px 320px
}

In other words you give the paragraph a margin of 20pxls arround plus on the left an additional 300pxls for the blue bar


<div id="content">
<p>
Your content here
</p>
</div>

Hope this is what you ment