1 reply [Last post]
drunkenmonkey79
Offline
Regular
Last seen: 16 years 24 weeks ago
Joined: 2005-03-17
Posts: 14
Points: 0

I have the following code which I am playing around with

<style type="text/css">

body {height:100%; text-align:center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin:0; padding:0; background-color: #D0DFDF;
			background-image: url(grid_test.gif);
			/* commented backslash hack\*/
			background-image: url(grid_test.gif);
			/* end hack */
			 background-repeat: repeat-y; background-position: 50%;
}

#container { position:relative;
			width:100px;
			/* commented backslash hack\*/
			width:100px;
			height:100%;
			/* end hack */
			background-color: 003366;
			text-align:left;
			margin:0 auto;
			position:relative;
			border-right:0px solid #fc0;
			border-left:0px solid #fc0;
			}

</style>

and this within my body

<div id="container">

<table width=100% bgcolor="336699">
<tr><td>test</td></tr>
</table>

</div>

Here is a link to my sample page I am working on:

http://members.cox.net/asethi/layout.html

I have two questions.

1. How do I center the background image on the browser, as the browser window is expanded and collapsed. The "center" of the background image is concidered the grey area, so everything to the right of the light green line should always be visible.

2. How do I get the blue table to expand across the whole grey area? While keeping it realative to the light green line?

If anyone knows of any good resources to figure this out on my own, that would also be helpful,

THANKS!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Alignment issues while browser is expanded and reduced...

I am not entirely sure what you mean by your question 1. But try taking the background-image out of the body style and placing it in #container.

For 2, you have given #container a width of 100px. I am not sure how the width of the grey area is determined - the width of your background-image perhaps. If that is the case, then simply set the width of #container to the same as the width of the image.