View Full Version : Almost there with the box!

06-06-2007, 09:25 PM

I should know how to do this but I am just not getting it.

All I need to do is get the bottom corners to match up. It would be really cool if I did not have to make the top left image bigger in height (so you do not see the background) too.
This is for this layout. ->http://twodayslate.com/test/test2.php

In case you do not know what I am going to do the box is going to be like digg (http://img117.imageshack.us/img117/5452/screenqx4.gif).com. It fades to white, then the content will have a chance to be 100% width.

edit:// I hate it when mods do not warn you before they give you an infraction. How is the above not descriptive? I thought it was pretty obvious what I wanted. Now no one is going to answer my question because of the infraction. :mad:

06-06-2007, 09:31 PM
Based on the screen shot, I would think that the gray‐to‐white gradient is a background image behind the white box rather than part of the white box itself. It looks like you’re trying to fade the box itself.

06-06-2007, 09:40 PM
Look here -> http://twodayslate.com/test/test2.php
Do you see the top right corner? That is the effect I want to accomplish - basically the only thing I am fading is the drop shadow.

edit:// edited the corner image, thanks for pointing that out.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<!--<script type="text/javascript">
function fixH(one,two) {
if (document.getElementById(one)) {
var lh=document.getElementById(one).offsetHeight;
var rh=document.getElementById(two).offsetHeight;
var nh = Math.max(lh, rh);

//this does it for three
function sortNum(a,b) { return b-a}
function fixH2(one,two,three) {
if (document.getElementById(one)) {
var obj=new Array(3);
var option=[one,two,three];
for(var i=0; i<option.length; i++) {
for(var i=0; i<option.length; i++) {


<style type="text/css">
* {
margin: 0;
padding: 0;

html {
font-family: Verdana, Arial, Georgia, Helvetica, 'Trebuchet MS', sans-serif;
font-size: 12px;
height: 100%;

body {
height: 100%;
background: gray;
padding-top: 50px;

#bodycontentcontainer {
width: 80%;
min-width: 700px;
margin: 0 auto;
overflow: hidden;

#rightcorners {
float: right;
width: 23px;
background: none;

.bottomrightcorner {
position: relative;
margin-right: 50px;

.toprightcorner {

#leftcorners {
float: left;
width: 13px;
margin-top: 20px;

.topleftcorner {
margin-top: -19px;
position: absolute;
.bottomleftcorner {
position: relative;

#bodycontent {
background: #FFF;
margin-left: 10px;
margin-right: 19px;
margin-top: 1px;
/* temp */ padding: 10px;
min-height: 200px;

#bottomdropshadow {
background: url(http://images.twodayslate.com/design/bottomrepeatingdropshadow.png);
font-size: 1px;
height: 9px;
margin-right: 19px;
margin-left: 10px;



<div id="bodycontentcontainer">

<div id="rightcorners">
<img src="http://images.twodayslate.com/design/toprightcornerbody.png" alt="trc" class="toprightcorner" />
<img src="http://images.twodayslate.com/design/bottomrightcornerbody.png" alt="trc" class="bottomrightcorner" />

<div id="leftcorners">
<img src="http://images.twodayslate.com/design/leftopcorner.png" alt="tlc" class="topleftcorner" />
<img src="http://images.twodayslate.com/design/bottomleftcorner.png" alt="tlc" class="bottomleftcorner" />

<div id="bodycontent">
Content<br />Curently working on the header. Next I am going to work on the body part (corners), I need to make the right side drop shadows shorter. After that the minor stuff like login, lists, links and search. Off to the PHP after that! uh oh!<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In lobortis risus et sapien. Integer est diam, elementum eget, lacinia vitae, condimentum et, nisi. Nunc nonummy tortor vitae odio luctus consectetuer. Phasellus sit amet massa quis leo porttitor mollis. Duis placerat. Sed a nulla nec ante luctus varius. Sed placerat risus eget pede commodo egestas. Sed non est. Ut pulvinar pulvinar augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse malesuada ligula ac erat.
Nullam facilisis rhoncus est. Nunc consectetuer nisi ac diam. Donec nibh tellus, porta in, ullamcorper quis, egestas eu, odio. Aliquam sagittis mollis leo. Phasellus laoreet lectus sed nisl lacinia blandit. Vivamus justo neque, luctus quis, ultricies id, suscipit non, nisl. Vivamus imperdiet magna vel velit. Pellentesque odio quam, malesuada at, tempor ut, malesuada id, urna. Donec sit amet ante. Pellentesque nec quam in lacus molestie luctus. Ut rhoncus egestas justo. Fusce posuere vestibulum libero. </p>
</div> <!-- end bodycontent -->

<div id="bottomdropshadow">&nbsp;</div>

</div> <!-- end bodycontentcontainer -->


06-07-2007, 04:11 AM
I think I got it!

I am coding it for IE7 now, how is everything on your end? (ugg... IE6 doosie)

edit:// what is up with IE7?

When I expanded my box the bottom drop shadow lost some pixels. ???

06-10-2007, 08:14 PM
Any one know what is wrong?

06-11-2007, 06:25 PM
It seems as if the bottom right corner moves about 6 pixels to the right. Or do my eyes deceive me?

06-11-2007, 09:46 PM
I just feld over this today, don't know if it might help you: http://www.html.it/articoli/niftycube/index.html

06-13-2007, 06:33 AM
What is wrong with the way I have done it?

06-24-2007, 03:15 AM
Help is appreciated.

06-25-2007, 04:31 AM
edit:// I got it to work, just played around with the code. I got it to work in IE7 too. Any bugs? How is IE6 or any other browsers?