SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add image to div in top right corner

    On this page of my site: http://billboardfamily.com/2011-03/ there is a red square int he key above the calendar that is supposed to be used on months that are "Sold Out". January and February are now sold out, and I have been trying to get this red square in the top right corner of the month div, but I can not get it to appear there without causing some alignment issues, etc. Can someone help me on this real quick? Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's not clear what you are asking here. The month div? What's that? You've got to be really specific.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about that.....

    within

    <div class="calendar-nav">

    there is an unordered list, which shows the name of each month. I want to put the red square ( http://billboardfamily.com/wp-conten.../sold_icon.png ) at the top right of each ul month name when the month is sold out.

    <ul id="calendar-nav-button">

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You could try

    HTML
    Code:
    <a class="soldout" title="January, 2011" href="/2011-01">JAN</a>
    CSS
    Code:
    .soldout {background: url(http://billboardfamily.com/wp-content/themes/mensa/assets/images/sold_icon.png) no-repeat 0 0;}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is what I tried...


    HTML

    <li class="current-month soldout"><a href="/2011-01" title="January, 2011">JAN</a></li>
    <li class="soldout"><a href="/2011-02" title="February, 2011">FEB</a></li>

    AND I used your CSS


    It did not work in either case.

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,059
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's because you used ralph's class on the li instead of on the anchor

    Code CSS:
     
    #calendar-nav-button li a.sold {
        background: url(yourImage);
    }

    Code HTML4Strict:
    <li><a href="/2011-02" title="February, 2011" class="sold">FEB</a></li>

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by martinfamily2005 View Post
    <li class="current-month soldout"><a href="/2011-01" title="January, 2011">JAN</a></li>
    <li class="soldout"><a href="/2011-02" title="February, 2011">FEB</a></li>

    AND I used your CSS
    Yes, as donboe points out, you can't just move the class to a different element but leave the CSS the same and expect it to work. What I gave does work because I tested it. If you want the HTML you posted, change the CSS to:

    Code:
    .soldout a {background: url(http://billboardfamily.com/wp-content/themes/mensa/assets/images/sold_icon.png) no-repeat 0 0;}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, as donboe points out, you can't just move the class to a different element but leave the CSS the same and expect it to work. What I gave does work because I tested it. If you want the HTML you posted, change the CSS to:

    Code:
    .soldout a {background: url(http://billboardfamily.com/wp-content/themes/mensa/assets/images/sold_icon.png) no-repeat 0 0;}
    I added that, but it breaks the functionality (mouseover, etc) on the buttons that have the abbreviations of the month names. Also, I need the red square on the right top of the button.

    To see how the buttons are supposed to work, hover over some of them:

    http://billboardfamily.com/2011-03/ March, see how the MAR button looks and the rest of the buttons work?

    Then go to the page I changed the code on and see what is does with the new code:

    http://billboardfamily.com/2011-01/ This is the page for January

    Please advise. Thanks!

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    To move the red square right, just change the css to

    Code:
    .soldout a {background: #999 url(http://billboardfamily.com/wp-content/themes/mensa/assets/images/sold_icon.png) no-repeat 100% 0;}
    So where do you want the red square to sit when the tab is blue?

    I added in the gray bg color too so that it wouldn't be overridden.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    To move the red square right, just change the css to

    Code:
    .soldout a {background: #999 url(http://billboardfamily.com/wp-content/themes/mensa/assets/images/sold_icon.png) no-repeat 100% 0;}
    So where do you want the red square to sit when the tab is blue?

    I added in the gray bg color too so that it wouldn't be overridden.
    Excellent. That seems to be working well. I want the red square to be at the top right all the time. It moves, and looks perfect when you hover over FEB on this page: http://billboardfamily.com/2011-01/

    It just needs to be on the right side, instead of the left. Thanks!

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    If you want the red square to remain where it is when the blue tab is active, you could add these lines:

    Code:
    #calendar-nav-button li.current-month a {
                margin-top: -10px;
                padding-top: 20px;
    background: #00afef url(http://billboardfamily.com/wp-content/themes/mensa/assets/images/sold_icon.png) no-repeat 100% 10px;
                color: #000000;
            }
    
    #calendar-nav-button .soldout a:hover {
                
    background: #00afef url(http://billboardfamily.com/wp-content/themes/mensa/assets/images/sold_icon.png) no-repeat 100% 10px;
            }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by martinfamily2005 View Post
    It just needs to be on the right side, instead of the left. Thanks!
    You didn't look at the whole code above. Here is is without the code tags. See in red:

    .soldout a {background: #999 url(http://billboardfamily.com/wp-conten.../sold_icon.png) no-repeat 100% 0;}
    Last edited by ralph.m; Nov 15, 2010 at 04:09.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. It works perfectly!

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Cool, glad it's working now.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •