Link to home
Start Free TrialLog in
Avatar of Rowby Goren
Rowby GorenFlag for United States of America

asked on

Creating 7 column CSS with text centered in columns -- over one background image

I suppose I could figure this out by myself, but I would like to use best css practicesto do this correctly.

I have a background image that is in a div that I want to layer 7 columns of text over  it.  As you can see by the attached image, each column has text that is centered or in some cases flush left.  In some cases there is a graphic check mark in the column instead of text.

All of the "body" fonts will be  Helvetica   regular or bold and will be white.   And they would all be 12 px.

Also there are some "headers" such as the words "Form Factor" "Devices" etc., that need the fonts to be larger and the font color "green".  Those fonts would all be 15px Bold Helvetica  

And then, as you can see in the image
:
Column 1 is flush left....
There is some text in Column 1 that needs to be indented approx 15 px.  But further down the column the text is flush left and is not indented.

For consistency in your suggestions let's call each column "col1", "col2", "col3"
Headers would be called "headers"
The white text would be called "whitebody"
The background image can be called "background22"

Because there is so much type in such tight spaces in this mockup I need control over line height, padding, etc.

Any suggestions will be appreciated!

Thanks,

Rowby

User generated image
Avatar of Rowby Goren
Rowby Goren
Flag of United States of America image

ASKER

I read somewhere for columns like these it is sometimes best to use tables and then style the individual cells.  

Any thoughts on that for this particular situation?
SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks  I will try the table solution and report back here.

Rowby
Hi ChrisStanyon.

Looking good.  Thanks:

Here's my test server:

http://rowbytesting.com/

How can I tell the table to be the same height and width of the background image.    Also to keep the background image from repeating.

Here is my html:

<div id="masterSKU">
<div id="microSD_bgImage">
<table id="microSDTable"><colgroup> <col class="col1" /> <col class="col2" /> <col class="col3" /> <col class="col4" /> <col class="col5" /> <col class="col6" /> <col class="col7" /> </colgroup>
<thead>
<tr><th>Head1</th><th>Head2</th><th>Head3</th><th>Head4</th><th>Head5</th><th>Head6</th><th>Head7</th></tr>
</thead>
<tbody>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
<td>Body 4</td>
<td>Body 5</td>
<td>Body 6</td>
<td>Body 7</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>foot 1</td>
<td>foot 2</td>
<td>foot 3</td>
<td>foot 4</td>
<td>foot 5</td>
<td>foot 6</td>
<td>foot 7</td>
</tr>
</tfoot>
</table>
</div>
</div>

Open in new window


Here is my css:

/* Rowby additions below  FOR ROWBY TESTING */


#microSDTable { background: url('http://rowbytesting.com/images/experts-exchange-blank.png') }
#microSDTable .col1 { width: 250px; }
#microSDTable .col2 { width: 150px; }
#microSDTable .col3 { width: 150px; }
#microSDTable .col4 { width: 150px; }
#microSDTable .col5 { width: 250px; }
#microSDTable .col6 { width: 150px; }
#microSDTable .col7 { width: 150px; }
#microSDTable th { font-weight:bold; text-align:left; }
#microSDTable td { font-size:12px; }
#microSDTable tfoot td { color: green; }

Open in new window

<div id="masterSKU">
<div id="microSD_bgImage">
<table id="microSDTable"><colgroup> <col class="col1" /> <col class="col2" /> <col class="col3" /> <col class="col4" /> <col class="col5" /> <col class="col6" /> <col class="col7" /> </colgroup>
<thead>
<tr><th>Head1</th><th>Head2</th><th>Head3</th><th>Head4</th><th>Head5</th><th>Head6</th><th>Head7</th></tr>
</thead>
<tbody>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
<td>Body 4</td>
<td>Body 5</td>
<td>Body 6</td>
<td>Body 7</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>foot 1</td>
<td>foot 2</td>
<td>foot 3</td>
<td>foot 4</td>
<td>foot 5</td>
<td>foot 6</td>
<td>foot 7</td>
</tr>
</tfoot>
</table>
</div>
</div>

Open in new window

if it is not possible (and/or not platform compatible in modern browsers) to have a background image in a table that is full height, then I suppose I could layer the table on top of a separate background image (not a part of the table).

If that's a better solution then I would need the css etc to precisely position the table on top of the image.  

Any help with that anyone?

Thanks

Rowby
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks for that info, ChrisStanyon --

I will pay close attention to the widths of the various columns, as you indicated.

To resolve the height issue, should I not make the image a built-in background of the table -- and instead just make it a regular background image -- and the layer the table over it in its own div?

If you agree with that, then what would be the most browser compatible way to position the table div inside the parent div -- "static", "absolute" fixed" "relative" -- it would need to look good in today's modern browsers (ie (going back to  version7?), firefox,chrome -- and the various popular macs browsers.

