Need help with Article Heading

Get Started
1

Here is a partial screenshot of two different Sub-Sections showing a “Featured Article” on the left…

I’m not too sure I like how the Heading, Summary and Thumbnail play out.

Any suggestions on what makes more sense from both a markup, layout, and aesthetic standpoint?

Thanks,

Debbie

2

You can stop the text from wrapping under the image if you want.

3

The heading should be one line and it should explain the nature of article, if urgent then only put two line heading.

4

How would I do that?

Debbie

5

The easiest way is to wrap the text in a div ( if it isn’t already) and set it to overflow: hidden.

An alternative would be to give it a fixed width and float it, though that’s less adaptable.

6

Would that work with the way I have my HTML…


	<!-- Featured Article -->
	<div class="subFeatured">
		<a href="">
			<img src="/images/StocksFall_100x78.jpg" width="100" alt="" title="Stocks Fall" />
			<h4>U.S. Stocks Decline as Retail Sales Fall, Commodities Tumble</h4>
		</a>
		<p>U.S. stocks fell, dragging the Standard & Poor’s 500 Index down from a record, as government data showed retail sales unexpectedly fell in March, commodities plunged and a gauge of consumer sentiment slipped.</p>
	</div>

Debbie

7

If the <a> is floated, you could set the <p> to overflow hidden, assuming there will only be one <p>.

Wow, after all the coding talk over the years, and all deathshadow’s ranting, you are still placing an h4 inside an <a>? That’s not a great structure there, even if you try to gloss over it with an HTML5 doctype.

This is a bit more bulky code wise, but I’d do something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>thumb</title>
	
<style media="all">
.subFeatured {width: 400px;}
.thumb {float: right;}
.text {overflow: hidden;}
</style>
	
</head>
<body>

<div class="subFeatured">
	<h4><a href="">U.S. Stocks Decline as Retail Sales Fall, Commodities Tumble</a></h4>
		
	<div class="thumb"><a href=""><img src="image.gif" width="100" alt="" title="Stocks Fall"></a></div>
		
	<div class="text"><p>U.S. stocks fell, dragging the Standard & Poor&#8217;s 500 Index down from a record, as government data showed retail sales unexpectedly fell in March, commodities plunged and a gauge of consumer sentiment slipped.</p>
	
	<p>U.S. stocks fell, dragging the Standard & Poor&#8217;s 500 Index down from a record, as government data showed retail sales unexpectedly fell in March, commodities plunged and a gauge of consumer sentiment slipped.</p>
	
	</div>
		
</div>

</body>
</html>
8

I don’t always remember advice I get here on SitePoint…

And I thought what I did was what DeathShadow would have recommended, i.e. give the user the ability to click either on your Article Heading or the Thumbnail… :-/

This is a bit more bulky code wise, but I’d do something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>thumb</title>
	
<style media="all">
.subFeatured {width: 400px;}
.thumb {float: right;}
.text {overflow: hidden;}
</style>
	
</head>
<body>

<div class="subFeatured">
	<h4><a href="">U.S. Stocks Decline as Retail Sales Fall, Commodities Tumble</a></h4>
		
	<div class="thumb"><a href=""><img src="image.gif" width="100" alt="" title="Stocks Fall"></a></div>
		
	<div class="text"><p>U.S. stocks fell, dragging the Standard & Poor’s 500 Index down from a record, as government data showed retail sales unexpectedly fell in March, commodities plunged and a gauge of consumer sentiment slipped.</p>
	
	<p>U.S. stocks fell, dragging the Standard & Poor’s 500 Index down from a record, as government data showed retail sales unexpectedly fell in March, commodities plunged and a gauge of consumer sentiment slipped.</p>
	
	</div>		
</div>

</body>
</html>

Thanks for trying to help, after adding an actual thumbnail, the end result looks pretty bad…

(I don’t want the Thumbnail sticking out like a sore thumb.)

Not to confuse the conversation, but here is a screen-shot of my two new “Article Summaries”, plus an older “Article Summary” that uses a different layout.

What do you think about how my current Summaries look?

How do they compare to my older layout?

Sincerely,

Debbie

9

The Postage Meters one looks better to me. In the others, the heading looks a bit lost.

10

[ot]Wow, Ralph, you posted exactly at Midnight before turning into a pumpkin!! :pumpkin:

:rofl: :rofl:

Debbie

[/ot]