Forums

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:

<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<div id=\"content-container\">
			<h1><?php the_title(); ?></h1>
		<div id=\"content-top\"></div>
		<div id=\"main-content\">
		<div class=\"content-text\">
			<?php the_content(); ?>

			<?php endwhile; ?>

			<?php else : ?>

			<h1>Not Found</h1>
			<p>Sorry, but you are looking for something that isn't here.</p>

			<?php endif; ?>
	  </div><!--end content-text-->
		</div><!--end main-content-->
		<div id=\"content-bottom\"></div>
  </div><!--end content-container-->
<div id=\"btnrightcnr\"></div>
</div><!--end wrapper-->
<?php get_footer(); ?>

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

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

Help would be appreciated. :)

apostrophe

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

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:


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

apostrophe

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

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

treehouse : what would you like to learn today?

Forums

Image positioning - Wordpress as a CMS