Section off the main page..

[new2u]

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?

[gjh42]

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

[new2u]

xoskins . com

[new2u]

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

[new2u]

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

[new2u]

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>

[gjh42]

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

</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;}

Adjust the numbers to suit.

[new2u]

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.

[new2u]

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

[gjh42]

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:

                    <!-- 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;}