Thanks

Rowby
Frim what i'm reading in a css book  absolute positioning seems tbe way to go - if i am going to position a table over a regular background image.

Any thoughts ?
You can do it like that if you like. Create a DIV, set a background image, and then put the table in that DIV. Set the position of the DIV to relative and the position of the table to absolute and tweak until it's positioned right.

//HTML
<div id="wrapper">
   <table id="yourTable">
      <tr>
         <td></td>
      </tr>
   </table>
</div>

//CSS
#wrapper { background: url(yourImage.jpg) no-repeat; position:relative; }
#yourTable { position: absolute; top 20px; left: 50px; }

Open in new window

Sounds good.    I'll try it and report back.
Looking good.  

How do I force the background image to be its original height and width.
Here's what I have so far in my css

#microSD_wrapper { background: url(/images/experts-exchange-blank.png) no-repeat; position:relative; }

Open in new window


The height of the image is  657px
The width of the image is 937px

Thanks
Hmmm...

I can't understand why in firebug I am not seeing the css for microSDtable.  I only see the  "microSD_wrappe" wrapper in firefox -- on the firebug "Style" panel.....

 / * Rowby additions below  FOR ROWBY TESTING */

#microSD_wrapper { background: url(/images/experts-exchange-blank.png) no-repeat; position:relative; 
}

#microSDTable .col1 { width: 150px; }
#microSDTable .col2 { width: 150px; }
#microSDTable .col3 { width: 150px; }
#microSDTable .col4 { width: 150px; }
#microSDTable .col5 { width: 150px; }
#microSDTable .col6 { width: 150px; }
#microSDTable .col7 { width: 150px; }
#microSDTable th { font-weight:bold; text-align:left; }
#microSDTable td { font-size:22px; }
#microSDTable tfoot td { color: green; 
}]

Open in new window



HTML:
<h2>Below is the table with its background so far:</h2>
<div id="microSD_wrapper">
<table id="microSDTable"><colgroup> <col class="col1" /> <col class="col2" /> <col class="col3" /> <col class="col4" /> <col class="col5" /> <col class="col6" /> <col class="col7" /> </colgroup>
<thead>
<tr><th>Head1</th><th>Head2</th><th>Head3</th><th>Head4</th><th>Head5</th><th>Head6</th><th>Head7</th></tr>
</thead>
<tbody>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
<td>Body 4</td>
<td>Body 5</td>
<td>Body 6</td>
<td>Body 7</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>foot 1</td>
<td>foot 2</td>
<td>foot 3</td>
<td>foot 4</td>
<td>foot 5</td>
<td>foot 6</td>
<td>foot 7</td>
</tr>
</tfoot>
</table>
</div>
<h3>  Below is the sample mockup of how I want it to look:</h3>
<p><img src="images/rowby-4 experts-exchange2.png" border="0" alt="" /></p>

Open in new window

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi

In order for me to do the overall absolute positioning for the table, don't I need to have a "style" for the #microSDtable table too?    Not just the elements within it?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Ah,

Great.  That did it.  Now I will do some work on it and get back to you again :)!

I think I will have questions for styling individual "cells" and perhaps "columns" so far as text size and color etc.   Based on the mockup below the blank image background I am working on


Thanks

Rowby
BTW should I use the "border-collapse" property on the table?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Re: border-collapse. It probably makes styling things easier if you do.
It may not look like much:

http://www.rowbytesting.com

But I am starting to get the hang of it.

One question.  What is causing the top cell (with the "Head1" "Head2" etc to have a blue background.   Or alternatively what can be done to make it transparent.

Rowby
Hmmm   Looks like the blue is from system.css  

head th {
    background: none repeat scroll 0 0 #C3D9FF;

Open in new window

The blue comes from the screen.css (line 63). You can override this in your template.css by setting the background to none (line 149)

#microSDTable th { background: none; }
Hi

Looks  like I am getting it all now.  I may have some questions, but I think I know what to do now.

Thanks for your patience and truly EXPERT help.

Rowby

P.S.  Who knows , in 10 min I may have another question!
Already I have another question.

And that is how to handle line heights in the table, so I can line up the text with the background image as closely as possible.

Table rows (by themselves in the old way of doing tables) have a way of getting taller etc.  I want the line height -- and I assume the row heights-- to be completely controlled by the css.

Rowby
I had  my css set to show the border of the table and the cells.  

Somehow I lost that.    (I  will of course turn the border colors off but for now I need it for guidance.

Here's my current css

#microSD_wrapper { background: url(/images/experts-exchange-blank.png) no-repeat; position:relative; width 937px; height: 657px; }                                           
#microSDTable { position:absolute; top: 50px; left:20px; } 
#microSDTable table, th, td }
 border: 1px solid white; }
#microSDTable border-collapse:collapse; }	
#microSDTable th { background: none; } 
#microSDTable .col1 { width: 150px; }	
#microSDTable .col2 { width: 150px; }
#microSDTable .col3 { width: 150px; }
#microSDTable .col4 { width: 150px; }
#microSDTable .col5 { width: 150px; }
#microSDTable .col6 { width: 150px; }		
#microSDTable .col7 { width: 150px; }
#microSDTable th { font-weight:bold; text-align:left; }
#microSDTable td { font-size:12px; }
#microSDTable tfoot td { color: #9dc445; }
#microSDTable td { text-align:center; }
#microSDTable td.leftalign { text-align:left; }
#microSDTable h2 { text-align:left; color: #9dc445; font-weight:bold; font-size: 14px; }

Open in new window

Nevermind.  I had the {  }  wrong :)
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi

Looking good (almost): :)

