Struggling to convert this into CSS - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Struggling to convert this into CSS

markwm

10:36 am on Mar 10, 2007 (gmt 0)

10+ Year Member

The idea of this is very simle. The site is 800px wide and sits in the middle of the browser window, on either side of the site I want a different background image aligned against it. If I were doing this with table based layout the code would be as follows:


<head>
<style type="text/css">#bgleft {
 background: url(left_half_circle.gif) right top repeat-y;
}
#bgright {
 background: url(right_half_circle.gif) left top repeat-y;
}
</style>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr> 
<td width="49%" id="bgleft"><img src="pixel.gif" alt="" height="1" width="1"></td>
<td width="2%" valign="top">
My 800px wide content goes here<br>
<img src="foo.gif" width="800" height="1000">
<td width="49%" id="bgright"><img src="pixel.gif" alt="" height="1" width="1"></td>
</tr>
</table></body>
</html>

For reference assume the left bg image if like this: <snip> and the right like this: <snip>

The code above creates a 800px center column with the half circle images on either side fixed, vertically repeating as the background. Horizontal scrollbars only appear if the width of the window is less than 802px.

How would I re-create the table using CSS positioned divs?

[edited by: Robin_reala at 11:10 am (utc) on Mar. 10, 2007]

Robin_reala

11:08 am on Mar 10, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Because you can (currently) only apply one background image to an element you can’t get the effect you want in exactly the way you’re trying, but there’s an easier way. We can apply a background image to <body>, and because your main container is 800px wide we can use this to our advantage. Simply combine your left and right graphics into one image with 800px of whitespace in the middle, then apply it as a centred background image on body:

HTML:

<body>
<div id="content">My content</div>
</body>

CSS:

body {
 background: url(my_image.png) repeat-y 50% 0;
}
#content {
 width: 800px;
 margin: 0 auto;
}

markwm

11:42 am on Mar 10, 2007 (gmt 0)

10+ Year Member

I thought of that already but it doesn't work. The problem is the width of the browser window will often cause a 1px gap at the right edge of the 800px content.

If my BG image is 1000px wide with 800px of white space in the middle and the viewable browser area is of an odd number then the image doesn't get centered properly.

markwm

3:59 pm on Mar 10, 2007 (gmt 0)

10+ Year Member

Robin, just to follow up on this.

It seems if I do as you say and instead of making the white space in the BG image 800px I make it 799px it would cover over the 1px glitch I mentioned above.

As long as the main container has a solid background to cover over the 1px of extra background sitting underneath it, it will work fine.

regards

PSWorx

2:58 pm on Mar 14, 2007 (gmt 0)

10+ Year Member

I would personally wrap your main content in two divs (wrapped in another to allow for centering of all content) which have the width of the image encorporated into the 800px for example 860px, then apply two background images one on the left one on the right, then if at a later date you need to change the width of the site it shouldnt cause too many problems and doesnt need an image to be editied to do so (dont forget the doctype!)

#centeringContainer {
width: 860px;
margin-left: auto;
margin-right: auto;
}

#leftImage {
width: 860px;
background-image: url(?);
background-position: top left;
background-repeat: repeat-y;
}
#rightImage {
width: 860px;
background-image: url(?);
background-position: top right;
background-repeat: repeat-y;
}

#contentContainer {
width: 800px;
margin-left: 30px;
margin-right: 30px;
}

Notice 30px margin either side for contentContainer

<div id="centeringContainer">
<div id="leftImage">
<div id="rightImage">
<div id="contentContainer">
<p>This my content</p>
</div>
</div>
</div>
</div>

Should work, i use something similar for applying extensible (horiz and vert) rounded corners which uses at least 8 container divs :-s