Author Date Display Position Problem

  • Unknown's avatar
    activecore · Member ·

    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

  • Unknown's avatar
    vivianpaige · Member ·

    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.

  • Unknown's avatar
    activecore · Member ·

    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.

  • Unknown's avatar
    vivianpaige · Member ·

    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.

  • Unknown's avatar
    activecore · Member ·

    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!

  • Unknown's avatar
    vivianpaige · Member ·

    Glad to have been able to help ;)

  • The topic ‘Author Date Display Position Problem’ is closed to new replies.