Aligning rows on table with background image

Rowby Goren
Rowby Goren used Ask the Experts™
on
Hello all!

I have a table with a background image that I need to line up with a button that is embedded in the background image -- as well as some text that needs to be typed  with HTML.

Here it is on a test page.  
http://www.rowbytesting.com

I have some css that I am adapting from another solution that was given me yesterday on EE  for a similar table with a background image.  The Expert went though a lot of back and forth -- and since this is a very similar situation I figured we should start with the css already used. I only changed the Table ID.

The CSS was for a table with multiple columns and about 20 rows

This NEW  table only has one column and 3 rows.  But I have linked the table ID to the css.  Obviously the css needs to be modified because of all the columns. etc.

I need to align the top  of the 3 rows to the Buy Now button area.  In the final graphic I will remove the buy now button from the graphic and insert a buy now button on the table and link it to an external site.

The other 2 rows are for the text links on the bottom.  Right now the text links are built into the graphic.   In the final graphic those words will be removed and it will just be a grey area.  I am including the words now just for reference.

BTW -- I'm using a table etc to keep things simple for the client so they can copy it and use it for other pages with different text links and buy now button lnks.  I realize there may be other ways to do this other than a table, but since they will be using the solution provided to me on a previous experts exchange question that used a table for a similar situation, I figured to do this the same way to keep their learning process simple.

Thanks

Rowby
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
Here's the css -- too many rows and too many columns, but it works nicely so it's a good start.

/* Top Product Table for Product pages with buy bow button and product specs links With background images. */

#TopProductImagesTable  { width: 933px; } 
#TopProductImagesTable  { font: helvetica; color: #ffffff; } 

#TopProductImagesTable  tbody { font: helvetica; font-size: 12px; color: #ffffff; }
#TopProductImagesTable  table, th, td {
	border: 1px solid white; 
	}
	
#TopProductImagesTable  table, #microSDTable th, #microSDTable td {
	border: 1px solid transparent;
      }
#TopProductImagesTable  p { margin-bottom:0px; }

#TopProductImagesTable  {
border-collapse:collapse; 
line-height: 15px; 
}

#TopProductImagesTable .col1 { width: 217px; }	
#TopProductImagesTable  .col2 { width: 120px; }
#TopProductImagesTable  .col3 { width: 120px; }
#TopProductImagesTable .col4 { width: 120px; }
#TopProductImagesTable .col5 { width: 120px; }
#TopProductImagesTable .col6 { width: 120px; }		
#TopProductImagesTable  .col7 { width: 120px; }
#TopProductImagesTable th { background: none; } 
#TopProductImagesTable  th { font-weight:bold; text-align:left; }
#TopProductImagesTable  td { font-size:12px; }
#TopProductImagesTable  { font-size: 12px; font-weight:bold; }

#TopProductImagesTable  td { text-align:center; }
#TopProductImagesTable  td.leftalign { text-align:left; }
#TopProductImagesTable  tfoot td { color: #9dc445; }
#TopProductImagesTable  >tbody>tr>td:first-child { padding: 0px 25px; }
#TopProductImagesTable  h2 { text-align:left; color: #9dc445; font: helvetica;  font-weight:bold; font-size: 24px; margin-bottom:4px; margin-top:4px }
#TopProductImagesTable  h3 { text-align:left; color: #9dc445; font: helvetica;  font-weight:bold; font-size: 14px; margin-bottom:4px; margin-top:4px }
#TopProductImagesTable h4 { text-align:left; color: #ffffff; font: helvetica;  font-weight:normal; font-size: 14px; margin-bottom:4px; margin-top:4px }
#TopProductImagesTable h5 { text-align:left; color: #ffffff; font: helvetica;  font-weight:normal; font-size: 14px; padding: 0px 20px; margin-bottom:4px; margin-top:4px }

Open in new window

LZ1
Top Expert 2011

Commented:
First, I don't like to be the bearer of bad news, but you should NEVER EVER use tables for layouts and this is just one of the reasons why. Tables should be used for tabular data.  
In my opinion, the client should not be allowed to touch or toy with the code from a website unless your handing it off to someone with experience in what they're doing.  I think with tables you may have made it more confusing because of the markup needed to display the tables.

What you've done could have been so much simpler, quicker and cleaner with divs and CSS.  
If you were using CSS and divs, you could have easily had one or 2(at most) container divs with the background image and then set your other divs internally either relative or absolute.

Author

Commented:
I am okay with container divs for this image.

Can you provide me with the alternative code for using divs instead of a table for this?

The client has some experience, so he will need to be able to replace the text and modify the "buy now" button link.  Again I guess the buy now button would be a separate image that says buy now in place of the current "buy now" button that is a part of the background image.  Unless there is a way to have the buy now button a part of the background image -- and easily make it linkable  so the client can easily change it.

