WordPress.org

Ready to get started?Download WordPress

Forums

Date on the same line than the post title (7 posts)

  1. kristel_ttm
    Member
    Posted 3 years ago #

    I know there have already been several topics about this but I am new to wordpress and CSS and I'm fighting for the last 2 days with CSS code to make this work.

    I would like to have my date on the left (same line) that the post title.
    Here is my function:

    <?php /* How to display all other posts. */ ?>

    <?php else : ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <div class="date"><div class="day"><?php the_time('d') ?></div>
    <div class="month"><?php the_time('M') ?></div></div>

    <span class="post-title">" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></span>

    And here is my CSS:

    .post-title {
    color: #5B8580;
    font-weight: bold;
    font-size: 18px;
    margin-left: 45px;
    padding-left: 12px;
    margin-left: 45px;}

    .post-title a:link,
    .post-title a:visited {
    color: #000;
    text-decoration: none;
    }
    .post-title a:active,
    .post-title a:hover {
    color: #5B8580;
    }

    .date { text-align: center;
    width: 35px;
    border-right: 2px solid #555;
    line-height: 6px;
    height: 20px
    }

    .day {
    font-weight: bold;
    color: #555;
    font-size: 17px;
    }

    .month {
    color: #555;
    font-size: 10px;
    text-transform: uppercase;
    }

    I tried everything with changing float, margin, padding, etc... but can not get the title inlined with the date stamp.

    http://www.djpromo.nl/wordpress

    If someone would be kind enough to look at it and tell me what I'm doing wrong, I would be very grateful.

    Thank you !

  2. MarcusIV
    Member
    Posted 3 years ago #

    The post-title I think I am right in saying is in a header like <h2> or similar which is a block level element ie by default it occupies the full width of the container - even if its short in length it occupies the space as it were..........u might try changing it from that situation by using display:inline;

  3. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    absolute positioning might be another possibility; for instance:

    .heading a { margin-left: 30px;}
    .post { position: relative; }
    .post .date { position: absolute; top: 4px; left: -15px; }

    http://www.w3schools.com/css/css_positioning.asp

  4. kristel_ttm
    Member
    Posted 3 years ago #

    tried both.

    I believe that by adding a <span class> my post-title is no longer a header <h2>. Anyway I added display:inline; to my .post-title in the stylesheet but without result :(

    I also tried the absolute positioning for .post-date and relative positioning of .post-title but it did not change anything either.

    Is there maybe a problem in my loop ?

  5. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    to get the changes to css show in the browser, you sometimes have to reload the page, or press 'ctrl f5' simultanaously.

    the loop simply outputs the html structure, and has not much to do with the styling of the site.

    there was a missing ; in the style of .date, after height: 20px
    which stopped the following lines from being executed.
    also, this line .post{position:relative;} is important for the positioning to work.

    corrected:

    .post{position:relative;}
    .date {	text-align: center;
            width: 35px;
    	border-right: 2px solid #555;
    	line-height: 6px;
    	height: 20px;
    	position:absolute; top:5px; left:0px;
    }
  6. kristel_ttm
    Member
    Posted 3 years ago #

    That did the trick ! Thnk you very much Alchymyth.

  7. MADinMelbourne
    Member
    Posted 3 years ago #

    Hi, this looks like exactly what I want and I've read thru this post four or five times however it's not making complete sense.. @alchymyth, do you mind letting me know the basic instruction from scratch to make that space absolute? As you can see from my link the heading looks all out of proportion, I'd like 'the ART of Making a Difference' and info@ to be on the same line and the same size. Thanks in advance for passing on your knowledge.

    http://www.madinmelbourne.com.au

Topic Closed

This topic has been closed to new replies.

About this Topic