Get rid of header area? (7 posts)

  1. johnthomas19
    Posted 6 years ago #

    My site johnthomasmusic.org use to have a header on each page that matched the tab. On some pages, I didn't want the header to match the tab so I edited the style.css to get rid of it.

    But now I have a gap between the tab bar and where words first start on each page. My question is, how can I shrink (or get rid of) that gap?

    Any adivce?


  2. johnthomas19
    Posted 6 years ago #

    Does anyone have any ideas?

  3. SimonJ
    Posted 6 years ago #

    Hum... What did you exactly edit in your style.css ?

    Your "content" and "post" div have both 10px of top padding... Wich will give you at least 20px of space before the title of the post...


  4. johnthomas19
    Posted 6 years ago #

    I'm not 100% sure how I was able to get the header out. I either deleted that line in the php or changed a value to, 'none.' I've tried to go through and manipulate different paddings. I have no trouple moving the first words on each page down - I just can't find a way to move them up.

    Any thoughts?

  5. johnthomas19
    Posted 6 years ago #

    All I did to get rid of the page header was remove the line:
    <h2>” title=”<?php the_title(); ?>”><?php the_title(); ?></h2>

    Any idea on how I can get rid of the space there now?

  6. johnthomas19
    Posted 6 years ago #

    Any ideas here wordpress wizards?

  7. SimonJ
    Posted 6 years ago #

    It's not a wordpress wizard question... :-)

    It's a CSS issue.

    Did you read my post above ?

    The content of your center column is in these three divs :

    <div id="content">
    <div class="post">
    <div class="entry">

    And your sentence : "Welcome to JohnThomasMusic.org" is embeded in a <p> tag...

    Then look in your style sheet... (style.css)

    content : padding: 10px;
    post : padding: 10px 0 10px 0;
    p : padding: 10px 0 0 0;

    The first div (content) put a 10 px padding... the second div (post) add another 10 px padding inside the first one. Finally, the <p> tag add another 10 px padding...

    So, starting from "content", you end with a total of 30 px... About the space you have at the top I would guess... Your solution : adjust these value to get what you want.

    Two principle about padding and margin to get you started :

    1- when you have only one value, ie : padding: 10px : it means that the padding will be 10px on each side of the div (top, right, bottom, left)

    2- When you have four value, ie : padding: 10px 0 10px 0 : it means that you have a different value for each side, starting at the top in clockwise direction : top right bottom left.


    For instance, in your "post" div, you have : padding: 10px 0 10px 0;

    It means : 10px top, 0px right, 10px bottom, 0px left.

    Another example, your <p> tag :

    padding: 10px 0 0 0;

    It means 10px top, 0px right, 0px bottom, 0px left...

    Finally, a last example, in your "content" div :

    padding: 10px;

    It means 10px padding for each side...


    I suggest you to learn a little bit about CSS :


Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.