Need help to create a link

[Silverado]

I would like to ask about a link on this page: http://www.ecsundance.com/portfolio.html
Click on one of the "web design" links, like Nanergy, Inc., then you will be presented with a "lightbox" where you will see screenshots and a description. In the description, it says ...www.nanergyinc.com.... I would like to make that a link so that they can click on it and it will take the visitor to the nanergyinc web site.I tried several ways, none of which worked. I am stumped. Could you help? Thanks in advance!

[quigley]

When I see something I like I usually look at the source code and try to find info in there - just so happens that this one is by Stu Nichols - Google:
CSSplay | CSS playBOX v2 - The Ultimate CSS Lightbox

[Paul O'B]

Hi,

I just tested in Firefox and adding a link works as expected.

e.g.

<div class="lightbox" id="p011">
            <div class="light"></div>
            <div class="box"> <img src="http://www.ecsundance.com/portfoliopix/nanergyinc.png" alt="">
                <p>Nanergy, Inc. - <a href="http://www.nanergyinc.com/">www.nanergyinc.com</a> - Creative/Art Direction, Web Design - XHTML/CSS/Java/Flash<br>
                Copyright © 2011 - EC Sundance</p>
                <div class="functions"> <a class="playbox previous" title="Previous" href="#p010">«</a> <a class="closebox" title="Close" href="#close">x</a> <a class="playbox next" title="Next" href="#p012">»</a> </div>
            </div>
        </div>

You'll have to add a class and style it as its black at the moment.

(That lightbox method doesn't work in Ie8 and under though as it uses :target and will need some js help.)

[Silverado]

Hi thanks, I am a little relieved, as I was doing the same thing with the same results. I got the link, it worked but could not see it (that is the textlink). I tried to put in a class but that did not work. I thought I did something wrong with the link. So, here is what I did, please tell me where I am going wrong. I think the problem is the class string in the css; It is not right.

HTML:

<div class="lightbox" id="p011">
           <div class="light"></div>
           <div class="box"> <img src="http://www.ecsundance.com/portfoliopix/nanergyinc.png" alt="">
               <p>Nanergy, Inc. - <a class="[B]websitelinks[/B]" href="http://www.nanergyinc.com/" target="_blank">www.nanergyinc.com</a> - Creative/Art Direction, Web Design - XHTML/CSS/Java/Flash<br>Copyright © 2011 - EC Sundance</p>
               <div class="functions">
               <a class="playbox previous" title="Previous" href="#p010">«</a>
               <a class="closebox" title="Close" href="#close">x</a>
               <a class="playbox next" title="Next" href="#p012">»</a> </div>
           </div>
       </div>
</div>

And the class in CSS is:

.websitelinks {
font-color: #F60;
}

[Silverado]

Sorry, I think CSS should read:

.websitelinks {
color: #F60;
}

[Silverado]

The js file I forgot. Thanks for telling me. See if I can get it. Thanks.

[Paul O'B]

Hi,

There may be a specificity issue if the link color isn't changing.

Try forcing the issue to see if that's the case.

.websitelinks {
	color: #F60!important;
}

Use !important with care but its good as a debugging tool to see whether you are actually targeting something and then you can work out the specificity afterwards.

[Silverado]

Thanks for the help! This worked :

.websitelinks {
color: #F60 !important;
font-size: 14px !important;
font-family:"Book Antiqua", Palatino, "Times New Roman", Times, serif !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
However, I had to use the !important statement on all lines. I guess the cascade is working somewhere. But what I do not understand is if you have a specific class, why do you have something else apply to that?

Would you see from the code, where the conflict is? And what to do with it not to have to use the !important statement? Because I sure do not know. Thanks for your help!

[Paul O'B]

Hi,

The anchors in the lightbox are being targeted by this more specific rule.

.lightbox .box a {    color: #000000;
    font-family: "Book Antiqua",Palatino,"Times New Roman",Times,serif;
    font-size: 25px;
    font-weight: bold;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;


}

So to ensure your rules win out without using !important you would do this:

.lightbox .box a.websitelinks {

rules here etc .......

}

You can read up here on specificity here as it is an important concept (and took me a while to write ).

[Silverado]

I am happy, thanks that did the trick. Though, you do need a dot in front of .lightbox - right? It worked so I assume you do need it.

I would have another question on this page. Should I do a new post or we continue here?

Thanks for your help! I am looking for the JS code for this page. Indeed it is missing.

[Paul O'B]

I am happy, thanks that did the trick. Though, you do need a dot in front of .lightbox - right? It worked so I assume you do need it.

yes - sorry it got lost in the copy and paste.

I would have another question on this page. Should I do a new post or we
continue here?

If its related to the above you can post here but I am away most of Thursday so you may have to wait for an answer .

[Silverado]

I will just reply to you and we'll see. 2 questions on this same page:

1. JS - What part of this needs to be in the HTML? The script tag is active but I think I need the bolded active too. That should tell if IE 8 is running go to the js. I am thinking. Am I right on that? I will put it up that way, could you tell me if it is working or what to change.

<script type="text/javascript" src="playbox/playbox2.js"></script>
<!-- This is required for IE -->
<!--[if lte IE 8]>
<script type="text/javascript" src="css/playbox2.js"></script>
<![endif]-->

2. If I add another quote under the horse, the second quote goes on the bottom and there is this huge space. Any idea why? Again, I think the cascade, as it was working fine on the index page, without the lightbox code. So something in the lightbox code messes up the quote. I cannot figure out what. Can you help? Thanks!

[Silverado]

Ups, I put in the code but it messed up my page. Maybe I need to wait for you. So that is not a good way, I can tell that.

[Silverado]

I am going to post this new, as I am having trouble with this page. Take a look on the main post if you are back or just go to the web page and see what is happening. Enjoy your day!