• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1146
  • Last Modified:

Center Image Inside <DIV> Block and Position Image On Top Of Other Image

Trying my first foray into using Style Sheets (instead of tables) to lay out my entire site.  I'm creating blocks of nested divs.  I can't get my first item i need to layout to work correctly.  i'm attaching a picture and my code.  I need to align my logo in the center relative to the "header".  then the logo needs to float on top of the header image.

also, if you notice anything that i could be architecting wrong (in terms of the CSS) that will come back to bite me, please let me know.

I'm also going to attach the 2 images so you can have them at your disposal
Styles.css file
* {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: 0;
}
 
body {
	margin: 0 auto;
	width: 817px;
	min-width: 817px;
	background: #5b5248;
}
 
#container  
{
	display: block;
	position: relative;
	height: 658px;
	width: 817px;
	margin: 0 auto;
	
 
}
 
#container .header {
  position: relative;
  z-index:0;
}
 
 
#header .logo {
  position: relative;
  z-index:1;
  margin: 0 auto;
  display: block;
 
}
 
 
HTML
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" media="screen" href="Styles.css" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="container">
            <div id="header"><img src="Images/BarTop.gif" />
                <div id="logo"><img src="Images/LogoInfinity.gif" /></div>
            
            </div>
        </div>
        </form>
    </body>
    </html>

Open in new window

Sample.jpg
BarTop.gif
LogoInfinity.gif
0
davidcahan
Asked:
davidcahan
1 Solution
 
David S.Commented:
You should make BarTop.gif be the background image for #header.

You don't seem to have any "logo" or "header" classes but both are IDs.
#header {
  background-image: url(Images/BarTop.gif);
  background-repeat: no-repeat;
}

Open in new window

0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now