Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts

    Almost there with the box!

    http://images.twodayslate.com/box.php

    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.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.
    Last edited by twodayslate; 06-07-2007 at 03:58 PM.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    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.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>box</title>
    
    <!--<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);
    document.getElementById(one).style.height=nh+"px";
    document.getElementById(two).style.height=nh+"px";
    }
    }
    
    //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++) {
    document.getElementById(option[i]).style.height="auto";
    obj[i]=document.getElementById(option[i]).offsetHeight;
    nh=obj.sort(sortNum);
    }
    nh1=nh.splice(1,2);
    for(var i=0; i<option.length; i++) {
    document.getElementById(option[i]).style.height=nh+"px";
    }
    }
    }
    //
    
    
    window.onload=function(){
    fixH('leftcolumn','rightcolumn');
    fixH2('rightcorners','leftcorners','bodycontent');
    }
    </script>-->
    
    
    <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;
    	
    }
    </style>
    </head>
    
    <body>
    
    <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>
    
    <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>
    
    <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 -->
    
    </body>
    </html>
    Last edited by twodayslate; 06-06-2007 at 10:26 PM.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #4
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    I think I got it!
    http://images.twodayslate.com/box.php

    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. ???
    Last edited by twodayslate; 06-07-2007 at 03:53 PM.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #5
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Any one know what is wrong?
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #6
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    It seems as if the bottom right corner moves about 6 pixels to the right. Or do my eyes deceive me?
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    I just feld over this today, don't know if it might help you: http://www.html.it/articoli/niftycube/index.html

  • #8
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    What is wrong with the way I have done it?
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #9
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Help is appreciated.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #10
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    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?
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •