Style w/ Image Help

Forum Moderators: not2easy

Message Too Old, No Replies

Style w/ Image Help

Styling the sides of a box

madcat

2:55 pm on May 16, 2005 (gmt 0)

Hi:

You know how somebody has a box that's fixed center say 700px wide. Sometimes they have a gif that fades out extending the length of both sides of the box (for example where regular left/right borders would be)...

Are they using two rules and two images or do you think it's an image that spans the length of the box plus the side effects? I could see just using repeat-y but, maybe there is an easier way.

Thanks for any help.

createErrorMsg

2:57 pm on May 16, 2005 (gmt 0)

Are they using two rules and two images or do you think it's an image that spans the length of the box plus the side effects?

If it's a fixed width box, probably only one image (much easier). If it's a fluid width box, it would have to be two.

cEM

madcat

3:30 pm on May 16, 2005 (gmt 0)

Let's just say it was fluid, how would I do it?

createErrorMsg

4:51 pm on May 16, 2005 (gmt 0)

The test page that follows works. I'm not sure that it's the best approach, as it involves a little too much precise margining for my tastes, but it works to make a fluid layout with a side image on each side. In this example, the side images are each 30px wide. The margins move the content and sidebar in far enough to display the images. Adjust the margin settings to match your image dimensions.

CSS is commented where necessary.

cEM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container{
width:90%;
}
#wrapper_one{
float:right;
width:100%;
background:url(path/to/left_image.gif) left repeat-y;/*left edge*/
}
#wrapper_two{
float:right;
width:100%;
background:url(path/to/right_image.gif) right repeat-y;/*right edge*/
}
#sidebar{
float:right;
width:200px;
background:#369;
text-align:center;
margin-right:30px;/*width of right_image*/
}
#content{
background:#987;
margin-left:30px;/*width of left_image*/
margin-right:230px;/*width of right_image + width of sidebar*/
}
ul{list-style-type:none;}
</style>
</head>
<body>
<div id="wrapper_one">
<div id="wrapper_two">
<div id="sidebar">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</body>
</html>