I'm trying to change the image of the button when its on hover and active, currently it will show the button but when you go to hover over it doesn't change, I've tried giving the buttons there own id as well as just replacing the current image with another but it doesn't work.
html:
<div id="navcontainer" class="column five">
<ul id="navmain">
<li>Home</li>
<li>Philosophy</li>
<li>Eco News</li>
<li>DIY</li>
<li>Take Action </li> </ul>
</div><!-- .sidebar#sideLeft -->
CSS:
#navcontainer{
padding:10px 30px;
width:220px;
float: left;
margin-top:480px;
}
#navmain li{
list-style:none;
}
#navmain li, #navmain a{
text-decoration:none;
height:38px;
width:153px;
background-image: url('../images/button.png') ;
background-position: center;
text-align: center;
color:#000;
margin-left:-10px;
margin-top:20px;
vertical-align: -22%;
#navmain, #home a:hover {
text-decoration:none;
height:38px;
width:153px;
background-image: url('../images/buttonhover.png') ;
background-position: center;
text-align: center;
color:#000;
margin-left:-10px;
margin-top:20px;;}
}
#navmain a:active {
border-top-color: #297ab0;
background: #297ab0;
}
You have to clean up you CSS selectors. You're not being consistent:
// This is applying the image
#navmain li, #navmain a{...}
// This is swapping but it starts with "#home" instead of "#navmain"
#navmain, #home a:hover {...}
So try:
#navmain a:hover{...}
Try
#home:hover
Or
#navmain #home:hover
Or
a#home:hover
This CSS is wrong:
#navmain, #home a:hover {
text-decoration:none;
height:38px;
width:153px;
background-image: url('../images/buttonhover.png') ;
background-position: center;
text-align: center;
color:#000;
margin-left:-10px;
margin-top:20px;
}
The element should be set against #navmain a:hover, #home a:hover
Also not sure if it's a copy paste issue but you are missing the closing bracket for #navmain li, #navmain a, but that causes another problem if you are.
Related
My first-child of the A:hover tag is removing all the padding instead of only the first child. What is causing this? Thanks guys for any help. Stackoverflow wants more text but I can't say anything more other than I may be having issues with my element selections.
<nav>
<h2>Navigation</h2>
<ul>
<li>Home</li>
<li>Foo</li>
<li>Roo</li>
<li>Gamen</li>
<li>puta</li>
</ul>
</nav>
___________________________________________________________________________
nav li{
list-style-type:none;
padding:10px 0px;
font-size:20px;
float:left;
}
nav h2{
text-indent: -10000px;
}
.Latest_Content{
clear:both;
}
nav a{
text-decoration:none;
padding:10px 20px 10px 20px;
color:#000000;
font-family:'Droid Sans', sans-serif;
}
nav a:hover{
color:#ffffff;
background-color:#42b84f;
padding:10px 20px 10px 20px;
-webkit-transition: 0.4s;
}
nav a:first-child:hover {
padding-left:0px;
}
a:first-child will select all first child elements from all lists.
It should be:
nav li:first-child a:hover{
padding-left: 0;
}
Now, you are selecting only first list's a tag.
nav a:hover{
color:#ffffff;
background-color:#42b84f;
padding:10px 20px 0px 20px;
-webkit-transition: 0.4s;
}
nav a:first-child:hover {
padding-left:10px;
}
The solution could be:
nav li:first-child a{
padding-left:0px;
}
It's because you start list all the li and go to the element that want to change.
In your code nav a:first-child:hover you try to list the a and as you can see on each li are just one a, that is because all the a changes with the first-child.
I have tried to find an answer to my question, and while there are similar issues, nothing jumped out as me as a fix for my problem.
I am adding a Sub menu using CSS and for some reason the horizontal sub menu will only show up outside of the body. You can see an example of what happens here http://jsfiddle.net/sxP94/22/.
I need to get the sub menu to appear right under Portfolio on the menu. If anybody could help me figure out why this is happening, I would be ever so grateful.
Here is the code:
CSS
body {
margin:0;
padding:0;
width:100%;
color:#929292;
font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
}
html, .main {
padding:0;
margin:0;
}
.main {
background:#f8f8f8;
}
a {
color:#0087c7;
text-decoration:underline;
}
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
margin:0;
padding:0;
}
.header {
}
.header_resize {
margin:0 auto;
padding:0;
width:960px;
}
h1 a, h1 a:hover {
color:#000;
text-decoration:none;
}
h1 span {
}
.menu_nav {
margin:0 auto;
padding:70px 0 0;
height:15px;
float:right;
}
.menu_nav ul {
list-style:none;
padding:0 0 0 1px;
height:15px;
float:left;
background:url(../images/menu_split.gif) no-repeat left center;
}
.menu_nav ul li:first-child {
margin:0;
}
.menu_nav ul li {
margin:0;
padding:0 20px;
float:left;
background:url(../images/menu_split.gif) no-repeat right center;
}
.menu_nav ul li a {
display:block;
margin:0;
padding:0;
font-size:15px;
line-height:18px;
font-weight:bold;
color:#c4c4c4;
text-decoration:none;
text-transform:uppercase;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
text-decoration:none;
color:#000;
}
.menu_nav > ul > li > ul {
height:1000px;
left:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: left;
}
.menu_nav > ul > li:hover ul {
left:0;
top:37px;
}
.menu_nav > ul > li > ul > li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
.menu_nav ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:28px;
text-transform:none;
}
.menu_nav ul li ul li.active a, .menu_nav ul li ul li a:hover {
color:#fff!important;
}
HTML
<body>
<div class="main">
<div class="header">
<div class="header_resize">
<div class="menu_nav">
<ul>
<li class="active"><span>Home</span></li>
<li><span>About</span></li>
<li><span>Services</span></li>
<li><span>Portfolio</span>
<ul>
<li>Boudoir</li>
<li>Babies</li>
<li>Engagement</li>
<li>Wedding</li>
<li>Lifestyle</li>
<li>Family</li>
<li>Grads</li>
</ul>
</li>
<li><span>Blog</span></li>
<li><span>Contact</span></li>
</ul>
</div>
</div>
</div>
</div>
Anytime I change any of the left numbers, the sub menu stops showing up completely. Doesn't even show up on the outside of the body when I hover over the menu. So I can't figure out how to move it around because anything I try makes it disappear completely. Thank you for taking the time to read this and thank you in advance for any help you are able to offer.
Give position: relative to parent of the sub menu. The sub menu is given position:absolute and hence shows up outside.
.menu_nav ul li {
position: relative;
}
I'm trying to center a ul within a div menu. I've looked at other menu's and tried every combination I can think of, yet I still can't get it.
Here's the code:
#cssmenu ul{
margin:0 auto;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:38px;
font-size:14px;
background:#f9f8f8;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
font-family:Arial,Helvetica,sans-serif;
}
#cssmenu li{
display:block;
float:left;
margin:0;
pading:0;
}
#cssmenu li a{
display:block;
float:left;
color:#333333;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
height:38px;
}
#cssmenu li a:hover{
text-decoration:underline;
}
<div id="cssmenu">
<ul>
<li>Home</li>
<li>About</li>
<li>The Program</li>
<li>Blog</li>
<li>Support</li>
<li>Members Login</li>
</ul>
</div>
Any help would be greatly appreciated.
Thanks!
Mike
You have to remove the width: 100% from the ul first. You can't really center something that is the same size as the container :). After removing that, you could make the list inline-block, so it takes up the width of its children, and then using a simple text-align on the div.
#cssmenu {
text-align: center;
}
#cssmenu ul{
display: inline-block;
}
Of course you will have to move some of your styles from the list to the div, because the list is not full width anymore.
jsFiddle Demo
I have created a menu but cannot solve this issue so I am hoping that someone can help me:(
Problem my last li (anchor tag) inside my menu keeps collapsing underneath my menu and no matter I do problem persists. In Firefox looks fine but in every other browser it is a disaster... I have tried: adding overflow:hidden; to my menuwrapper,tried adding a "clear both" div after last ul tag,added display:inline-block to li tags,and a lot of other approaches to my problem but nothing works:( I didn't set explicit width to my anchor tags (I really don't want to do that!). In Firefox looks like perfect: http://robertpeic.com/kyani/template/menu.png
in other browsers look like this: (notice that there is no blue button because it came bellow my menu) http://robertpeic.com/kyani/template/menu2.png
I dont want this:http://robertpeic.com/kyani/template/menu3.png
Question: How can I prevent my li's from going below my menu even if there is no room? Thanks for your help!!
Link to my menu
Relevant CSS looks like this:
.mainmenu{
display:block;
width:906px;
margin:0px auto;
height:42px;
background-image:url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat:repeat-x;
position:relative;
margin-top:-15px;
z-index:160;
}
.mainmenu ul{
list-style-type:none;
}
.mainmenu ul li {
float:left;
}
.mainmenu ul li a{
text-decoration:none;
display:block;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
font-size:20px;
padding:0 23px 0 23px;
color:#383838;
border-left:1px solid #dedede;
height:42px;
line-height:42px;
z-index:100;
}
.mainmenu ul li a:hover{
color:#ffffff;
}
.mainHover{
background-image:url('http://robertpeic.com/kyani/template/hoverm.png');
display:block;
position:relative;
background-repeat:repeat-x;
z-index:-50;
}
Html looks like:
<div class="mainmenu">
<ul>
<li>Početna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div><!--/mainmenu-->
I added overflow:hidden to .mainmenu and changed the padding for .mainmenu ul li a and it worked for me.
.mainmenu
overflow:hidden;
.mainmenu ul li a
padding:0 22px 0 23px;
I have found that the best way to get a consistent full width menu bar with cross browser compatibility is to force the widths of the LIs. Although it isn't a very forward compatible. it is the best way I have found for maintaining the integrity of the visual design.
Set the width of the mainmenu div to 910px. It will solve your problem and also not show any white spacing
Your entire html will be, as given below. While testing your code,I found, if I omit the first line DocType... the menu gets mangled in IE . In Chrome it works fine. So AFAIK, Your issue was with Doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.mainmenu
{
display: block;
width: 906px;
margin: 0px auto;
height: 42px;
background-image: url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat: repeat-x;
position: relative;
margin-top: -15px;
z-index: 160;
}
.mainmenu ul
{
list-style-type: none;
}
.mainmenu ul li
{
float: left;
}
.mainmenu ul li a
{
text-decoration: none;
display: block;
font-family: "Palatino Linotype" , "Book Antiqua" ,Palatino,FreeSerif,serif;
font-size: 20px;
padding: 0 20px ;
color: #383838;
border-left: 1px solid #dedede;
height: 42px;
line-height: 42px;
z-index: 100;
}
.mainmenu ul li a:hover
{
color: #ffffff;
}
.mainHover
{
background-image: url('http://robertpeic.com/kyani/template/hoverm.png');
display: block;
position: relative;
background-repeat: repeat-x;
z-index: -50;
}
</style>
</head>
<body>
<div class="mainmenu">
<ul>
<li>Pocetna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div>
</body>
</html>
I feel so dumb right now :) To prevent my li from going below I've only wrapped my menu with other div and set that div to overflow hidden and it worked perfect! THX everybody for your help!!!
CSS now looks like:
.mainmenu{
display:block;
width:903px;
}
.mainmenu ul{
list-style-type:none;
}
.mainmenu ul li {
float:left;
}
.mainmenu ul li a{
text-decoration:none;
display:block;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
font-size:20px;
padding:0 23px 0 23px;
color:#383838;
border-left:1px solid #dedede;
height:42px;
line-height:42px;
z-index:100;
}
.mainmenu ul li a:hover{
color:#ffffff;
}
.menuwrap{
margin:0px auto;
height:42px;
background-image:url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat:repeat-x;
position:relative;
margin-top:-15px;
z-index:160;
width:900px;
overflow:hidden;
}
HTML looks like this:
<div class="menwrap">
<div class="mainmenu">
<ul>
<li>Početna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div><!--/mainmenu-->
</div><!--/menuwrap-->
I am trying to show the menu as follows
| HOME |
| GAMES |
| PLAYERS|
|SCHEDULE|
The problem is that my menu is showing like this
| HOME || GAMES |
|PLAYERS||SCHEDULE|
and also.. how can I set the width of it to be consistent?, right now it takes only the length of the word inside of |HOME| but i would like to set this to a fix number.. I am new to css please help
.#tabshor {
width:100%;
font-size:50%;
line-height:5px;
}
#tabshor ul {
margin:-30px;
padding:150px 0px 0px 0px;
line-height:10px;
}
#tabshor li {
display:block;
margin:0;
padding:5;
}
#tabshor a {
float:left;
background:url("../images/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 3px;
text-decoration:none;
}
#tabshor a span {
float:left;
display:block;
background:url("../images/tabright.gif") no-repeat right top;
padding:10px 20px 20px 10px;
color:#FFF;
}
#tabshor a span {float:none;}
#tabshor a:hover span {
color:#FFF;
}
#tabshor a:hover{
background-position:0% -42px;
}
#tabshor a:hover span {
background-position:100% -42px;
}
div#tabshor>ul>li {
display:block;
position:relative;
float:left;
list-style:none;
left:50px;
}
div#tabshor>ul>li ul{
position:absolute; display:none;
list-style:none;
left:100px;
}
div#tabshor>ul>li>a{
display:block;
}
div#tabshor>ul>li:hover ul{
display:block;
z-index:500;
width:50%;
margin:10px 0px 0px -20px;
width:100%;
}
div#tabshor ul li ul a{
display:block;
width: 50px;
}
div#tabshor ul li a:hover{
background:red;
font-style: oblique;
}
HERE IS THE HTML
<div id="left_banner" class="divleftside">
<div id="tabshor">
<ul>
<li><span>HOME</span></li>
<li><span>GAMES</span></li>
<li><span>PLAYERS</span>
<ul>
<li><span>PLAYERS</span></li>
<li><span>SOCCER</span></li>
<li><span>BASKETBALL</span></li>
</ul>
</li>
<li><span>COURTS</span></li>
<li><span>REFEREES</span></li>
<li><span>ABOUT US</span></li>
<li><span>CONTACT US</span></li>
<li><span>REGISTER</span></li>
</ul>
</div>
</div>
Try:
Remove float: left from div#tabshor>ul>li
Remove float: left from #tabshor a
Add width: 170px; to div#tabshor>ul>li>a
Cleaning up your CSS might lead to less headaches. Also starting with an example like this vertical rollover list or this nested vertical rollover list might be easier.