Targeting tags

HTML & CSS
1

I want to add images to this menu, all the images are different for each button. So I gave each <li> a class, I am trying to add images to them. but can’t.
How do I target the “y-loss”, “y-programs” etc…

I have tried

menu li .homepage {}
li a #current
all kinds of stuff but no images show up. Google chrome says it’s li .homepage, but no image shows up.
menu

 <div class="menu">


<ul>
          <li class="homepage"> <a href="#" id="current">Home</a></li>
          <li class="yjoes-way"><a href="#">Why Joe's Way</a></li>  
              
                         <ul id="y-programs">
                               <li class="y-loss"><a href="#">yloss</a></li>
                            <li class="y-add"><a href="#">yadd</a></li>
                            <li class="y-supplement"><a href="#">ysupplement</a></li>
                            <li class="y-all"><a href="#">yall</a></li>
                      </ul>    
                        
                        
          <li><a href="#">About Joe</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact Joe</a></li>
                          </ul> 
</div>
2

Please post all of the CSS and HTML that is relevant to this. Or preferably a link.

3

ok, ralph, I fixed that problem, now I can’t get my menu to move down behind those buttons and get that gap out of there. http://www.organichs.com/renee/webdesign/ when I move the menu down it moves the whole header down.

4

Apologies, but I’m not sure what you are trying to do. Could you post a screen shot of how you want it to look?

5

no apologies needed. I fixed a few things. I have a green menu that I cannot get to line up behind the buttons. here’s a screenshot - http://www.organichs.com/renee/webdesign/YNOT!.jpg

Thank you.

6

I think you probably need to rework this entirely, but a short-term fix would be

.menu {
  border: 0 none;
  [COLOR="#FF0000"]clear: both;
[/COLOR]  color: #9FAB00;
  font-family: verdana,geneva,arial,helvetica,sans-serif;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
7

what boths am I clearing? it worked !! Thank you.

8

Glad that helped. :slight_smile:

When you float an element, other unfloated elements will pretty much ignore it. Adding clear: both to the .menu tells it to move past (or start after) the floated #logo div. And thus its background color appears.

9

Thank you. your pageaffairs site is amazing!