Date on the same line than the post title

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

    https://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 !

Viewing 6 replies - 1 through 6 (of 6 total)

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

    absolute positioning might be another possibility; for instance:

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

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

    Thread Starter kristel_ttm

    (@kristel_ttm)

    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 ?

    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;
}
    Thread Starter kristel_ttm

    (@kristel_ttm)

    That did the trick ! Thnk you very much Alchymyth.

    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.

    https://www.madinmelbourne.com.au

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Date on the same line than the post title’ is closed to new replies.