Where are these images?

Head out to http://greyghost5k.com

Towards the bottom, you've got a series of images in the "2014 Sponsors" section. They are documented like this:

<div class="sponsors_row_lg_container">
<div class="sponsors_row_lg">
<h3><a href="http://greyghost5k.com/2013-sponsors/">2014 SPONSORS</a></h3>
<ul>
	<li><a href="http://www.mauryregional.com" target="_blank"><img class="sponsor_lg maury" alt="Maury Regional" src="http://greyghost5k.com/wp-content/uploads/2013/07/blank.gif" /></a></li>
	<li><a href="http://www.amerisbank.com" target="_blank"><img class="sponsor_lg ameris" alt="Ameris Bank" src="http://greyghost5k.com/wp-content/uploads/2013/07/blank.gif" /></a></li>
	<li><a href="http://mc.vanderbilt.edu" target="_blank"><img class="sponsor_lg vanderbilt" alt="Vanderbilt Children's Hospital" src="http://greyghost5k.com/wp-content/uploads/2013/07/blank.gif" /></a></li>
	<li><a href="http://www.publix.com" target="_blank"><img class="sponsor_lg publix" alt="Publix" src="http://greyghost5k.com/wp-content/uploads/2013/07/blank.gif" /></a></li>
	<li><a href="http://www.williamsonmedicalcenter.org" target="_blank"><img class="sponsor_lg williamson" alt="Williamson Medical Center" src="http://greyghost5k.com/wp-content/uploads/2013/07/blank.gif" /></a></li>
	<li><a href="http://www.moes.com" target="_blank"><img class="sponsor_lg moes" alt="Moe's Southwest Grill" src="http://greyghost5k.com/wp-content/uploads/2013/07/blank.gif" /></a></li>
</ul>
</div>
</div>

Open in new window


When you go to the custom.css page, you'll see all of the sponsor info documented like so:

/*Home Page - Main Sponsors Large*/
.sponsors_row_lg h3 {
	color: #000;
}
.sponsors_row_lg ol ul {
	list-style: none;
}
.sponsors_row_lg_container {
	text-align:center;/*background-color:#eee;*/
}
.sponsors_row_lg {
	padding:1.25em 0 .625em 0;
	margin:auto;
}
.sponsors_row_lg ul {
	margin:.625em auto;
}
.sponsors_row_lg li {
	vertical-align:middle;
	display: inline;
	margin: 0.313em;
}
.sponsors_row_lg a {
	display:inline;
	padding:.625em 0;
}
.sponsors_row_lg a:hover {
	background-color:#333;
	background-color: transparent;
}
.sponsor_lg {
	background:url('http://greyghost5k.com/wp-content/uploads/2013/07/sponsors-lg.jpg') top left no-repeat;
}

/* 

Open in new window


...and

/*Sponsors*/
/*Main Sponsors Large - Home Page*/
.maury {
	width: 293px;
	height: 62px;
}
.vanderbilt {
	background-position: -302px 0;
	width: 200px;
	height: 98px;
}
.ameris {
	background-position: -616px 0;
	width: 165px;
	height: 80px;
}
.williamson {
	background-position: -796px 0;
	width: 232px;
	height: 74px;
}
.moes {
	background-position: -1211px 0;
	width: 112px;
	height: 99px;
}
.publix {
	background-position: -1042px 0;
	width: 175px;
	height: 56px;
}

Open in new window


Basically lines 144 - 283.

I get what they're doing and it's very clever. But where is the individual graphic for, say "Publix?" I see the <li> code, I understand the gif graphic, but where's the actual store logo? I've searched through every css file I can find and while there are other larger graphics on the site that can be edited etc., I can't find the main page graphics.

Any clue?
brucegustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
The image loaded here is one image for all the logos
.sponsor_lg {
	background:url('http://greyghost5k.com/wp-content/uploads/2013/07/sponsors-lg.jpg') top left no-repeat;
}

Open in new window

This and the rest of that CSS block just sets the position of the background image
e.g. here it is saying move the background image left 302px
.vanderbilt {
	background-position: -302px 0;
	width: 200px;
	height: 98px;
}

Open in new window

0
brucegustPHP DeveloperAuthor Commented:
Gary!

That's good news because I was going nuts looking for a series of individual graphics.

So the CSS is basically acting like a layer mask and maneuvering the individual graphics around, even though they're technically one large graphic, yes?

That's freaky cool!

I need to add a graphic. Is there a tutorial you would recommend that shows how to do this?

BTW: I've got another question pertaining to the same project at http://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_28493934.html#a40250984 and would love your spin on that one.

Thanks!
0
GaryCommented:
http://css-tricks.com/css-sprites/
http://www.smashingmagazine.com/2012/04/11/css-sprites-revisited/

Just take the original image, increase the canvas by the size of the new logo, move the current images to the far left of the canvas and add the new image.
Then copy the CSS above changing the background position.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

GaryCommented:
What exactly is it that needs fixing in the other Q
0
brucegustPHP DeveloperAuthor Commented:
Awesome!

As far as the other Q, I need to get rid of the border in the grey section immediately below the scrolling photos. It's the part that mentions the Susan G. Komen promotion.

What I'm trying to do is exasperatingly simple, and yet I can't get it done, despite any one of a number of attempts to hardwire the CSS.

I want to use a table so I can vertically align the text to the right of the graphic. The grey area shouldn't be any higher than 240 px and there shouldn't be any excessive padding over the top or the bottom.

This is the html I'm using:

<table id="front_table" style="border-colllapse: collapse; background-color: #57626f; height: 240px;">
<tbody style="background-color: #57626f;">
<tr>
<td style="vertical-align: vertical; width: 240px; height: 174px;"><img alt="komen" src="http://greyghost5k.com/wp-content/uploads/2014/08/komen-300x217.jpg" width="240" height="174" /></td>
<td style="vertical-align: vertical; height: 174px;">
<h3 style="color: #ffffff;">This year we will be offering a commemorative “pink” Grey Ghost shirt for an extra $5. The Grey Ghost will donate that $5 to Race for a Cure. Simply indicate your desire to make a donation when you register.</h3>
</td>
</tr>
</tbody>
</table>

Open in new window


...and here's the CSS code that I added:

#front_table tr {
background: none;
}

...and I'm still hunting for a resolution. I've spent more than a couple of hours trying divs and all kinds of stuff and I can't get anything to work.

Thanks for your help!
0
GaryCommented:
See my comment in the Q
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.