Add a " | " between two CSS elements.

  • legarreta

    (@legarreta)


    11 years, 3 months ago

    Hi everyone,

    So I’ve changed up my metadata under the header a little bit, and run into an issue — I want to insert a | between the author and date elements, but I’m not sure how through html and/or CSS. Here’s how it looks currently:

    http://i.imgur.com/aE7sGVT.png

    I want to change it so that there’s a divider between the author name and the date. Any help would be greatly appreciated. Here’s how both the html and CSS look for the two elements:

    <`div id=”author”><i><?php $author_display_name = get_the_author_meta( ‘display_name’ );
    $bk_author_id = $post->post_author;
    printf(‘<div class=”author” itemprop=”author” >%s</div>’, ‘<a rel=”author” href=”‘.get_author_posts_url( get_the_author_meta( ‘ID’ ) ).'” title=”‘.sprintf(__(‘Posts by %s’,’bkninja’), $author_display_name).'”>’.$author_display_name.'</a>’) ?></i></div>
    <div id=”date”><p><?php echo get_the_date(); ?></p></div>`

    #author {
    display: table-caption;
    float: left;
    padding-top: 35px;
    font-style: italic;

}
#date {
    display: table-caption;
    margin-left : 20px;float:left;
    padding-top: 35px;

    Thanks for the help in advanced, everyone!

Viewing 2 replies - 1 through 2 (of 2 total)
  • MarkRH

    (@markrh)

    11 years, 3 months ago

    Just add a ” | ” in the code:

    <div id="author"><i><?php $author_display_name = get_the_author_meta( 'display_name' );
$bk_author_id = $post->post_author;
printf('<div class="author" itemprop="author" >%s</div>', '<a rel="author" href="'.get_author_posts_url( get_the_author_meta( 'ID' ) ).'" title="'.sprintf(__('Posts by %s','bkninja'), $author_display_name).'">'.$author_display_name.'</a>') ?></i></div>
<div id="date"><p><?php echo ' | '.get_the_date(); ?></p></div>

    I added it just before get_the_date().

    That should work.

    Thread Starter legarreta

    (@legarreta)

    11 years, 2 months ago

    Thanks very much, that did the trick!

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

The topic ‘Add a " | " between two CSS elements.’ is closed to new replies.