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

    Trouble centering header or masthead

    Hello, I am new here and newish to CSS & html. I know some very basic rules and that is it. I have a wordpress blog greeneyedcountrygirl.com and I have customized the theme (code posted below) so that the main column and the sidebar is wider. Now I can't seem to figure out how to get my header/masthead to be centered.

    Any help would be greatly appreciated!!

    I have figured out enough that this is the part of the code I need to work on.

    Code:
    }
    #masthead img,
    img[class*="align"],
    img[class*="wp-image-"] {
    	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
    }
    
    #masthead img,
    img.size-full {
    	max-width: 85%;
    	width: 85%; /* Prevent stretching of full-size images with height and width attributes in IE8 */
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    The method I use to center anything in CSS is
    Code:
    margin-right:auto;
    margin-left:auto;

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    850
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Centering an element requires setting a width to the exact width of the content, using a proper document type and using the CSS property: margin: 0 auto; This is done in the CSS that styles the element. 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.
    ☠ ☠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
    •