homepage Welcome to WebmasterWorld Guest from 54.211.231.221
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Left and Right Edge of Page as an Image
Using CSS to Create a Prettier Margin
Oaf357




msg:1193036
 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




msg:1193037
 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




msg:1193038
 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




msg:1193039
 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




msg:1193040
 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




msg:1193041
 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




msg:1193042
 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




msg:1193043
 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">
<!--
body {
background: url(back.gif) repeat;
margin:0;
padding:0;
}
#wrap {
background: #fff;
margin:0 150px 0 150px;
}
-->
</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




msg:1193044
 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




msg:1193045
 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




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

Okay, here you go:

  1. Set the background image to tile
  2. Make a wrapper with a set height
  3. set the overflow on the wrapper to visible
  4. 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">
<!--
body {
background: url(back.gif) repeat;
margin:0;
padding:0;
}
#wrap {
margin:0 150px 0 150px;
height:500px;
background:#fff;
overflow:visible;
}
#content {
background:#fff;
}
-->
</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




msg:1193047
 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




msg:1193048
 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




msg:1193049
 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




msg:1193050
 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




msg:1193051
 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




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

Suzy... That's awesome.

What browsers have you tested it with?

mipapage




msg:1193053
 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




msg:1193054
 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved