Grow your CSS skills. Land your dream job.

WordPress PHP Alignment

  • # January 18, 2011 at 6:21 pm

    Okay, so I am starting out coding PHP and have been using CSS Tricks “Creating a Website” 1-3 and Starkers as a template. I have already successfully coded one site, but the layout is a bit different. Basically I want to align top of the sidebar with the bottom of the header line.

    This is the current state of Swift Runway Productions in WordPress:
    http://www.swiftrunwayproductions.com

    This is the desired state of Swift Runway Productions in HTML/CSS:
    http://www.adamanthonysmith.com/SRP/index.html

    Please help!

    Thanks,
    Adam

    # January 18, 2011 at 6:29 pm

    Looks like your

    is ending before the rest of your sidebar.php content.

    Also try floating your sidebar div left instead of right.

    # January 18, 2011 at 6:34 pm

    Also, looking closer at your code, your

    closes before you add your sidebar.

    Try also adding


    margin: 0 auto;

    To your pagewrap div

    # January 18, 2011 at 7:41 pm

    Hey dhechler, that was really helpful actually. Thank you!

    What I’m having a hard time figuring out though is where this extra tag is so I can delete it and put it at the beginning of the footer. Where did you see it?

    # January 18, 2011 at 10:43 pm

    are you talking about your

    div?

    That was my mistake. I looked at your code wrong. It’s not that your closing tag is in the wrong spot. It’s that you didnt clear the float after closing your div. Let’s do this.
    In your css write this.


    .clear { clear: both; }

    Then after your

    get_sidebar();

    in your index.php, put this in

    So it would be


    get_sidebar(); ?>

    < ?php get_footer();
    ?>

    That should fix your float issues.

    Also, i noticed your content div had padding: 30px; which is causing the sidebar not to float next to the content as in your HTML document.
    You could try


    padding: 30px 0;
    # January 18, 2011 at 10:46 pm

    Also, if you wouldn’t mind just grabbing all of your index.php and posting it at
    http://www.pastebin.com and pasting that link here, I could take a look at it and help out further if you would like.

    # January 19, 2011 at 12:33 am

    http://pastebin.com/HramyPbc

    That’s where the index.php was uploaded

    # January 19, 2011 at 3:59 am

    Ok, this helps. Try this


    get_header(); ?>

    < ?php
    /* Run the loop to output the posts.
    * If you want to overload this in a child theme then include a file
    * called loop-index.php and that will be used instead.
    */
    get_template_part( 'loop', 'index' );
    ?>


    < ?php get_sidebar(); ?>

    < ?php get_footer();
    ?>

    This should solve some issues and get your posts inside your main content div.

    # January 19, 2011 at 4:06 am

    Also, go to your style.css and change your #page-wrap css to this just to help with centering the page and width.


    #page-wrap {
    margin: 0px auto;
    width: 940px;
    }

    and your main-content div should be 700px width.

    # January 19, 2011 at 1:13 pm

    http://www.swiftrunwayproductions.com

    This is what it looks like now. I floated the whole page wrap left, so it would align the borders.

    Could it be that I need to fit the sidebar div WITHIN the main-content div and omit the sidebar outside of the container?

    # January 19, 2011 at 2:48 pm

    don’t float your page-wrap left. It screws up the margin: 0 auto; and doesn’t center your content on the page.

    Also, make your page-wrap width 941px; instead of 940. That will pull your sidebar up. Or you can go the opposite direction and make your sidebar width 239px; since your 1px border on your main-content adds 1px to the width.

    # January 21, 2011 at 3:05 am

    http://www.swiftrunwayproductions.com

    The sidebar still doesn’t want to go up to the top.

    It does look like the clear worked, however, because I was able to add another navigation onto the footer.

    Bob
    # January 21, 2011 at 3:14 am

    Thats because you’ve added 20px padding around your sidebar div. Try replacing the padding you have there now with:

    padding: 0 20px 20px 20px;
    # January 21, 2011 at 2:28 pm

    Okay, so here’s what I think might fix it:

    How do I get rid of the PHP where it says this?

    Swift Runway Productions
    Just another WordPress site
    Skip to content
    Home
    BIOGRAPHY
    EVENTS
    GALLERY
    PRESS
    SERVICES

    Updated site with Lorem Ipsum post:

    http://www.swiftrunwayproductions.com

    # January 21, 2011 at 9:46 pm

    Heres what i found.

    You need to add margin: 0 auto; to your #page-wrap in your style.css file. Right now you have it as



    If you want to do it that way (inline styling) then you need to do this



    but it would be better to add this into your css as


    #page-wrap{
    width: 1024px;
    margin: 0 auto;
    }

    That should fix what you want.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".