Image positioning – WordPress as a CMS

[matthancocknz]

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:

Not Found

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

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. :)

[TheDoc]

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.

[matthancocknz]

@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;
}

[matthancocknz]

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

[Author]

Posts