[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 139
  • Last Modified:

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?
0
brucegust
Asked:
brucegust
  • 4
  • 2
1 Solution
 
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
 
brucegustAuthor 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GaryCommented:
What exactly is it that needs fixing in the other Q
0
 
brucegustAuthor 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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now