Displaying an image on hover ... can do it, but it's not correct.

[Jax2]

Hi guys. I'm back to the css section to beg for your help once again.

 

I am making a website for my daughter and I wanted to do a nice little menu that has a rose show up directly after the menu item text.

 

I have set the #nav a and #nav a:hover height to 25, 100 lenth and on hover, I added a background image which is a 25px by 25px white rose, aligned to the right.

 

If I have it displayed in block mode, it works fine (Although the rose is way past the end of the text), but when I am on a link, it creates a new line between that link and the next.

 

If I remove disaply: block; I get rid of the problem with the new line, but the rose is now overlapping the text and will not go to the end of it.

 

I could use your help getting this figured out. I'd really like it so the rose shows up directly after the link text ends, or if that is not possible and it has to be a set distance, at least not way out to the right. I can't even get it to show up on the right of the text without block mode which leads me right back to the problem with the space in between the links.

 

Here is the css if it helps:

 

#container{
width: 800px;
margin: 15px auto 0px auto;
background: #d9a3dd;
border-style:solid;
border-width:thin;
border-color: black;
padding: 0px;
}
#head{
background-image:url('../images/annabg.jpg');
height: 150px;
border-bottom-style: solid;
border-bottom-width: thin;
border-color: black;
background-position: center;
background-repeat: no-repeat;
}
#sidebar1{
margin: 0px 0px 0px 5px;
float: left;
width: 250px
}
#mainContent{
float: left;
height: 550px;
margin: 0px 0px 0px 5px
}
#footer{
height: 50px;
border-top: solid;
border-top-width: thin;
border-color: black;
}
#clear{
clear: both;
}
#nav{
width: 90%;
margin: auto;
}
#nav a{
height: 25px;
font-family: Zapf Chancery, cursive;
text-decoration: none;
font-size: 18px;
color: #000000;
margin: 0px 0px 0px 0px;
}
div#nav li{
display: block;
width:80px
}
div#nav a:visited{
color: #000000;
}
div#nav a:hover{
margin: 0px 30px 0px 0px;
height: 25px;
background-image:url('../images/flower.gif');
background-position:right;
background-repeat: no-repeat;
}

 

And here is the code in question:

 

<div id="container">
<div id="head">
</div>
<div id="sidebar1">
  Menu:<br>
  <div id="nav">
<a href="memories/">Memories</a><br>
<a href="aboutMe.php">About Me</a><br>
  </div>
</div>
<div id="mainContent">
Welcome!
</div>
<div id="clear"></div>
<div id="footer">
Footer
</div>
</div>

 

 

[JustLikeIcarus]

Here hopefully this will put you in the right direction.

 

 

use a list for your menu:

 

<ul id="nav">
<li><a href="memories/">Memories</a></li>
<li><a href="aboutMe.php">About Me</a><li>
</ul>

 

Then I modified the css to account for the list. 

#nav{
width: 90%;
margin: auto;
padding:0px;
list-style-type: none;
}
#nav a{
height: 25px;
font-family: Zapf Chancery, cursive;
text-decoration: none;
font-size: 18px;
color: #000000;
margin: 0px 0px 0px 0px;
}
ul#nav li a{
display: block;

}
ul#nav a:visited{
color: #000000;
}
ul#nav a:hover{
margin: 0px 30px 0px 0px;
height: 25px;
background-image:url('../images/flower.gif');
background-position:right;
background-repeat: no-repeat;
}