SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to reproduce this image with css

    I have a background with a drop shadow and as a static image it is fine but what I would like to do is break it into 3 parts, a top, middle and bottom.

    Then using CSS I would like it to be able to put the top with no repeat, the bottom with repeat enough for any text, and then the bottom with no repeat. I cannot seem to get it to work and I am not sure if I have to put each one in its own div as a background-image or what.

    Any help would be appreciated,

    Dan

    ****I have the three images showing up in three separate divs and my margin and padding are set to 0px but there still exist about a 25px separation between each section.

    If I put a 1px solid border around each div then everything comes together. I am lost right now.

    Dan
    Attached Images Attached Images
    Last edited by hurricanedan; Sep 11, 2007 at 13:41. Reason: More Description

  2. #2
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is just a rough example you can try. The #content div has height, but that's only so you can see the background. Add content to it and remove the height styling. The content padding prevents content from passing over the shadowed edges.

    IE6 won't like these transparent pngs. If possible, reproduce the shadows without using transparent images, or us one of the png fixes for IE6.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title></title>
    	<link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div id="wrapper">
    	<div id="top"></div>
    	<div id="content"></div>
    	<div id="bottom"></div>
    </div>
    </body>
    </html>
    Code CSS:
    body {
    	text-align: center;
    }
    #wrapper {
    	width:678px;
    	margin: 0 auto;
    	text-align: left;
    }
    #top {
    	background: url(whitebackgroundtop.png) no-repeat -4px 0;
    	height: 35px;
    }
    #content {
    	background: url(whitebackgroundmid.png) repeat-y -4px 0;
    	height: 200px;
    	padding: 0 23px 0 20px;
    }
    #bottom {
    	height: 30px;
    	background: url(whitebackgroundbottom.png) no-repeat left bottom;
    }

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I would do something quite similar to CaryD, though I tend to nest the elements so there's less maintenance - the content controls the height of all the elements and not much CSS is needed at all.

    You are wanting 3 background images so you need three elements to put them on.

    Code:
    <div class="box">
      <div>
        <div>
        <p>Content goes here</p>
        </div>
      </div>
    </div>
    Code:
    .box {
        background: #FFF url(whitebackgroundmid.png) repeat-y 0 0;
    }
    .box div {
        background: transparent url(whitebackgroundtop.png) no-repeat top left;
    }
    .box div div {
        background: transparent url(whitebackgroundbottom.png) no-repeat bottom left;

  4. #4
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to both of you.

    CaryD, I am having that problem with IE not wanting to show the transparent portion correctly. I have tried one png fix but it does not seem to work well with the image reference coming from the stylesheet but works fine if the image is in the html with height and width set.

    Now to sound foolish, I am not sure how to take my psd and make the shadow but not make it transparent and have it displayed without the image edge (the way it displays now). Any pointers?

    Dan

  5. #5
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as png fixes go, can you give us a url for your test page, or can you post the html and css you ended up with, that is, without the attempted fix?

    As for creating new images, the method would depend on the graphics software you'd be using, and you would probably find more help with that in the Graphics and Multimedia 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
  •