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 2 of 2

Thread: Expandable box

  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    116
    Thanks
    11
    Thanked 4 Times in 4 Posts

    Expandable box

    I'm trying to create a box that expands from width or content only so I have a the left shadow, the middle bg that will repeat x and right shadow whats the best way to do this so it stays browser friendly

    My css
    Code:
    #layout_canvas {
     	background: #FFF url(<?php echo $vars['url']; ?>mod/violoa/graphics/background/content_bg.gif) repeat-x;
    	margin:0 0 20px 0;
        min-height: 558px;
    }
    
    #layout_canvas div.topleft {
    	display: block;
    	background: url(<?php echo $vars['url']; ?>mod/violoa/graphics/background/content_left.gif) top left no-repeat;
        padding: 2.0em 0em 0em 2.0em;
        height: 558px;
    }
    
    #layout_canvas div.topright {
    	display: block;
    	background: url(<?php echo $vars['url']; ?>mod/violoa/graphics/background/content_right.gif) top right no-repeat;
        padding: 2.0em;
    	margin: -2.0em 0 0 2.0em; 
        height: 558px;
    }
    
    #layout_canvas div.bottomleft {
    	display: block;
    	height: 45px;
    	margin-top: -2.0em;
    }
    
    #layout_canvas div.bottomright {
    	display: block;
    	height: 45px;
    	margin-left: 3.0em;
    }
    html
    Code:
    <!-- canvas -->
    <div id="layout_canvas">
        <div class="topleft">
        <div class="topright">
    </div>
    <?php echo $vars['body']; ?>
    </div>
    <div class="clearfloat"></div>
    </div><!-- /#layout_canvas -->
    Last edited by The_Return; 12-23-2009 at 02:33 PM.

  • #2
    Regular Coder
    Join Date
    Dec 2008
    Posts
    116
    Thanks
    11
    Thanked 4 Times in 4 Posts
    Ok got further the problem now is it pushes the content to the bottom you can see here http://violoa.com/


  •  

    Posting Permissions

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