• Locked
3 replies [Last post]
Sat, 2010-02-06 23:17
tjroberts086
tjroberts086's picture
User offline. Last seen 5 hours 26 min ago. Offline
rank Enthusiast
Enthusiast
Timezone: GMT-6
Joined: 2010-01-08
Posts: 106
Points: 137

Hello, I am trying to get a date to display next to my recent posts. A tutorial I have been trying to follow for this is http://lab.christianmontoya.com/css-dates/

I am not really looking for anyone to code this for me, I am really needing some insight on how this can be done because the tutorial was ment for a blog (not unordered lists via CSS). I am pretty new to css, I have been learning fast as I can so I have been missing important points and information. Thus any insight or help would be so greatly appreciated, thanks again Hugo you have been the best!

my markup is:

			<div id="sidebar">
			  <div class="sidemenu">
 
					<h3>Whats <span>New?</span> </h3>
					<ul id="news">
						<li>
					<h4><a href="#">News Item 1</a></h4>
		Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula Praesent turpis libero <a class="more" href="index.html">read more  &raquo;</a>	
						</li>
 
						<li>
					<h4><a href="#">News Item 2</a></h4>
		Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula Praesent turpis libero <a class="more" href="index.html">read more  &raquo;</a>
						</li>
 
					</ul>
			  </div>
		</div>

my css is:

#news {
	margin:8px;
	padding:0;
	width:284px;
	list-style:none;
	color: #bbb;
}
#news li {
	background: #0d0d0d;
	padding:0 0 8px 0;
	margin:8px 0 0 0;
	display:block;
}
#news h4 {
	margin: 10px 0 5px 0px;	
	color: #ddd;
	font-size: 11px;
}

Top
Tags:
Sun, 2010-02-07 23:39
#1
Tony
Tony's picture
User offline. Last seen 6 hours 56 min ago. Offline
rank Moderator
Moderator
Timezone: GMT+10
Joined: 2003-03-12
Posts: 3705
Points: 1115

Just add the markup for the

Just add the markup for the date and the CSS that should get you pretty close.

<div id="sidebar">
			  <div class="sidemenu">
 
					<h3>Whats <span>New?</span> </h3>
					<ul id="news">
						<li>
 
<acronym class="published" title="June 28, 2006">
	<span class="pub-month">Jun</span>
	<span class="pub-date">28</span>
</acronym>
 
					<h4><a href="#">News Item 1</a></h4>
		Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula Praesent turpis libero <a class="more" href="index.html">read more  &raquo;</a>	
						</li>
 
						<li>
 
<acronym class="published" title="June 28, 2006">
	<span class="pub-month">Jun</span>
	<span class="pub-date">28</span>
</acronym>
					<h4><a href="#">News Item 2</a></h4>
		Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula Praesent turpis libero <a class="more" href="index.html">read more  &raquo;</a>
						</li>
 
					</ul>
			  </div>
		</div>

.published {
	display:block;
	text-align: center;
	float:left;
	font-family: Arial, Helvetica, sans-serif; 
	border-bottom:none;
}
.pub-month {
	display:block; 
	font-size: .9em;
	margin:0; 
	padding:0;
}
.pub-date { 
	display:block; 
	font-size:1.4em;
	margin:0; 
	padding:0;  
}

Your question may have already been answered, search and read before you ask.

Top
Tue, 2010-02-09 00:42
#2
tjroberts086
tjroberts086's picture
User offline. Last seen 5 hours 26 min ago. Offline
rank Enthusiast
Enthusiast
Timezone: GMT-6
Joined: 2010-01-08
Posts: 106
Points: 137

Thank you for your confident

Thank you for your confident response, at first I did not really understand what I was doing. I managed to get this working to my own code and I could not be more happy with the results.

Top
Tue, 2010-02-09 11:18
#3
Hugo
Hugo's picture
User offline. Last seen 9 hours 45 min ago. Offline
rank Moderator
Moderator
Joined: 2004-06-06
Posts: 15095
Points: 2190

fwiw I ran the code as above

fwiw I ran the code as above and it looked good to me, at least I would have been happy with that look, but wasn't sure whether you actually wanted the day and month on same line, wouldn't look as good though and our old friend IE6 has issues achieving that inside a LI element which would have taken a little coding around.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Top
  • Locked