asked on

CSS Repeating DIV Blocks, 2+ columns

I would like to create a CSS/HTML page that looks like the attached template.

I need to create this without using images - I need to use only div tags, background colors, positioning (absolute, relative, static, etc.). I've attempted this myself and have ran into various problems. So, rather than trying to fix my attempt, I'd rather a fresh pair of eyes/hands create the code from their more experienced perspective.

Can anyone attach code that accomplishes precisely what is in this template?
template1.jpg

webdude77

ASKER

Here is an attempt at getting a better version of the template to appear. If you click and save, either of these should look fine. Please be aware that there are subtle grey lines that do not appear in the Experts-Exchange window above. You must click and save/view the image.
template1.jpg

Doc_McAlister

As a general approach.

1 - Set the background of the body element to that light grey (stripe image?).

2 - make a frame div around everything in your body. Use it to position your other divs the right distance from the top, left, and right of the page.

3 - Make a main area div that is white background and grey border. It goes in the frame div floating left. Set its width to the desired % or pixel width. Leave enough room in the frame to the right of #main for your link tabs. If you give the frame div a temporary border you can eyeball the spacing.

4 - The link tabs are made of 3 elements. The outer Div is the dark grey box. The first inner div is a left floating green box as tall as the grey box with a left margin that leaves some space between it and the left side of the grey box. The second inner div is just a container for the text.

<div class="outer">
<div class="greenStripe">
</div>

<div class="linkText">
Link
</div>
</div>

Place as many tabs under the #main div in the html as you have room for. #main has to go above them in the body cause main is floating left.

webdude77

ASKER

I gave it a try, but float wasn't working quite right. So, I tried position: relative, static, absolute and fixed. A test page is here:

http://www.stardeck.com/help/try1.htm

Any ideas on how to best match the code with the template image?

Also, the code is here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS Page</title>
 
<style type="text/css">
	
	body {
		margin:10px 10px 10px 10px;
		background: #efefef;
		font-family: Arial;
		font-size: 16px;
		}
	
	p {
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
		}
	
	#wrap {
		position: static;
		}
 
	#banner {
		position: static;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		border-right: 1px solid #999;
		border-left: 1px solid #999;
		padding:5px 5px 5px 5px;
		background: #fff;
		margin:0px 0px 10px 0px;
		}
 
	#maincontent {
		position: static;
		width: 600px;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		border-right: 1px solid #999;
		border-left: 1px solid #999;
		padding:5px 5px 5px 5px;
		background: #fff;
		}
		
	#maincontent p {
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
		}
 
 
	#rightside_a {
		position: relative;
		top: 55px;
		left: 621px;
		width: 30px;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		border-right: 1px solid #999;
		border-left: 0px solid #999;
		padding:0px 0px 0px 0px;
		background: #666;
		margin:0px 0px 10px 0px;
		}
 
	#rightside_b {
		position: absolute;
		left: 31px;
		width: 30px;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		border-right: 1px solid #999;
		border-left: 1px solid #999;
		padding:0px 0px 0px 0px;
		background: #339933;
		margin:0px 0px 10px 0px;
		}
		
	#rightside_c {
		position: relative;
		left: 80px;
		width: 100px;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		border-right: 1px solid #999;
		border-left: 1px solid #999;
		padding:5px 5px 5px 5px;
		background: #666;
		color: #fff;
		margin:0px 0px 10px 0px;
		}
 
</style>
</head>
 
<body>
 
<div id="wrap">
<!-- Begin Content -->
 
<div id="banner">
<p>Banner/Header</p>
</div>
 
<div id="maincontent">
<p>We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. </p>
<p>We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. We are testing. </p>
</div>
 
<div id="rightside_a">
  <div id="rightside_b"><p>&nbsp;</p></div>
  <div id="rightside_c"><p>Link 1</p></div>  
</div>
 
<div id="rightside_a">
  <div id="rightside_b"><p>&nbsp;</p></div>
  <div id="rightside_c"><p>Link 2</p></div>  
</div>
 
<div id="rightside_a">
  <div id="rightside_b"><p>&nbsp;</p></div>
  <div id="rightside_c"><p>Link 3</p></div>  
</div>
 
 
<!-- Begin Content -->
</div>
 
</body>
</html>

Open in new window

webdude77

ASKER

I am getting closer. Here is a preview page (please view source for source code).

http://www.stardeck.com/help/try2.htm

For some reason, I needed to use a negative value for things to line up nicely (top: -35px;). Also, I am trying to figure out how to make the left "main content" area to be fluid, and the right side to be fixed. Similarly, I'd like each of the gray "Link" boxes to be at least a height of 25px, but more if the line wraps onto two.

Not sure how to accomplish these 2 things and fix that negative value...

ASKER CERTIFIED SOLUTION

Doc_McAlister

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

webdude77

ASKER

For the fluidity, I meant that I wanted the "maincontent" area to stretch as wide as possible, while the "rightside" has a fixed width of 150. So, if it we were using tables to make this page, we would have:

<table border="1" width="100%"><tr><td> </td><td width="150"> </td></tr></table>

The code you posted works pretty well. One thing that seems to respond strangely is the ".Spacer" class. It has a value of 5 px, but looks like more than 5. When I put in 1 px, it looks more like 5. When I change it from 1 to 0, it seems to jump 5 pixels.

Any suggestions for these 2 issues?

Doc_McAlister

The banners padding of 5 px extends below the banner and the spacer pushes off that. So it is behaving as expected.

For making the main area stretch start removing width attributes or setting them to 100%. Start with the wrap div and move in.

For more detail I'd make another question. This is out of the scope of the initial question (making the tabs without using images).

Good luck.

webdude77

ASKER

Answer accepted, points awarded. Thanks Doc McAlister!

The second part to this question (fluidity like that of a table) has been posted as a second question:

https://www.experts-exchange.com/questions/23354904/CSS-Fluidity-like-Table-Fluidity-Fluid-main-w-specific-rightside-width.html