noobtocoding
Dec 14th, 2009, 10:13 PM
I need a little help adding a calender icon that shows the date next to each post. Here's a link: http://tinyurl.com/yk747z9.
On the most recent post it says Dec 13. The problem is, after adding this sticky date, the body text is not aligned correctly. Furthermore, if you look at it in Internet Explorer, it is even more messed up.
Here's the code in index.php:
<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : ?>
<?php $i=0; while (have_posts()) : the_post(); $i++; ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div style="position:relative;left:-90px;">
<div class="date">
<?php the_time('M') ?>
<p class="date2"><?php the_time('d') ?></p>
</div>
<div class="post-top">
<div class="post-title">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php if ( function_exists('the_title_attribute')) the_title_attribute(); else the_title(); ?>"><?php the_title(); ?></a></h2>
<h4><?php comments_number('0', '1', '%'); ?></h4>
</div>
<h3>Posted in <span><?php the_category(', ') ?></span> by <span> <?php the_author() ?></span></h3>
</div>
</div>
<div class="entry">
<?php if($i==1 || $i==2) : ?>
<?php theme_google_468_ads_show(); ?>
<? endif; ?>
<?php the_content('',FALSE,''); ?>
</div>
<div class="postmetadata">
<p><a href="<?php the_permalink() ?>">Continue Reading</a></p>
</div>
</div>
<?php endwhile; ?>
<div class="entry">
<?php theme_google_468_ads_show(); ?>
</div>
<div class="navigation">
<?php if(!function_exists('wp_pagenavi')) : ?>
<div class="alignleft"><?php next_posts_link('Previous') ?></div>
<div class="alignright"><?php previous_posts_link('Next') ?></div>
<?php else : wp_pagenavi(); endif; ?>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
</div>
<?php get_footer(); ?>
As you can see, I added the "date" classes and divs to represent the date sticky note to the left of each post. Here is the CSS in correlation to this:
.date{
background:url(images/date.png) no-repeat scroll 0 0;
display:inline-block;
float:left;
width:115px;
height:125px;
text-transform:uppercase;
font-family:georgia;
font-size:22px;
line-height:20px;
text-align:left;
color:#F60;
text-indent:25px;
left:10px;
position:relative;
padding-top:40px;
}
.date2{
font-size:35px;
color:#F60;
}
.datetext{
margin-right:10px;
}
I can't get it to position correctly! How can you prevent the gap between the body text and the title, as well as it not displaying correctly in IE? Please help! Thank you so much!
On the most recent post it says Dec 13. The problem is, after adding this sticky date, the body text is not aligned correctly. Furthermore, if you look at it in Internet Explorer, it is even more messed up.
Here's the code in index.php:
<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : ?>
<?php $i=0; while (have_posts()) : the_post(); $i++; ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div style="position:relative;left:-90px;">
<div class="date">
<?php the_time('M') ?>
<p class="date2"><?php the_time('d') ?></p>
</div>
<div class="post-top">
<div class="post-title">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php if ( function_exists('the_title_attribute')) the_title_attribute(); else the_title(); ?>"><?php the_title(); ?></a></h2>
<h4><?php comments_number('0', '1', '%'); ?></h4>
</div>
<h3>Posted in <span><?php the_category(', ') ?></span> by <span> <?php the_author() ?></span></h3>
</div>
</div>
<div class="entry">
<?php if($i==1 || $i==2) : ?>
<?php theme_google_468_ads_show(); ?>
<? endif; ?>
<?php the_content('',FALSE,''); ?>
</div>
<div class="postmetadata">
<p><a href="<?php the_permalink() ?>">Continue Reading</a></p>
</div>
</div>
<?php endwhile; ?>
<div class="entry">
<?php theme_google_468_ads_show(); ?>
</div>
<div class="navigation">
<?php if(!function_exists('wp_pagenavi')) : ?>
<div class="alignleft"><?php next_posts_link('Previous') ?></div>
<div class="alignright"><?php previous_posts_link('Next') ?></div>
<?php else : wp_pagenavi(); endif; ?>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
</div>
<?php get_footer(); ?>
As you can see, I added the "date" classes and divs to represent the date sticky note to the left of each post. Here is the CSS in correlation to this:
.date{
background:url(images/date.png) no-repeat scroll 0 0;
display:inline-block;
float:left;
width:115px;
height:125px;
text-transform:uppercase;
font-family:georgia;
font-size:22px;
line-height:20px;
text-align:left;
color:#F60;
text-indent:25px;
left:10px;
position:relative;
padding-top:40px;
}
.date2{
font-size:35px;
color:#F60;
}
.datetext{
margin-right:10px;
}
I can't get it to position correctly! How can you prevent the gap between the body text and the title, as well as it not displaying correctly in IE? Please help! Thank you so much!