How to setup this type of page?

port80 · #1 (**permalink**) Feb 16th, 2007, 16:47

Hi All,

Any idea, that how can I setup this type of page border and is there any easy way.......
Please see attached screenshot. I marked red boxes to show what I want. It is left and right line with 3d feeling...

Live look can be seen here...
http://www.thestar.com/sports

Thanks in advance....

moojoo · #2 (**permalink**) Feb 16th, 2007, 19:08

make a graphic and repeat it on the y axis of the body element.

Lchad · #3 (**permalink**) Feb 16th, 2007, 23:55

What graphics program are you using?

In my graphics program. I draw a white rectangle. Then I add a shadow around it. Some programs call it a glow.

karinne · #4 (**permalink**) Feb 18th, 2007, 03:09

This is the background and all you do is apply it to body { } with repeat-y

Code: Select all

body {
  background: #fff url(background.jpg) repeat-y 0 0;
}

something like that

moojoo · #5 (**permalink**) Feb 19th, 2007, 14:00

The graphic only needs to be a few pixels tall as well as it will repeat down the entire page regardless of height.

daygon · #6 (**permalink**) Feb 22nd, 2007, 16:30

I tried setting up this type of page but it kept extending past the image. I dont get why but imma keep practicing

karinne · #7 (**permalink**) Feb 22nd, 2007, 16:35

What do you mean "it kept extending past the image"? You need to set the widths properly.

daygon · #8 (**permalink**) Feb 22nd, 2007, 19:28

Say this ( | ) will represent the ends of the image. this is what it does...

| jgjfgjfgjgjfdgj | bfgnfgnwgfdgfdhgfdhgf

I dont get why. i tryed it but it didnt work for me. I wanted to make a site like that but i never know how do do that and i thought i would be better off not knowing.

Lchad · #9 (**permalink**) Feb 22nd, 2007, 19:37

daygon, are you getting that in dreamweaver by the way?

karinne · #10 (**permalink**) Feb 23rd, 2007, 11:40

Your CSS should look something like this

Code: Select all

body {
  background-color: #fff;
}

#wrap {
  background: #fff url(background.jpg) repeat-y 0 0;
  margin: 0 auto;
  width: 780px;
  padding: 0 10px;
}

And then you HTML

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <link rel="stylesheet" href="stylesheet.css" type="text/css" media="all" />
    
</head>

<body>
<div id="wrap">content in here</div>
</body>
</html>

something like that. If you want to see another example you can check out apica.ca. It's a site I did recently and has a background repeating for the content.

daygon · #11 (**permalink**) Feb 23rd, 2007, 14:40

Ahh ok thanks. that solves alot of problems. Just that one little thing i missed

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to setup PHPMailer	TWD	PHP Forum	0	Jun 6th, 2008 13:51
mysql configuration/setup help	lcsaeteurn	Databases	0	Apr 7th, 2008 03:29
Your Setup/Environment	andrewlondon	Webforumz Cafe	6	Sep 1st, 2007 20:55
Is my site setup correctly?	cj550	Website Planning	4	Apr 3rd, 2007 16:29
Help changing page setup options at runtime	just_the_basix	ASP.NET Forum	1	Jul 20th, 2004 18:45

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
How to setup this type of page?