CSS border
- Started
- Last post
- 11 Responses
- leftwave
hello,
i'm pretty new to CSS and am wondering what the easiest way would be to add this transparant type of dark glow/dropshadow as a border to the outside of the site seen here:
http://leftwave.com/indevelopmen…
thanks!
- brandelec0
you can use a png with transparency. all current browsers support it. however ie 6 and below don't like it but there is a js fix that loads the image and keeps the transparency.
check out this article
http://24ways.org/2007/superslei…
- brandelec0
it's a pretty straightforward fix for the older browsers. just read up on AlphaImageLoader and all should be well
- leftwave0
thanks, but actually my question was even more dumb! i'm familiar with making a transparant PNG. what i meant to ask was how do i use css to even make this type of effect a border in the first place?!?
- acescence0
header and footer background images, and then a center background image with repeat-y
- amullins0
<div id="wrapper">
<div id="shadow-top"></div>
<div id="body-content">
all your page's content goes here
</div>
<div id="shadow-bottom"></div>
<div id="footer">footer goes here</div>
</div>#shadow-top{
background: transparent url(shadow_top.png) no-repeat;
height: 10px; /*approx*/
}
#body-content{
background: transparent url(shadow_middle.png) repeat-y;
padding: 0 10px;
}
#shadow-bottom{
background: transparent url(shadow_bottom.png) no-repeat;
height: 10px; /*approx*/
}
- amullins0
also. use a css reset.
/**
* Reset Browser Styles
*/
html,body { width: 100%; height: 100%; }
body,button,div,dl,dt,dd,ul,ol,l... { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img,hr { border: none; }
address,caption,cite,code,dfn,em... { font-style: normal; font-weight: normal; }
ol { list-style: decimal; }
ul { list-style: none; }
caption,th { text-align: left; }
q:before,q:after { content: ""; }
abbr,acronym { border-bottom: 1px dotted; color: #005865; cursor: help; }
hr { border-bottom: 1px solid; height: 1px; overflow: hidden; }align center with this (remove the align attribute from your wrapper div):
<div id="wrapper"></div>
#wrapper {
margin: 0 auto;
width: 1000px; /*set to the width of shadow_middle.png*/
}
- leftwave0
perfection! thanks amullins.
does anyone have an example of a website that uses something like that that i can check out?
- leftwave0
can someone help me further with this please? i can't get the PNG to be transparent as the background!
- leftwave0
please ignore that last post. i'm an IDIOT and had a white background behind the transparent PNG!