SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2011
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to add a shadow with glow effect

    I have searched the sitepoint forum and managed to find a thread about this. The code that i used is:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Shutter Lens Background Edge</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
     
    #glow,
    #glow .rt,
    #glow .lb,
    #glow .rb {
        float: left;
        position: relative;
        background: url(glow.gif) no-repeat;   /* one maximum large glowing edge image */
    }
    #glow .rt {
        background-position: right top;
        margin: 0 0 0 10px;                    /* left top corner width */
    }
    #glow .lb {
        background-position: left bottom;
        margin: 10px 0 0 -10px;                /* left and right top corners height, balans left */
    }
    #glow .rb {
        background-position: right bottom;
        margin: 0 0 0 10px;                    /* left bottom corner width */
        padding: 0 10px 10px 0;                /* even out the top and resulting left margins */
    }
    </style>
    </head>
    <body>
        <div id="glow"><div class="rt"><div class="lb"><div class="rb">
            <p>Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convallis enim sapien tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. At Maecenas porttitor dui libero vel eros tincidunt et quis condimentum. Et tempor ac vitae ut Vestibulum faucibus elit Phasellus netus ut. Id orci orci ipsum tellus convallis est.</p>
        </div></div></div></div>
    </body>
    </html>
    The problem is that, after i applied the code to my site, the site now have been positioned to the left. Have a look: articles
    I have tried with float: center, but doesn't work, the image remains blocked on the header, despite the fact the site is being centered.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You need to center your outer wrapper. Float: center doesn't exist, so ry this:

    Code:
    #glow {
      margin: 0 auto;
      width: 1026px;
       float: none;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2011
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much, worked well. Also voted you! THank you !

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Great, glad that helped!
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Tags for this Thread

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
  •