Help styling Ad on Home Page

HTML & CSS
1

I would like help formatting an Advertisement/Call-out for Events on my Home Page.

My question is more about what looks best than the mechanics, although I’m always open to suggestions?!

Here is my content…


[b]Events

Current Dates:[/b]
	* Pierre, SD
	Sat, Sept 24

	* Minneapolis, MN
	Sat, Oct 1

	* St. Paul, MN
	Sun, Oct 2


[b]Upcoming Locations:[/b]
	* Rochester, MN
	* Madison, WI
	* Fargo, ND
	* Laramie, WY

Comments:
1.) The idea of this Ad is two-fold… First, show Dates/Locations of current Events. Next, to give a “teaser” of other Locations where Events will be held. (This will hopefully keep people - who do not live in the immediate area of the Current Dates - still interested.)

2.) I was thinking of using an Unordered List for both “Current Dates” and “Upcoming Locations”.

3.) One problem I have - technically - is how to handle and style the Dates below the Location. (The Date should be a smaller font and “hug” the Location.

Here is what I have so far…


	<h3>Upcoming Events</h3>

	<h4>Current Dates:</h4>
	<ul>
		<li>
			Pierre, SD<br>
			<span class="event_date">Sept 24, 2011</span>
		</li>
		<li>
			Sioux Falls, SD<br>
			<span class="event_date">October 1, 2011</span>
		</li>
	</ul>

	<h4>Upcoming Locations:</h4>
	<ul>
		<li>Rochester, MN</li>
		<li>Madison, WI</li>
		<li>Fargo, ND</li>
		<li>Laramie, WY</li>
	</ul>

What do you think?

Debbie

2 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Untitled</title>
	
<style type="text/css">

#current-dates li {
	overflow: hidden;
	font-size: smaller;
}

#current-dates span {
	float: left;
	padding-right: .5em;
	font-size: larger;
}

#current-dates br {
	display: none;
}

</style>
	
</head>
<body>

	<h3>Upcoming Events</h3>

	<h4>Current Dates:</h4>
	<ul id="current-dates">
		<li>
			<span>Pierre, SD</span><br>
			<abbr title="September">Sept</abbr> 24, 2011
		</li>
		<li>
			<span>Sioux Falls, SD</span><br>
			<abbr title="October">Oct</abbr> 1, 2011
		</li>
	</ul>

	<h4>Upcoming Locations:</h4>
	<ul>
		<li>Rochester, MN</li>
		<li>Madison, WI</li>
		<li>Fargo, ND</li>
		<li>Laramie, WY</li>
	</ul>

</body>
</html>
3

oddz,

Not sure what the code you posted is supposed to do.

(I was hoping more for a conversation than a code dump.)

When I run your code the Event and Date are on the same line and there is a weird dotted line underneath the month.

Let me be more specific in what I was hoping to get feedback on…

1.) “Events” is white bold font in a grey header area in my right column.

Should “Current Dates” and “Upcoming Locations” be larger or smaller font than “Events” in the grey header?

2.) The rest of my Home Page is sans-serif font.

Would Serif help break things up and maybe catch people’s attention?

3.) I think you want bullet points for the list of Upcoming Locations since it is maybe 6-8 cities.

But do I need bullet points for my “Current Dates”?

4.) Can the font for the Event Locations be the largest font in the right column?

Maybe I want to make that even bigger to really draw attention since it is the most important, I suppose?!

5.) If I get rid of the bullets for the “Current Dates”, should I align the left of the “Event City” and “Event Date” woth the bullets below in the “Upcoming Locations”?

6.) If an Event is on two separate dates, but in the same city, should I repeat the city under “Current Dates”?

Sioux Falls, SD
Oct 1, 2011


Sioux Falls, SD
Oct 8, 2011

7.) How should the font size of the Event Cities compare to the font of the Cities in Upcoming Locations?

Anyone care to chime in?

Paul? Stomme? DeathShadow? Rayzur? Others?

Thanks,

Debbie

4

Attached is my best attempt at the Ad/Callout on the Home Page…

I welcome comments on this, but would really appreciate answers to all of my questions above. (I know it’s a lot, but I’m trying to get better?!)

Thanks,

Debbie

5

Visually that looks ok to me but I would have a slight issue with the unordered list. I think that a dl list is more suitable as the dt is the heading and the dd are the list of options (rather than a heading and a list).

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.events dl { line-height:1.3 }
.events dt { font-weight:bold }
.events dd {
	margin:0 0 7px 3em;
	font-size:92%;
}
.events dd span {
	font-size:85%;
	line-height:1.1;
	display:block
}
</style>
</head>

<body>
<h3>Upcoming Events</h3>
<dl class="events">
		<dt>Current Dates:</dt>
		<dd>Pierre, SD <span>Sept 24, 2011</span></dd>
		<dd> Sioux Falls, SD <span>October 1, 2011</span></dd>
		<dt>Upcoming Locations:</dt>
		<dd>Rochester, MN</dd>
		<dd>Madison, WI</dd>
		<dd>Fargo, ND</dd>
		<dd>Laramie, WY</dd>
</dl>
</body>
</html>

When I run your code the Event and Date are on the same line and there is a weird dotted line underneath the month.

Oddz added “sept” in an abbr (abbreviation) tag which was a good touch to show that sept is an abbreviation. You can remove the dotted line with css in the normal way if needed.

Otherwise it looks pretty good to me but the specifics of how the “ad” looks would probably be a question for the elements review section I think as we are straying into that territory.

6

And it is okay to have two lines in a <dd> with your <span>?

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.events dl { line-height:1.3 }
.events dt { font-weight:bold }
.events dd {
	margin:0 0 7px 3em;
	font-size:92%;
}
.events dd span {
	font-size:85%;
	line-height:1.1;
	display:block
}
</style>
</head>

<body>
<h3>Upcoming Events</h3>
<dl class="events">
		<dt>Current Dates:</dt>
		<dd>Pierre, SD <span>Sept 24, 2011</span></dd>
		<dd> Sioux Falls, SD <span>October 1, 2011</span></dd>
		<dt>Upcoming Locations:</dt>
		<dd>Rochester, MN</dd>
		<dd>Madison, WI</dd>
		<dd>Fargo, ND</dd>
		<dd>Laramie, WY</dd>
</dl>
</body>
</html>

Is it fair to assume that your example didn’t look exactly like mine because you couldn’t see what styles I was using and not because your approach can’t be styled exactly like my example was, right?

Otherwise it looks pretty good to me but the specifics of how the “ad” looks would probably be a question for the elements review section I think as we are straying into that territory.

Glad you liked my attempt!

Debbie

7

Yes that’s fine.

Is it fair to assume that your example didn’t look exactly like mine because you couldn’t see what styles I was using and not because your approach can’t be styled exactly like my example was, right?

It can be styled to suit.

A dl list is useful when you have a term (dt) and then you can have single or multiple items that refer to that term. It just creates a relationship between the header (dt) and the data that follows.

A list with a header isn’t bad as you have done and a case can be made for doing it your way so it’s a choice you can make yourself as is usual with these things. You will always get different opinions.:slight_smile: