WordPress.org

Ready to get started?Download WordPress

Forums

Get rid of header area? (7 posts)

  1. johnthomas19
    Member
    Posted 4 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?

    Thanks

  2. johnthomas19
    Member
    Posted 4 years ago #

    Does anyone have any ideas?

  3. SimonJ
    Member
    Posted 4 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...

    S.

  4. johnthomas19
    Member
    Posted 4 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
    Member
    Posted 4 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
    Member
    Posted 4 years ago #

    Any ideas here wordpress wizards?

  7. SimonJ
    Member
    Posted 4 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 :
    http://www.w3schools.com/Css/

    S.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.