BTW the color for the text links should be the same whether they are visited, not visited etc.  We can use any color for the IE solution but I'll change the color later.

Thanks!

Rowby
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

LZ1
Top Expert 2011

Commented:
Give me a few and I'll have some code for you to try
LZ1
Top Expert 2011

Commented:
So are the button and the 16gb microSD going to be separate images?

Author

Commented:
Yes, the orange "buy now button" and the overall background image can be separate if that makes it easier.   And yes, the 16gb microSD image would also be separate because that would be swapped out for different chips -- such as a 32gb product image.

The of course there is the overall big background image that will be behind the other images.   (I will of course remove the Buy Now button and the 16gb microsd image from the overall background image.)

And then there would need to be the div for the bottom text links that currently say "Available in 8GM, etc etc."

All images will be pngs with alpha transparency backgrounds.   BTW the two "blue" rectangles are to cover up the brand name -- for client confidentially reasons on EE.

Thanks!
LZ1
Top Expert 2011

Commented:
Here's a test page.  The images should be separate for the buttons, but for now I just used the large image as a base.  

Let me know if you have questions.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
*{font-family:Arial, Helvetica, sans-serif;}
	#container{width:933px;height:380px;margin:0 auto;position:relative;background:url("http://www.rowbytesting.com/images/microsd_product_images-16gb-experts-blocked-out.png") no-repeat scroll 0 0;}
	#container a#button{background: url("http://www.rowbytesting.com/images/microsd_product_images-16gb-experts-blocked-out.png") no-repeat scroll -21px -144px transparent;display: block;height: 41px;left: 21px;position: absolute;top: 144px;width: 119px;text-indent:-9999px;}
#container #microSD {background: url("http://www.rowbytesting.com/images/microsd_product_images-16gb-experts-blocked-out.png") no-repeat scroll -656px -96px transparent;height: 151px;position: absolute;right: 6px;top: 100px;width: 271px;}	

#container #bottom{position:absolute;bottom:0px;width:100%;}
#container #bottom p{clear:both;float:left;color:#fff;}
#container #bottom p a{color:#9DC445;text-decoration:underline;}

</style>
</head>

<body>

  <div id="container">
		<a id="button" href="#">Buy Now</a>
    <div id="microSD"></div>
    
    <div id="bottom">
    	<p>Available in <a href="#">8GB</a>, <a href="#">16GB</a> &amp; <a href="#">32GB</a></p>
      <p><a href="#">Technical Specifications</a></p>
    </div>
  
  
  </div>
</body>
</html>

Open in new window

Author

Commented:
Hi

I will create a product image and a buy now button in a few minutes.  Below are temporary sizes. I'll adjust the sizes later.

Let's call the buynow button buynow1.png  size 200px wide by 100 height
and the product image 16SD.png  size 150 wide by 125 height

What seems to be missing from the code is the overall background image

I put the styles on an external stylesheet.

*{font-family:Arial, Helvetica, sans-serif;}
	#container{width:933px;height:380px;margin:0 auto;position:relative;background:url("http://www.rowbytesting.com/images/microsd_product_images-16gb-experts-blocked-out.png") no-repeat scroll 0 0;}
	#container a#button{background: url("http://www.rowbytesting.com/images/microsd_product_images-16gb-experts-blocked-out.png") no-repeat scroll -21px -144px transparent;display: block;height: 41px;left: 21px;position: absolute;top: 144px;width: 119px;text-indent:-9999px;}
#ProductImageContainer #microSD {background: url("http://www.rowbytesting.com/images/microsd_product_images-16gb-experts-blocked-out.png") no-repeat scroll -656px -96px transparent;height: 151px;position: absolute;right: 6px;top: 100px;width: 271px;}	

#ProductImageContainer #bottom{position:absolute;bottom:0px;width:100%;}
#ProductImageContainer #bottom p{clear:both;float:left;color:#fff;}
#ProductImageContainer #bottom p a{color:#9DC445;text-decoration:underline;}

Open in new window

Author

Commented:
Redid the buy now button and product image and uploaded both of them to the /images folder

buynow1.png  is its name.  Dimensions: 118 x 40 px
16SD.png is the product image.  It is 213 x 149 px

Author

Commented:
Hi LZ1,

