2 replies [Last post]
sandraschmitt
sandraschmitt's picture
Offline
newbie
Last seen: 2 years 7 weeks ago
Timezone: GMT-6
Joined: 2010-05-08
Posts: 6
Points: 8

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 Smile

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.

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

Thank you so very much!!!
sandra Smile Big smile Big smile

Screen shot 2012-02-22 at 12.17.29 AM.png

Link:

HTML CODE:

<!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>

***************************************************
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(Cool {
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;
}

timwhelan
timwhelan's picture
Offline
newbie
Last seen: 2 years 7 weeks ago
Timezone: GMT-5
Joined: 2012-02-22
Posts: 2
Points: 3

Don't have time to test but

Don't have time to test but first thought is that the image is under the background color. If you separate out the background image to another callout...

#comic-nav li {
...all the code
-take out the background image call from here.

#comic-nav li {
background...
margin-top:20px //just to see if it shows up then you can position tighter.

That will treat the image differently and give you more control.

sandraschmitt
sandraschmitt's picture
Offline
newbie
Last seen: 2 years 7 weeks ago
Timezone: GMT-6
Joined: 2010-05-08
Posts: 6
Points: 8

Thank you!!! I believe you

Thank you!!! I believe you were correct about the positioning being off. I had tried so many versions that I think i just couldn't get the right combination. On top of the fact that I had been working for too long!! Smile

I got the background in there positioned correctly. Thanks again for that. I put a little padding on left and right to make the spacing correct around the word. The negative effect of that is since nav items are block and floated to the left of each other... on the rollover the items to the left of rollover shift to the right a little bit. would you have any ideas on how to compensate for that?

Again ultimately this code is in a Wordpress theme header... that's why I have not used div tags.

Thanks again so much!!!
Sandra Smile