Creating news site heading like in Daylife.com Covers

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

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; }
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


Comments

9 responses to “Creating news site heading like in Daylife.com Covers”

  1. This is a really good way to get the same effect. Maybe with moo.fx or something like that you can archive exactly the same effect. But until then I find Flash easier.

    Hmm, maybe I’ll use this sometime.
    Cheers!

  2. @Alexander: Yes, maybe its easier to get the same effect with Flash, but if you use moo.fx with these kind of code, it’s faster. I am pretty sure that with some kind of “effects library” like moo.fx, you can achieve the exactly same effect. You should try it :).

  3. I had a go at emulating the effect with jQuery but didn’t get very far – it’s still in my ‘to do’ experiments list, so I’ll let you know if I ever complete it.

  4. @Luc: I didn’t tried neither jQuery neither some other libraries. I believe you could achieve the same “opening” effect with them so if you do, let me know :)

  5. It’s Beautiful, thanks!!!

  6. Easier with Flash? I don`t think so. Using XHTML and CSS you can control your website even with notepad. If you want change information, you have to edit flash file, and once again publish it. There is other way – flash with external text or XML file, but with CSS&XHTML – faster and easier.

  7. Hortence Avatar
    Hortence

    Exackly. JS/CSS/XHTML is faster, easier to update, more standards-compliant and … cheaper! Why shell out hundreds for something that can be recreated with a few libraries and a good ol copy of Notepad!

  8. Hortence, my point exactly. I am a big fan of creating sites that are fast, and Flash is still a bit slow (depending on implementation), but in Daylife I could understand why they used Flash.
    The thing is that they could use XHTML/CSS/JS to re-create the same effect.

  9. Enjoyed that a lot. I have done something similar to this before but it required more work, so this is much simpler, thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *