0

I can't figure out how to get boxes like this without images. I want to do it all with divs so any help would be appreciated.

http://turk-182.com/comp05.jpg

so i want to be able to put the orange boxes (more like box offset by a box) in rows and boxes. so basically multiple orange boxes on a single page.

2
Contributors
5
Replies
6
Views
9 Years
Discussion Span
Last Post by tashakota
0
<div style="width:300px; height: 300px; background-color:orange; float:left;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   </div>
	</div>
0

that's not what i ment. if you look at the example the orange boxes arent exactly squares. they are sort of boxes offset with another box.

*edit: looking at your code it looks like you wanted to do the offset but when i put it in a page it just looks like yellow boxes surrounded by orange.

0
<div style="width:300px; height: 300px; background-color:orange; float:left; margin:0px 3px 3px 3px;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   		<div style="width:200px; height:200px; position:relative; left:40px; top:40px; background-color:#FFCC33;">
			</div>
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left; margin:0px 3px 3px 3px;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   		<div style="width:200px; height:200px; position:relative; left:40px; top:40px; background-color:#FFCC33;">
			</div>
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left; margin:0px 3px 3px 3px;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   		<div style="width:200px; height:200px; position:relative; left:40px; top:40px; background-color:#FFCC33;">
			</div>
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left; margin:0px 3px 3px 3px;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   		<div style="width:200px; height:200px; position:relative; left:40px; top:40px; background-color:#FFCC33;">
			</div>
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left; margin:0px 3px 3px 3px;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   		<div style="width:200px; height:200px; position:relative; left:40px; top:40px; background-color:#FFCC33;">
			</div>
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left; margin:0px 3px 3px 3px;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   		<div style="width:200px; height:200px; position:relative; left:40px; top:40px; background-color:#FFCC33;">
			</div>
	   </div>
	</div>
0

the above code is long and messy, so once *I* get it to the way I like, I use CSS instead of having all that in the main page. So each element would be given a name or class which would dictate what would happen to it.

So:
Main page of site

<div class="Orangebox">
	   <div class="yellowbox">
	   		<div class="otherorangebox">
			</div>
	   </div>
	</div>
	<div class="Orangebox">
	   <div class="yellowbox">
	   		<div class="otherorangebox">
			</div>
	   </div>
	</div>
	<div class="Orangebox">
	   <div class="yellowbox">
	   		<div class="otherorangebox">
			</div>
	   </div>
	</div>
	<div class="Orangebox">
	   <div class="yellowbox">
	   		<div class="otherorangebox">
			</div>
	   </div>
	</div>
	<div class="Orangebox">
	   <div class="yellowbox">
	   		<div class="otherorangebox">
			</div>
	   </div>
	</div>
	<div class="Orangebox">
	   <div class="yellowbox">
	   		<div class="otherorangebox">
			</div>
	   </div>
	</div>

CSS

.Orangebox {
	width:300px; 
	height: 300px; 
	background-color:orange; 
	float:left; 
	margin:0px 3px 3px 3px;
}

.yellowbox {
	width:200px; 
	height:200px; 
	position:relative; 
	left:30px; 
	top:30px; 
	background-color:yellow;
}

.otherorangebox {
	width:200px; 
	height:200px; 
	position:relative; 
	left:40px; 
	top:40px; 
	background-color:#FFCC33;
}
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.