1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need help with an image...

Discussion in 'HTML & Website Design' started by NewComputer, Jan 31, 2005.

0
  1. #1
    I have an image that looks like a drop shadow. It is about 3px by 3px. I want to surround a div with the image making the page look like it has a drop shadow. I really would like to apply this to the body or the content portion div.

    Colleen (Kalina) did something similar here http://christmas.homeless.org.au/ and I would like to know how to get it to work in the external sheet and the proper (not that you code was not proper K) but is there a way to apply this in one declaration?

    If I have confused anyone it is because I had to take the day off sick today and I am a complete mess....
     
    NewComputer, Jan 31, 2005 IP
  2. david_sakh

    david_sakh Peon

    Messages:
    1,225
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'm a table bitch so I always did it that way. I guess this makes more sense. I'm interested in the solution as well.
     
    david_sakh, Jan 31, 2005 IP
  3. NewComputer

    NewComputer Well-Known Member

    Messages:
    2,021
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    188
    #3
    So far, I have been able to apply it to the content as such:

    #idtitle {
    width: 728px;
    height: 500px;
    background-color: #fff;
    background-image: url('images/leftdrop.gif');
    background-repeat: repeat-y;
    }

    As for the reverse image on the other side, still working....

    hmmm...
     
    NewComputer, Jan 31, 2005 IP
  4. mopacfan

    mopacfan Peon

    Messages:
    3,273
    Likes Received:
    164
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Here is something you can do, but it only works in ie:
    <DIV ID="oFilterDIV" STYLE="width:145; height:100; padding:1px; background: #31416B; filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=3, Color='#CECECE', Positive='true')">
    Code (markup):
     
    mopacfan, Jan 31, 2005 IP
  5. NewComputer

    NewComputer Well-Known Member

    Messages:
    2,021
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    188
    #5
    Thanks Mopac,

    Only problem is, I don't even write for IE anymore unless by accident (it seems to display alright as long as you keep it simple.) I may have to live with one side having a drop shadow.
     
    NewComputer, Jan 31, 2005 IP
  6. mopacfan

    mopacfan Peon

    Messages:
    3,273
    Likes Received:
    164
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Yea, I hate IE, but I thought I'd throw it out there anyway. [​IMG]
     
    mopacfan, Jan 31, 2005 IP
  7. david_sakh

    david_sakh Peon

    Messages:
    1,225
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    0
    #7
    If you are desperate, you can always tile an image vertically in an appropiately widened table cell...
     
    david_sakh, Jan 31, 2005 IP
  8. Dji-man

    Dji-man Peon

    Messages:
    185
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    try "border-style: outset". You can also use a combinaison of outset and inset or groove and ridge with different border-color for every side.
     
    Dji-man, Jan 31, 2005 IP
  9. Agent47

    Agent47 Well-Known Member

    Messages:
    775
    Likes Received:
    138
    Best Answers:
    0
    Trophy Points:
    135
    #9
    How about repeating a single image vertically with a width of 728px and height of 1px, applied to the BODY tag ? 
     body {
	background-image: url('images/leftdrop.gif');
	background-repeat: repeat-y;
	background-position: center top;
	background-color: #FFFFFF;
}
    Code (markup):
    See example here : http://www.zebonline.com/test/
     
    Agent47, Jan 31, 2005 IP
  10. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #10
    You can't do this with a single div. You need at least three elements (divs or table cells) - two for the vertical and horisontal shading and one for the corner.

    J.D.
     
    J.D., Jan 31, 2005 IP
  11. NewComputer

    NewComputer Well-Known Member

    Messages:
    2,021
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    188
    #11
    JD, would you mind doing me a favour and showing me the code on that? I would appreciate seeing it in action...
     
    NewComputer, Feb 1, 2005 IP
  12. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Something like this. Keep in mind, I'm not suggesting on using divs - whatever you use for your layout will work - tables, divs, etc. Also, this is a simple example and border-top will not work here because it will continue into the gradient. This gives you the idea, though. 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page Shadow Test</title>
</head>
<body style="background-color: white;">
<div style="width: 70%; height: 150px; margin: 0; background: url(shadow-right.png) top right repeat-y;"></div>
<div style="width: 70%; height: 16px; background: url(shadow-bottom.png) top left repeat-x; padding: 0;">
<img style="margin: 0; float: right;" src="shadow-corner.png">
</div>
</body></html>
    Code (markup):
    You can save the attached images to see the effect.

    J.D.
     
    J.D., Feb 1, 2005 IP
  13. NewComputer

    NewComputer Well-Known Member

    Messages:
    2,021
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    188
    #13
    Thanks JD,

    That is almost what I was looking for. The top is not the concern and I do use div's exclusively NOW. I was looking for a left, bottom and right side drop that was centered. Yours was very close. I will look later to get a better idea. My brain is mush right now.
     
    NewComputer, Feb 1, 2005 IP
  14. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #14
    NC... Have you looked at softalien.com (Still bein tweaked BTW)...

    I'm pretty sure it's the kind of effect you're looking for.

    If it is, let me know and I'll post some source for you :)
     
    SEbasic, Feb 1, 2005 IP
  15. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #15
    You will need to add divs then (e.g. two floats to do the sides and one underneath with other two floats for corners). Centering is easy as long as you have DOCTYPE (I have a more detailed example on centering in one of my posts) - just set margin-left and margin-right on the element you want to center to auto.

    J.D.
     
    J.D., Feb 1, 2005 IP