homepage Welcome to WebmasterWorld Guest from 54.211.7.174
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
drop shadow applied to centered website
KatrinR




msg:3351336
 9:15 pm on May 27, 2007 (gmt 0)

I want to add a drop shadow to the entire centered website.
I found a code that puts the shadow around the whole site, yet off-centers the site. It also is not displayed in IE.
I was searching the web and the forum, yet couldn't find the answers (only for images/paragraphs shadows)
Any help is very much appreciated.
(For easier view I added the shadow css code in the HTML CODE)

HTML CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AP</title>
<link href="testcase2.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="all">@import url(testcase2.css);</style>
<style type="text/css"><!--
.shadowMain, .shadowBLCorner, .shadowTRCorner{display:block;}
.shadowMain{
background:url(images/Bilder/shadow_04.gif)no-repeat right bottom;
float:left;}
.shadowBLCorner{
background:url(images/Bilder/shadow_03.gif)no-repeat left bottom;}
.shadowTRCorner{
background:url(images/Bilder/shadow_02.gif)no-repeat right top;
padding:0 30px 30px 0;}

--></style>
</head>
<body>
<div class="shadowMain">
<div class="shadowBLCorner">
<div class="shadowTRCorner">
<div id="wrapper">
<div id="branding"><img src="images/banner6orange.jpg" class="orangebox"/></div>
<ul>
<li><a href="#">#*$!#*$!#*$!x</a></li>
<li><a href="#">#*$!#*$!#*$!</a></li>
</ul>
<div id="content">
<h1>Lorem ipsum dolor</h1>

</div>
<div id="rightcontent"></div>

<div id="footer"><span class="footerimg"><img src="images/tomleiste.jpg"/></span>
<p class="text">&copy;2007 AP, LLC </p>
</div>
</div>
</div></div></div>
</body>
</html>

STYLESHEET:

* {
margin: 0;
padding: 0;
}
body {font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
background-color:#ffffcc;
text-align: center;
min-width: 760px;
}
ul{margin:0;
padding:0;
list-style:none;
width:720px;
float:left;
background-color:#cc0000;}
ul li{
float:left;}
ul a {display:block;
float:left;
padding:0 2em;
line-height:2.1em;
text-decoration:none;
color:#ffffff;}
ul a:hover {color:#fff;}
li {font-size: 1.4em;}
#wrapper {background-color: #ffcc99;
width: 720px;
margin: 0 auto;
text-align: left;
}

#branding {height: 50px;
overflow:hidden;
background: #ccc url(images/bannertest.jpg);
background-repeat: no-repeat;
padding: 20px;}
.orangebox {position:relative;
left:420px;
top:-20px;
}
#content {
width: 420px;
float: left;
}
#rightcontent {
background-color:#ffffcc;
width: 280px;
float: right;

}
#footer {
background-color:#fff;
padding: 1px 20px;
clear: both;
}
.text{position:relative;
top:-32px;
}
#footer .footerimg{position:relative;
left:280px;
top:0;
}
#rightcontent{
padding-top: 20px;
padding-bottom: 20px;
}

#rightcontent * {
padding-left: 20px;
padding-right: 20px;
}

#content * {
padding-right: 20px;
padding-left: 20px;
}

1. How can I keep my website centered?
2. How can I have the shadow displayed in IE?

TYIA,
Katrin

 

le_gber




msg:3351566
 7:47 am on May 28, 2007 (gmt 0)

Hi KatrinR and welcome to webmasterworld,

what you are after is called "css faux column" try googling for it and you shoud get a farrly nice tutorial on the firt spot.

to center a wrapper div on IE and FFox you usually do

body{
text-align: center; /* for ie - puts everything center page */
}

#wrapper{
width: ###px; /* fixed width in px ex 760px */
margin: 0 auto; /* for standard compliant browsers - puts the div in the middle */
text-align: left; /* for ie - to fix the text align center */
}

hope this helps

KatrinR




msg:3351886
 6:01 pm on May 28, 2007 (gmt 0)

Hi Le_gber. My website is already centered using this method, yet I am not able to find a way to keep it centered when adding the drop shadow around it. In FF, after adding the shadow, the site aligns left. In IE6, the shadow is not even displayed (although the site stays centered).
I am looking for a reference or help on how to add a drop shadow around a centered website. Many thanks, Katrin

le_gber




msg:3351918
 6:58 pm on May 28, 2007 (gmt 0)

Hi KatrinR,

try removing the float:left from .shadowMain

Does this help?

KatrinR




msg:3351959
 8:11 pm on May 28, 2007 (gmt 0)

No, Le_gber -
It "re"centers the design, yet breaks apart/misaligns the shadow image(s).
Thanks,
Katrin

Xapti




msg:3351972
 8:34 pm on May 28, 2007 (gmt 0)

I don't know what method you are using for drop shadow, but here's another that I think should work:

container{position:relative}
content{position:absolute;left:0;top:0;}
shadow{position:relative;left:20px;top:20px}

<container>
<content>
<shadow>
</container>

So you set text-align:center for the body and margin:auto for the container div, and everything inside should follow suit.
I did not look are your code (its' too large for me), but it seems you're doing it a different and more complicated way.

The big trouble with this method though which likely why you are not using it, is I don't think it allows dynamic sizing... you'll have to fix a height and width.

[edited by: Xapti at 8:40 pm (utc) on May 28, 2007]

le_gber




msg:3352014
 9:45 pm on May 28, 2007 (gmt 0)

KatrinR, what type of shadow do you want to apply on the design? Is it a shadow box (4 corners around your wrapper div) or only shadow on the side (right-left)?

If side shadow, the way to go is faux-colum, apply the background and shadow to the body tag and use a background-position of 50% to center it in the middle of the page.

If a relatively small box (400 or 600px square), I usually use a couple of empty spans to hold the data and position them absolutely in a relatively positionned div.

Something like the following

<div id="box">
<p>some text</p>
<span id="tl"></span><span id="tr"></span><span id="bl"></span>
</div>

and the CSS
#box{ position:relative; background:black url("bottom-right-image.jpg") 100% 100% no-repeat; }

#tl{ position:absolute; top:0; left:0; background:red url("top-left-image.jpg") 0 0 no-repeat; }
#tr{ position:absolute; top:0; right:0; background:green url("top-right-image.jpg") 0 0 no-repeat; }
#tr{ position:absolute; bottom:0; left:0; background:blue url("bottom-leftt-image.jpg") 0 0 no-repeat; }

if a bigger box with 4 side shadowed, use a mix of the two with faux column for the side and absolute pos for bottom and top

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved