WordPress.org

Ready to get started?Download WordPress

Forums

Centering image in header (6 posts)

  1. livinforhim316
    Member
    Posted 6 years ago #

    I made an image and am trying to make it my header. I have it in there, but it is not centered. Can anyone give me the code to make it centered on the page?

    Thanks

    http://www.christiandate101.com

  2. drewactual
    Member
    Posted 6 years ago #

    first off, looking at your source- remove the divisions from the top before your wrapper:

    <div id="header"><div class="title">
    <h1><span></span></h1>
    </div>
    </div>

    that can clutter things, and ie will see the divisions even though they are empty and cause space to appear..ff, not so much...next:

    as is your .css for your title area reads:

    #top-menu{
    clear: both;
    float: left;
    width: 100%;
    font-family: Georgia, Sans-serif;
    background: #FFF;
    }

    fix dat too- to read:

    #top-menu{
    clear: both;
    margin:0px;
    margin-left:auto;
    margin-right:auto;
    width: 900px;
    font-family: Georgia, Sans-serif;
    background: #FFF;
    }

    this assumes your header image is around 900px or the width of your body....

    now get me a date!!..... :-)

  3. livinforhim316
    Member
    Posted 6 years ago #

    Can you check my source to make sure I did that right? The header is still on the left - thanks

  4. S.K
    Member
    Posted 6 years ago #

    You can try removing the image url from the body element.

    S.K

  5. livinforhim316
    Member
    Posted 6 years ago #

    I took out the image url from the body element and it still didn't work. When I took it out there was nothing showing at all. Here is my header part of the css:

    /*----HEADER----*/

    .title h1{
    width: 100%;
    height: 100px;
    position: relative;
    text-align: center;
    }

    .title h1 span{
    background: url(images/christiandate101logo2.jpg) no repeat;
    width: 100%;
    height: 100%;
    text-align: center;
    }

    And here is my body section of css:

    body{
    margin: 0;
    font-family: Arial, Helvetica, Georgia, Sans-serif;
    font-size: 14px;
    text-align: center;
    vertical-align: top;
    background: #FFF url(images/christiandate101logo2.jpg) no-repeat;
    color: #222;
    }

    I hope someone can figure this out! Thanks!

  6. drewactual
    Member
    Posted 6 years ago #

    alrighty then...
    been goofin' with your page...
    firefox developer tool is a nifty critter....

    your header.php needs to be fixed. you opened an undefined div (#header) and never closed it. same with a div class (.title).... go into your header.php and close them by adding </div></div>... at what point things wil start to make sense again....

    next up, looking at your .css, it needs a little tweeking.
    I will say this because everyone who reads this message will benefit: all the css commands/definitions are pretty useful, but sometimes knowing too much will cause you heartache. If you define something in a parent #div or .div, you don't need to define it again unless you want that particular component to do something differently. for instance, in a #wrapper, you can find center page by defining margin-left:auto;, margin-right:auto; and absolute width.... such as in your case looks to be 900px. everything else should squeeze into that model unless an image is too wide, at what point and only at what point you should either edit the image to proper width or tell the div what to do with overflow, such as scroll, or hide for instance. To maintain integrity I would recommend you keep the widest object on your page 900px, and if that critter is exactly 900px, adjust the margin and/or padding of that particular container...remember though, and this is where we all go wrong and css gets tricky- if you defined all the things you could think of like padding, margin, first-line ect in parent containers you will have to do goofy things like add -px, -em, -%, or negative whatever to that container, which means you are using too much effort and you are going to have issues with positioning later..

    As a recommendation to you, I would say you need to go through your .css using FF developer tool and wipe out elements and definitions where you don't need them. Approach it with the minimalist approach, and see how much you can cut out....which brings me to your particular case again...

    you have an undefined div called #header. define that div and then close it in the appropriate place in your header.php, then define the div class .title, then close it too where it needs to be. Then go through your .css carefully and wipe all padding and margin where you don't need it. Also there are some areas where the definition was not closed- (background: #fff url(wdibfwjf);, break up the commands with commas, or use background: and background-image:, and background-repeat:.....

    that there folks, was a mouthful! Hope you figure it out!

Topic Closed

This topic has been closed to new replies.

About this Topic