...

View Full Version : Center Logo at top of page



mustangz5
01-24-2008, 03:36 AM
Hello,

I know this may seem like a pretty simple thing to accomplish with css, but it has been giving me nothing but problems today. I have a pretty simple website setup. I have a background image that repeats x and y, an image in the top left of my page, buttons down the center, and a content area. I want to get the logo to center at the top of the page but anytime i try to do it, it either overlaps the image in the left, or goes to a different part in the page.

this is my style sheet code:


body {
margin: 0px 0px 0px 0px;
background-color:white;
background-image: url('images/bg.jpg');
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:black;
}

a:hover { font-family:Verdana, Arial, Helvetica, sans-serif;
color:yellow;
background-color: white}

h1 { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:36px}

h2 { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:30px}

h3 { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:24px}

#leftcontent { position: absolute;
left:10px;
top:250px;
width:250px;
background:url('bg2.jpg');
border:0px;
}

#centercontent {
margin-top:30px;
background-color: White;
margin-left:300px;
margin-right:-1px;
border:0px;
voice-family: "
\"
}

\"
"
;
voice-family: inherit;
margin-left:251px;
margin-right:1px;
}

html>
body #centercontent { margin-left:251px;
margin-right:1px;
}

#rightcontent { position: absolute;
right:10px;
top:167px;
width:0px;
background:;
border:0px;
}

#banner{
background-position: top; margin: 0px 0px 0px 0px; height: 140px; background-image: url('images/bg.jpg'); background-repeat: repeat-x;
}

#bannerimageleft{
background-position: top left; width: 475px; margin: 0px 0px 0px 0px; background:url(images/copeland.gif) no-repeat; height: 245px;
}

#bannerlogocenter{
background-position: center top; width: 540px; margin: 5px auto auto auto auto; background:url(images/logo.gif) no-repeat; height: 135px;
}




<html>
body #banner { height:139px;
}

p,h1,h2,h3 { margin:0px 10px 10px 10px;
}

My masterpage looks like:

<head runat="server">
<title>SAM</title>
<link href="StyleSheet.css" rel="Stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="banner">
<div id="bannerimageleft">
<div id="bannerlogocenter">
</div>
</div>
</div>
<div id="leftcontent">
</div>
<div id="centercontent">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

Does anyone have any idea why this image is being difficult?

mustangz5
01-24-2008, 03:37 AM
Sorry for some reason the code from my masterpage did not sepearate, but it is in that code block as well

effpeetee
01-24-2008, 11:08 AM
I find the code incomplete. We do not have the Doctype . If you want help, you should make it easy for us.

Why not put your css into the <head> section using
<style type="text/css">

</style>
Then we can download the whole of the source code into our PC and see what is wrong.
Or better still a url.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum