troubleshooting Question

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

Avatar of Rowby Goren
Rowby GorenFlag for United States of America asked on
32 Comments6 Solutions361 ViewsLast Modified:
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!



Mockup, including background image
Join our community to see this answer!
Unlock 6 Answers and 32 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 6 Answers and 32 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros