SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A href hover CSS

    Hey,

    Can anyone help me with this page: http://www.loumolloy.com/testing.php

    On page load you will see a rather off putting lightbox effect box. You can see the tabs "Step1, Step-2, Step-3"..

    Now when i hover over them they should be blue, not straight away.. Can anyone help?

    How can i change the styles so that when i first see the page the tabs are in white and when i hover over they are blue?

    Thanks again
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    SitePoint Addict dnordstrom's Avatar
    Join Date
    Jul 2006
    Location
    Amsterdam
    Posts
    337
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    For me running Chrome dev latest on Mac, they are white at first at blue on hover.

    Don't really see what the problem is, can you explain further? Have you tried different browsers to isolate the issue?
    Daniel Nordstrom. of. Nintera(ctive)
    -- Featured post: Part 2. Writing NI.JS JavaScript
    ----- Follow me on Twitter. Got project? Contact me.
    -------- SitePoint: Community Guidelines Be A Great Member

  3. #3
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    I have attached what i see, check the image...

    I am using firefox and i can see the blue text sits behind the white text when it shouldn't be like that. The blue text should only appear on hover..

    Can you see what i mean? See attached image.

    Thanks again
    Attached Images Attached Images
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  4. #4
    SitePoint Addict dnordstrom's Avatar
    Join Date
    Jul 2006
    Location
    Amsterdam
    Posts
    337
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see the problem now, thanks for explaining further. Will try and help.
    Daniel Nordstrom. of. Nintera(ctive)
    -- Featured post: Part 2. Writing NI.JS JavaScript
    ----- Follow me on Twitter. Got project? Contact me.
    -------- SitePoint: Community Guidelines Be A Great Member

  5. #5
    SitePoint Addict dnordstrom's Avatar
    Join Date
    Jul 2006
    Location
    Amsterdam
    Posts
    337
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    I guess it comes pretty natural because the li tag has the blue text as background by default in your CSS, and the hover background image has transparency so that the blue shines through.

    Code:
    ul.tabs li.tab-1 {
      background:url("images/step-1-on.png") no-repeat scroll transparent;
      width:78px;
    }
    Restructure that and the problem should be gone.

    Another simpler solution is to just add a background color to your CSS for the li anchor/link default styling. For example:

    Code:
    ul.tabs li.tab-1 a {
      background:url("images/step-1.png") no-repeat scroll #151515;
      width:78px;
    }
    Hope it solves the issue, only tried messing around in Firebug.
    Daniel Nordstrom. of. Nintera(ctive)
    -- Featured post: Part 2. Writing NI.JS JavaScript
    ----- Follow me on Twitter. Got project? Contact me.
    -------- SitePoint: Community Guidelines Be A Great Member

  6. #6
    SitePoint Addict dnordstrom's Avatar
    Join Date
    Jul 2006
    Location
    Amsterdam
    Posts
    337
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    Screenshot of the simple solution of adding a background color to the anchor:

    http://skitch.com/nintera/n6wgc/fullscreen
    Daniel Nordstrom. of. Nintera(ctive)
    -- Featured post: Part 2. Writing NI.JS JavaScript
    ----- Follow me on Twitter. Got project? Contact me.
    -------- SitePoint: Community Guidelines Be A Great Member

  7. #7
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks for taking the time out to help me :-)

    If you take a look at the page now: http://www.loumolloy.com/testing.php

    You can see that it does work, however the hover stated is not right, i will attach another image of what it should look like, the hover image is bigger in height.

    See image attached. Can i do this?

    Thanks again
    Attached Images Attached Images
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  8. #8
    SitePoint Addict dnordstrom's Avatar
    Join Date
    Jul 2006
    Location
    Amsterdam
    Posts
    337
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    Great fix, works perfectly on both Chrome and Firefox on my Mac at least.

    Can't see the attachment because it's pending approval so if you could upload it somewhere and link to it, I may be able to help. Maybe, because I don't know if I have time today.

    I'm off for an hour or so now, just so you know, so see you later!

    Upload options

    FTP of course
    http://imageshack.us/
    http://tinypic.com/
    I dearly recommend Skitch for screenshots, it's truly amazing if you have a Mac.

    And if you've got Twitter there's plenty of others, such as yFrog, built into most clients or you can use the website, just Google or check your client. If you don't have Twitter, get it!

    Anyway, you could also email me the attachment, my email is on my website in the signature.
    Daniel Nordstrom. of. Nintera(ctive)
    -- Featured post: Part 2. Writing NI.JS JavaScript
    ----- Follow me on Twitter. Got project? Contact me.
    -------- SitePoint: Community Guidelines Be A Great Member

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi Billy, I'm jumping in this late, however, post the image as a direct link here, that way we don't have to wiat for it to be approved.

    I hope that what you want will be clear once the image is sshown
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ryan,

    Hopefully you can help.

    I have uploaded the image onto the server, here it is:http://www.loumolloy.com/test.jpg

    You will see how it needs to be, at the current location where i am creating it it doesnt quite look right, see here: http://www.loumolloy.com/testing.php

    Can you help mate?

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, on the anchors hover you set the background to transparent, aka parent backgrounds will now show.

    The nearest parent has a background (the <li>). The <li>'s image is sliced in a way that the text appears further down. THe image itself needs to be corrected.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    The images look slightly better now, just one thing, how can i get the tabs to site nicely on top of the first Question??

    Like the test image i showed..

    Any ideas?

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, not quite sure if I understand, but if you want the "1) Are you" and then the radio button on the same line, you'd haveto change the HTML (since you have them on different rows) to have them be in seperate <td>'s within the same <tr>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No sorry i meant where it says "Step 1, Step 2, Step 3"...

    I want these to be just above the first question. If you look at my reply in #7 you can see the image shows how it's supposed to be..

    Any ideas?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, have you managed to fix it? It's sitting nicely along that line
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #16
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes i fixed this :-) thanks Ryan
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy


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
  •