SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do i achieve this kind of styling in my post for my wordpress site.

    Here is the link for the image - http://s255.photobucket.com/user/tes...tml?sort=3&o=0

    Basically i want the share buttons and read more button to be place at the very bottom of the div. Just like "Sample Post 14". The only reason i managed to achieved that is because of the excerpt or dummy text. Is there anyway to accomplish that kind of styling. I'm using skeleton framework hence the class twelve columns or sixteen columns and etc


    Here is my code:


    Index.html -

    Code:
    <?php while ( have_posts() ) : the_post(); ?>
           
           <div class="sixteen columns outer_box">
               <div class="inner_box articles">
               
                
                   <!--TITLE OF THE POST -->
                   <h3 class="post-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
    			   
    
    			   
    			   <ul class="data">
    			     <li><?php the_author_posts_link() ?> /</li>
    				 <li><?php the_category(', ') ?> /</li>
    			     <li><?php the_time('F jS, Y') ?> /</li>
    				 <li><?php comments_number() ?></li>
    			   </ul>
    			   
                   <hr>
                   
    			   <!--FIXED SIZE THUMBNAIL -->
    
    			   <div class="align_thumbnail_right">
    			       <div class="thumbnail"> 
    				   
    				   <?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<img src="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" width="250px" height="150px" >';  } ?>
    				   </div>
    			   </div>
    			   
    			   
    			   <div class="content">
                      <!--TEXT -->
                      <?php the_excerpt(); ?>
    
                   
                     <a href="<?php echo get_permalink(); ?>"><span>Read More</span></a>
                   </div>
                     
               </div>
           </div>
           
           <?php endwhile; ?>
    Style.css -

    Code:
    .outer_box{border:1px solid #9f9191; margin:0px 0px 20px 0px}
    .inner_box{margin:20px}
    .articles h3 a{font-family: 'PT Sans', sans-serif; font-size:25px; color:black; text-decoration:none}
    ul.data li, ul.data a{display:inline; font: normal normal bold 13px 'PT Sans', sans-serif; color:#565E66; text-decoration:none}
    .content a{text-decoration:none; color:black; float:right; display:inline; font-weight:bold}
    .content p{line-height:20px; margin-bottom:20px}
    
    
    /*POST THUMBNAIL */
    .align_thumbnail_right{float:right; margin:0px 0px 20px 20px; background-color:#E8ECEF;}
    .thumbnail{margin:5px;}

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If I understand correctly then you could just make sure your text content was in a container (p element) and then just give that element a min-height which would ensure that the next elements (your share buttons etc) start at the bottom.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •