WordPress.com

1. activecore
   Member
   Jan 13, 2008, 11:20 PM

   Hi all, I'm hoping that someone can help me out with my small CSS problem.

   I'm using the Ocean Mist theme with the custom CSS upgrade and I want to get the author and date to display underneath the post title as opposed to next to it.

   Like this persons blog: http://leeartsandsciences.wordpress.com/

   Not as mine is now: http://activecore.wordpress.com/

   I have tried various things like float, padding and margin but no matter what I do the author/date always pushes the title below it.

   I thought it might be an issue with how they are being called but unfortunatley its gone beyond my understanding off CSS and i'd greatly appreciate if someone could point me in the right direction.

   Thanks in advance to anyone with helpful advice.

   Best
   ActiveCore

2. vivianpaige
   Member
   Jan 13, 2008, 11:55 PM

   I'm no CSS expert but in looking at the differences between the CSS on the two blogs, I don't see that yours contains the same title element. I see this on the other blog:
   

   .title {
   	position:relative;
   	float:left;
   	display:block;
   	width:543px;
   	background:url('images/bg_h2.gif') bottom repeat-x #E2EBF8;
   	margin:0 0 18px;
   }

   Perhaps there is something in there. I notice that the post titles on your blog are on two lines while on the other blog it is only on one line.

3. activecore
   Member
   Jan 14, 2008, 12:15 AM

   Thanks for the reply Vivian,

   The .title change didn't seem to work but the 2nd thing you identified is what I noticed earlier as well, I just wasn't sure exactly what piece of code was telling it to do that differently.

   I narrowed the following pieces of code down as being the ones that I think need to be changed:

   This one seems to control the post title:

   #content .postwrapper .title h2 {
   font-family:Helvetica;
   text-transform:none;
   background:url('http://i41.photobucket.com/albums/e269/Tenmawarau/images/icon_entry1.gif') 24px 50% no-repeat;
   padding:9px 100px 12px 42px;
   }

   This one seems to control the author and date:

   .title small {
   float:right;
   color:#67939B;
   padding:14px 24px 0 0;
   }

   I spent hours adding and removing various things but with no sucess, sadly i'm not a very logical person.

   Thanks for your continued help.

4. vivianpaige
   Member
   Jan 14, 2008, 12:50 AM

   OK, again, looking at the CSS on the other blog:
   

   .title small {
   	position:absolute;
   	bottom:1px;
   	left:42px;
   	color:#67939B;
   	display:block;
   }

   Notice that your title is set to float to the right while the one above has the position set for absolute. You may want to try that.

5. activecore
   Member
   Jan 14, 2008, 2:05 AM

   Thanks a lot Vivian, I have it mostly worked out now.

   The position:absolute seemed to be the key as you thought.

   I'll set this as resolved, thanks again!

6. vivianpaige
   Member
   Jan 14, 2008, 2:45 AM

   Glad to have been able to help ;)

Topic Closed

This topic has been closed to new replies.