Section off the main page..

So initially i needed only to have a background image on my front page and placed video over it. I used tables in html to do this. Checking for optimization for stupid ie8 it throws a lot of errors from that section. I now need to place some clickable buttons in there as well and tables withing tables doesn't seem to be the way to go, if I do that ie8 craps out and wont display the rest of my cart.... every other browser seems to be fine, but ie8. Is there a better way to section off images so they can be clickable with the main home page?

Let's see what you have now, so we can offer specific advice.

xoskins . com

On the right side of the banner I would like to add 4 buttons I have created and have each of them clickable in a kind of box shape, 2 buttons wide and 2 buttons high

Sorry this is actually the main page banner and not the page itself

This is currently what is there...

<CENTER>
<TABLE WIDTH="980"
 BACKGROUND="/images/xoskins-banner.png" BORDER="0"  CELLPADDING="8"
 CELLSPACING="1">
   <TR>
<TD></TD>
     <TD WIDTH="490">
<TD HEIGHT="105">
<TD></TD>
     </TR>
<TD><object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/RLsteq0ESqk&hl=en_US&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RLsteq0ESqk&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
     <TD></TD>
   </TR>
</TABLE>
</CENTER>

You want to put the button group to the right of the YouTube box? Your best bet is probably to add a div in tpl_header.php after the banner (or pretty much anywhere outside of another page element's code), and position that div absolutely so it will sit wherever you want it without disturbing anything else. Something like```php

</TABLE> </CENTER></div>

                                    <!-- eof BANNERS GROUPSET 1 -->

<!-- bof header buttons --> <div id="headerButtonGroup"> <a class="button1" href="index.php?main_page=whatever"><img src="images/button1.gif" alt="Button 1 Alt Text" /></a> <a class="button2" href="index.php?main_page=whatever"><img src="images/button2.gif" alt="Button 2 Alt Text" /></a> <br /> <a class="button3" href="index.php?main_page=whatever"><img src="images/button3.gif" alt="Button 3 Alt Text" /></a> <a class="button4" href="index.php?main_page=whatever"><img src="images/button4.gif" alt="Button 4 Alt Text" /></a> </div> <!-- eof header buttons --> ``` Then in your stylesheet, add to the #headerWrapper rule position: relative; and add a new rule:``` #headerButtonGroup { height: 123px; width: 123px; position: absolute; top: 123px; left: 123px; }

#headerButtonGroup a {margin: 2px;}

Thanks that seems to have worked. Now just need to get it to show 2 boxes high and 2 boxes wide instead of the 4 stacked onto eachother.

Got it, just need to resize the images... and then re add it all. thanks for the help.

Putting each button in its own div is not the best way to handle them. It will be easier to put them all in one div as I showed. When you size the buttons and the div right, they will all go in one squarish "box" and will all move together when you reposition the main div.

Your Template Monster template has no definite headerWrapper, and the banner box and buttons are floating between header elements and the main content, so positioning them absolutely will be impossible with different computers/monitors. You need to add a div with an id around the banner and buttons, give it
height: 123px;
width: 980px;
margin: auto;
position: relative;
properties in the stylesheet. Then you can position the buttons absolutely within that.

I also note that you have several errors in your banner table code.```
<!-- bof BANNERS GROUPSET 1 -->
<div><CENTER>

<TABLE WIDTH="980" BACKGROUND="/images/xoskins-banner.png" BORDER="0" CELLPADDING="8" CELLSPACING="1"> <TR> <TD></TD> <TD WIDTH="490"> <TD HEIGHT="105"> <TD></TD> </TR> <TD><object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/RLsteq0ESqk&hl=en_US&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RLsteq0ESqk&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object> <TD></TD> </TR> </TABLE> </CENTER></div>

                                    <!-- eof BANNERS GROUPSET 1 -->

Nearly all of this is bad coding, even where it doesn't break HTML rules. You seem to have used a bunch of empty and fragmentary table cells to get the video positioned where you wanted it. This would be much simpler and not cause validation errors:html
<!-- bof BANNERS GROUPSET 1 -->

<div id="bannerGroupset1"> <div id="videoBox"> <object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/RLsteq0ESqk&hl=en_US&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RLsteq0ESqk&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object> </div> <!-- bof header buttons --> <div id="headerButtonGroup"> <a class="button1" href="index.php?main_page=whatever"><img src="images/button1.gif" alt="Button 1 Alt Text" /></a> <a class="button2" href="index.php?main_page=whatever"><img src="images/button2.gif" alt="Button 2 Alt Text" /></a> <br /> <a class="button3" href="index.php?main_page=whatever"><img src="images/button3.gif" alt="Button 3 Alt Text" /></a> <a class="button4" href="index.php?main_page=whatever"><img src="images/button4.gif" alt="Button 4 Alt Text" /></a> </div> <!-- eof header buttons --> </div>

                                    <!-- eof BANNERS GROUPSET 1 -->

with stylesheet rules:
#bannerGroupset1 {
width: 980px;
height: 480px;
margin: auto;
position: relative;
background: url(/images/xoskins-banner.png);
}

#videoBox {
height: 480px;
width: 333px;
position: absolute;
top: 123px;
left: 123px;
}

#headerButtonGroup {
height: 123px;
width: 123px;
position: absolute;
top: 123px;
left: 123px;
}

#headerButtonGroup a {margin: 2px;}

Ok, I fixed the fragmented garbage.. however we decided rather than to have them in a 2x2 we wanted them positioned on top. Is there a way to do that without separating the divs as i have done?

thx for the tips btw

Also is there a way to help the embeded youtube code validate. It seems to really puke on that..

I dont know if this is why ie8 still has issues displaying or not...

You can have all the buttons in one div (without the <br />), and make the div wide and short in the stylesheet.
The
#headerButtonGroup a {margin: 2px;}
rule can be adjusted to have whatever margin you want, to increase the spacing.

Flash is not my specialty, so someone else will have to advise on what may be wrong with that.

I have changed the margin in
#headerButtonGroup a {margin: 2px;}

to

#headerButtonGroup a {margin: 20px;}

Yet it doesnt change anything. Where is
#headerButtonGroup a mentioned?

I even tried this

#headerButtonGroup  {
    height: 71px;
    width: 980px;
    position: absolute;
    top: 25px;
    left: 25px;
	margin: 0px 0px 100px 0px;;
	}
#headerButtonGroup a {margin: 0px 0px 100px 0px;}

#headerButtonGroup a {margin: 0px 0px 100px 0px;}

The edge sequence for things like this goes top right bottom left, so you are giving 100px bottom margin to the buttons. Try this:

#headerButtonGroup a {margin: 0px 0px 0px 30px;}

or for top/bottom left/right:

#headerButtonGroup a {margin: 0px 15px;}

The Regulus template is supplying that About information in your sidebar as a default display. It will disappear the moment you begin to add widgets to the sidebar. You can create an About page instead.

Thanks.

That did it. little mistakes workin late at night on it lol. Thanks for all your help.

Got the code to validate as well. I will write up a lil article for that... found the fix here