PDA

View Full Version : Cannot get a:hover background to work properly



sandraschmitt
Feb 22nd, 2012, 07:49 AM
Hello!
I am working on a:hover style in my main navigation which is located in my header. I have it looking the way I want it to BUT for the a:hover. I want the rollover state to have a yellow speech bubble behind it. The main menu items are words of different length so the background for each item will be a different size. I thought I would handle this by styling block, giving background color and I was going to attach the little carrot to make the speech bubble effect in the background img. I cannot get the img to show up.

I am attaching a link and my code. Any help would be greatly appreciated. I thought this would be simple but of course it is not


One other note. Ultimately this will be on wordpress so I am trying to control everything through the line item so when I bring into wordpress it matches up with my main menu there. I already have that working. Just can't get the rollover effect I want.:confused:


I am attaching a small screenshot of what I want rollover to look like, HTML, styles, and link.


Thank you so very much!!!
sandra :D

Image:
http://www.sandraschmitt.com/products/images/bubble.png


PAGE LINK:

http://www.sandraschmitt.com/products/template_comic2.html

HTML:


<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>HTML Template</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="page-wrap">
<div id="header">
<div id="logo">Logo Here!</div>
<nav id="main-nav-wrap">
<ul id="main-nav">
<li class="about"><a href="#">about</a></li>
<li class="comics"><a href="#">comics</a></li>
<li class="news"><a href="#">news</a></li>
<li class="videos"><a href="#">videos</a></li>
<li class="resources"><a href="#">resources</a></li>
<li class="blog"><a href="#">blog</a></li>
<li class="shop"><a href="#">shop</a></li>
</ul>
</nav>
<!--ends main-nav-wrap-->

<nav id="comic-nav-wrap">
<ul id="comic-nav">
<li class="comic1"><a href="#">comic1</a></li>
<li class="comic2"><a href="#">comic2</a></li>
<li class="comic3"><a href="#">comic3</a></li>
<li class="comic4"><a href="#">comic4</a></li>
<li class="comic5"><a href="#">comic5</a></li>
<li class="comic6"><a href="#">comic6</a></li>
<li class="comic7"><a href="#">comic7</a></li>
<li class="comic8"><a href="#">comic8</a></li>
<li class="comic9"><a href="#">comic9</a></li>
<li class="comic10"><a href="#">comic10</a></li>
<li class="comic11"><a href="#">comic11</a></li>
<li class="comic11"><a href="#">comic12</a></li>
</ul>
</nav>
<!--ends comic-nav-wrap-->

</div>
<!-- ends header-->

</div>
<!--ends page-wrap-->


</div><!--ends footer wrap-->
</body>
</html>



:p
CSS STYLES:

***************************************************
STYLE.CSS
* { margin: 0; padding: 0; }
html { background: #000d53; }
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 1.6;
}
#page-wrap {
width: 1075px;
margin-top: 30px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
/************ HEADER ************/
#header {
height: 160px;
width: 1075px;
background-image: url(images/1header_back.png);
background-repeat: no-repeat;
position: relative;
margin: 50 10 0 100;
}
#logo {
width: 350px;
float: left;
margin-top: 30px;
margin-left: 30px;
position: relative;
}
/* MAIN-NAV IN HEADER */
#main-nav-wrap {
float: left;
padding-top: 30px;
position: relative;
}
#main-nav li {
display: block;
list-style-type: none;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
height: 20px;
float: left;
text-align:center;
padding: 10px 22px 10px 12px;
}
#main-nav li a{
color: #000;
text-decoration:none;
}
#main-nav li a:hover{
display:inline;
color: #FFF;
background:#FC0;
height: 30px;
padding: 7px 0 2px 0;
}
/* COMIC-NAV IN HEADER */
#comic-nav-wrap {
position: relative;
float: right;
margin-right: 25px;
margin-top: -6px;
background-image: url(images/comicNavBack.png);
height: 88px;
width: 960px;
background-repeat: no-repeat;
background-position: center center;
margin-left: 100px;
display: inline;
text-align: center;
}
#comic-nav li {
list-style-type: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
text-transform: uppercase;
color: #000;
text-decoration: none;
background-image: url(images/1comicNav_bionicle.png);
background-repeat: no-repeat;
height: 42px;
width: 68px;
text-align: center;
vertical-align: bottom;
padding-top: 15px;
padding-right: 6px;
margin-top: 22px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
display: inline-block;
position: relative;
font-weight: bold;
}
#comic-nav li:nth-child(2) {
background-image: url(images/1comicNav_classics.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(3) {
background-image: url(images/1comicNav_disneyfairies.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(4) {
background-image: url(images/1comicNav_garfield.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(5) {
background-image: url(images/1comicNav_stilton.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(6) {
background-image: url(images/1comicNav_hb.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(7) {
background-image: url(images/1comicNav_ninjago.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child( {
background-image: url(images/1comicNav_nd.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(9) {
background-image: url(images/1comicNav_slices.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(10) {
background-image: url(images/1comicNav_smurfs.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(11) {
background-image: url(images/1comicNav_monster.png);
background-repeat: no-repeat;
}
#comic-nav li:nth-child(12) {
background-image: url(images/1comicNav_ernest.png);
background-repeat: no-repeat;
}
#comic-nav li a{
list-style-type: none;
color: #000;
text-decoration: none;
background-image: url(images/1comicNav_garfied.png);
background-repeat: no-repeat;
}
#comic-nav li a:hover{
display: inline;
color:#FC0;
}

stevenmw
Feb 22nd, 2012, 12:20 PM
Read this tutorial. I realize you want to use your arrow image on the hover state. This tutorial can help learn about positioning. Instead of using a CSS generated arrow you could always just give a div your background image for the hover state.

http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/

sandraschmitt
Feb 22nd, 2012, 04:21 PM
Ultimately this header will be used in a wordpress theme. I didn't think wordpress would be able to handle a div in the nav menu. I thought it only used line items. If I styled this using divs I would be able to make it work but only using line items makes it a little trickier for me.

I was successful in adding an image to the rollover state but I just couldn't get it positioned correctly.

Thanks!!!
Sandra :)