Can't get the content to stay with the background

casho · #1 Aug 14th, 2007, 17:14

Hi, I'm having trouble getting my content to move with background. When ever I resize my window the background moves but not the content.

1840dsgn · #2 Aug 14th, 2007, 17:23

Can ytou link to the page? I can't be bothered to downlaod the files

casho · #3 Aug 14th, 2007, 17:28

Sure its http://detabeta.com/site/home.html.

1840dsgn · #4 Aug 14th, 2007, 18:12

what is it supposed to look like?

ios the news bar suppsoed to be outside of the whole big square thing?

casho · #5 Aug 14th, 2007, 18:15

I want it all too stay in the green border.

1840dsgn · #6 Aug 14th, 2007, 18:23

Thats a lot fo code you've got there. You don't need all those divs and spans
and <br/> tags either.

You need a div around the whole thing, one around the links, one around the news and two more within the news for the top and bottom image, one for the footer.

1840dsgn · #7 Aug 14th, 2007, 18:42

Right...i've made a template that you can work on if you like. Its just the basic layout fo your site,

i wouldn't overwrite what yov'e got but this is the way to do it. you have waaay to much code, also notice how my code is nicely laid out. I looked at yours and couldn't be bothered to start editing it.

So the html is:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css"/>
</head>
 
 <body>
 
<!-- COMMENT: The container div keeps all of the content in it, and is used to keep it all centered in the page -->
 
<div id="container">
  
<!-- COMMENT:  Menu div for the menu -->
     <div id="menu">
        <a href="" title="Home">Home</a>
        <a href="aboutme.html" title="About Me">About Me</a>
        <a href="phonepod.html" title="Inventions">Inventions</a>
        <a href="animations.html" title="Animations">Animations</a>
        <a href="ups.html" title="UPS">UPS</a>
        <a href="3rdgen.html" title="iPod Collection">iPod Collection</a>
        <a href="videos.html" title="Videos">Videos</a>
        <a href=".html" title="Forum">Forum</a>
    </div>

 <!-- COMMENT: Heading div will contain all info for the heade - if there is a logo you can set this as the bg image -->    
    <div id="heading">
        <h2>Welcome</h2>
    </div>

 <!-- COMMENT: All other content -->
    <div id="content">
        <p>Welcome to DetaBeta here you can find out more about me also you can view my photos and animation, I hope enjoy your looking at my website.</p>
    
        <p>I created this website so that others could see my work and web skills and I hope to improve my website as a go along. Well I hope you enjoy the layout of my website.</p>
    </div>
    
 <!-- COMMENT: news creates a sidebar for the news -->    
    <div id="news">
        <div class="newsHead">
            <h2>News</h2>
        </div>
        <p>7 August 2007</p>
        <p>Made the navigation buttons smaller also added the Videos section. Also I have changed all the text to Futura.</p>

        <p>24 July 2007</p>
        <p>Updated the Photos section.</p>

        <p>23 July 2007</p>
        <p>Added a header to each page and widened the pages to 850 pixels.</p>

        <p>20 July 2007</p>
        <p>I updated the layout a bit also added <a href="ups.html">UPS</a>.</p>
        <div class="newsBottom"></div>
    </div>


 <!-- COMMENT: footer - used for the footer and to clear both floats -->
    <div id="footer">
    Footer
    </div>

</div>
</body>
</html>

and the CSS:

Code: Select all

/*container has a set width of 850px, it is centered and has a border and padding of 1em to keep the content from the edges */

#container    {
    width: 850px;
    margin: 0px auto;
    border: 1px solid #000;
    padding: 1em;
}

/* news sidebar has a set width of 201px */
#news    {
    width: 201px;
    border: 1px solid #000;
    margin: 1em;
}

/* the content is floated around the sidebar */
#content    {
    float: right;
    width: 600px;
}

#menu    {
    width: 100%;
    border: 1px solid #000;
}

/*the footer is used to clear the float of the content, this keeps it all within the container */
#footer    {
    width: 100%;
    border: 1px solid #000;
    clear: both;
}

All this is is a white page witha few borders showing how itys laid out.

It is a fixed with layout so it will not stretch siodeways, but will stretch downwards...

For your layout the curves on your container will need to be seperate images, so you will have one at the top as a background which has the top curves, then a repeating image which will just be the green border - if you line it up properly with the images then you can prob just use a css border, and then a bottom image which will ahve the bottom two curves.

its a similar thing with the sidebar, again you'll ahve to add a couple of divs in there possibly. and chop your image into three bits.

The problem with it is at the moment is as soon as your content is bigger than the image it will move out the image, with a repeating image it can stretch downwards.

casho · #8 Aug 14th, 2007, 18:58

Thanks for the help you done so much for me I wish I could repay you.

1840dsgn · #9 Aug 14th, 2007, 19:18

No problems.

hope you get on ok with it.

Once you've given it a go if you've still got any problems just as and we'll give you a hand.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Fading the content div into the body background-image?	lmc148	Web Page Design	5	Jan 16th, 2008 05:22
Problem with css content box made from divs and background images	weasel	Web Page Design	3	Aug 9th, 2007 22:48
Crazy Background stay scroller help..	NSF	Web Page Design	4	Jun 14th, 2005 21:13

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Can't get the content to stay with the background