Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Multiple colours

Status
Not open for further replies.
audiopro

audiopro

Programmer
Apr 1, 2004
3,165
GB
I have a 20 x 20 grid and I want to individually control the colour of each section.
The grid is created from within a script making it possible to create the HTML for any suitable method.

Option 1
=========

Old fashioned table where each cell background is assigned it's own bgcolor - an old method which still works, I think.

Option 2
=========

Old fashioned table where each cell background is assigned it's own background color using CSS. A method I have considered but I'll be darned if I can work out a way of doing it.
I have been using stylesheets for quite some time and would not like to be without them but how do I put an inline style command into a <td> element of a table?
Code: 
style={background_color: '#FF0000'}
That should make it red but where does it go?

Option 3
=========
A pure CSS solution which I would think is possible.

What I am looking for is advice on which method to use, or if there is a better solution.




Keith
 
Sort by date Sort by votes
If you know the colours beforehand then create a series of classes and write the class into each tag dynamically.

Or... and this might be better if you need to print the page, and you know the colours beforehand.

Create a series of 1px graphics in each colour. Then dynamically insert the graphic and size it accordingly.

Create a container the size you need to contain the 20x20 grid. Then fill it with <img> tags and float all the images left.

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
 
Upvote 0 Downvote
Had a spare 10 mins... Only tested in FF2 Mac.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Boxes</title>

	<style type="text/css">
		/*<![CDATA[*/
		
		
		#container {
			margin:0 auto;
			width:500px;
		}
		
		div.box {
			width:100px;
			height:100px;
			float:left;
		}
		
		div.box:hover {
			background-color:yellow;
			cursor:pointer;
		}
		
		.red {
			background-color:red;
		}
		
		.blue {
			background-color:blue;
		}
		
		.green {
			background-color:green;
		}
		/*]]>*/
	</style>
</head>

<body>
<div id="container">
<div class="box red">
	&nbsp;
</div>

<div class="box blue">
	&nbsp;
</div>

<div class="box green">
	&nbsp;
</div>

<div class="box red">
	&nbsp;
</div>

<div class="box blue">
	&nbsp;
</div>

<div class="box green">
	&nbsp;
</div>

<div class="box red">
	&nbsp;
</div>

<div class="box blue">
	&nbsp;
</div>

<div class="box green">
	&nbsp;
</div>

<div class="box red">
	&nbsp;
</div>

<div class="box blue">
	&nbsp;
</div>

<div class="box green">
	&nbsp;
</div>

<div class="box red">
	&nbsp;
</div>

<div class="box blue">
	&nbsp;
</div>

<div class="box green">
	&nbsp;
</div>

<div class="box red">
	&nbsp;
</div>

<div class="box blue">
	&nbsp;
</div>

<div class="box green">
	&nbsp;
</div>

<div class="box red">
	&nbsp;
</div>

<div class="box blue">
	&nbsp;
</div>
</div>

</body>
</html>

Problem is that if you try to print the page the backgrounds colours won't show. So I'd probably go with a 1px image method.
If I didn't know the colours then I'd possibly look at creating the images on the fly using PHP.

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
 
Upvote 0 Downvote
Thanks Foamcow, that style statement was just the ticket.


It is a colour picker which only displays the colours of items available, controlled from an online database. The size of the coloured areas varies depending on how many colours the user has selected.

However, this side of things is not the problem.
For the table layout (which is the way I was going with it) I couldn't work out how to set the background of an individual cell.
I got to wondering if there is a better method as regards the whole layout, so I asked you guys.
I need to get this demo'd early next week so I am going down the route of creating images via GD to populate tables as I may need to change the graphic from a plain coloured panel to something 3D.
I will set up the CSS method when I get the go ahead but I do not want to get side tracked into learning CSS instead of developing the project.

Thanks for the help



Keith
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
PCHomepage
  • Locked
  • Question
Align Multiple Images Right
Replies
1
Views
111
PCHomepage
PCHomepage
nwo4life
  • Locked
  • Question
Paypal button for multiple prices by Quantity and color
Replies
1
Views
101
ChrisHirst
ChrisHirst
PCHomepage
  • Locked
  • Question
CSS Forcing Multiple Selects to One Line
Replies
3
Views
123
vacunita
vacunita
jjack46
  • Locked
  • Question
Populating multiple word string into Text Box value field
Replies
6
Views
240
jjack46
jjack46

Part and Inventory Search

Sponsor

Back
Top