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,198
    Mentioned
    456 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;
    }

  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,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Great, glad that helped!


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
  •