centered fixed position header

  • current code results

    psd layout

    I need my header to stay centered, and be a fixed position so it floats over a scrolling body. I can’t seem to get it to work.

    I also need the address info on the left to come down 1-2 pixels and the menu nav on the right to go up 3-5 pixels.

    I’m new at this so my coding knowledge isn’t great, my code could probably be reduced.

    header php code:
    [Code moderated as per the Forum Rules. The maximum number of lines of code that you can post in these forums is ten lines. Please use the pastebin]

Viewing 15 replies - 1 through 15 (of 15 total)
  • Thread Starter bmorris110

    (@bmorris110)

    oops,
    header code is too much.

    https://docs.google.com/open?id=0B6pgg48sqP6jUktYek02SXk5TGM

    I’m not sure what’s the best code for this?

    Using Fixed Positioning in the CSS code is how you can do that. See this: https://www.w3schools.com/cssref/sel_after.asp

    As to your second question, try using Firebug to identify the CSS code that you will need to change in order to adjust the alignment of elements on the page.

    If you need more specific help, you’ll need to post a link to your actual site.

    Thread Starter bmorris110

    (@bmorris110)

    i used the fixed position and it shifted everything to the left and cut off the menu to like 500px.
    can u look at the zip file and see what i am doing wrong?
    using MAMP locally right now to view the site.
    i’m not sure that i div-ing up the header.php correctly for the css code.
    i wanted over all #header then inside a #logo, #info, and #menu for aligning and formatting.

    not sure the best is to <span> or <div> or what.

    What zip file are you referring to?

    The google docs link does not work…and really, unless someone can see the actual site live, it’s pretty impossible to help with things like this. If you modified the header.php file, there may well be problems — generally, you should have had plenty of CSS classes and ID’s already in the existing code to do almost anything with positioning. Try validating the page to see if you have mark-up and/or CSS errors that are causing problems…

    Thread Starter bmorris110

    (@bmorris110)

    here is the zip file with the header.php and style.css files.
    https://files.me.com/morris.brandon/w96ra1

    Can you look at the image and code?
    Can you tell me by looking at the code and image how you would write it?

    I can’t seem to install wordpress twice using 1&1.
    I made a second database but the install won’t work.

    I don’t have a way to look at it using the whole theme, but if you can put up a generated html file, I can look at that with the CSS file — which might work for me to look at the code…and help you with the CSS.

    Thread Starter bmorris110

    (@bmorris110)

    would saving an html file from safari work?

    Yep — just paste the code in pastebin or wherever…

    Thread Starter bmorris110

    (@bmorris110)

    doesn’t seem to look right. the nab bar is missing and menu buttons.
    i still can’t seem to get 1&1 to install a second wordpress.

    do you use mamp?

    Yes, but it’s not currently configured for WP — I may have time to mess with it tomorrow, can’t do it right now…

    I’ll try again and post back when I figure something out…

    Thread Starter bmorris110

    (@bmorris110)

    thanks i’d really appreciate it.
    did the mobile me zip file work?
    won’t you be able to test the code out with a basic wp install on mamp?

    i would upload what i have to a wp online, but i still can’t get it to work with 1&1.
    i’ve done 2 wp installs on blue host before no problems.

    Yes, file is fine. I just have to mess with my MAMP set-up — I’m taking a PHP class right now so I cleaned stuff out so I could easily access my class assignments, etc. Not a big deal, just some time…

    But you could get a free trial on Dreamhost which is really easy with WP…

    Thread Starter bmorris110

    (@bmorris110)

    I seemed to have gotten the fixed header to work.
    i was able to get the menu nav to rise up and look centered.
    but i had to move the the menu div to before the logo.
    so now the address info is too far off the header image.

    does this code look correct?

    header code:

    </head>

    <body>
    <div id=’wrap’>
    <div id=’header’>

    <div id=’menu’>
    <ul id=’nav’>
    <?php wp_list_pages(‘title_li=’); ?> <‘br’>

    </div>

    <h1 id=’logo’>
    <*a href=”<?php bloginfo(‘url’); ?>”*>
    <img src=”<?php bloginfo(‘template_url’); ?>/images/logo.png”>
    </h1>

    <div id=’info’>
    505 Virginia Ave Ste <‘br’> Atlanta, GA 30306 <‘br’> (505) 555-505
    <‘br’> [email protected]</div>

    </div>
    </div>

    CSS code:

    @import “css/reset.css”;
    @import “css/typography.css”;
    @import “css/layout.css”;

    /***General Styles***/
    body {
    background:transparent url(‘images/background.jpg’) repeat scroll;
    color:#000;
    font-family:Arial, sans-serif;
    }

    #wrap {
    width:1024px;
    margin:0 auto;
    }
    a {
    text-decoration: none;
    }

    /***Header Styles***/
    #header {
    background: transparent url(‘images/navbar.png’) ;
    position: fixed;
    top: 0;
    width: 1024px;
    height: 62px;

    }

    h1#logo {
    margin: -17px 0px 0px 95px;
    float: left;
    }

    #info {
    margin: 0px 0px 0px 0px;
    font-size: 8px;
    font-style: normal;
    font-weight: 100;
    text-decoration: none;
    line-height: 10px;
    color: #808080;
    }

    #menu {
    margin: 0px 85px 0px 0px;/***whole menu placement***/
    }

    ul#nav li {
    float: right;
    line-height: 50px;
    margin: 0px 15px 0px 0px;
    font-size: 14px;
    text-transform: uppercase;
    }

    ul#nav li a {
    color:#bf001f; /***menu font color***/
    }

    Thread Starter bmorris110

    (@bmorris110)

    got to look right but defining the absolute real image size with height and width tags.

    #header {
    background: transparent url(‘images/navbar.png’) ;
    position: fixed;
    top: 0;
    width: 1024px;
    height: 62px;
    }

    The REAL problem now is getting my address info to display correctly in the nav bar next to my logo.png, and not having to just use the png to display the text.

    Thread Starter bmorris110

    (@bmorris110)

    And I just somehow figured out the text problem! heck yeah.
    I put the menu div before the logo so it could line up.
    And instead of have the address info div after the logo div, i put it inside the logo div.

    PLEASE, feel free to go over the full code above and let me know any tips or clean up I can do.

    <div id=’menu’>
    <ul id=’nav’>
    <?php wp_list_pages(‘title_li=’); ?>

    </div>

    <h1 id=’logo’>
    <*a href=”<?php bloginfo(‘url’); ?>”*><img src=”<?php bloginfo(‘template_url’); ?>/images/logo.png”><div id=’info’>555 Virginia Ave Ste #1Atlanta, GA 30305(555) [email protected]</div></h1>

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘centered fixed position header’ is closed to new replies.