SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop shadow on Container\Wrapper not working properly

    Hey all,

    Not sure if I'm using the best solution but it's one that seems easy but for me it's not working right and the other solutions I've tried do the same so I must be missing something in the code.

    Basically I am trying to add a drop shadow for the Container DIV. I created a PNG 1000 px Wide x 10 px High and used this as the background for the Wrapper DIV with Repeat Y. It only seems to show the drop shadow on the edges of the head-top DIV and doesn't even extend to the head-bottom part of the header DIV.

    Here is the HTML

    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>Flip it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
    <div id="container">
    <div id="header">
    <div id="head-top"><img src="images/Flip-it-logo.png" alt="Company Logo" width="168" height="57" id="logo" /></div>
    <div id="head-bottom">
    <div id="moto"></div>
    </div>
    <div id="content">This is the main content area</div>
    <div id="footer"></div>
    </div>
    </div>
    </div>
    </body>
    </html>
    The CSS

    Code:
    @charset "utf-8";
    
    
    body {
        background-image: url(images/images/bggrad_01.png);
        background-repeat: repeat-x;
        margin-top: 0px;
        padding-top: 0px;
    }
    #wrapper {
        width: 1000px;
        margin-right: auto;
        margin-left: auto;
        height: auto;
        background-image: url(images/shadow.png);
        background-repeat: repeat-y;
    }
    #container {
        width: 942px;
        height: auto;
        margin-right: auto;
        margin-left: auto;
        background-color: #FFF;
    }
    #header {
        width: 100%;
        height: 126px;
        margin-right: auto;
        margin-left: auto;
    }
    #head-top {
    	background-image: url(images/topheaderbg.png);
    	background-repeat: repeat-x;
        width: 100%;
        height: 126px;
        background-color: #06266F;
    }
    #head-bottom {
        width: 100%;
        height: 101px;
        background-image: url(images/bottombannerbg.png);
    }
    #logo {
        float: left;
        margin-top: 35px;
        margin-left: 27px;
    }
    #moto {
        float: left;
        margin-top: 10px;
        margin-left: 31px;
        background-image: url(images/moto.png);
        height: 52px;
        width: 414px;
    }
    #footer {
        background-image: url(images/topheaderbg.png);
        background-repeat: repeat-x;
        height: 300px;
        width: 100%;
    }
    Many thanks for any help you can give me

  2. #2
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay so I'm still trying to get this to work n may have made some progress but only if I set the Height on the Content area. I have seen code to keep the Footer at the bottom but without starting from scratch I've not been successful in getting it to work with my design.

    This seems to work okay apart from the fixed Height.

    Can anyone help me adapt this code so that the Footer stays on the bottom of the screen?

    Code so far...

    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>Flip it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
    <div id="container">
    <div id="header">
    <div id="head-top"><img src="images/Flip-it-logo.png" alt="Company Logo" width="168" height="57" id="logo" />
    </div>
    <div id="head-bottom">
    <div id="moto"></div>
    </div>
    <div id="content"><p>This is the main content area</p></div>
    <div id="footer"></div>
    </div>
    </div>
    </div>
    </body>
    </html>
    CSS

    Code:
    @charset "utf-8";
    *     {
        margin: 0px;
        padding: 0px;
    }
    html, body {height: 100%;}
    body {
        background-image: url(images/images/bggrad_01.png);
        background-repeat: repeat-x;
    }
    #wrapper {
        width: 1000px;
        margin-right: auto;
        margin-left: auto;
        min-height: 100%;
        background-image: url(images/shadow.png);
        background-repeat: repeat-y;
    }
    #container {
        width: 942px;
        margin-right: auto;
        margin-left: auto;
        background-color: #FFF;
    }
    #header {
        width: 100%;
        height: 126px;
    }
    #head-top {
        background-image: url(images/topheaderbg.png);
        background-repeat: repeat-x;
        width: 100%;
        height: 126px;
        background-color: #06266F;
    }
    #head-bottom {
        width: 100%;
        height: 101px;
        background-image: url(images/bottombannerbg.png);
    }
    #logo {
        float: left;
        margin-top: 35px;
        margin-left: 27px;
    }
    #moto {
        float: left;
        margin-top: 10px;
        margin-left: 31px;
        background-image: url(images/moto.png);
        height: 52px;
        width: 414px;
    }
    #content {
        background-color: #EAEAEA;
        width: 100%;
        height:558px;
    }
    #footer {
        background-image: url(images/topheaderbg.png);
        height: 126px;
    }

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I can see your bg graphics so, I may be a bit off here. It's important to note that you only get ONE SHOT at 100% height. That is if you are using the container to holed a bg shadow and your content holds "clashing" image .. then it isn't going to work. If you were to set the container to height:100% then it wont expand if there is more than one screen height worth of content, and your shadow will appear to get cut off. If you set it to min-height:100% then you drop shadow will work but if your content isnt tall enough then the "black" part of the shadow will show beneath; this is why the content and shadow images must match somehow. I dunno if that is clear.

    In either case , keeping in mind the aforementioned caveats, this would be a way to build what you are looking for.

    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>Flip it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    @charset "utf-8";
    *     {
        margin: 0px;
        padding: 0px;
    }
    html, body {height: 100%;}
    body {
        background-image: url(images/images/bggrad_01.png);
        background-repeat: repeat-x;
    }
    #wrapper {
        width: 1000px;
        margin: 0 auto;
        min-height:100%;
        background-image: url(shadow.png);
        background-repeat: repeat-y;
        position: relative
    }
    #container {
        width: 942px;
        margin: 0 auto;
        background-color: #FFF;
    }
    #header { float:left; width:100%}
    #head-top {
        background-image: url(images/topheaderbg.png);
        background-repeat: repeat-x;
        height: 126px;
        background-color: #06266F;
     }
    #head-bottom {
        height: 101px;
        overflow: hidden;
        background-image: url(images/bottombannerbg.png);
    }
    #logo {
        float: left;
        outline: 1px solid red;
        margin-top: 35px;
        margin-left: 27px;
    }
    #moto {
    	float:left;
        margin: 10px 0 0 31px;
        background-image: url(images/moto.png);
        background-color:pink;
        height: 52px;
        width: 414px;
    }
    #content {
        background-color: #EAEAEA;
        padding-bottom: 126px;
        margin-bottom: -126px;
        clear:both;
    }
    #footer {
        background-image: url(images/topheaderbg.png);
        height: 126px;
        background: red;
        width: 942px;
        position: absolute;
        left:29px;
        bottom:0;
    }
    
    </style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="container">
    		<div id="header">
    			<div id="head-top"><img src="images/Flip-it-logo.png" alt="Company Logo" width="168" height="57" id="logo" /></div>
    			<div id="head-bottom">
    				<div id="moto">This is your motto</div>
    			</div>
    		</div>
    		<div id="content"><p>This is the main content area</p></div>
    	</div>
    	<div id="footer">footer</div>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Dresden thanks for your input. To be honest I think I need to start from the beginning I'm trying to create a template for Wordpress for the first time and piecing together various code snippets from the web to try and turn my Photoshop design into a working HTML page isn't going so well...

    I'll forget the content design for now as I have a clear idea of how I want it to look and function and concentrate on getting a working HTML page that has a Centred Main Container, a drop shadow around this container and a Footer that expands to the height of the screen if there isn't enough content and expands to accommodate more content when needed.

    Thanks again


Bookmarks

Posting Permissions

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