HTML Help

jojoradio11 · Joined: 25 Aug 2009 Posts: 2

It's the tablebg image but everytime I remove it it screws up all of the designed elements on the page. Is there a way to move the bar to the far right of the page and create a shadow effect?

the html page can be found at www.reversingthegray.com - the bar coming down the middle is unmistakable.[/url]

sticks464 · Joined: 31 Dec 2006 Posts: 2625

What kills your layout is
Code: <td align="right"><img src="revgray.gif" width="800" height="180"></td>
You have an 800px wide image in a 626px wide table which pushes out the width to 800px.

What I would do to fix it is redo the table background image, giving it an inner width of 800px, and have the shadow effect on each side. They should be about 14px wide each (if my guess is good) making the tablebg.jpg an overall width of 828px.

I would then put all the table content inside a div, make the tablebg.jpg the background of the div and repeat it vertically.
Put the table with a width of 800px inside the div and center it with auto margins.

example:
Code: <div id="container">
<table id="main" cellspacing="0">
<tbody>
<tr>
<td><img src="revgray.gif" width="800" height="180"></td>
</tr>
...rest of content code...
</table>
</div>

css
Code: #container {
width:828px;
margin:0 auto;
background:url(Improving%20your%20appearance,%20men%27s%20grooming%20tips%20_%20TheStylishMan.com_files/tablebg.jpg) repeat-y top left;
}
table#main {
width:800px;
margin:0 auto;
border:0;
padding:0;
background:#fff;
}

jojoradio11 · Joined: 25 Aug 2009 Posts: 2

I realllly appreciate it!