Here’s a page I’m working on (this will be the eventual index page)

Example

The different gray backgrounds help show the different divs.

No padding/margins/backgrounds or classes have been applied yet; still getting the weblog info loaded.

Here’s the rub:

I’m trying to get the items below the top story item (Tractor-Trailer vs Sedan down to Fire Destroys Eight Apts) (five stories) to do this:

Have the image be left justified, then aligned with the top of the image, the County, then the Headline with the link, then the summary. (Object is to save vertical space).

I have tried applying a img.class to those images, both inline and within the weblog with no luck. Maybe it’s a format issue I’m missing.

I’ve also built two divs within a div, and that didn’t work either. I could make a div in this example_a page, then embed a template with two side by side divs. Seems like a bunch of extra work.

Here’s the code in question:

Thanks for any help.

jfh

cfp700

In order to help you on this one you are going to need to get the mark-up a little more polished. I say this because in order to use CSS effectively you need the relevant pieces of HTML in place to start with.

In the area you are trying to style (div spot two) I believe I see the following structure issues.

You open the piece with a link containing an image. Not a massive problem, but you may consider using a div with a class to wrap the individual articles, you then get a built in hook on which to style the individual pieces, whilst still creating semantic, relevant mark-up.

You follow the linked image with the county name wrapped only in a strong tag? This needs to have mark-up around the strong tags, possibly one of the lower ranked headers, or more likely a paragraph tag which perhaps has a class added e.g. “county”

You then wrap H3 tags with a tags. This is the wrong way around, an a tag is an inline element, an H tag is a block level element, an inline element is not designed to contain a block level element. Swap them around so that the a tag is nested by the H3 tag.

You then have a sentence (presumably the summary field of the post) which is not contained within anything. At a minimum this needs to reside in some paragraph tags.

You finish with a br then a hr, both obsolete if you employ the minimum required mark-up as you can use existing code to create both the space you require and the rule effect if needed.

Sorry this doesn’t fix your issue, but I feel that the HTML needs attention before you can expect to make any headway with the CSS.

Best of luck.

Adam:

Thanks. As I mentioned, nothing has really been styled at this point. This is my first EE site. At this point, trying to get the major pieces to play well in the sandbox.

I appreciate the coding comments.

Regards,

jfh

So, there are a few different approaches you could take here.  I like to think about how the elements that I’m marking up reflect the actual content.

I think I know what you’re trying to achieve, and here’s what I came up with as an example:

The “story-container” repeats for every story, giving you a nice way to contain all of the interior elements.  Inside, you’ll float your image left.  You’ll also float your headline elements (h4 & h5) left.  That should make them show up to the right of your photo and also will allow the county name to appear at the top with the photo.

You’ll most likely need to apply a clear to the story-teaser paragraph class so that it lands below the photo and headline elements.  Apply margins and padding as necessary.

I realize that the order of importance on the h4 and h5 might not exactly reflect how you’d want them to show up semantically, but you can adjust those as you see fit with their meaning.

Another approach you could take would be to contain the photo in its own div that was floated left and then have the story text (county name, headline and intro/teaser) in another div, but that might be getting a little unwieldy given the content you’re displaying.

I’d probably not use h1’s because search engines (and possibly screen readers) tend to expect an h1 to be the site’s name rather than a series of content headlines.

Let us know if you have any other problems.  Good luck!