I am starting to make the switch...yes, tables to css...but check this out...http//www.halowebdesign.com/samurai/ . How do I align the sword thats underneath the text box (grey area) to the right? Heres my css code...
body{
margin-top 0px;
background-image url(banner.jpg);
background-position top center;
background-repeat no-repeat;
}
#body{
height 100%;
padding 0px 0px 0px 0px;
margin 0px;
}
#content {
padding 149px 0px 0px 0px;
margin 0px;
z-index 1;
}
#right{
position relative;
padding 0px 0px 100px 0px;
margin 0px;
z-index -1;
}
and my html...
<html xmlns="http//www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Halo Web Design</title>
</head>
<center>
<body>
<div id="body">
<div id="content">
<img src="content_bkgnd.jpg" width="502" height="602" />
</div>
<div id="right">
<img src="right_side2.jpg" width="78" height="854" />
</div>
</div>
</body>
</center>
</html>
Positioning Images
You'd need to float it right but the float needs to come before the non-floated content in the source. Also, I wouldn't attach your banner graphic to the body like that. You'd be better creating a header element in your HTML and attaching it to that.