Frame Middle Column Issue?

[Dthomas]

I wanted to have the homepage look like this:
http://paracordstore.3dcartstores.co...PCS_mockup.jpg

All is good when I add the first image. However when I go to add the 3 boxes below that first image the frame puts the background box around all of it, which gets you this:

Welcome to Paracord Store - Sample Slogan


Is there a simple way I can end the middle column after the first image and just have the set of 3 boxes look like the jpg.

[Dthomas]

Any one have any tips?

[tclifesafety]

I can't really tell what you're asking.

I see the 3 boxes (Hardware, Paracord, Bracelets), but I'm not sure which background box you're referring to.

Do you not want the grey box around the Category names?

[Dthomas]

Sorry if was not clear.

The box im referring too is the big box around everything (the large picture and 3 boxes)

I want it to look like the jpg, with having the main large image in that grey box and then have the three boxes floating? (may not be the right word) under it.

My issue is that when i go to put both of them on the home page i get what you see now because in the frame.html there is a <--START: middle column--> and <--END: middle column--> that put everything into that so it has the grey box around it. But what i want is just to have the main large image in that box and be able to just the 3 box image below outside of any box.

let me know if i can explain anything else. thanks for asking this has been driving me insane.

[tclifesafety]

See if this accomplishes what you want:

<!--start middle column-->
                  <td align="center" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="100%">
                      <tbody><tr>
                        <td width="42"><img src="assets/templates/v40010/images/grunge-TopL.png" alt="" height="44" width="42"></td>
                        <td style="background: url(assets/templates/v40010/images/grunge-TopM.png) repeat-x;"><img src="assets/templates/v40010/images/spacer.gif" alt="" height="44" width="1"></td>
                        <td width="48"><img src="assets/templates/v40010/images/grunge-TopR.png" alt="" height="44" width="48"></td>
                      </tr>
                      <tr>
                        <td style="background: url(assets/templates/v40010/images/grunge-leftBG.png) repeat-y;" align="right" valign="top"><img src="assets/templates/v40010/images/grunge-left.png" alt="" height="340" width="42"></td>
                        <td class="data" align="center" valign="top" width="100%">

<style type="text/css">
.boxes
(
background-color;#000000
)
</style>


<table border="0" cellpadding="0" cellspacing="0" width="98%">
   <tbody><tr>
    <td align="center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="/assets/templates/v40010/images/welcomeimage.jpg"></td>
      </tr></tbody></table></td>
  </tr>
  </tbody></table>

<div class="boxes">
    <img src="/assets/templates/v40010/images/home_boxes.jpg" alt="boxes to category pages" usemap="#Map" border="0" height="260" width="794">
<map name="Map" id="Map">
  <area shape="poly" coords="24,186,24,8,297,7,301,59,252,58,253,182" href="http://paracordstore.3dcartstores.com/Hardware_c_8.html" target="_self" alt="hardware">
  <area shape="poly" coords="528,60,527,235,253,236,254,60" href="http://paracordstore.3dcartstores.com/ParaCord_c_7.html" target="_self" alt="paracord">
  <area shape="poly" coords="767,185,767,8,490,7,491,57,529,58,529,184" href="#" target="_self" alt="bracelets">
   </map> 
</div>
</td>
                        <td style="background: url(assets/templates/v40010/images/grunge-rightBG.png) repeat-y;" align="left" valign="top"><img src="assets/templates/v40010/images/grunge-right.png" alt="" height="359" width="48"></td>
                      </tr>
                      <tr>
                        <td style="background: url(assets/templates/v40010/images/grunge-leftBG.png) repeat-y;"><img src="assets/templates/v40010/images/spacer.gif" alt="" height="12
" width="1"></td>
                        <td bgcolor="#373b3e" height="12"><img src="assets/templates/v40010/images/spacer.gif" alt="" height="12
" width="1"></td>
                        <td style="background: url(assets/templates/v40010/images/grunge-rightBG.png) repeat-y;"><img src="assets/templates/v40010/images/spacer.gif" alt="" height="12
" width="1"></td>
                      </tr>
                    </tbody></table></td>
                  <!--end middle column-->

Basically what I did was take the boxes div out of the inner table and move it outside.

[Dthomas]

I was busy, jsut got to trying it now. Did not work at all, I copied and pasted what you wrote exactly. It seems to have made a box around the big box, seems to have the opposite of what i want.

The middle column calls from the frame so i do not know if i need to put a work around in that template or keep trying with home.html

[tclifesafety]

I must've pasted the wrong code - it displayed correctly when I edit the HTML (using Web Developer for Firefox).

The middle column is pulled from home.html - frame.html controls the top, left, right and bottom.

[Dthomas]

hmmm... well i put the code back in the home.html, so you could see what it looks like. Maybe I didnt copy it right?

[tclifesafety]

I see what you mean - that looks a lot worse. Let me see if I can get it corrected.

[mondo]

I think your old code was fine but you put your new image inside the big frame.

Maybe I didnt copy it right?

No, you've doubled up some of your middle code when you made the changes from the above post. You need to go back to the code you had earlier with the box around it all. Then...

Move this to below your bottom "grunge" border code:

