•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 427,204 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,159 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 277 | Replies: 5
 |
•
•
Join Date: Mar 2008
Posts: 3
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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.
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.
•
•
Join Date: Jul 2007
Posts: 13
Reputation:
Rep Power: 2
Solved Threads: 0
Newbie Poster
<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>
•
•
Join Date: Mar 2008
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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.
*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.
Last edited by phynias : Apr 15th, 2008 at 2:44 pm.
•
•
Join Date: Jul 2007
Posts: 13
Reputation:
Rep Power: 2
Solved Threads: 0
Newbie Poster
As far as I know, you can't round corners of divs without using pictures.
•
•
Join Date: Jul 2007
Posts: 13
Reputation:
Rep Power: 2
Solved Threads: 0
Newbie Poster
<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>
•
•
Join Date: Jul 2007
Posts: 13
Reputation:
Rep Power: 2
Solved Threads: 0
Newbie Poster
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
CSS
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;
} Last edited by tashakota : Apr 15th, 2008 at 3:22 pm.
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
Other Threads in the HTML and CSS Forum
- Previous Thread: Form submit with weird select box result
- Next Thread: image position in a container.
