here is my html code
<div id="menus">
<ul>
<li>Home</li>
<li>Users</li>
<li>Project Manage</li>
<li>Transaction</li>
<li style="border-right:none;">Logout</li>
</ul>
</div>
here is my CSS
#menus li
{
float:left;
list-style-type: none;
padding-left: 25px;
padding-right: 25px;
border-right:groove 1px #FFFFFF;
background: #666666;
}
#menus li:hover
{
background: #999999;
}
#menus li a
{
font-size:24px;
text-decoration:none;
color:#FFFFFF;
}
#menus li a:hover
{
color:#000000;
}
now i want to change css when user click on li (like display current selected). can I do this using css only?? If yes then how??
Thanks in advance..
You can do it with CSS only using focus and tabindex
DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/4/
li:focus {
background: red;
outline: 0;
}
A good way to employ an 'active' menu item solution is this
DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/6/
Source: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/
No, you can not do this with just css. I am not too sure what to say...
If you want to have a page specific active, place a different class in the backend, example:
Related
I have a menu with four items and each one of them has a different colors.
My challenge is to darken each item on hover and I know I can use opacity to achieve this but before that, every time I hover on one of items it only highlights part of it and skips the padding. I know it is a stupid question to ask but this is my first front end job since 1999 :)
Could you please help me with understanding what is wrong here? thank you all.
this is the menu structure
<div class="menu-bar-inner">
<ul class="menu-bar-menu">
<li class="color1">Item 1</li>
<li class="color2">Item 2</li>
<li class="color3">Item 3</li>
<li class="color4">Item 4</li>
</ul>
and this is my CSS
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
padding: 6px 20px 7px 20px;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
background-color: #ce5043
}
.menu-bar-menu li a:hover {
background-color: black;
}
.color1 {background-color: #ce5043}
.color2 {background-color: #fb8521}
.color3 {background-color: #444444}
.color4 {background-color: #b3c833}
You can use this for hovering:
.menu-bar-menu li:hover, .menu-bar-menu li:hover a {
background-color: black;
}
it take care of both li element and its child anchor when li is hovered
Demo :http://jsfiddle.net/DajQ9/1/
I'd take the padding off the li elements and put it on the a elements instead. Also, set a to display: block;, so it occupies the entire height and width of its parent li. Like so:
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
background-color: #ce5043
}
.menu-bar-menu li a {
display: block;
padding: 10px 20px;
}
Here's a fiddle: http://jsfiddle.net/82uyt/
Also, you were missing the closing </div> tag.
While there are many ways to fix this, the root of your issue is the fact that you're padding both the container AND the link inside it when you style the li and the li a in one shot. What you're left with is an a tag that has padding inside an li that has padding, and the padding of the li tag is the unchanging color. By adding:
.menu-bar-menu li{
padding:0;
margin:0;
}
AFTER the declaration you have, you can fix this, or simply separate out your declarations to make it a bit more obvious. Also, when in doubt, a tool like the Firebug extension for Firefox will be your best friend. You can launch it, then click an item in your page to see the styles that are affecting that exact piece... sometimes just the highlighting/border while you move around is enough to make you see what's happening.
Yoy need to apply padding to the element on which you are applying the hover action. Here is your code updated. Visit this link: http://jsfiddle.net/dnPmE/1/
css:
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
}
.menu-bar-menu li a{
padding: 12px 40px 14px 40px;
}
.menu-bar-menu li a:hover {
background-color: black;
}
.color1 {
background: #ce5043;
}
.color2 {
background: #fb8521;
}
.color3 {
background: #444444;
}
.color4 {
background: #b3c833;
}
Apologies for what is probably quite a basic question, but I've not found a solution to this online.
I have a simple CSS menu, here's the CSS:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
opacity:1;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
/* End navigation bar styling. */
This is from an online tutorial, so not my code.
Here's the HTML:
<!-- language: lang-html -->
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
All I want to do is have different colo(u)rs for each menu item when hovered over.
I assume you need to create a separate id (or class) for each item, but I am unsure of the syntax and no matter what I try it simply won't work.
Many thanks for any assistance.
add a class to the href links and then in your css call the hover state and then style accordingly. Here is an example using your code: http://jsfiddle.net/LGL37/
The HTML:
TEXT
The CSS
.about:hover { background: yellow; }
EDIT: this is a much better solution than the other answer as it is cross browser compatible and if you need to style more in the future you'll have individual classes to target rather than nth which can get confusing.
If you don't use the :nth-child() selector, you can add a unique class to each li in the nav
<li class="about"></li>
and set a hover effect in your stylesheet for that specific class
#nav li.about a:hover { background-color: red; }
You can use :nth-child selector but it won't work in some legacy versions of IE.
JsFiddle
#nav li:nth-child(1) a:hover {
color:green;
}
#nav li:nth-child(2) a:hover {
color:blue;
}
etc.
You could use nth-child:
li:nth-child(2) a:hover{
color: red;
}
http://jsfiddle.net/fAbFg/
This example affects the second item.
I am having trouble targeting this fifth anchor tag. I simply want to separate the final anchor visually from the rest of the list but I still want it grouped (obviously by the ul)
Any help is appreciated!
ul>
<li>PORTFOLIO:</li>
<li>layout</li>
<li>logo design</li>
<li>print design</li>
<li>Contact Me</li>
</ul>
#mainNav a {
color:#428896;
text-decoration: underline;
}
#mainNav ul>:first-child {
letter-spacing: 2px;
text-decoration: none;
}
#mainNav ul li:nth-child(5) {
padding-left: 50px;
}
If you want the last anchor why just not use:
ul li:last-child a{
letter-spacing: 2px;
text-decoration: none;
color:red;
}
http://jsfiddle.net/4fs2s/
And in your example ul doesn't have #mainNav id
Your selector is fine. The property for the left padding is padding-left, not padding:left.
See this fiddle > http://jsfiddle.net/QL7ds/
Is it a typo that your last li is not closed?
Your CSS is wrong. padding:left: 50px; should be padding-left: 50px;
ul li:nth-child(5) {
padding-left: 50px;
}
jsFiddle example
My following code is not working.Means border and background color is not working
#navigation ul
{
background-color: #85A157;
border:3px solid white;
}
here is my fiddle http://tinkerbin.com/ooJNXsdD
i want like this
please help in correcting my fiddle.
try setting a height on the element like so:
#navigation ul
{
background-color: #85A157;
border:3px solid white;
height: 20px;/*added height*/
}
i hope this helps. i added the change to tinkerbin, not sure if it took :)
Use overflow: hidden on your <ul>, like this : http://tinkerbin.com/AMBfS3MY
After testing this on your Tinkerbin, this worked for me. You need a clearfix. In your CSS:
.clear {
clear: both;
}
Then in your HTML:
<ul>
...
<li class="clear"></li>
</ul>
And if you want the navigation bar to flush against the top image, add the following margin-top in your CSS:
#navigation ul
{
margin-top: 0;
...
}
I have just updated your fiddle, I hope you can see where your problems where.
http://tinkerbin.com/g63CbYYZ
For example:
ul has usually a margin. So you need to reset it.
Better define styles on div not on ul.
And a lot more...
This should do it for you.
#navigation ul
{
background-color: #85A157;
border:3px solid white;
margin:0px;
height:22px;
}
#navigation ul li
{
list-style:none;
float:left;
}
#navigation ul li a
{
color:white;
text-decoration:none;
margin:0px 37px 0px 0px;
}
Ok,
So problem here... when using list-style-position:inside in IE8 the first like is indented but every line after that is not. So the new lines appear under the bullet.
This is fine, but when I use a list with that css applied with an a tag within the li then the text automatically gets pushed to the second line, and the first line is empty.
ie8 bug http://www.rocketspark.co.nz/bug_images/ie8_list.png
When I remove the a tag from the li then it jumps back up.
Any idea on why this might be or is this a bug in the ie8 world or do I just need to double check my css?
Any insights would be much appreciated.
As asked here is some code
<div id="sub_nav">
<ul>
...
<li><a class="active_page" href="#">Liposculpture</a>
<ul>
<li>What is Liposculpture?</li>
<li>About Liposculpture surgery</li>
<li>After Liposculpture surgery</li>
<li>Post Op Instructions</li>
<li>Liposculpture Side Effects</li>
<li>Liposuction Introduction to</li>
<li>Tumescent Liposculpture</li>
</ul>
</li>
...
</ul>
</div>
For the CSS I will try and show it best I can
#sub_nav li {
width: 200px;
padding:4px 0;
border-bottom: 1px #CCC solid;
}
#sub_nav li a {
text-decoration: none;
color:#555;
padding:7px 15px 7px 15px;
display: block;
}
#sub_nav li ul li {
list-style-position: inside;
list-style-type: disc;
font: 11px Arial;
padding-left:15px;
color:#FFF;
border-bottom: none;
}
#sub_nav li ul li a {
padding:0;
margin:0;
text-indent: 0;
}
Hope this helps
change
#sub_nav li a {
text-decoration: none;
color:#555;
padding:7px 15px 7px 15px;
display: block;
}
to
#sub_nav li a {
text-decoration: none;
color:#555;
padding:7px 15px 7px 15px;
display: inline-block;
*display: inline;
*zoom: 1;
}
#salgiza posted the answer in the comments above... "it looks like IE8 is having problems when calculating the width of the "a" (displayed as block) and pushing it down to a new line. The first thing I would try would be adding a width to the "a" element, to see if that's the problem."