<div class="boxes">
<img src="/assets/templates/v40010/images/home_boxes.jpg" alt="boxes to category pages" usemap="#Map" border="0" height="260" width="794">
<map name="Map" id="Map">
<area shape="poly" coords="24,186,24,8,297,7,301,59,252,58,253,182" href="http://paracordstore.3dcartstores.com/Hardware_c_8.html" target="_self" alt="hardware">
<area shape="poly" coords="528,60,527,235,253,236,254,60" href="http://paracordstore.3dcartstores.com/ParaCord_c_7.html" target="_self" alt="paracord">
<area shape="poly" coords="767,185,767,8,490,7,491,57,529,58,529,184" href="#" target="_self" alt="bracelets">
</map>
</div>


down to just above the last </tr>

[Dthomas]

i think i understand what you are saying but how am i suppose to move that code down below the "grunge" bottom when that code is located in the frame and not home. Thus i do not see how i can move it below the border code because 1. that code is in the frame. 2. then wouldn't that image be on every page.

I tried putting in the frame anyways, know it would be on every page. I put it just about the last </tr> but it moved it above the box when i need it below the box.

I just really want this because it one of the last things to get done, and it would look really nice like that.

[mondo]

Looking at you source code its within the middle tags so thought it was just a home page frame.
Can you post your home page code as it is now?

[Dthomas]

Sure...here it is. Which is only the stuff inside the "box" the rest is pulled from the frame.


<table width="98%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center"><table border="0" cellspacing="0" cellpadding="0" width="100%" align="center"><td><img src="/assets/templates/v40010/images/welcomeimage.jpg"></td>
</table></td>
</tr>
</table>


<img src="/assets/templates/v40010/images/home_boxes.jpg" alt="boxes to category pages" width="794" height="260" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="24,186,24,8,297,7,301,59,252,58,253,182" href="http://paracordstore.3dcartstores.com/Hardware_c_8.html" target="_self" alt="hardware" />
<area shape="poly" coords="528,60,527,235,253,236,254,60" href="http://paracordstore.3dcartstores.com/ParaCord_c_7.html" target="_self" alt="paracord" />
<area shape="poly" coords="767,185,767,8,490,7,491,57,529,58,529,184" href="#" target="_self" alt="bracelets" />
</map>

[mondo]

OK, After your last post and navigating your other pages I thought as much.

1. I think it looks...right with them inside the 'grunge' frame on the home page. It stays in the theme with the other pages content being inside it.
2. You can do what you want but you would need to move the framing code from the "frame" and add it to all the other pages (top and bottom) then put the three pics after the framing code on the home page only. Make sense?

[Go Live]

Give this a try

<div align="center">
			<table border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td width="42"><img src="assets/templates/v40010/images/grunge-TopL.png" width="42" height="44" alt=""></td>
					<td style="background: url(assets/templates/v40010/images/grunge-TopM.png) repeat-x;"><img src="assets/templates/v40010/images/spacer.gif" width="1" height="44" alt=""></td>
					<td width="48"><img src="assets/templates/v40010/images/grunge-TopR.png" width="48" height="44" alt=""></td>
				</tr>
				<tr>
					<td align="right" valign="top" style="background: url(assets/templates/v40010/images/grunge-leftBG.png) repeat-y;" width="42"><img src="assets/templates/v40010/images/grunge-left.png" width="42" height="340" alt=""></td>
					<td align="center" valign="top" class="data">
						<table width="98%" cellspacing="0" cellpadding="0" border="0">
							<tr>
								<td align="center">
									<table border="0" cellspacing="0" cellpadding="0" width="100%" align="center">
										<td>
											<div align="center">
												<img src="/assets/templates/v40010/images/welcomeimage.jpg"></div>
										</td>
									</table>
								</td>
							</tr>
						</table>
					<td align="left" valign="top" style="background: url(assets/templates/v40010/images/grunge-rightBG.png) repeat-y;" width="48"><img src="assets/templates/v40010/images/grunge-right.png" width="48" height="359" alt=""></td>
				</tr>
				<tr>
					<td style="background: url(assets/templates/v40010/images/grunge-leftBG.png) repeat-y;" width="42"><img src="assets/templates/v40010/images/spacer.gif" width="1" height="12
" alt=""></td>
					<td height="12" bgcolor="#373b3e"><img src="assets/templates/v40010/images/spacer.gif" width="1" height="12
" alt=""></td>
					<td style="background: url(assets/templates/v40010/images/grunge-rightBG.png) repeat-y;" width="48"><img src="assets/templates/v40010/images/spacer.gif" width="1" height="12
" alt=""></td>
				</tr>
			</table>
			<img src="/assets/templates/v40010/images/home_boxes.jpg" alt="boxes to category pages" width="794" height="260" border="0" usemap="#Map" /><map name="Map" id="Map"><area shape="poly" coords="24,186,24,8,297,7,301,59,252,58,253,182" href="http://paracordstore.3dcartstores.com/Hardware_c_8.html" target="_self" alt="hardware" /><area shape="poly" coords="528,60,527,235,253,236,254,60" href="http://paracordstore.3dcartstores.com/ParaCord_c_7.html" target="_self" alt="paracord" /><area shape="poly" coords="767,185,767,8,490,7,491,57,529,58,529,184" href="#" target="_self" alt="bracelets" /></map></div>

Not sure why the left and right grunge columns differ in height (340,359)
It seems like some things have changed along the way also try with <td> in front of the code above.