Member Avatar for tobeeornot

Hi,

Using CSS, I am looking to create a grid/table for a shopping cart page (for practice purposes only) inside the main content container, where a numeric stepper, product image and checkbox will be placed in each individual box of the grid, consisting of four rows and four columns. I want the overall grid to be a width of 520px and have a height of 520px, with each box breaking down to be 130px high and wide . I also want the colours of each box to alternate like a checkerboard, using #46311C and #968E88.

This may seem like a basic task to some of the more experienced designers but I am a little confused whether I use a styled table to complete this task or some other method.

If you could show me how this would be completed using straight-forward, clean code that would be most appreciated.

  • 3 Contributors
  • 8 Replies
  • 921 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by tobeeornot
Member Avatar for Arkinder

Alright, so if you really want to learn the language. You have to use it. So by just giving you the markup and CSS you wouldn't actually gain much. So instead, I'm going to walk you step by step through the thought process, and then help you with markup and CSS.

Doing this with a table is pretty easy, and it's not really tabular data, so let's avoid that. This leaves you with the option of lists or divisions. It really doesn't matter, but for the sake of simplicity, use divisions.

I am looking to create a grid/table for a shopping cart page

Okay, so make this page. You currently don't have content so you would think that it's supposed to be blank. However, you should always start with a basic exoskeleton - so to speak. This is important because your starting with a valid page, and you won't have to worry about adding any of it later.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	</head>
	
	<body>
	</body>
	
</html>

inside the main content container

So in the page simply add a division and give it an ID. Call it container, content, wrapper, or whatever. Just make sure that its purpose is clear.

I want the overall grid to be a width of 520px and have a height of 520px

The basis of the grid will be the container division, so your CSS would look something like this:

#container {
    width: 520px;
    height: 520px;
}

I suggest using a dynamic unit, such a %, instead of px. This will allow the container to adjust to your users screen size. Keep in mind that this width will have to be big enough to compensate for the width of its child-elements, along with their: margin, padding, and borders. If you are unfamiliar with the box model, now is a great time to make friends.