Let me know if you need anything more from me.  However in my previous comment I have given you the name of the 2 separate images (the buynow1 and the 16SD png names.

And the background image will stay the same.

So if possible if you could incorporate the above into the code because for now the main background image is not showing up as well as the  buy now button.

http://rowbytesting.com/

Author

Commented:
Here's the current css, on external styl sheet:

I left out the first line.  Is it necessary on external style sheet?
*{font-family:Arial, Helvetica, sans-serif;}

	#container{width:933px;height:380px;margin:0 auto;position:relative;background:url("http://www.rowbytesting.com/images/microsd_product_images-16gb-experts-blocked-out.png") no-repeat scroll 0 0;}
	#container a#button{background: url("http://www.rowbytesting.com/images/microsd_product_images-16gb-experts-blocked-out.png") no-repeat scroll -21px -144px transparent;display: block;height: 41px;left: 21px;position: absolute;top: 144px;width: 119px;text-indent:-9999px;}
#ProductImageContainer #microSD {background: url("http://www.rowbytesting.com/images/microsd_product_images-16gb-experts-blocked-out.png") no-repeat scroll -656px -96px transparent;height: 151px;position: absolute;right: 6px;top: 100px;width: 271px;}	

#ProductImageContainer #bottom{position:absolute;bottom:0px;width:100%;}
#ProductImageContainer #bottom p{clear:both;float:left;color:#fff;}
#ProductImageContainer #bottom p a{color:#9DC445;text-decoration:underline;}

Open in new window

Author

Commented:
Ah I see I renamed the ID.  Fixed first 2 lines in code.  Working better now.

Stay tuned.  Let me see if It's all working.

	#ProductImageContainer {width:933px;height:380px;margin:0 auto;position:relative;background:url("http://www.rowbytesting.com/images/microsd_product_images-16gb-experts-blocked-out.png") no-repeat scroll 0 0;}
	#ProductImageContainer a#button{background: url("http://www.rowbytesting.com/images/microsd_product_images-16gb-experts-blocked-out.png") no-repeat scroll -21px -144px transparent;display: block;height: 41px;left: 21px;position: absolute;top: 144px;width: 119px;text-indent:-9999px;}
#ProductImageContainer #microSD {background: url("http://www.rowbytesting.com/images/microsd_product_images-16gb-experts-blocked-out.png") no-repeat scroll -656px -96px transparent;height: 151px;position: absolute;right: 6px;top: 100px;width: 271px;}	

#ProductImageContainer #bottom{position:absolute;bottom:0px;width:100%;}
#ProductImageContainer #bottom p{clear:both;float:left;color:#fff;}
#ProductImageContainer #bottom p a{color:#9DC445;text-decoration:underline;}

Open in new window

LZ1
Top Expert 2011

Commented:
Let us know if you need more assistance.

Author

Commented:
Okay.  All looks good.  Except for some reasons I can't get the image of the microchip to show.

Here is the image:  http://www.rowbytesting.com/images/16SD.png

Here is my css:
#ProductImageContainer {width:933px;height:380px;margin:0 auto;position:relative;background:url("http://www.rowbytesting.com/images/microsd_product_images-16gb-experts-blocked-out.png") no-repeat scroll 0 0;}
#ProductImageContainer a#button {background: url("http://www.rowbytesting.com/images/microsd_product_images-16gb-experts-blocked-out.png") no-repeat scroll -21px -144px transparent;display: block;height: 41px;left: 21px;position: absolute;top: 143px;width: 149px;text-indent:-9999px;}
#ProductImageContainer #microSD {background: url("http://www.rowbytesting.com/images/16SD.png") no-repeat scroll -656px -96px transparent;height: 151px;position: absolute;right: 6px;top: 213px;width: 149px;}	

#ProductImageContainer #bottom{position:absolute;bottom:0px;width:100%;}
#ProductImageContainer #bottom p{clear:both;float:left;color:#fff;}
#ProductImageContainer #bottom p a{color:#9DC445;text-decoration:underline;}

Open in new window


Here's the HTML

<div id="ProductImageContainer">
	<a href="#" id="button">Buy Now</a>
	<div id="microSD">
		&nbsp;</div>
	<div id="bottom">
		<p>
			Available in <a href="#">8GB</a>, <a href="#">16GB</a> &amp; <a href="#">32GB</a></p>
		<p>
			<a href="#">Technical Specifications</a></p>
	</div>
</div>

Open in new window

Author

Commented:
Hi

I think I will include the product image with the main background image.  That is because the product images will be different sizes, so it will just be simpler not to make it a separate layer in the css..

I will keep this question open, however, in case I come up with any additional questions.  

So nothing is needed from you for now.

Thanks
Top Expert 2011
Commented:
I basically did everything as background images because I wasn't going to try and slice a non-layered non-PSD file. :)

However, I would place separate images inside the divs that are absolutely positioned. This makes it semantic and easier to maintain in the future should the images change.

Author

Commented:
Stay tuned.  I think we are finished with this question.

Author

Commented:
Thanks LZ1, once again, for your Expert help!

Rowby
LZ1
Top Expert 2011

Commented:
No problem!  Glad we got it!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial