Treehouse: Grow your CSS skills. Land your dream job.

My first WordPress site…

  • # January 4, 2010 at 11:36 pm

    and I’m not doing so well yet…

    I am having some issues with the first website I’m building in WordPress. I have a HTML/CSS one (partially)done here: (The horses and background with the swirls are not how I want them yet but that is a WHOLE other issue at the moment!)

    If you go here you should be able to see the WordPress site I’m building:

    I am having gap issues between my divs and my side bar is down below all my main content. It is almost like my stylesheet isn’t being applied except for I KNOW that it has to be working since that is where the background image is coming from. However nothing else seems to be working properly.

    I even got Chris’s Diggin into WordPress book but I think that is way over my head at the moment. Also this isn’t going to be a blog its more static but I wanted to have the CMS for my client (Have to figure that side out after I get the basic template working!)

    Ohhh and I tried to use firebug to edit the CSS in my browser but it does something funky and turns everything white except one word on the page that says "home" Not sure what that is about.

    Any insights would be much appreciated! If you need other info please let me know.


    # January 5, 2010 at 11:56 am

    Well, as far as the background image issue (which I think you know about…the container moves across the background when you resize the browser window), you can fix by adding this to your stylesheet:

    body {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    background: url(images/background.png) top center no-repeat fixed; }

    Add that "top center" will tell the browser to always keep that background image centered and…at the top. ;)

    The sidebar issue is because you have your "div id=right" outside of the content div! As far as the browser is concerned, you’re floating it in it’s own block, not nested within the content block. Move that div INSIDE the content div (along with that clear fix, which you probably do as an appended class to the footer, rather than just have an empty div tag) and your problem will be fixed. see your original link that you posted…you have the sidebars within the content, not outside.

    Also, I would avoid non-semantic IDs and Classes such as "right" or "left" and instead try using "side-container" or something. Also, you probably don’t need to wrap the sidebars in yet another div, just move the two "div class=sidebar" into the content div.

    Hope this makes sense to you!

    # January 5, 2010 at 5:17 pm

    The top center thing dawned on me this morning! So I’ve got that working.

    I am still having a horrible time with all the other issues revolving around wordpress and the php files.

    I’m viewing the source via firebug and it doesn’t really match up to what I have in my php files. Also I moved the close content div and that didn’t seem to help/it isn’t really moving with I actually view source… Something fishy is going on…

    It might be helpful if you could actually view my php files but I’m at work at the moment. I’ll get those up once I get home and see if you have any more thoughts on it.


    # January 5, 2010 at 5:31 pm

    I think you need to set a div around the content area, and give it a float: left; and a width so that the sidebar and content are on the same level.

    # January 6, 2010 at 11:06 am

    So after 15 mins on the phone with a friend last night, he discovered why things didn’t seem to be working correctly. I had changed a setting in WP to reading, static page BUT never actually set up my page.php. Like I said before, I am BRAND new to WP and didn’t even know lol

    All seems to be ok for now!!

    OH unless someone can tell me a plugin of the correct way to style my footer site navigation. I just used the wp_list_pages php code but not I cant get the links to display inline (horizontal).


    # January 6, 2010 at 11:15 am

    The reason your footer is appearing as a list is because that’s what you are using for it. The footer for WP is pretty basic HTML. Use the same footer HTML that you have on your main page in the footer for WP and it will show exactly the same.


Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.