I'm creating a horizontal menu in my website and everything is OK but one thing. I have a link in each <li> and the color is set to white and li has no background, but in hover I want to set li background to white and links text color to black. The problem is that the width of <a> tags is not the same as <li> and when the mouse is over the part that is in <li> but not in <a> both become white.Anchor links can not have width property as far as I know, and I try different type of tricks but no success.Any idea?
#primary-menu ul li {
list-style-type: none;
float: left;
background-image: url('menu-sep.png');
background-repeat: no-repeat;
background-position: right;
}
#primary-menu li a:hover {
color: black;
}
#primary-menu li:hover {
background-color: white;
color: black;
}
#primary-menu li a {
color: white;
text-decoration: none;
padding-right: 8px;
margin-right: 8px;
width: 100%;
height: 23px;
}
`
Check your <li> styling. They probably have padding. Remove it and the anchors should occupy the entire available space. Also, change the margin on the <a> tag to padding. Padding counts as part of the tag (ie, hovering over the padding makes it trigger the :hover pseudoselector), while margins do not.
as you have written above that should be worked but you are saying that is not working then try by making class refered to only text like.
.liText
{
color:white;
}
.liText:hover
{
color:black;
}
hope this will work.
use class attribute with your tag.
like
<a class="liText"> // for single class
if you want to use two or more classes for one tag then use another class after giving space as i mentioned below.
<a class="firstClass SecClass ThirdClass">
Related
My Dropdown-Menu Background only appears when hovering over the Dropdown sites, but I want it to appear all the time.
My Site is: http://bellezza-ribelle.blogspot.de/
There are Dropdowns on "Meine Bücher", "Rezensionen" and "Challenges" but the background only shows on the first Dropdown-Tabs, which makes it difficult the read the other ones, if you don't hover over them.
How can I make the Background appear on the drop-down-tabs with only hovering over die "Main"-Tabs (Meine Bücher, etc.)?
Add this to your CSS:
#nav1 ul ul li {
background-color: #f3f3f3;
}
You can also have more "air" by using padding for the li:
#nav1 ul ul li {
background-color: #f3f3f3;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
}
Looks like you might have a little issue with your max-height # .tabs-inner .widget ul on Line 255. Maybe setup a different max-height on :hover?
Is there a way to change the css property for example of a box when an element (inside the ) is hover?
for example if I have:
<table>
<tr><td><a>.....</td></tr>
</table>
I want to change the property of the container td when the link a has the mouse over. Is it possible?
Sorry, I have not explained well.
I have a , not a table...it was only an example....
I have
<ul>
<li><a>.....
in my css I have:
#navigation li a {
text-decoration: none;
color: #333;
text-transform: none;
}
#navigation li:hover {
color: white;
background-color: #333;
}
#navigation li a:hover {
color: white;
background-color: #333;
}
but It does not works because if I go on the link it's ok, but if I go with the mouse in the li but off the link the color of the text does not change...
Instead of
#navigation li a:hover {
try
#navigation li:hover a {
but It does not works because if I go on the link it's ok, but if I go with the mouse in the li but off the link the color of the text does not change...
That's because you're putting the hover on the link itself. If you want the link to react when you mouse over the li, simply change where you put the hover pseudo-class:
li:hover a {
color: #d2d2d2;
}
This basically says "when the li is hovered, the link inside it should change to these styles."
Alternatively, you can add padding to the link (ex - padding: 5px), making its reaction field larger. So:
li a {
display: block; /* Required to make it honor padding. */
padding: 10px;
}
li a:hover {
color: #d2d2d2;
}
As long as you don't have your li elements set to a larger size than the a element (via height, width, margin, and/or padding), then the li will "shrink-wrap" the a and be the same size as the total size of the link.
You cant change a property of a parent element, but you can trigger a hover event on the parent td itself:
table td:hover {
background-color: red;
}
You could add display: block to the anchor element which would make the anchor fill the li... Depending on indentation on the ul etc etc..
li a { display: block; }
I'm creating a Inbox in which there will me a asp menu on the side and Inbox on the center. I need to change the font color to red and make it bold when I see a new row from the database. I have used adding on the menu item.
If Not Hovered it looks like this.
If Hovered It Has to look like this.
But the problem is that when I hover on the text it looks like the image shown above, but if I hover slightly on the top or bottom of the menuItenm (Inside the Menu Item but not on Text), Then This looks like this.
CSS used For Menu Item.
.Menu ul li a {
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;}
.Menu ul li a:hover{
background-image: none;
color: white;
background: #424242;}
Here is the code I used to change The color and set the font to bold From server side.
Menu1.Items[0].Text = "<div class='inboxno' >" + "Inbox (" + (i + 1) + ")" + "</div>";
Here is the CSS class of inbox.
.inboxno{
background-image: none;
color: Red;
font-weight:bold;}
.inboxno:hover{
background-image: none;
color: white;
background: #424242;
font-weight:bold;}
I think I understand the problem. It is, that a <DIV> is created around the inbox Text inside the Menu Item and It has the Css inboxno. But the Menu Item has padding and When I place mouse on the padding Area then the inboxno:hover class is not being applied to the Div.
I think one of the solutions to this problem is, if I could access the .Menu ul li a class from .inboxno:hover class I will remove the Padding Property and Set the Same padding property in the .inboxno:hover class.
But I don't know how to access the .Menu ul li a class from .inboxno:hover class.
Can you Help me??
Not sure if you're just asking about the hover or not but try doing
.Menu ul li:hover a {
background-image: none;
color: white;
background: #424242;
}
What css styles to be applied to make the clickable area of button to the exact shape of the button.Could you please tell me
If you use HTML you have to use a somewhat obsolete technique - Image maps - to get a clickable area that's not in the shape of a square. If you use Flash, you have more options. This reply addresses HTML/XHTML up to version 4, I haven't read the the specs for HTML 5 wich may have more ways of solving this (probably in combination with Javascript).
If I wish to style links in a menu I use an unordered list. You need to use display:block to make the whole list item click-able. I have included example css and html below.
In my stylesheet:
#menu {
width: 800px;
height: 40px;
}
#menu ul {
list-style-type: none;
margin:0;
padding:0;
}
#menu li {
display: inline;
margin-right: 10px;
float: left;
background-color: #FC0;
}
#menu a {
text-decoration: none;
font-size: 1.2em;
color: #006;
display:block;
padding: 5px 10px 5px 10px;
}
#menu a:hover,
#menu a:active {
color: #009;
background-color: #F90;
}
In my html:
<div id="menu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Articles</li>
</ul>
</div>
This will give you a horizontal menu of three yellow boxes/buttons which will change to orange on hover. The a is displayed as a block and so the hover affect takes affect when the mouse hovers anywhere within the yellow box, rather than just over the text.
Hope this helps :o)
I am trying to create some simple menu links. I tried something like this:
div.menulinkboxaround
{
height: 25px;
}
a.menulinkbox
{
font-family: Verdana, Helvetica;
padding-left: 50px;
padding-left: 50px;
padding-bottom: 5px;
padding-top: 5px;
background-color: Green;
}
a.menulinkbox:hover
{
background-color: Red;
}
a.menulinkbox:visited
{
background-color: Yellow;
}
<div class="menulinkboxaround">Link 1</div>
<div class="menulinkboxaround">Link 2</div>
<div class="menulinkboxaround">Link 3</div>
<div class="menulinkboxaround">Link 4</div>
What i am trying to accomplish is to create menu elements that has a touch of style to em, so each link should be inside a div box with a padding 50 px on each side.
When i run this, they get clumped up on top of each other. I don't want to specify a width since the text inside the menu box should determine the size of it automatically.
Ex. (50px+text size+50px)
50px space (just green area) | Sample Text | 50px space (just green area)
Maybe this will help (since divs are block displayed elements by default):
div.menulinkboxaround { height: 25px; float: left; }
Try adding this:
a.menulinkbox
{
display: block;
}
Depending on whether you want this menu vertical or horizontal you may also want to add float: left; to div.menulinkboxaround.
As the previous answers suggest, you could put float:left on the menulinkboxaround.
It is difficult to tell from your description the desired effect, I am assuming you want the menu to be horizontal with 50px either side of the links.
With the code you currently have, the hover state only stretches in one direction, also as you are only specifying :hover it is not really as keyboard friendly as it would be if you specified :focus as well.
Also because you are setting the height in px as you increase the font size the text becomes clipped at the bottom. Not specifying the pseudo selectors on the link may also cause you later problems in Internet Explorer.
You could also tidy up the code a little to reduce the unnecessary classes and improve the semantics of the menu.
For example:
<style type="text/css">
ul.menu {
/* removing the browser defaults for margin padding and bullets */
margin: 0;
padding: 0;
list-style-type: none;
/* Now you have a sensible parent it is a good idea to put the font
family here, I have also added a fallback of sans-serif in the rare
case Helvetica and Verdana are not available on the users computer,
it might be best to set this on the body if you are using this font
site-wide
*/
font-family: Verdana, Helvetica, sans-serif;
/* To create symetry I am adding 25px to the right and left of the menu,
this will stay green even if the items inside are not
*/
padding: 0 25px;
background-color: green;
/* increacing the lineheight so the background color of the links does
not overflow the green of the menu behind it, for a simple menu like
this it is fine, a more complex or longer links that need to wrap I
suggest changing the method of implementation from display inline to
floating which is a bit more complex
*/
line-height:1.95;
}
/* because all the list items are inside this parent list you can use
the descendant selector to target them rather than adding a separate
class, you are saying all list items inside the unordered list that
has a class of menu
*/
ul.menu li {
/* telling the list items to behave like inline elements so they are
naturally on one line also removint the browser default margin and
padding
*/
display: inline;
margin: 0;
padding: 0;
}
ul.menu a:link,
ul.menu a:visited,
ul.menu a:hover,
ul.menu a:focus,
ul.menu a:active {
/* you can combine all your padding rules together in the order
Top Right Bottom Left, I remember this like it kinda spells TRouBLe :)
*/
padding: 5px 25px 5px 25px;
background-color: green;
/* setting the color to white because the default link color of blue
is not that visible against green
*/
color: white;
}
/* adding the :focus selector to make this more keyboard accessible */
ul.menu a:hover,
ul.menu a:focus {
background-color: red;
color: black;
}
ul.menu a:visited {
background-color: yellow;
color: black;
}
</style>
</pre>
<ul class="menu">
<!-- Putting these all on one line because we are making
them display:inline so the spaces get counted and there will
be a gap otherwise -->
<li>Link 1</li><li>Link 2</li><li>Link 3</li>
</ul>
I have tested this in recent versions of FF, Opera and Safari, and IE6 IE7 and IE8
<style type="text/css">
ul.menu {
margin: 0;
padding: 0;
list-style-type: none;
font-family: Verdana, Helvetica, sans-serif;
padding: 0 25px;
background-color: green;
/* overflow hidden clears the internal floated links and zoom 1
kicks IE into doing the same, I suggest you move the zoom: 1
into an IE stylesheet using conditional comments
*/
overflow: hidden;
zoom: 1;
}
ul.menu li {
display: inline;
margin: 0;
padding: 0;
}
ul.menu a:link,
ul.menu a:visited,
ul.menu a:hover,
ul.menu a:focus,
ul.menu a:active {
padding: 5px 25px 5px 25px;
background-color: green;
color: white;
/* setting the links to float left and giving them display block as
well explicitly, this is so that the vertical padding of 5px gets
applied, inline elements can only have horizontal margin and padding,
and since we are floating them they now take up 0 vertical height in
the document which is why we needed to clear the float on the
surrounding menu
*/
display: block;
float: left;
}
ul.menu a:hover,
ul.menu a:focus {
background-color: red;
color: black;
}
ul.menu a:visited {
background-color: yellow;
color: black;
}
</style>
<ul class="menu">
<li>Link 1</li><li>Link 2</li><li>Link 3</li>
</ul>
This second method is much more reliable, deals with wrapping links nicer and is generally a better solution but a bit harder to explain.
If you didn't want the menu to fill the full width of the screen just as long as the text takes up, regardless of which method you are using above, I suggest you put float: left and clear: both on the ul.menu which should shrink to the width it needs to take up
I hope this helps
sample code below (credit to other answers)
div.menulinkboxaround
{
height: 25px;
float: left;
}
a.menulinkbox
{
font-family: Verdana, Helvetica;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 5px;
padding-top: 5px;
background-color: Green;
}
a.menulinkbox:hover
{
background-color: Red;
}
a.menulinkbox:visited
{
background-color: Yellow;
}
<div class="menulinkboxaround">Link 1</div>
<div class="menulinkboxaround">Link 2</div>
<div class="menulinkboxaround">Link 3</div>
<div class="menulinkboxaround">Link 4</div>