Creating news site heading like in Daylife.com Covers

Creating news site heading like in Daylife.com Covers

Tuesday, January 16, 2007 @ 15:48
Skip to: Comments | Comment form

A few days ago I stumbled upon an interesting news site called Daylife. Its front page (Covers) is something like an internet/TV hybrid, with its flash intro page that displays most recent news. To say the least, I am a fan of Flash, as of JavaScript and other technologies, but I think that the same (or almost the same) “vow” effect could be done with XHTML/CSS combination as well.

This front page is loading very slowly, and I think it would be better that they considered some XHTML/CSS/AJAX stuff, that would be faster.

In this article I will show you how to create this kind of front page using only XHTML/CSS. As I am not the JavaScript/AJAX expert (yet:), if anyone else would like to expand this article furthermore (to create that expanding effect), please do so.

Creating news site heading like in Daylife.com Covers

The code


<div id="container">

	<div id="image-container">

		<div id="news-image"><img src="great-sun-burst.jpg" alt="Great sun burst" /></div>

		<a href="#" title="Great sun burst!" id="link">
			<span id="heading">Great sun burst!</span>
			<span id="date">January 13, 2007</span>
			<span id="author">Photo by <strong>thesaint</strong> from <strong>SXC</strong></span>
			<span id="show-story">Click to see this story</span>
		</a>		

	</div>

</div>

Okay, let’s start. First, we will create a #image-container DIV, with exact size of the image that will serve as a container for the image and text. Because we created this container, we can easily manipulate and move the container anywhere on the page. For the purpose of this article, the container will be positioned 50px from top and left margins.

Now it’s time to create the image and the text. Because this kind of heading will be commonly used on the large news sites and with Content Management Systems (CMS) we would have the exact values already. We created a container that is 750px long and 500px wide (the size of our image). We wanted heading, date and author to be placed on the center of the image. No problem.

And now for a little explaining. We created a DIV for the image called #news-image. This is because of IE. If you remove it, everything looks fine in Firefox, but IE cripples the page. It looks awful (don’t bother to look :). Important and tricky part comes here. To create a validated page, we used spans inside a link, and each SPAN has its own ID, to which we will apply some styling, later in the process. The text will be displayed inside a link, so the whole area is clickable (like in navigation).

Important note: If you have more than one heading (with picture) like this one, you should use classes instead of IDs, to create a validated page.

CSS


#image-container {
	position:relative;
	width:750px;
	height:500px;
	margin:50px 0 0 50px;
}

First, we will style the image container. This is not much of a styling, but it is important that we define two things. The container must be positioned relatively, and width exact width and height. Let’s style the links now.


a { 
	display:block; 
	position:absolute;
	top:50%;
	margin-top:-58px;
	padding:20px;
	width:710px;
	background:#000;
	color:#fff; 
	text-decoration:none;
	text-align:center;
	opacity:.5;
	filter:Alpha(Opacity=50);
}
a:hover { 
	opacity:.75; 
	filter:Alpha(Opacity=75);
}

The link will be displayed as block, and positioned absolutely within the container. While we positioned the container relatively, we can now position the link area absolutely with top:50%; and margin-top:-63px;. Margin-top value is here because we wanted our link area positioned somewhere in the middle of the image. With top:50%; we said to the browser to position the top margin of the link area exactly 50% from the top, and with negative top margin of the link itself, we positioned the whole area approximately to the horizontal center of the image.

How we come up with 63px, you may ask? This is the sum of the sizes of all the text in the link area. The next few rules are common, and the last two rules are here to create an “opacity look” of the link, that will change when we come over with the mouse pointer. We used opacity:.5; for Firefox, and the filter:Alpha(Opacity=50); for Internet explorer users.


a span { 
	display:block;
	margin:0;
}
#heading {
	font-size:4em;
}
#date {
	font-size:1.5em;
}
#author, #show-story {
	font-size:.8em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	padding-top:5px;
}

With the next set of rules, we stylized the text. We used a span { display:block; margin:0; } to display all spans as blocks, and to remove the margin. The next few rules for #heading, #date, #author, #show-story are here to stylize the text.

The last thing we want to do is to display the author of the image (or article) and the text “Click to see this story” when the mouse goes over a link. To do that, we used this CSS.


a span#show-story { display:none; }
a:hover span#show-story { display:block; }

http://www.emanuelblagonic.com/2007/01/16/creating-news-site-heading-like-in-daylifecom-covers/

a:hover span#author { display:none; }

With this set of rules, #show-story SPAN will not be visible when the mouse is not over the link, and the other SPAN #author will not be visible when the mouse is over the link. Easy and simple.

Hope you enjoyed reading this article.

The example

Creating news site heading like in Daylife.com “Covers” – Take a look at the example

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: