I have a simple menu:
<ul id="menu2">
<li> Home</li>
<li> About us</li>
<li> Contacts</li>
</ul>
And in css file I have:
#menu2 {
background: black;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 220px;
}
#menu2 li {
margin: 0;
padding: 0;
}
#menu2 a {
background: black;
border-bottom: 1px solid #393939;
color: #ccc;
display: block;
margin: 0;
padding: 9px 16px;
text-decoration: none;
}
#menu2 a:hover {
background: black url("../images/select.png") left center no-repeat;
color: #fff;
padding: 9px 16px;
}
#menu2 a:active {
background: black url("../images/select.png") left center no-repeat;
color: #fff;
padding: 9px 16px;
}
Everything works well except for #menu2 a:active not working at all while #menu2 a:hover (with same rules) works well. What is the problem? Did I miss something?
It is working as expected. I colored the active state red.
Try clicking on en element and hold the button down. The background will be red.
You don't see a change, because you CSS for hover and active are identical!
Sample
http://jsfiddle.net/dqH3F/1/
Sample contains
#menu2 a:active {
background: red url("../images/select.png") left center no-repeat;
color: #fff;
padding: 9px 16px;
}
Can you provide more details of what exactly is not working and/or a demo. Looking at the code it appears to be fine.
The :active state refers to when a link is pressed, so if you press and hold your mouse button down on your menu item it should be working as expected since hover works active has the same properties.
A link with :active will not remain that way when your on the page it links too, it reverts back to a normal link.
Your background for :hover and :active in the code above is the exact same.
Are you trying to set a background x and y position on active?
Without image background and different colors (for testing) your code works fine: see here http://jsfiddle.net/stursby/9Pccb/
Related
I'm trying to create a simple tabbed navigation menu in CSS. I am having a hard time getting the bottom border to go away on the active tab. Normally this would not be hard to do, but I also want a line height set.. so I'm using inline-block with various IE and FF fixes. This makes it display the way I want, with the exception of the bottom border.
I have tried numerous methods for getting this to work, including setting up some operators.. but I don't know enough about CSS to determine if I was using them correctly.
Here is my jsfiddle.
(Obviously my CSS skills need work and I could probably simplify the code greatly as well.)
Code:
#tab_menu {
width: 100%;
overflow: hidden;
color: #000000;
border-bottom: #dddddd solid 1px;
}
#tab_menu ul {
padding: 0px;
margin: 0px;
}
#tab_menu li {
list-style: none;
line-height: 42px;
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
display: -moz-inline-stack;
/* Firefox Fix */
display: inline-block;
/* Normal Function */
zoom: 1;
/* IE Fix */
*display: inline;
/* IE Fix */
}
.tab_menu_active {
color: #000000;
border-bottom: none;
border-left: #dddddd solid 1px;
border-right: #dddddd solid 1px;
border-top: #dddddd solid 1px;
}
.tab_menu_active a {
color: #000000;
text-decoration: none;
}
.tab_menu_not_active {
}
.tab_menu_not_active a {
color:#52a4d4;
text-decoration: none;
}
.tab_menu_not_active:hover {
background: #eeeeee;
}
HTML:
<div id="tab_menu">
<ul>
<li class="tab_menu_not_active"> Link 1
</li>
<li class="tab_menu_active"> Link 2
</li>
<li class="tab_menu_not_active"> Link 3
</li>
<li class="tab_menu_not_active"> Link 4
</li>
<li class="tab_menu_not_active"> Link 5
</li>
</ul>
</div>
DEMO
for the #tab_menu I removed the overflow:hidden;
#tab_menu {
/*overflow: hidden;*/
}
to the .tab_menu_active I have added this styles, that will add border bottom white and with position manipulation will overidre the gray border color.
.tab_menu_active {
border-bottom:solid 1px #fff;
position:relative;
top:1px;
}
.tab_menu_active a {
position:relative;
top:-1px;
}
The problem you have is your entire #tab_menu has a bottom border. There are a couple ways you could solve this, but first I'll give you some details about how to simplify your css.
Give the li's the class tab, that means that every tab you have will all get the same css. On the active one, give it a second class, active. In your css definitions, define that all tab's should have the same css (instead of having duplicate css in tab_menu_active and tab_menu_not_active).
I would recommend giving them all a border on the bottom, and then removing that border in the active one.
Here's a forked jsfiddle.
I am so ready to be done with this website, but I'm stuck on a couple things, one of which has me COMPLETELY stumped. I'm working with Dreamweaver CS6, but I am horrible with Adobe software in general (not a regular web developer!), so I'm just doing all the code myself. I have a menu bar running horizontally across the top of my page. The final link in the menu looks fine in the Dreamweaver preview, but when I check it out in browser(s), the last menu item is sitting below the rest. I tried to enter an image, but this is my first day on the website, so I haven't gathered enough reputation points. :shrug:
Here is my HTML code for the div:
<div id="nav1">
<ul>
<li>Home</li>
<li>FAQs</li>
<li>Rates</li>
<li>Contact Us</li>
<li>Portfolio</li>
</ul>
Here is the CSS. (Pardon the messy stuff; again, I'm just a newbie freelancing girl without a lot of experience. Side note: The percentages are due to the fact that I'm creating a responsive layout.)
#nav1 {
background-image:url(Images/NavBkgrnd.png);
width: 100%;
margin-top: 2%;
text-align: center;
word-spacing: normal;
}
#nav1 ul{
height: 30px;
padding: 8px 0px;
margin: 0px;
}
#nav1 li{
display: inline;
padding: 20px;
}
#nav1 li a{
color: rgb(255,255,255);
padding: 5px 5px 25px 5px;
width: 16.5%;
border-right: 1px solid rgb(51,51,51);
display:block;
float:left;
font: 400 12px/1.4 "Palatino Linotype",Verdana,Geneva,sans-serif;
font-weight:bold;
text-decoration: none;
text-transform: uppercase;
}
#nav1 a:hover{
color: rgb(0,0,0);
background-color: rgb(170,0,0);
}
#nav1 li a#visited {
background-color: rgb(170,0,0);
}
Can anybody point out errors that might be causing this crazy misalignment? I really wish I could've posted a picture. The website isn't live, so I can't post a link, either. But maybe it won't be necessary if you spot some issue with the code. Please help!
UPDATE: Answers below have solved the problem. Thanks for the speedy solutions, everyone.
The last li of the #nav1 needs to have its padding-top set to 0px. Try adding style="padding-top: 0px" or doing something like this.
#nav1 li:last-child {
padding: 0px !important;
}
Remove the padding from #nav1 li seems to fix it for me.
jsFiddle example
I made a few changes to your code.
First off, I set the <li> elements to have inline-block display, rather than inline display to apply the block style to the outermost element. Second, I set the 16.5% width to the <li> elements and made the <a> elements have 100% width.
Note that this also centered the nav bar.
Working JSFiddle
#nav1 {
background-image:url(Images/NavBkgrnd.png);
width: 100%;
margin-top: 2%;
text-align: center;
word-spacing: normal;
}
#nav1 ul{
height: 30px;
}
#nav1 li{
display: inline;
}
#nav1 li a{
color: rgb(255,255,255);
padding: 5px 5px 25px 5px;
width: 16.5%;
border-right: 1px solid rgb(51,51,51);
display:block;
float:left;
font: 400 12px/1.4 "Palatino Linotype",Verdana,Geneva,sans-serif;
font-weight:bold;
text-decoration: none;
text-transform: uppercase;
background-color: rgb(170,0,0);
}
#nav1 a:hover{
color: rgb(0,0,0);
background-color: rgb(170,0,0);
}
#nav1 li a#visited {
background-color: rgb(170,0,0);
}
I cannot figure this out. I HAVE DONE RESEARCH so please, no comments about me doing more research. Also, I am a noob, so be nice ;)
Here's my site: http://library.skybundle.com/
Hover your mouse over the two black rectangles in the main blue nav bar (header area). The a:hover should make the color change to a gray. The ISSUE is that in Chrome, this looks perfect. But, in Firefox, the padding-right isn't long enough or something, so there is always a small black rectangle at the far right side of the "Educational Courses" button (this will only be visible when hovering your cursor over the button). In other words, the gray box doesn't go all the way to the right-side end of the button area upon mouse hover. I just don't understand why this looks and works great in Chrome, but bugs out in Firefox...
Believe me when I say I have tried everything I can to fix it using Firebug in Firefox. If you play around with it using an editor in your browser, you will see that if you try to make the padding longer for Firefox, it pops the whole button down onto a new line. So to fix THAT problem, you must make the container wider, but then the original problem comes back. It's a circle of problems and I'm sure one of you geniuses out there will see a simple solution that I am missing.
Please help. Thanks!
EDIT :
Here's my JSFiddle and code. Notice how it looks great in Chrome but not in Firefox?
http://jsfiddle.net/S4st8/
HTML:
<div id="navigation">
<div id="navigation-inner">
<div id="page-nav">
<div id="primary-nav">
<ul id="top-menu">
<li id="li-left">Product Training Videos</li>
<li id="li-right">Educational Courses</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}
#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}
#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}
div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}
ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}
li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}
ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}
ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}
its because a tags (anchor tags) have a default display property of inline
due to CSS Box Model you would need to adjust your padding and set the anchor tags display property to display:block;
the display block allows the anchor tag to fill the whole space of the LI tag
change ul#top-menu li a to this:
ul#top-menu li a{
color: #FFFFFF;
font-size: 11pt;
font-weight: bold;
display: block; /* add this */
padding: 0 10px; /* add this */
}
the CSS Box Model adds the content + padding + border + margin
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Take a look at this CSS rule:
li#li-right {
border-left: 2px solid #5E5E5E;
list-style-position: inside;
}
Dropping list-style-position: inside seems to fix your issue in Firefox (and still works in Chrome), but I haven't tested the implications in other browsers. The CSS rule is documented here.
The reason why : browsers apply their own css if you don't specify it. Firefox added the space for your bullet (somehow)
FF :
list-style-image none
list-style-position outside
list-style-type disc
GooChrome :
list-style-image: none;
list-style-position: inside;
list-style-type: none;
User JasonSperske gave you a fixing solution,
i invite you to RESET your css.
PS. in the meantime, you are invited to see : https://stackoverflow.com/help AND http://sscce.org/
Reading and understanding those pages will give you few reputations points
I need your help with changing the text color of the active menu item on my website, using CSS.
(It's a Joomla website and I'm modifying the standard Gantry framework template to our needs).
Here is the CSS for the active menu item...
.gf-menu.l1 > li.active {
background: none;
color: #19D57E;
border: none;
border-bottom: 3px solid #19D57E;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 0 auto;
padding-top: 1px;
}
And here is the CSS for the passive menu items...
.gf-menu .item {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 21px;
color: #555555;
padding: 4px 8px;
text-align: left;
text-shadow: 0px 0px 0 transparent;
text-decoration: none;
display: block;
outline: 0;
cursor: pointer;
font-weight: bold;
}
What I want is for the color of the text in active menu item to be green (#19D57E).
The active menu item is already displaying a green line at the bottom, but the text color of the menu item remains black like in the passive menu items. As you can see, I have specified the text of the color, but for some reason it is not doing it.
What am I doing wrong?
If you want to have a look at the website, please go to http://www.barrylong.tv/index.php/home
Thanks a lot!
Hector
This is the CSS needed:
.gf-menu.l1 > li.active a {
color: #19D57E;
}
Note the a after .active
Hope this helps
add this in your style sheet .gf-menu > .active > a {
color: #19D57E;
}.
I think you have to change the color of the .item element in the .active li-element. At the moment you are trying to change the color of the li-element and not of the link.
.gf-menu.l1 > li.active .item {
/* ... */
color: #19D57E;
/* ... */
}
Find the CSS block: for item101 active last
Notice in your source for "home":
<li class="item101 active last">
<a class="item" href="/index.php/home">Home </a> </li>
You will see the text color property to change. The reason what you are doing isn't working is that you are changing the wrong CSS block properties.
The rollover uses a single image for both the regular and hover states. The buttons display fine in both Firefox and Chrome, but the rollover does not work in Firefox.
Here's the HTML, which uses a list for multiple buttons (just a single instance of a button is shown here):
<div id="buttons">
<ul class="stencil_buttons">
<li>
<button type="submit" id='addField'>
<a class="global_button" href=""><span>Button Text</span></a>
</button>
</li>
</ul>
</div>
Here's the CSS:
a.global_button span {
background: transparent url('../images/button_left.png') no-repeat 0 0;
display: block;
line-height: 22px;
padding: 3px 0 5px 18px;
color: #fff;
}
a.global_button {
background: transparent url('../images/button_right.png') no-repeat top right;
display: block;
float: left;
height: 30px;
margin-right: 6px;
padding-right: 20px;
text-decoration: none;
font-size: 14px;
}
a.global_button:hover span {
background-position: 0 -30px; color: #fff;
}
a.global_button:hover {
background-position: right -30px;
}
Thanks in advance for your help.
Try button:hover a.global_button span and button:hover a.global_button instead of the corresponding selectors above. While the selectors in the question above will work in FF when the surrounding element is not a button, they do not work when it is; My guess would be that the hover state stops at the button and does not filter down to child elements in FF.