Add image to div in top right corner

HTML & CSS
1

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

It’s not clear what you are asking here. The month div? What’s that? You’ve got to be really specific.

3

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-content/themes/mensa/assets/images/sold_icon.png ) at the top right of each ul month name when the month is sold out.

<ul id=“calendar-nav-button”>

4

You could try

HTML

<a [COLOR="Red"]class="soldout" [/COLOR]title="January, 2011" href="/2011-01">JAN</a>

CSS

.soldout {background: url(http://billboardfamily.com/wp-content/themes/mensa/assets/images/sold_icon.png) no-repeat 0 0;}
5

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

That’s because you used ralph’s class on the li instead of on the anchor



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




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

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:

.soldout [COLOR="Red"]a[/COLOR] {background: url(http://billboardfamily.com/wp-content/themes/mensa/assets/images/sold_icon.png) no-repeat 0 0;}
8

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

To move the red square right, just change the css to

.soldout a {background: [COLOR="Red"]#999[/COLOR] url(http://billboardfamily.com/wp-content/themes/mensa/assets/images/sold_icon.png) no-repeat [COLOR="Red"]100%[/COLOR] 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.

10

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

If you want the red square to remain where it is when the blue tab is active, you could add these lines:

#calendar-nav-button li.current-month a {
            margin-top: -10px;
            padding-top: 20px;
[COLOR="Red"]background: #00afef url(http://billboardfamily.com/wp-content/themes/mensa/assets/images/sold_icon.png) no-repeat 100% 10px;[/COLOR]
            color: #000000;
        }

[COLOR="Red"]#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;
        }[/COLOR]
12

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-content/themes/mensa/assets/images/sold_icon.png) no-repeat 100% 0;}

13

Thanks. It works perfectly!

14

Cool, glad it’s working now. :slight_smile: