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.
Can't get the content to stay with the background
Aug 14th, 2007, 17:14
Similar Threads
