How did they do this???

[sladewilson]

What I basically want is a faded color background image in the title area and a colored border around the rest of the table.

I found some examples at WWE.COM
Check out the two tables on this page...

One is titled "BETH PHOENIX PHOTO GALLERY" the other is labeled "BETH PHOENIX VIDEO GALLERY"

Here is the link:

http://www.wwe.com/superstars/raw/bethphoenix/

I know how to edit my CSS file and I know how to add the .gif image to get the faded color in the title area... I just can't figure out how they got the border around the rest of the table without messing up the title row.

 

[Foamcow]

It's not a table

<div class="tout medium superstars med-std">
	
	<div class="title">Beth Phoenix photo gallery</div>
	
	<div class="tout-box">
	
		<div class="image">
			 
			 	

<a href="[URL unfurl="true"]http://www.wwe.com/superstars/raw/bethphoenix/photos/"><img[/URL] src="/content/media/touts/medium/29062/2788210" alt="" ></a>

 			
		</div> 

		<div class="text">

			Beth&nbsp;Phoenix&nbsp;made her debut on May 8, attacking Mickie James out of
nowhere. Check out her photo gallery to see the newest RAW Diva in action.
		</div>
		
		<div class="linkage">
			<a title=""
      href="[URL unfurl="true"]http://www.wwe.com/superstars/raw/bethphoenix/photos/">Beth[/URL]
      Phoenix&nbsp;photos</a>&nbsp;
		</div>
	</div>
	
</div>

The heading is in it's own <div> and the background is applied to that.
Here's the background image

http://www.wwe.com/images/common/backgrounds/tout_header_superstars.gif

Though strictly speaking they should have just used an heading tag.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[sladewilson]

But aren't they applying styles to the div tag? I mean... look at the code you pasted... there is no reference to the background image... the reference has to be coming from CSS... am I wrong?

 

[Foamcow]

Yes the reference to the background image is in the CSS.

They have assigned it to the elements with a class of "title".

In fact the whole site suffers from "class-itis". There are waaaay too many classes to be efficient!

Those particular boxes have no less than 4 classes applied to the box as a whole then elements within are assigned classes too.

Here's the line applying the background image

.tout.superstars .title { background: url(/images/common/backgrounds/tout_header_superstars.gif); }

It's on line 129 of

http://www.wwe.com/css/touts.css?7

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[sladewilson]

Ok cool... I understand what they are doing there.... but back to the original question..... how did they make the border on the table without messing up the header. Notice there is no red line at the top of the header of the table. Only the right, left and bottom have the red line border.... although it is seamless with the header row.

 

[ChrisHunt]

It's not a table

Welcome to the wonderful world of CSS. They've put a border around div.tout-box and made sure that the gradient fill in div.title (natch) ends up with the same red.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd