Left and Right Edge of Page as an Image

Forum Moderators: not2easy

Message Too Old, No Replies

Left and Right Edge of Page as an Image

Using CSS to Create a Prettier Margin

Oaf357

4:15 pm on Mar 28, 2004 (gmt 0)

I would like to design a page so that I could use a small (150px) image along the left and right hand sides of a page.

The thing is I have no idea as to how to do this. Here's a simple text render of what I mean:

¦BORDER¦ content content content ¦BORDER¦
¦BORDER¦ content content content ¦BORDER¦
¦BORDER¦ content content content ¦BORDER¦
¦BORDER¦ content content content ¦BORDER¦
¦BORDER¦ content content content ¦BORDER¦

Any help would be greatly appreciated.

Moby_Dim

4:20 pm on Mar 28, 2004 (gmt 0)

Depends on the structure of the page (tabled or not, fixed width or not, etc.). So, more info needed to try to answer.

mipapage

4:24 pm on Mar 28, 2004 (gmt 0)

You could do it by sticking one of the images in the background of the body element and another in the background of a wrapping div element set to width 100%:

body {
background: url(back.gif) repeat-y left;
margin:0;
padding:0;

}

#wrap {
width: 100%;
background: url(back.gif) repeat-y right;
}

That should do it.

Ahh, your html should look like this:


</head><body><div id="wrap"> 
blah blah 
</div></body>

The wrap needs to wrap everything in order to completely fill down the page.

[edited by: mipapage at 4:33 pm (utc) on Mar. 28, 2004]

Oaf357

4:27 pm on Mar 28, 2004 (gmt 0)

Depends on the structure of the page (tabled or not, fixed width or not, etc.). So, more info needed to try to answer.

It's a brand new page so therefore there is no structure. As for width I want it to be as fluid as possible.

Oaf357

4:31 pm on Mar 28, 2004 (gmt 0)

mipapage,

That worked on the left hand side of the page but not the right.

mipapage

4:35 pm on Mar 28, 2004 (gmt 0)

Right. You need some content to stretch that wrapper down. I'm sure that there are some ways to do this so that it stretches without content, but whenever I've done it my content usually stretches things down properly.

What about just tiling the whole background with the pattern and then laying your content over top?

[edited by: mipapage at 4:37 pm (utc) on Mar. 28, 2004]

Moby_Dim

4:36 pm on Mar 28, 2004 (gmt 0)

Just created this :
..........
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>bo</title>
<style>
body {margin : 0px; padding : 0px; background : url('./img/search.gif') repeat-y top left;}
</style> </head>
<body>
<table width="100%" border="0" style="background : url('./img/search.gif') repeat-y top right;"><tr><td style="padding : 16px;">
<div>I would like to design a page so that I could use a small (150px) image along the left and right hand sides of a page.

The thing is I have no idea as to how to do this. Here's a simple text render of what I mean:

�BORDER� content content content �BORDER�
�BORDER� content content content �BORDER�
�BORDER� content content content �BORDER�
�BORDER� content content content �BORDER�
�BORDER� content content content �BORDER�

Any help would be greatly appreciated.</div>
</td></tr>

</table>
</body></html>
.........

copy and paste. change image URL before.

mipapage

4:40 pm on Mar 28, 2004 (gmt 0)

Here's the tiling idea:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

</style>
</head>
<body><div id="wrap">
blah blah
</div></body>
</html>

I gave the #wrap a background color to 'cover' the tiled image in the body, and a margin of 150px on either side to expose the image.

Oaf357

4:42 pm on Mar 28, 2004 (gmt 0)

Moby_Dim,

That's awesome but I'm still curious as to whether this can be done with no content and if it's possible to do it in all CSS (no tables).

mipapage

4:47 pm on Mar 28, 2004 (gmt 0)

It could be done without trouble if IE worked with min-height, though you could just explicitly set a height, with the obvious drawback that your content may overflow the height.

Maybe one of the resident experts has a trick for this...

mipapage

4:51 pm on Mar 28, 2004 (gmt 0)

Okay, here you go:

Set the background image to tile
Make a wrapper with a set height
set the overflow on the wrapper to visible
make a div called content that will fill the wrapper

This way, wrapper sets the min-height but anytime you go over that min height with your content div, it overflows the wrap. Since overflow is set to visible, yer laughing!

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

</style>
</head>
<body><div id="wrap"><div id="content">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blablah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div></div></body>

[edited by: mipapage at 4:54 pm (utc) on Mar. 28, 2004]

Moby_Dim

4:53 pm on Mar 28, 2004 (gmt 0)

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>bo</title>
<style>
body {margin : 0px; padding : 0px; background : url('./img/search.gif') repeat-y top right;}
#di {position : absolute; top : 0px; left : 0px; height : 600px; width : 16px; background : url('./img/search.gif') repeat-y top left;}
</style> </head>
<body>
<div id="di">
</body></html>

........

Or not this one too? ;)

Oaf357

4:56 pm on Mar 28, 2004 (gmt 0)

Mipapage,

You've been a great help. For the time being I'm going to run with your first solution because I don't really like specifying pixel heights.

Thanks for everyone's help.

mipapage

4:59 pm on Mar 28, 2004 (gmt 0)

Thanks!
Well, you could set the height to em's on the second idea... I just used pixels because it's Sunday, and em's take Sundays off.

Oaf357

5:29 pm on Mar 28, 2004 (gmt 0)

I'm just going to let it flow.

Hopefully I'll have the right amount of content to keep it looking very professional.

Thanks again for the help.

SuzyUK

5:33 pm on Mar 28, 2004 (gmt 0)

good code Mipapage.. shame about those ems being off today though ;)

I took a variation of both your ideas, as you say with min-height it's easy so using min-height and a hack/trick for IE, you can do this and use 100% height so it fills the page regardless of content.

CSS:

html, body {
margin:0;
padding:0;
height: 100%; /* required for ie to complete hack */
}
body {
background: url(image.gif) repeat-y 0% 0%;
}
#wrap {
margin:0;
padding: 0 110px;
background: url(image.gif) repeat-y 100% 0%;
min-height: 100%;
}
/* the hack for IE it treats height like min-height */
* html #wrap {height: 100%;}
#content {background: #ffc;}

the sides are cleared in the wrapper by using padding same or more than the image, this also controls any extra spacing required. (I used a 100px wide gif in my test).. so the content div is not then necessary but it could be useful as a content wrapper..

HTML:

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

If you don't want to use a hack.. the IE height declaration could be put in a Conditional Comment.. and also I'm not sure if IE/Mac honours min-height if it does then you can expand the hack to exclude IE/Mac..

/* hide from mac \*/
* html #wrap {height: 100%;}
/* end hide */

Suzy

Oaf357

6:01 pm on Mar 28, 2004 (gmt 0)

Suzy... That's awesome.

What browsers have you tested it with?

mipapage

6:13 pm on Mar 28, 2004 (gmt 0)

I was going to say wait for SuzyUK, but I didn't want to put the pressure on! ;-]

good code Mipapage

Thanks (blush), I am particularly fond of the repetitive 'blah' content. So much more exciting than that overused 'lorum ipsum' stuff.

SuzyUK

6:18 pm on Mar 28, 2004 (gmt 0)

Thanks...

but the work was mipapage's, the major thing is you have to use a wrapper... I just employed the min-height trick..

>>Browsers
all major Windows.. IE6 (strict & quirks) so should work in IE5+ too.. Opera 7.23, Moz....

like I said I have no Mac testing, but the only problem might be Safari.. I believe it (surprisingly) has a problem with min-height.. and there is no hack that I know of yet to keep it happy!

and like I said IE5/mac.. can't remember if it supports min-height but the expanded "hack" would cover it if/when it's confrmed that it does support min-height

but we're definitely among the smaller percentage of users who wouldn't see what is after all an aesthetic effect..

Suzy