I'm having some trouble with a rollover.. hoping you can help me!
I'm using li navigation, and I want to have separate boxes linking to different pages. This part is fine and works like it should. I want to be able to hover over the box and have the box AND the link change colour. I can get the box changing no problem, and the link changes when you hover over it, but is there a way for them to both change when you're just hovering over the box? Here's what I've got so far:
#nav-menu ul{float: right; text-align: center;}
#nav-menu li{margin-right: 5px; list-style:none; padding-left: 1px; text-align: center; font-size: 14px;float:left; padding:0px 15px; width: 57px; position:relative;z-index:200; background: #000; color: #FFFFFF; font-family: georgia;}
#nav-menu li a{display: block; float: left; color:#fdf2e7;font-size:14px;text-decoration:none; text-align: center; padding:5px 0px 5px 0px; font-family: georgia;}
#nav-menu a:hover{display: block; color:#000000; text-align: center; background: #f3d5e1; text-decoration:none !important; font-family: georgia;}
#nav-menu:hover{display: block; color:#000000; text-align: center; background: #f3d5e1; text-decoration:none !important; font-family: georgia;}
--
Any help would be greatly appreciated. Thanks! :)
Use li:hover to target a list item when you hover over it, and use li:hover a to target an anchor whose parent list item is being hovered over.
Related
I'm trying to list form labels and button horizontally.
Here is my CSS code:
.viewLayout ol{
width: 1px;
float:left;
}
.viewLayout ol > li{
direction:ltr;
display: inline;
}
.viewLayout input[type=button] {
display:block;
width: 100px;
color:#FFF;
background-color: #808285;
border: 0 none;
border-radius: 3px;
font-size: 1.1em;
font-weight: bold;
height:22px;
cursor: pointer;
font-size: 13px;
}
Result of my code:
How to style the edit buttons to be inline with the office area ?
meaning
Remove width: 1px; property from ol description. And, obviously, display:block from input description.
UPD: interesting, but my browser doesn't render your code as your picture. Precisely, display:inline in li description breaks the markup. It should be removed.
I have a top menu bar and when the mouse hovers over each menu item it turns purple.
One of these menus also has a drop down list of further items. When I move the mouse cursor down through these sub-menus the top menu goes back to the original style. I would like it to stay purple even when I am hovering over the sub-menu items. Website is here, if you hover over sub-menu under "About" it shows the problem.
I have searched through a few similar stackoverflow answers. For example this problem and previous answer here. I tried a change from this
#topnav li a:hover {}
to
#topnav li hover:a {}
But neither this suggested change or the original keeps the top menu purple. Full code below:
#topnav {
clear: both;
background: url(nav-bg-orange.png) no-repeat;
height: 87px;
width: 962px;
padding: 6px 63px 6px;
}
#topnav ul {
list-style: none;
float: left;
}
#topnav ul li {
list-style: none;
float: left;
padding: 3px 0 0 0;
border-left: 1px dashed #f38739;
}
#topnav ul li:last-child {
border-right: 1px dashed #f38739;
}
#topnav ul li a {
float: left;
display: block;
color: #fff;
font-size: 14px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 15px 20px 15px 20px;
border: 0;
outline: 0;
line-height: 1;
list-style-type: none;
text-transform: uppercase;
}
#topnav li#active a,
#topnav li:hover a {
color: #fff;
background: #745b7c;
display:block;
border-radius: 5px 5px 0 0;
}
/****************************** flyout menus ******************************/
#wsite-menus .wsite-menu li a {
font-family: Tahoma, Geneva, sans-serif;
padding: 11px;
color: #fff;
background: #745b7c;
border: 0;
border-bottom: 1px dashed #9e89a4;
}
#wsite-menus .wsite-menu li:hover a {
color: #fff;
background: #8c7395;
}
You might want to try putting your
#wsite-menus
menu nested in element with class
.wsite-nav-3
In that case it should work correctly.
<li id="pg524622535697207710" class="wsite-nav-3" style="position: relative;">About <div id="wsite-menus"><div class="wsite-menu-wrap" style="position: absolute; left: -1118px; display: block; top: 47px;"><ul class="wsite-menu" style="display: block;"><li id="wsite-nav-977240454937878932" style="position: relative;"><span class="wsite-menu-title">Hatha Yoga</span></li><li id="wsite-nav-788960178245244400" style="position: relative;"><span class="wsite-menu-title">Yin Yoga</span></li><li id="wsite-nav-226130023988115977" style="position: relative;"><span class="wsite-menu-title">Yoga for Men</span></li><li id="wsite-nav-104813911397431638" style="position: relative;"><span class="wsite-menu-title">Prenatel Yoga</span></li><li id="wsite-nav-176000207649938754" style="position: relative;"><span class="wsite-menu-title">Private Classes</span></li><li id="wsite-nav-558168910269966978" style="position: relative;"><span class="wsite-menu-title">Yoga for Business</span></li></ul></div></div> </li>
I haven't checked it on my own, but there's a good chance it's OK.
I asked a friend to take a look at this for me. In ordre to fix the menus I needed to change the javascript that currently animates the sub-menus. Unfortunately, because I'm using a Weebly based template I can't access this code to change it. So looks like a dead-end.
Excuse me. Are you new to CSS?
All you have to do is use UL:HOVER. That's because you're removing your mouse from the LI. So use UL as the trigger. Even if you change LIs, the UL won't go off. :)
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 have these CSS definition for my buttons:
nav ul li a {
display: block;
margin-right: 0px;
font-size: 19px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: white;
/* border:1px solid red; */
}
In Internet Explorer 10, it gets a grey background when clicked. Why?
Just add a:active { background: none; } to your stylesheet.
Internet Explorer 10 seems to display links (anchors: i.e. <a href>), which has the property display:block; with a grey background when clicked.
You can remove this easily by inserting background-color:none; into your code. So, you should have the following code:
nav ul li a {
display: block;
margin-right: 0px;
font-size: 19px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: white;
/* border:1px solid red; */
background-color:none;
}
On the positive, the problem should be removed. Two negatives include that, you cannot set a background, or have an active state in Internet Explorer (i.e. a:active). Other browsers will continue to work perfectly normal/fine.
Still we could not understand what about the question is? Which background color is gray? You didn't provide your html too. I guess this bit of code would help you to change or remove the color of the links will change the behavior in each states...
a:link {color:red;}
a:visited {color:green;}
a:hover {color:blue;}
a:active {color:yellow;}
With this four colors you could check yourself and come to the conclusion... :)
This menu is on an ASP.NET navigation. On Chrome and Safari, it looks like this:
But on Internet Explorer, it looks fine:
Here's my CSS:
div.hideSkiplink {
background-color: #000;
width: 100%;
display: block;
height: 42px;
font-size: large;
font-weight: bold;
background: transparent url('../images/redslate_background.gif') repeat-x left top;
font-family: 'Times New Roman' , Times, serif;
text-transform: uppercase;
color: #000000;
}
div.menu ul {
position: absolute;
margin: 0px;
padding: 0;
list-style-type: none;
width: auto;
}
div.menu ul li {
display: block;
float: left;
margin: 0 1px 0 0;
}
div.menu ul li a {
display: block;
float: left;
color: #000000;
text-decoration: none;
padding: 14px 22px 0 22px;
height: 42px;
}
div.menu ul li a:hover, div.menu ul li a.current {
color: #fff;
background: transparent url('../images/redslate_backgroundOVER.gif') no-repeat center top;
}
Somehow, on Chrome and Safari, the menu seems to be below the background. How can I fix it?
Sadly, this is a regular problem in Internet Explorer. Web Developers hate it so bad because that always happens! Nevertheless there are certain rules that you should follow If you want your site to be open from all web browsers. Please take a look at this: Internet and CSS issues
There are hundreds of articles related to this topic so you should google things like
IE and CSS compatibility
IE and CSS issues
It is evident that you have been struggling with margin-top issue. Hence you can use margin-top:10px and top:10px CSS property interchangeably.
It seems that you have used, margin: 0 1px 0 0. Hence, now you should also add top:10px CSS property to adjust your menu. For more detailed help, also paste your HTML code, so that i can give you example...