Now for the fun part. The actual grid. Obviously they will be divisions but how will you get them to line up vertically, as well as horizontally? You have a few options: display: inline; , display: inline-block; , and float: left; What do you think? (this isn't a trick question) Keep in mind that the style will have to applied to each division, so instead of using an ID you will have to use a class. We'll worry about the alternating colors later, assuming that you don't figure it out on your own by then.

For now, get everything else set up. This includes all of the divisions for the grid with a width and height. Then post it with any questions, or problems, that you may have.

Regards
Arkinder

Member Avatar for MagicMedia 
<html>
<head>
<style type="text/css">
table {width:520px; height:520px}
td {width:130px; height:130px}
.light {background-color:#46311C;}
.dark {background-color:#968E88;}
</style>
</head>
<body>
<table>
<tr><td class="light"></td><td class="dark"></td><td class="light"></td><td class="dark"></td></tr>
<tr><td class="dark"></td><td class="light"></td><td class="dark"></td><td class="light"></td></tr>
<tr><td class="light"></td><td class="dark"></td><td class="light"></td><td class="dark"></td></tr>
<tr><td class="dark"></td><td class="light"></td><td class="dark"></td><td class="light"></td></tr>
</table>
</body>
</html>
Member Avatar for tobeeornot

Hmmm, interesting Arkinder. Shall give this some thought and come back to you.

Thank you too, Magic Media!

Member Avatar for tobeeornot

Hi Arkinder,

I have done the following (which works) but I don't think it is what you had in mind, bearing in mind I used px instead of % for the wrapper, and ID instead of class.

I would like to hear your think how to use % effectively in this instance for page sizing and why class is more appropriate than ID.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

#wrapper {
	width: 520px;
	height: 520px;
	background: #ffffff;
	border: 1px solid #600;
}

#box1 {
	margin: 0px;
	padding: 0px;
	width: 130px;
	height: 130px;
	background: #46311C;
	float:left;/*removed from normal document flow and pushing left. Floats only affect the elements below them*/
}
#box2 {
	width: 130px;
	height: 130px;
	background: #968E88;
	float:left;/*floated elements go all the way over until they reach their containing element or until they reach another floated element. Pushing left beside the parent element above*/
}
#box3 {
	width: 130px;
	height: 130px;
	background: #46311C;
	float:left;
}
#box4 {
	width: 130px;
	height: 130px;
	background: #968E88;
	float:left;
}
#box5 {
	width: 130px;
	height: 130px;
	background: #968E88;
	float:left;
}
#box6 {
	width: 130px;
	height: 130px;
	background: #46311C;
	float:left;
}
#box7 {
	width: 130px;
	height: 130px;
	background: #968E88;
	float:left;
}
#box8 {
	width: 130px;
	height: 130px;
	background: #46311C;
	float:left;
}
#box9 {
	margin: 0px;
	padding: 0px;
	width: 130px;
	height: 130px;
	background: #46311C;
	float:left;
}
#box10 {
	width: 130px;
	height: 130px;
	background: #968E88;
	float:left;
}
#box11 {
	width: 130px;
	height: 130px;
	background: #46311C;
	float:left;
}
#box12 {
	width: 130px;
	height: 130px;
	background: #968E88;
	float:left;
}
#box13 {
	width: 130px;
	height: 130px;
	background: #968E88;
	float:left;
}
#box14 {
	width: 130px;
	height: 130px;
	background: #46311C;
	float:left;
}
#box15 {
	width: 130px;
	height: 130px;
	background: #968E88;
	float:left;
}
#box16 {
	width: 130px;
	height: 130px;
	background: #46311C;
	float:left;
}
</style>
</head>
<body>
<div id="wrapper">
	<div id="box1">
    </div>
    <div id="box2">
	</div>
	<div id="box3">
    </div>
    <div id="box4">
    </div>
    <div id="box5">
    </div>
    <div id="box6">
    </div>
    <div id="box7">
    </div>
    <div id="box8">
    </div>
    <div id="box9">
    </div>
    <div id="box10">
	</div>
	<div id="box11">
    </div>
    <div id="box12">
    </div>
    <div id="box13">
    </div>
    <div id="box14">
    </div>
    <div id="box15">
    </div>
    <div id="box16">
    </div>
</div>
</body>
</html>
Member Avatar for Arkinder

Hi Toby,

A class is more appropriate because it saves you time, and makes your CSS a lot easier to read. You're using the same CSS for each box, and the entire idea of an ID is that the element is unique. How you should have done this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
		
		* { margin: 0; padding: 0;}
		
		#wrapper {
			width: 520px;
			height: 520px;
			background: #ffffff;
			border: 1px solid #600;
		}
		
		.box {
			width: 130px;
			height: 130px;
			background-color: #46311C;
			float:left;
		}
		
		.alternate_color {
			background-color: #968E88;
		}
		
		</style>
	</head>
	
	<body>
	<div id="wrapper">
	
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
	
	</div>
	</body>
	
</html>

So now instead of having to change every CSS rule, you will only have to change two. As for making the layout fluid, it was to show you that height doesn't always play well with percentages. Just don't worry about it for now.

Regards
Arinder

Member Avatar for tobeeornot

That's great, Arkinder. It made me think about how to write more efficient code by applying class elements. I don't quite understand, though, how this can be used to make a checkerboard effect. When I applied the code to a text editor, it was alternating columns of color.

Member Avatar for Arkinder

Good! Well, that's pretty simple, and you don't have to change much.

<div id="wrapper">
	
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>

		<div class="alternate_color box">
		</div>
		<div class="box">
		</div>
		<div class="alternate_color box">
		</div>
		<div class="box">
		</div>

		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>

		<div class="alternate_color box">
		</div>
		<div class="box">
		</div>
		<div class="alternate_color box">
		</div>
		<div class="box">
		</div>
	
	</div>

This only works while the .alternate_color selector comes after the .box selector in your CSS.

Regards
Arkinder

Member Avatar for tobeeornot

Thanks Arkinder!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.