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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Question Container div to height of content?

    Hi there,
    I'm working on a new template for a client, and I want the main body of the page to have a drop shadow, but of course it's difficult to set drop shadows for just certain sides of a div. So I decided to create a container div that would have the shadows. The problem I'm running in to is that without setting the "body,html" to 100%, the container only stretches down a little ways. BUT, with that "body,html" set to 100%, it stretches far past where I need it to be.

    http://dev.yourbusybee.com/kaleco/te...lecoindex.html

    I WANT it to be going to just above the copyright notice, right at the edge of the tiled footer background. I thought that was where I'd set the closed div for that container, but that's not where it's stopping.

    Help?

    ~Laura
    Last edited by operapixie; 12-28-2012 at 06:41 PM. Reason: Removed P.S.'s

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello operapixie,
    You wrap the entire site in .shadowbox and put a 100% height on it so, of course, that's what it does.

    If you want your shadow to stop at the bottom of .outer and not enclose #copyright, you will need to close .shadowbox sooner. The 100% height would have to go too.

    Look at it like this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Kaleco Floral Design</title>
    <link href="kaleco.css" rel="stylesheet" type="text/css" />
    <script src="js-image-slider.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="shadowbox">
            <div id="header">
                <div id="xcontainer">    
                    <ul class="social">
                            <li class="facebook"><a href="#"><strong>Facebook</strong></a></li>
                            <li class="twitter"><a href="#"><strong>Twitter</strong></a></li>
                            <li class="pinterest"><a href="#"><strong>Pinterest</strong></a></li>
                            <li class="rss"><a href="#"><strong>RSS</strong></a></li>
                    </ul>
                <!--end xcontainer--></div>        
                <div id="banner">
                    <img class="top_logo" src="kalecologoa.png" width="235" style="margin-top:-97px;margin-left:40px;">
                    <h1>KALECO DESIGN</h1>            
                    <ul id="button">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Store</a></li>
                            <li><a href="#">Contact Us</a></li>
                    </ul>                                                                                                
                </div>
            <!--end header--></div>            
                <div class="main">
                <!--end .main--></div>            
                    <div class="outer">    
                        <div class="inner"></div>
                    <!--end .outer--></div> 
        <!--end .shadowbox--></div>       
            <div id="copyright">
                <span class="nav4">
                    &copy; 2012 Kaleco Designs, all rights reserved. | Web Design by 
                    <a href="http://www.yourbusybee.com/" title="YourBusyBee.com" target="_blank">YourBusyBee.com</a>.
                </span>
            <!--end copyright--></div>
    </body>
    </html>
    And, like I mentioned earlier -
    Code:
    .shadowbox {
    	width: 1020px;
    	/*height:100%;*/
    	margin-left:auto;
    	margin-right:auto;
    	-moz-border-top-left-radius: 15px;
    	border-top-left-radius: 15px;
    	-moz-border-top-right-radius: 15px;
    	border-top-right-radius: 15px;
    	-moz-border-bottom-left-radius: 15px;
    	border-bottom-left-radius: 15px;
    	-moz-border-bottom-right-radius: 15px;
    	border-bottom-right-radius: 15px;
    	-webkit-box-shadow: 0px -2.6px 7px #ccc;
    	-moz-box-shadow: 0px -2.6px 7px #ccc;
    	box-shadow: 0px -2.6px 7px #ccc;
    }
    Last edited by Excavator; 12-28-2012 at 07:07 PM. Reason: highlighted other closing tags
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks so much, Excavator.

    I've made those changes, but it's still not right. It seems that the shadowbox container is only a few pixels tall, and is behind everything, which then causes the copyright notice to appear up at the top of the page.

    Hmmmm...I'm sure I did something wrong from what you suggested though. It's not uncommon for me to miss little details (blame my raging ADD...LOL)

    ~Laura

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by operapixie View Post
    Thanks so much, Excavator.

    I've made those changes, but it's still not right. It seems that the shadowbox container is only a few pixels tall, and is behind everything, which then causes the copyright notice to appear up at the top of the page.

    Hmmmm...I'm sure I did something wrong from what you suggested though. It's not uncommon for me to miss little details (blame my raging ADD...LOL)

    ~Laura
    Look at my original post, I've gone back and highlighted other closing tags - some of which your code did not have.
    A good way to find that sort of thing is by validating. Check out the links in my signature.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Ok. Definitely getting closer. I will have to look more carefully when I'm back in my office and have fewer distractions. Thank you so much, Excavator!

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Now you close .shadowbox before your footer. Did you want .outer to have no shadow?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts
    YES! Got it to work now. THANK you!
    Last edited by operapixie; 12-29-2012 at 06:25 PM.


  •  

    Posting Permissions

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