Lorelle

<img scr="http://www

Change that to:

<img src="http://www

http://codex.wordpress.org/WordPress_Feeds

Gives you step by step instructions on the feeds used in WordPress.

Here is an example of a specific category feed:

http://example.com/wp-rss2.php?cat=42

Also see: http://codex.wordpress.org/Customizing_Feeds

Begin by reading the following on how to use the Page feature and templates:

http://codex.wordpress.org/Pages
http://codex.wordpress.org/Templates

And the links.php is a template file, not the “web page” itself. Your page_id=45 or whatever is your page URL until you turn on permalinks.

http://codex.wordpress.org/Using_Permalinks

See also:

http://codex.wordpress.org/Linking_Posts_Pages_and_Categories

You can find all the secrets of the WordPress header at:

http://codex.wordpress.org/Designing_Headers

My example of “excerpt-post” was just an example. Use “storycontent” or whatever you want. No need to add another DIV.

Even with two images inside of a post, I don’t have any need for adding the clear:both style anywhere. You can view my style sheet from my website if you are using Firefox with the Web Dev add on (which you SHOULD if you don’t! 😉 ).

I have a customized index.php template file that I’ve been meaning to write about for some time now, so I’ll try to get to that on my site in the next day or two, and that might help you, but you can pull the basics from the source code and CSS on my site now, while you wait.

The clear:both is in the clearfix as the thing to do “after”. So you don’t need the div with the clear.

Okay, the problem is with the CSS and it’s the same one I had with my site. It’s mentioned in the Browser bugs article listed above, if I remember.

Called “Clearfix”, it’s from Positioniseverything’s Easy Clearing. Basically, it’s a CSS hack that gives instructions to a float inside of a float as to it’s height. Without these instructions, the images will overlap, as your tests show. Using a blank graphic doesn’t “fix” the problem it just gives you a temporary solution for that specific instance.

If you click my name and look at my site you will see on the front page images to the right of each summary. A green bar is on the left of the summary. Without this fix, if the text was short, the image would overlap the post below, causing the stairstep technique you experienced. This is because the container didn’t have instructions on how high it was supposed to be to accomodate the floating image inside.

With this fix, it provides the information and it works. I use a clear:both in the excerpt’s style so that each excerpt summary begins “with a clean slate” of no floats above it.

Here is the code for the style.css:

.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
/* End clearfix */

To use it:

<div class="excerpt-post clearfix">
<h2 id="post-<?php the_ID(); ?>">......

You can use two styles in a class, by the way. I also use this in my book reviews and other places where I need to have the image float within the “paragraph” or container and not overlap the one below it.

On my front page, once this is in my index.php template file, I never have to think about it again. That’s nice.

I hope this helps.

Drama-Princess: we volunteer to help here because we support WordPress, not for the kudos or really even the thanks. For the most part, it’s a thankless job, so thanking us on the forum goes a lot further than anything else. And when you get your site running, be sure and come back and post a link in the Your WordPress section asking for a review and critique. That will also help you to learn more and get people to check out your site.

And when you get really good at this, thank all of us by becoming involved as a WordPress volunteer. There is a lot to do here and elsewhere in WordPress.