SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Need help to create a link

    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!

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    e.g.

    Code:
    <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.)

  4. #4
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    HTML Code:
    <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;
    }

  5. #5
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I think CSS should read:

    .websitelinks {
    color: #F60;
    }

  6. #6
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The js file I forgot. Thanks for telling me. See if I can get it. Thanks.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    .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.

  8. #8
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    .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:

    Code:
    .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 ).

  10. #10
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Silverado View Post
    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 .

  12. #12
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  13. #13
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •