Forum Moderators: not2easy
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">©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
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
try removing the float:left from .shadowMain
Does this help?
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]
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
