Grow your CSS skills. Land your dream job.

Image positioning – WordPress as a CMS

  • # March 11, 2009 at 5:12 pm

    I’m nearly done porting a layout into WordPress, but I’m stuck with a couple of CSS issues.

    The original, static version can be viewed here and the dynamic version can be viewed here.

    The 2 problems as are follows:

    * The bottom right corner doesn’t go right to the side of the page like it does on the static version. I think I crossed a wire when I did the porting to WordPress but I can’t see where I went wrong.
    * The content block is absolutely buggered. Since I’m planning on using WP as a CMS (via Ryans Simple CMS), the ability to edit the image and the text is imperative.

    I’ve been wracking my head around these problems and have drawn a blank. Perhaps some input from the CSS-Tricks community would help. :)

    The static version has the CSS embedded in the HTML. I’ll post the code for index.php below:

    Code:
    < ?php get_header(); ?>
    < ?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    < ?php the_title(); ?>

    < ?php the_content(); ?>

    < ?php endwhile; ?>

    < ?php else : ?>

    Not Found

    Sorry, but you are looking for something that isn’t here.

    < ?php endif; ?>


    < ?php get_footer(); ?>

    The main piece of CSS which is making it hard is this one.

    Code:
    .content-text {style.css (line 144)
    font-family:Arial,Helvetica,sans-serif;
    font-size:10pt;
    margin-left:260px;
    }

    Help would be appreciated. :)

    # March 11, 2009 at 5:29 pm

    Start by validating your code http://validator.w3.org/#validate_by_input and see how it looks after you have fixed those 15 errors.

    # March 11, 2009 at 5:36 pm

    Only tested in FF3:

    Change the class name on your image from "alignleft" to "contentleft" and add a new class to your css file:

    .contentleft {
    margin-left:-260px;
    float:left;
    }

    You will also need to add a clearing div at the end of the content:

    <div class="clear"></div>

    Add this to your CSS:

    .clear {
    clear:both;
    }

    The clear will also fix the image in the bottom right lining up properly.

    You seem to have a min height on the content area, but I can’t seem to get rid of it.

    # March 11, 2009 at 6:02 pm

    @apostrophe – Coda wasn’t saving my changes when I was tidying up the code for validation. The crux of the problems were in the sidebar, so I changed it to an unordered list and it seemed to fix the problem.

    @TheDoc – thanks. I can’t change ‘alignleft’ because WordPress uses the class for image alignment now. I added the extra lines into the CSS and it works like it’s supposed to. I’m aware the min-height, but it doesn’t really concern me since there’s text going in there in the future and it works out (check the site to see what I mean)

    The corner is in the right place now, but there’s a gap between it and the footer. Here’s the revised CSS – I should tidy that up as wel since I’ve just noticed some repetition:

    Code:
    html{
    background-image:url(img/background.jpg);
    background-repeat:repeat-y;
    background-position:center;
    }

    body {
    width:995px;
    margin:0 auto;
    margin-top:30px;
    }

    /* —– HEADER —– */

    #header {
    width:995px;;
    height:222px;
    background-image:url(img/header.jpg);
    }

    #uppernav {
    width:995px;;
    height:100px;
    background-color:#1CBBB4;
    }

    #uppernav img{
    padding-left: 70px;
    padding-top: 20px;
    }

    #toprightcnr{
    width:100px;
    float:right;
    background-image:url(img/toprightcnr.jpg);
    background-position: top right;
    background-repeat:no-repeat;
    height: 95px;
    position: relative;
    }

    #wrapper{
    width:995px;
    background:url(img/spacer.gif) repeat-y; /* WARNING: IF YOU CHANGE THE COLORS OF THE LAYOUT YOU HAVE TO CHANGE THIS IMAGE! */
    overflow:auto; /* USE FIREFOX GUYS! WE ONLY NEED THIS LINE BECAUSE INTERNET EXPLODER ISN’T READING CODE PROPERLY */
    background: url(img/toprightcnr.jpg) no-repeat top right;
    }

    /* —– NAVIGATION —– */

    #sidebar-container {
    width:245px;
    min-height:500px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:500px; /* for IE5.x and IE6 */
    float:right;
    margin-top: 40px;
    padding-right: 10px;
    }

    #sidebar-top{
    background-image:url(img/sidebartop.jpg);
    background-repeat:no-repeat;
    height:26px;
    }

    #sidebar-bottom{
    background-image:url(img/sidebarbottom.jpg);
    background-repeat:no-repeat;
    height:28px;
    }

    #sidebar-content{
    background-image:url(img/sidebartile.jpg);
    margin-top: 0px;
    }

    #sidebar-content li{
    margin-left: -40px;
    list-style:none;
    }

    #sidebar-content ul{
    list-style:none;
    margin: 0;
    }

    /* —– MAIN CONTENT —– */

    #content-container {
    width:712px;
    /*min-height:500px; for modern browsers */
    /*height:auto !important; */ for modern browsers */
    /*height:500px; */ for IE5.x and IE6 */
    margin-top:10px;
    padding-left: 5px;
    }

    #content-top{
    background-image:url(img/topspacer.jpg);
    background-repeat:no-repeat;
    height: 48px;
    }

    #content-bottom{
    background-image:url(img/bottomspacer.jpg);
    background-repeat:no-repeat;
    height: 50px;
    }

    #main-content{
    margin-right:20px;
    margin-left: 20px;
    }

    #content-container h1{
    font-size:12pt;
    font-family:Arial, Helvetica, sans-serif;
    font-style:italic;
    margin-left:50px;
    }

    .content-text{
    margin-left: 260px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10pt;
    }

    img.alignleft{
    margin-left:-260px;
    float:left;
    }

    .clear {
    clear:both;
    }

    /* —– FOOTER —– */

    #btnrightcnr{
    width:72px;
    float:right;
    background-image:url(img/btnrightcnr.jpg);
    background-position: bottom right;
    background-repeat:no-repeat;
    height: 56px;
    }

    #footer {
    width:995px;
    background-color:#1CBBB4;
    height: 40px;
    font-size: 8pt;
    color: #707070;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    }

    #footer a{
    color: #707070;
    text-decoration: none;}

    #footer a.hover{
    text-decoration: underline;}

    .footernav{
    padding-top: 15px;}

    .copyright{
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:8pt;
    font-style:italic;
    text-align:center;
    }

    # March 11, 2009 at 11:48 pm
    Code:
    .footernav {
    padding-top:15px;
    margin:0;
    }

    Fixes it. The browser default settings are giving you a margin on all paragraphs, that’s why most people begin with a css reset.

    # March 12, 2009 at 4:51 pm

    Thanks to everybody for their help. This had been annoying me for the last few days and the horrible weather didn’t help either. :p

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

You must be logged in to reply to this topic.

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