troubleshooting Question

center top banner area using css

Avatar of Mike Waller
Mike WallerFlag for United States of America asked on
Web DevelopmentCSSHTML
17 Comments4 Solutions636 ViewsLast Modified:
I need to center the top banner area but don't know how.  Any ideas experts?

Here is the html and css:

HTML:

<!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" dir="ltr" lang="en-US" xml:lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>website</title>
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="/css/hc2.css" type="text/css" media="screen" />
</head>
<body>
<div class="wrapper">
         <div id="top-banner">top banner goes here...</div>
         <div class="push"></div>
</div>
   <div class="footer">
          <div id="bottom-metal">&nbsp;</div>
   </div>
</body>
</html>

CSS:

* {
margin: 0 auto 0;
}

html, body {
background: url("/images/Background_only.png") scroll 0 0;
color: #000000;
font-size: 13px;
font-family: Century Gothic, Verdana, Arial;
height: 100%;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -8em;
}

.footer, .push {
clear: both;
}

/* graphics */

#top-banner {
border: none;
position: absolute;
margin: 50px 0 0 100px;
padding: 0;
z-index: 2;
}

#bottom-metal {
background: url("/images/metal_960.png") no-repeat;
height: 105px;
width: 960px;
border: none;
z-index: 1;  
}
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 4 Answers and 17 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 4 Answers and 17 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros