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
    Jul 2012
    Location
    Sydney
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newbie trying to center a menu + logo which are currently aligned on the left

    Hey guys,

    I am pretty new to HTML/CSS and am having trouble aligning parts of my header. I have tried doing position:center; however it doesn't seem to be working the CSS code I have for the image logo and menu text that I would like to be aligned is below:

    #header div#display_homepage_title{
    height: 46px;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 40px;
    width: 460px;
    font:29px/46px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    }

    #header div#display_homepage_title a{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    text-align:leftr;
    display:block;
    text-indent:-9999px;
    color:#aaaaaa;
    }

    #header div a#homepage_title{
    text-indent:0px;
    font:29px/46px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background:none;
    }

    If someone is able to help me with this, I would be very greatful
    Happy coding!

  • #2
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    Position: center isn't a thing...

    Use margin: 0 auto; for something that isn't positioned absolutely or relatively.

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Centering:

    Centering an element requires setting a width that is less than 100%, using a proper document type and using the CSS property: margin: 0 auto; This is done in the CSS that styles the element. Using positioning rules just makes it harder and requires more coding. Suggest using the following at the very top of your CSS file. Then you can remove all those rules that have zero padding/margin:
    Code:
    * { margin: 0; padding: 0; border: 0; }
    Example:

    Code:
    body {
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    background: #fff url(path to non-tiled image) no-repeat center scroll;
    }
    Example as a Class:

    Code:
    .selector_name {
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    background: #fff url(path to non-tiled image) no-repeat center scroll;
    }
    HTML for Class:
    Code:
    <div class="selector_name">Content here</div>
    Example as an ID:

    Code:
    #selector_name {
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    background: #fff url(path to non-tiled image) no-repeat center scroll;
    }
    HTML for Class:
    Code:
    <div id="selector_name">Content here</div>
    Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile. Doesn't have to be the body tag, but you should get the idea.

    Typo?: "text-align:leftr;" Recommend validating:

    Validating:

    Why Validate?: http://validator.w3.org/docs/why.html
    CSS Validator: http://jigsaw.w3.org/css-validator/
    HTML Validator: http://validator.w3.org/#validate_by_uri+with_options
    Last edited by Major Payne; 07-02-2012 at 09:30 AM.
    ☠ ☠RON☠ ☠


  •  

    Tags for this Thread

    Posting Permissions

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