• I’m trying to customize the the default themem. How can I position the header on the top of the page?

    Sorry for being such a newbie at this… =)

Viewing 10 replies - 1 through 10 (of 10 total)
  • Isn’t it already at the top of the page? That’s what a header is. Can you be more specific. Are you talking about moving the title up higher in the “box” that is at the top of the page in the section called “header”?

    Kubrick’s theme (default) does some funky things so the fix is two fold. The section you are looking at called the “header” is:

    <div id="header">
    <div id="headerimg">
    <h1>Title Name

    So there are three things that control the look of the header. The “header”, “the headerimg” which controls the image as well as the layout of stuff inside of that section, and “H1” which is the heading and the specific “title” of your site.

    The CSS (style) for this section is controlled in two sections. One is on the index.php (or header.php) itself and the other is in the style.css file. The author separated this so people could more easily change the header look, but it does make things a little complicated for providing support.

    Play around with the margins and padding in the following selectors (names) in the two places to move it to where you want. Experiment. Maybe you like it over to the left margin (text-align:left) instead of centered. Maybe you want it red instead of white. Or larger. Play with it. It’s pretty easy to figure out that margin-top:100px is a HUGE margin from the top.

    #header {attributes here}
    #headerimg {attributes here}
    #header H1 {attributes here}
    or
    h1 {attributes here}

    Thread Starter fuzzy_logic

    (@fuzzy_logic)

    Thanks for your reply. Sorry for not being very specific about my question. I was trying to move the header to the top of the page, without any margin at all.
    So where can I find the “margin-top: 100px” attributes?

    Thread Starter fuzzy_logic

    (@fuzzy_logic)

    And while we’re at it, can someone tell me how I can remove the margin for <div id=”page”> so that it starts at the top of the page? I can’t seem to be able to find all these attributes… =(

    That would be in the

    body {
    margin: ###
    }

    tag. Change that to 0px.

    // argh stupid isp. sorry for double posting

    Thread Starter fuzzy_logic

    (@fuzzy_logic)

    I tried:

    body{ margin: 0 px} but it didn’t seem to work…

    I think you missed a “;” after the px – If that doesn’t work, try

    body { padding: 0px; }

    Thread Starter fuzzy_logic

    (@fuzzy_logic)

    Nope, still doesn’t work.
    I’m guessing the problem is, as Lorelle suggested, the margin-top of the header is set as 100 px. But I’m having problem locating that property.
    Lorelle, where are you?

    There is only a 20px margin on the top for kubrickheader.jpg.
    To get rid of that do this.

    But that might not be what you are talking about …

    Thread Starter fuzzy_logic

    (@fuzzy_logic)

    That removes the margin for #page but the header still has a very large margin. And I can’t find where to change it. =(

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Header position’ is closed to new replies.