Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other placing outerglow…

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #32823
    gmox
    Participant

    I’m trying to build my 1st site. I’ve finished the PS mock up and have everything done on the home page except the outer glow effect. Can’t figure it out.

    Here’s a screen shot of how I made the mock up:

    http://imageshack.us/f/542/psscreen.jpg/

    And, here’s my html:














    And, the CSS:


    body {
    font-family:Georgia, "Times New Roman", Times, serif;
    background:#565453 url(images/bg.jpg);
    margin: 15px auto 30px;
    padding: 0;
    }

    p, h1, h2, h3, h4, h5, h6 li {
    margin: 1ex 1em;
    }

    #outerDiv {
    width: 1000px;
    margin: 0 auto;
    background: url(images/fullBanner_03.png) no-repeat;
    }


    /*header*/

    #header {
    height: 191px;
    position: relative;
    }

    #slogan {
    color: #d34f2b;
    display:block;
    position: absolute;
    left: 860px;
    padding-top: 12px;
    }
    #leftNav {
    position: absolute;
    left: 58px;
    bottom: 20px;
    }
    #leftNav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }
    #leftNav ul li {
    margin: 0px;
    padding: 0px;
    float: left;
    }
    #leftNav ul li a {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.25em;
    font-style: italic;
    font-weight: normal;
    color: #e7edb2;
    text-decoration: none;
    display: block;
    padding: 0px 20px 0px 0px;
    margin: 0px 80px 0px 0px;
    }
    #rightNav {
    position: absolute;
    right: 58px;
    bottom: 20px;
    }
    #rightNav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }
    #rightNav ul li {
    margin: 0px;
    padding: 0px;
    float: right;
    }
    #rightNav ul li a {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.25em;
    font-style: italic;
    font-weight: normal;
    color: #e7edb2;
    text-decoration: none;
    display: block;
    padding: 0px 0px 0px 20px;
    margin: 0px 0px 0px 80px;
    }

    /*main*/

    #main {
    background:url(images/flowerMoxie02.jpg);
    width: 1000px;
    height: 525px;
    }

    Thanks all for taking the time to help!

    #75605
    alexbass
    Participant

    On #outerDiv?

    try this:

    #outerDiv {
    width: 1000px;
    margin: 0 auto;
    background: url(images/fullBanner_03.png) no-repeat;
    -webkit-box-shadow: 0 0 20px #000;
    -moz-box-shadow: 0 0 20px #000;
    box-shadow: 0 0 20px #000;
    }

    Welcome to the world of WebKit! (and Gecko)

    #75609
    gmox
    Participant

    yeah that worked, but ran into another problem… The drop shadow on top started at the top of my dog’s ears were he is poking out of the header. So there was a gray bar (the bg) on top of the header and below the start of the drop shadow.

    idk, maybe there is a better way to write this up than the way I have it. Seems like this should be so simple. You guys make it look way to easy!

    #75547
    gmox
    Participant

    Got it figured out with better markup.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Other’ is closed to new topics and replies.