http://www.rowbytesting.com

When I add text to the first column, for whatever reason it widened that column.

Is there any way to absolutely force the columns not to budge -- at least when the text included does not push the columns.

As you can see, the text I entered in the first column has very few letters -- yet it "pushed" the column to the right over quite a bit.

Rowby
BTW if you feel this overall question has been answered, and these additional questions are beyond the range of the initial question, I will be happy to open a follow up question where we discuss the issues of font styling etc within this table.  And award you your points for this question.   It's been going on for some time!!

Rowby
Here's the current css:
/* Rowby additions below  FOR ROWBY TESTING */

#microSD_wrapper { background: url(/images/experts-exchange-blank.png) no-repeat; position:relative; width 937px; height: 657px; }                                           
#microSDTable { position:absolute; top: 50px; left:20px; } 
#microSDTable { width: 900px; } 
#microSDTable { font: helvetica; color: #ffffff; } 

#microSDTable tbody { font: helvetica; font-size: 200px; color: #ffffff; }
#microSDTable table, th, td {border: 1px solid white; }
#microSDTable { border-collapse:collapse; }	
#microSDTable {line-height: 15px; }
#microSDTable th { background: none; } 
#microSDTable .col1 { width: 85px; }	
#microSDTable .col2 { width: 50px; }
#microSDTable .col3 { width: 30px; }
#microSDTable .col4 { width: 30px; }
#microSDTable .col5 { width: 50px; }
#microSDTable .col6 { width: 46px; }		
#microSDTable .col7 { width: 46px; }
#microSDTable th { font-weight:bold; text-align:left; }
#microSDTable td { font-size:12px; }
#microSDTable tfoot td { color: #9dc445; }
#microSDTable td { text-align:center; }
#microSDTable td.leftalign { text-align:left; }
#microSDTable h2 { text-align:left; color: #9dc445; font: helvetica;  font-weight:bold; font-size: 14px; }


	

Open in new window


Here's the current html:
<h2>
	Below is the table with its background so far:</h2>
<div id="microSD_wrapper">
	<table id="microSDTable">
		<colgroup>
			<col class="col1" />
			<col class="col2" />
			<col class="col3" />
			<col class="col4" />
			<col class="col5" />
			<col class="col6" />
			<col class="col7" />
		</colgroup>
		<thead>
			<tr>
				<th colspan="7">
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; Red Series&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Blue Series&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; Compact Flash &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<h2>
						Form Factor</h2>
				</td>
				<td>
					Body 2</td>
				<td>
					Body 3</td>
				<td>
					Body 4</td>
				<td>
					Body 5</td>
				<td>
					Body 6</td>
				<td>
					Body 7</td>
			</tr>
			<tr>
				<td>
					<h2>
						Speed Class Rating</h2>
				</td>
				<td>
					Test</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<h2>
						Devices</h2>
				</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<h2>
						Cameras</h2>
				</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<h2>
						Camcorders</h2>
				</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<h2>
						Mobile Devices</h2>
				</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<h2>
						Smart Phones</h2>
				</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<h2>
						DSLR Cameras</h2>
				</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<h2>
						PERFORMANCE SPECS</h2>
				</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>
					foot 1</td>
				<td>
					foot 2</td>
				<td>
					foot 3</td>
				<td>
					foot 4</td>
				<td>
					foot 5</td>
				<td>
					foot 6</td>
				<td>
					foot 7</td>
			</tr>
		</tfoot>
	</table>
</div>
<h3>
	&nbsp;</h3>

Open in new window

The reason your columns are not matching your CSS is because of the maths :)

Your table is set to be 900px wide, but if you add up the widths you've set for your columns, they only add up to 337px (85+50+30+30+50+46+46), so the browser automatically adds the extra width to the columns to make up the 900px. To avoid this, make sure your column widths add up to match the table width.

I think we probably have exhausted this question (and several others), so it makes sense to close it off and ask more specific questions if needed.

Looks like you're getting there though :)
Thanks.  I will post the follow up question in a few minutes