-
HTML and CSS (
http://www.daniweb.com/forums/forum143.html)
| phynias | Apr 15th, 2008 3:26 pm | |
| can't figure out how...
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. |
| tashakota | Apr 15th, 2008 3:39 pm | |
| Re: can't figure out how...
<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>
|
| phynias | Apr 15th, 2008 3:41 pm | |
| Re: can't figure out how...
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. |
| tashakota | Apr 15th, 2008 4:12 pm | |
| Re: can't figure out how...
As far as I know, you can't round corners of divs without using pictures. |
| tashakota | Apr 15th, 2008 4:16 pm | |
| Re: can't figure out how...
<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>
|
| tashakota | Apr 15th, 2008 4:18 pm | |
| Re: can't figure out how...
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;
}
|
| All times are GMT -4. The time now is 5:56 am. | |
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC
