I have a problem some of my links keep moving a couple of pixel on hover does anyone know a fix for this.
Currently me code is like this
<a class="read-more-link" href="/what-to-do-now/week49/flowers-checklist/">See all Flowers jobs</a>
the css
a:hover{
border-bottom:1px solid #000;
}
a{
color: #172D02;
font-weight: bold;
text-decoration: none;
}
.checklist .read-more-link:first-letter {
text-transform: uppercase;
}
.checklist .read-more-link {
clear: both;
display: block;
float: left;
line-height: 1.1;
text-transform: lowercase;
background: url("/images/double_arrow.png") no-repeat scroll left center transparent;
padding-left: 14px;
}
This is because you have border-bottom set on hover.
Therefore this is adding a 1px border underneath your link when it is hovered over. This can affect the position of other relative elements.
Change this to text-decoration:underline; or add a hidden border-bottom to the standard style:
a {
border-bottom:solid 1px transparent;
}
write
a:hover{
text-decoration:underline;
}
in place of
a:hover{
border-bottom:1px solid #000;
}
and remove this there is no need of it
.checklist a, .checklist a:visited {
border-bottom: 0 none;
position: relative;
}
You can add one empty container like below, on top:
<div class="container" style="height:5px"></div>
Related
I have menu when I mouseover li is wiggling little bit. How stop that wiggling.
code is here
JSFiddle
The simplest way to get rid of that is to modify the css like this:
.inner LI {
border: 1px solid transparent;
padding: 0.25em 1.75em;
font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 90%;
}
If I got it right, you want to remove the shaking on hover. To do that remove the border
.inner LI:hover {
background: #eee;
-webkit-backface-visibility: hidden;
}
This would be the code that needs changing. If you really want the border style, add box-shadow instead to achieve the same effect.
Hope it helps.
The wiggling property is because of the border added while there is an :hover event on the .inner li
Correct CSS:
.inner LI:hover { background: #eee; -webkit-backface-visibility: hidden;}
Code updated: JSFiddle
Line 59 in Index.html change from:
.inner LI:hover
{
border: 1px solid #ddd;
background: #eee;
-webkit-backface-visibility: hidden;
}
to:
.inner LI:hover
{
background: #eee;
-webkit-backface-visibility: hidden;
}
In your .inner LI:hover class, you have set border: 1px solid #ddd;.
However, your .inner LI class has no border, or 'a border of 0px'.
To remedy this situation, try adding border: 1px solid transparent; to your .inner LI class.
I want to apply a link selector hover effect which includes bottom border underline in an unordered list. Really, I know I can do a simple underline using a border-bottom: #FFFFFF solid 2px;, but I'd like to make a custom underline with box-shadow effect. So I have two issues.
my border is showing up all the time, not just when I hover.
When I tried to add a box shadow to my .underline class it goes around the whole list item and does not create a separate line. I guess we can get to this item later.
MY CSS CODE
li {
margin: auto 0px 20px auto;
font: 1em 'Bookman Old Style', Georgia, Garamond, ‘Times New Roman’, Times, serif;
color: #FFFFFF;
}
li a {
text-decoration: none;
color: rgba(255,255,255,0.5);
display: block;
}
li a:hover .underline {
cursor: pointer;
text-decoration: none;
color: rgba(255,255,255,1);
}
.underline {
border-bottom: #FFFFFF solid 2px;
}
MY HTML CODE
<ul>
<li><a class="underline" href="http://www.sitepoint.com/">SitePoint.com</a></li>
<li>Revealing CSS3 Menu</li>
</ul>
I would really like to be pointed to a comprehensive article about how to build rich HTML elements via CSS specfically using :before and :after and being able to use multiple classes on one selector in CSS properly.
Here is a JSFiddle of what I have (broken) http://jsfiddle.net/jellis3d/a8svpwr4/2/. Also here is a picture of what I'm after. I really exaggerated the underline in order to show what I'm looking for. The line does not have to have rounded edges either.
You could do it by apply border-bottom to .underline:hover and box-shadow and display: inline-block; to li a tag.
JSFiddle - DEMO
HTML:
<ul>
<li><a class="underline" href="http://www.sitepoint.com/">SitePoint.com</a>
</li>
<li>Revealing CSS3 Menu
</li>
</ul>
CSS:
body {
background: gray; /* only for demo */
}
li {
margin: auto 0px 20px auto;
font: 1em'Bookman Old Style', Georgia, Garamond, ‘Times New Roman’, Times, serif;
color: #FFFFFF;
}
li a {
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
display: inline-block;
box-shadow: 0px 5px 5px #000;
}
li a:hover .underline {
cursor: pointer;
text-decoration: none;
color: rgba(255, 255, 255, 1);
}
.underline:hover {
border-bottom: #FFFFFF solid 2px;
}
i have made a basic demo on js fiddle showing what i think your after
jsfiddle link
it uses the below css which im sure you can then see what i did and make it into what your after.
li a{
color:blue;
text-decoration:none;
}
li a:hover{
color:red;
border-bottom: black solid 1px;
box-shadow: 10px 10px 5px #888888;
}
You want to add a box-shadow effect on hovering, right? You don't need to use an extra element like .underline then. Just add it to li a:hover
li a:hover {
cursor: pointer;
text-decoration: none;
color: rgba(255,255,255,1);
box-shadow: 0 1px 0 0 rgba(0,0,0,1);
}
You can read more about pseudo-elements like :before and :after on W3C: http://www.w3schools.com/css/css_pseudo_elements.asp
I made a small demo with your code using :before on hover: http://jsfiddle.net/m9czpzs5/
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 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... :)
I am having a problem with the following code. I cannot pad the logo (x12creatiΩns) down from the top. I have tried top:10px as above but it doesn't do anything.
HTML
<div id='header'>
<span id='logo'>
x12creatiΩns
</span>
<span id='sublogo'>Just another portfolio...</span>
</div>`
CSS
span#logo {
font-size:2.2em;
color: black;
padding-left:10px;
text-shadow:0px 1px 0px white;
top:10px;
}
a#logo {
text-decoration: none;
color: black;
}
a#logo:hover {
padding-top:10px;
text-decoration: none;
color: #555;
}
div#header {
background-color:#DDD;
width:100%;
height:44px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#CCC;
}
Try taking off the a
Like this
#logo:hover{}
Or if you need to acces the anchor try this
#logo a:hover{}
add display: inline-block to your a#logo - http://jsfiddle.net/tmaHx/1/ - and then you can use margins/paddings
a#logo {
text-decoration: none;
color: black;
display: inline-block;
margin-top: 20px
}
Add display:inline-block to your span#logo declaration and and just add some top margin and that should work. Also, you're repeating your "logo" ID twice; Once in your span tag and again in your logo a tag, that won't validate.
because a is an inline element you have to add display:block; then you can add margins and paddings !