Almost have this code working--except images

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I have this code working on Yola except the images are not showing properly.
Here's a link to what it's supposed to look like: http://css-tricks.com/examples/InfoGrid/
Here's a link to what I have: http://wolfmediaplusremodel.yolasite....
As you can see the images are not showing properly. I'm probably overlooking something. Here's the Css:

/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/

* { margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #eee; }
body { font: 14px Georgia, serif; }
#page-wrap { width: 960px; padding: 0 0 0 15px; margin: 0 auto; overflow: hidden; height: 100%; }

.info-col { float: left; width: 132px; height: 100%; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; }

.image { height: 100px; text-indent: -9999px; display: block; border-right: 1px solid white; }

.batman { background: url(../resources/batman.jpg) center center no-repeat; }
.spiderman { background: url(../resources/spiderman.jpg) center center no-repeat; }
.aquaman { background: url(../resources/aquaman.jpg) center center no-repeat; }
.ironman { background: url(../resources/ironman.jpg) center center no-repeat; }
.superman { background: url(../resources/superman.jpg) center center no-repeat; }

dl { }
dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; }
dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px; color: white; border-right: 1px solid white; }

dt:nth-of-type(1) { background: #b44835; }
dd:nth-of-type(1) { background: #b44835; }

dt:nth-of-type(2) { background: #ff7d3e; }
dd:nth-of-type(2) { background: #ff7d3e; }

dt:nth-of-type(3) { background: #ffb03b; }
dd:nth-of-type(3) { background: #ffb03b; }

dt:nth-of-type(4) { background: #c2a25c; }
dd:nth-of-type(4) { background: #c2a25c; }

dt:nth-of-type(5) { background: #4c443c; }
dd:nth-of-type(5) { background: #4c443c; }

dt:nth-of-type(6) { background: #656b60; }
dd:nth-of-type(6) { background: #656b60; }

.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }

Any help is greatly appreciated!
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
  • not sure

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Diane

Ah.. I think I figured out why you're having this trouble! In your body code, you have these a class codes. They're not set up correctly.

This is what you have:
<!--<a class="superman" href="http://jprart.deviantart.com/art/Batm... Image</a>-->

It should say instead: a class=" image superman"

You need to add the word "image" to all your a class tags.

Hopefully this should solve the issue!

Please let me know if you have any further trouble with this.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
When I had "image superman" the images didn't show up at all. I'm befuddled.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hmm.. that is befuddling! I would go to the page source of the original code and copy that body section and paste into your Sitebuilder and see if that makes any difference for you?
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
That worked. Maybe I didn't copy and paste correctly before--not sure what the deal was. It's all working now: http://wolfmediaplusremodel.yolasite....
Now I just have to make all the modifications to it!! It's a very cool code though.
Thanks for your help!!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'm happy to hear that this worked for you!

It's definitely a cool code!