WordPress.org

Ready to get started?Download WordPress

Forums

multiple backgrounds css dropshadow page frame (2 posts)

  1. verveportraits
    Member
    Posted 3 years ago #

    I have the following in my style sheet...

    body {
    	font-size: 13px;
    	font-family:Century Gothic, Helvetica, sans-serif;
    	color: #333;
    	text-align: center;
    	margin:0px;
    	padding: 25px;
    }
    
    #topshadow {
            height: 62px
            width:1030px;
            background-image: url(images/top-shadow.png);
    }
    
    #pageborders {
    	width:1030px;
    	min-height:100%;
    	margin:auto;
            background:url(images/mid-shadow.png);
    }
    
    #bottomshadow {
            margin:0px;
    	height:66px;
    	width:1030px;
    	background:url(images/bottom-shadow.png);
    }

    I want to have these 3 "borders" around my page creating a drop-shadow effect. Since I can't rely on -moz box in all browsers I need to use an image. I cannot figure out what I need to do differently in positioning them.

    See what I'm working on here:
    http://blog.vervelifeportraits.com

    I have the following structure:
    <body
    <?php body_class(); ?>>
    <div id="topshadow">
    </div>
    <div id="pageborders">
    <div id="page">
    <div id="header">
    <div id="headerimg">
    </div>
    </div>
    <div id="slideshow">
    </div>
    <ul id="menu">

    <div id="header_bottom">
    <div id="header_bottom_left">
    </div>
    <div id="header_bottom_right">
    </div>
    <div id="twitter">
    </div>
    <div id="twitter-status">
    </div>
    </div>
    <div id="page_line">
    </div>
    </div>

    Would I be better off using a div class instead?

    a la ... http://www.alistapart.com/articles/cssdropshadows/

    I need help because what I am doing is not working. All of the images are showing up in the correct places but the mid-shadow image is overlapping the top-shadow and bottom-shadow images giving it a wonky look in the corners.

    If it weren't for ie, I would just use code to create the drop shadow in the #pageborders div but it looks like crap in ie that way.

  2. Shannon Smith
    Member
    Posted 3 years ago #

    What you might want to try, in order to simplify things a bit is the following.

    Use this css class wherever you want a drop shadow :

    .shadow {
    	box-shadow: 5px 10px 25px #666;/*CSS3*/
    	-khtml-moz-box-shadow: 5px 10px 25px #666;/*Konquerer*/
    	-moz-box-shadow: 5px 10px 25px #666;/*Firefox*/
    	-webkit-box-shadow: 5px 10px 25px #666;/*Safari*/
    }

    Then, to make it work in ie, use this javascript code: http://css3pie.com/

    You'll end up with something like this:

    .shadow {
    	box-shadow: 5px 10px 25px #666;/*CSS3*/
    	-khtml-moz-box-shadow: 5px 10px 25px #666;/*Konquerer*/
    	-moz-box-shadow: 5px 10px 25px #666;/*Firefox*/
    	-webkit-box-shadow: 5px 10px 25px #666;/*Safari*/
    behavior: url(path/to/PIE.htc);
    }

Topic Closed

This topic has been closed to new replies.

About this Topic