Grow your CSS skills. Land your dream job.

Help with CSS and WP layout

  • # May 28, 2009 at 7:38 pm

    Ok, so im making a wordpress layout. Everything is working well but my main content float and sidebar float. For some reason All my Blog posting are posting horiztonal and not vertical?? The post are in main-col which is float: left but they stretch across and push my sidebar which float:right down?

    A image is attach to see what i mean: (would link but working on home server) the advertisement image is in my sidebar just so you know.

    [attachment=0]example.jpg[/attachment]

    I put the php code on index file between divs with id of main-col

    and put the image inbetween div’s on sidebar.php id: sidebar.

    here is my css code:

    Code:
    /*
    ARTHUR: Chris Cardarello
    http://www.moppieillusions.com

    Colors[orange: fcb201 ]
    [dark grey: 4e4e4d ]
    [light grey: 9d9d9d ]

    */

    * {margin : 0;padding : 0;}
    html { overflow-y: scroll; }
    html, body { height: 100%; }
    body {
    text-align : center;
    font-size : 62.5%;
    font-family : Arial, san-serif; color: black;
    background : url(images/topbg.jpg) top center repeat-x white;}
    ul {list-style : none;}
    ol {list-style : decimal;}
    img {vertical-align : middle;}
    p {font-size : 1.2em;}
    a {outline : none; text-decoration : none;}
    a img {border : none;}
    table { border-collapse: collapse; }

    /*utilities*/
    .clear {clear : both;}
    .floatleft {float : left;}
    .floatright {float : right;}
    .button {
    border : 1px solid #fcb201;
    background : white;
    padding : 3px 0;
    }
    .button:hover {
    background : #fcb201;
    color : white;
    }

    /*Structure*/
    #main-col { width: 520px; ; float: left; margin-right: 15px; }
    #sidebar { width: 270px; ; float: right; }

    /*page-wrap settings*/
    div#page-wrap {
    width : 850px; margin : 0px auto -250px;
    min-height: 100%; height: auto !important: height: 100%;
    text-align : left;
    }

    /*bgfader image settings*/
    div#bg-content{
    width : 850px; margin : 0px auto;
    height: 456px;
    text-align : left;
    background: url(images/bodybg.png) no-repeat;
    }

    /*wrapcontent settings*/
    div#wrap-content{
    width : 785px; margin : 0px auto;
    text-align : left;
    }

    /*advertisement area*/
    #ads{
    width: 224px;
    height: 100%;
    }

    /*sticky footer settings*/
    #push{ height: 250px; }

    /*header setting*/
    div#header {
    width : 850px;
    height : 128px;
    background : url(images/header.jpg) no-repeat;
    }

    /* NAVIGATION SYSTEM SETTINGS */
    ul#nav {list-style : none;}

    ul#nav li {
    width: 850px;
    display: inline;
    }

    ul#nav li a {
    display: block;
    height : 66px;
    text-indent : -9999px;
    float : left;
    }
    ul#nav li.home a {
    height : 66px; width:156px;
    background : url(images/homebutton.jpg) no-repeat bottom center;
    }
    ul#nav li.about a {
    height : 66px; width: 118px;
    background : url(images/aboutbutton.jpg) no-repeat bottom center;
    }
    ul#nav li.services a {
    height : 66px; width: 137px;
    background : url(images/servicesbutton.jpg) no-repeat bottom center;
    }
    ul#nav li.portfolio a {
    height : 66px; width: 146px;
    background : url(images/portfoliobutton.jpg) no-repeat bottom center;
    }
    ul#nav li.quote a {
    height : 66px; width: 115px;
    background : url(images/quotebutton.jpg) no-repeat bottom center;
    }
    ul#nav li.contact a {
    height : 66px; width: 178px;
    background : url(images/contactbutton.jpg) no-repeat bottom center;
    }
    /*end nav settings*/

    /*Navigation Hover State*/

    ul#nav li a:hover{
    background-position: center center;
    }

    # May 29, 2009 at 5:25 am

    I don’t see any rules for the post divs?

    # May 29, 2009 at 10:41 am

    Ok, so i added a .post class with same width as main-col and in set post vertical just with no space between each other but, my sidebar is still at bottom of page? I even try’d to float the post class left but can’t get the sidebar along side it up top.

    Code:
    #main-col { width: 520px; float: left;}
    #sidebar { width: 230px; float: right;}

    .post {width:520px; float: left;}

    # May 29, 2009 at 12:01 pm

    Without a link it’s difficult to say. Have you validated your html?

    # May 29, 2009 at 8:58 pm

    Ok i got it fixed for now lol, um one question though my buttons have three state the third is a clicked state, how do you make it so once clicked and it goes to page it stays on clicked state?

    # May 30, 2009 at 12:12 am

    Ok along with my question above^^ I have another, in FireFox, and Chrome the advertisement image is at top right of body, but in IE its not anyway to fix? and in Chrome my dropshadow works for the blog post h2, but not in FireFox or IE, anyway of getting it too work in those?

    heres line finally got it live: http://moppieillusions.com/

    # May 30, 2009 at 12:27 am
    "quickfire84" wrote:
    Ok i got it fixed for now lol, um one question though my buttons have three state the third is a clicked state, how do you make it so once clicked and it goes to page it stays on clicked state?

    If you are using the WordPress list pages function it will add the class of "current_page_item" so just apply the "clicked" background image to that class.

    Does that make sense?

    "quickfire84" wrote:
    Ok along with my question above^^ I have another, in FireFox, and Chrome the advertisement image is at top right of body, but in IE its not anyway to fix?

    I’d start with validating your HTML: http://validator.w3.org/check?verbose=1 … ons.com%2F
    and your CSS: http://jigsaw.w3.org/css-validator/vali … ons.com%2F

    "quickfire84" wrote:
    and in Chrome my dropshadow works for the blog post h2, but not in FireFox or IE, anyway of getting it too work in those?

    That drop shadow is part of CSS 3, and not viewable in most people’s browser.

    # May 30, 2009 at 3:25 am

    Ok, i didnt do html yet but i put the validated css in and it total screwed the layout up.. lol…

    # May 30, 2009 at 7:22 am

    Oh dear. :?
    Non validating html aside your page structure is totally screwed up.
    The sidebar needs to be inside the #wrap-content div and all of the posts should be inside the #main-col div and not just the first one.

    # May 30, 2009 at 10:02 am

    Wow, lol sorry i should of done that don’t know why i didn’t but now all post and side bar are inside the wraps, but now if you look the ads image is in correct side just not at top.

    # May 30, 2009 at 10:07 am

    Nevermind!!!! i got it!! lol thank you, oh i have another question.. i never made a three state button, so how do i add that clicked state too it ? just like i did hover?

    Oh and how do i get a line break between post is that somewhere in settings?

    # May 30, 2009 at 10:40 am

    I would have used wp_list_pages or the new wp_page_menu to create my nav, that way all the neccessary classes are added dynamically. By hard coding the navigation you will have to use something like this http://www.problogdesign.com/wordpress/get-total-control-over-your-page-styles-with-css/

    What line break?

    # May 30, 2009 at 11:32 am

    If you look at the posting there is no real space between them, how can i make that space a little bigger

    # May 30, 2009 at 11:55 am

    Give div.post a bottom margin.

    # May 30, 2009 at 4:28 pm

    Ok i Got the tabs to work, the only thing that is broken now is my ad image on every page except the index one.

    Think i have to link the whole url of this image in the sidebar.php instead of just images/ thats what ill try and see if it works

    Thanks for all the help…

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

You must be logged in to reply to this topic.

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