PDA

View Full Version : Please, how is this done - Website text & background..



John W
19-07-2008, 08:14 PM
Hi there

Im at a loss as to how I can recreate the background, atop which I can add text.

Case in point, when you go to this site http://www.theage.com.au/ and scroll down to the Sport section, how do they place text " Real Footy Rugby Heaven Cricket" atop what appears to be a section of Grey gradient background.

Ive been struggling to do this for months and, short of making an background Image and using that for the backdrop - which would be an enormous file size, Im at a loss on how its done.

If they have used Layers, how do they anchor the Layer above so they tie together and do not move independantly in different screen resolutions and browsers.


Thanks

John in Mosgiel.

somebody
19-07-2008, 08:25 PM
It looks like they are just using a small background image for it:


.sstrap .c3 {ageHome.css (line 213)
background:#FFFFFF url(img/bgSstrapC3.gif) no-repeat scroll left bottom;
float:left;
padding:8px 0pt;
width:620px;

Here is the image: http://resources.theage.com.au/theage/2007-11/css/img/bgSstrapC3.gif

John W
19-07-2008, 09:19 PM
Thanks Somebody.

But Im still not much wiser. Is that in line 213 of the page code.

Im at a loss really on how you can add a gif image, then place text or another image over it, without using Tables and a Frame above the table cell, it all starts getting rather messy and I dont think its done like that.

????

John.

somebody
19-07-2008, 10:12 PM
I'm not an expert on this sort of thing, so hopefully someone like Bletch will reply to this thread.

They've used a DIV tag to enclose the section, and applied a style to it using CSS stylesheets. You will notice at the top of the HTML code, there's a line which says "<link media="screen" href="http://resources.theage.com.au/theage/2007-11/css/cAgeHome.css" type="text/css" rel="stylesheet">" The relevant HTML looks like this:


<div class="sstrap cfix">
... (other lines of HTML code here}
<div class="s1">
<h5><a href="http://www.realfooty.com.au/" title="Realfooty" class="hRealfooty">Realfooty</a></h5>
<h3><a href="http://www.realfooty.com.au/news/news/hawks-look-good-and-improving/2008/07/18/1216163159087.html">Hawks look good and improving</a></h3>
<p>
<cite>MARTIN FLANAGAN&nbsp;|</cite>
Quick and direct, Hawthorn play like the old John Kennedy sides.
</p><div class="clear"></div>

</div>
<div class="s2">
<h5><a href="http://www.rugbyheaven.com.au/" title="Rugbyheaven" class="hRugbyheaven">Rugbyheaven</a></h5>
<h3><a href="http://www.rugbyheaven.com.au/news/news/its-war/2008/07/18/1216163156412.html">'It's war'</a></h3>
<p>
<cite>GREG GROWDEN&nbsp;|</cite>
Boks attempt to provoke Wallabies while Mortlock demands discipline.
</p><div class="clear"></div>

</div>
<div class="s3">
<h5><a href="http://www.theage.com.au/sport/cricket" title="Cricket" class="hCricket">Cricket</a></h5>
<h3><a href="http://www.theage.com.au/news/cricket/vaughan-catch-controversy/2008/07/19/1216163204686.html">Vaughan 'catch' controversy</a></h3>
<p>
<cite>LEEDS <strong>10:18am</strong>&nbsp;|</cite>
South Africa may have ended the day in a worse position but for a controversial incident involving Andrew Flintoff.
</p><div class="clear"></div>

</div>
</div>


And the CSS stylesheet definition looks like this:


.sstrap .c3 {
background:#FFFFFF url(img/bgSstrapC3.gif) no-repeat scroll left bottom;
float:left;
padding:8px 0pt;
width:620px;
}

mzee
20-07-2008, 07:42 PM
Seems to be done with Java.
class="c3 cfix"
class="s1"
Refers to the tables.

You can make a graduated gif or jpg and use it as the background in the table/cell.
I use Paint Shop Pro for graphics, but just about any modern program will do it.

sal
20-07-2008, 08:05 PM
Ah OK, I see what you're talking about now. This is a combination of techniques, both image replacement and image sprites. I'm not sure of your level of knowledge in this area but check out the following two links for some comprehensive background on both techniques.


http://www.alistapart.com/articles/sprites
http://mezzoblue.com/tests/revised-image-replacement/