Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Center Logo at top of page

    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:

    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;
    }
    
    
    
    
    Code:
    <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?

  • #2
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry for some reason the code from my masterpage did not sepearate, but it is in that code block as well

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 01-24-2008 at 11:12 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •