Archive for February, 2011

Float & margin

Hi,

I am sure you all know this, but i will make a short description anyway. It is about the code below:

<div id="container">
	<img style="display: block; float: left;" src="http://placehold.it/468x60" alt="" />
	<p class="element" style="margin-top: 30px;">
		Sed ut perspiciatis unde omnis ...
	</p>
</div>

an element containing a floated element and a block element wrapping around the float, but you want that the block element to be lower than the floated one, so you set a margin on the block element, but the floated one is pushed by the margin… annoying. ( ex. demo 1 ).¬† So the simplest solution is to set a padding of 1px on the same direction as the margin on the container.

<div id="container" style="padding-top: 1px;">
	<img style="display: block; float: left;" src="http://placehold.it/468x60" alt="" />
	<p class="element" style="margin-top: 30px;">
		Sed ut perspiciatis unde omnis ...
	</p>
</div>

see it on demo 2 .

WordPress the_date vs. the_time

Hi !

This article is a friendly reminder for those like me, who can’t remember which wordpress function is used when.

Like the article title says is about the_date and the_time , because I wanted to make a post date look something like this:displaying the date on two rows. Like any “partially educated” web developer I wanted to achieve this by using the_date function with different parameters, like this:

<div class="post-date">
	<div class="month"><?php the_date(M) ?></div>
	<div class="day"><?php the_date(d) ?></div>
</div>

and then I discovered that it doesn’t work like I wanted to; the problem is that the second instance of the_date doesn’t work, is returning nothing, therefor just the month, no day … no good.

Lucky for me, I didn’t overload my brain too much trying to understand why is not working, and I gave another try, this time with the_time function, and … voil√† ! , worked like a charm.

<div class="post-date">
	<div class="month"><?php the_time(M) ?></div>
	<div class="day"><?php the_time(d) ?></div>
</div>

So keep in mind !