When you hover the sentence, the bottom-border isn't a crisp 1px line, like when you hover over photography. I've set margin:0; and padding:0; also. http://imdarrien.com/#
.project-link-1 {
display: inline;
text-align: left;
margin-bottom: 14px;
}
.project-link-1 a:hover {
border-bottom: 1px solid #000;
}
.project-link-1 > a {
font-family: 'NimbusSansNo5TOT-Regular';
border-bottom: 1px solid transparent;
font-size: 13px;
line-height: 16px;
word-spacing: 2px;
text-decoration: none;
color: #000;
}
It's because you use transform with percentages. Your content gets antialiased. You could try to remove the transform from .project_miniwrap or position it pixel perfect.
Related
I'm experiencing a strange hover behavior on a link inside a list in Chrome.
I've managed to replicate the issue in this jsFiddle copying the whole html and css from the website.
The problem is on the first element of the side menu, which is the link with "Maria Montessori" in it. What happens is that the hover area is like interrupted in the middle, where the text is. It's like there is something covering the middle part of the button. Try it yourself to understand what I mean.
The relative code is this:
<ul class="page-menu">
<li class="page_item page-item-30">Maria Montessori</li>
<li class="page_item page-item-32">La pedagogia scientifica</li>
...
And the css:
.page-menu {
display: inline-block;
margin-right: 25px;
text-align: center;
width: 210px;
li {
margin-bottom: 10px;
}
li.current_page_item {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
li.current_page_parent {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
a {
background-color: $grey-light;
border-bottom: 2px solid $grey-light;
color: $grey-dark;
display: block;
font-family: Lato;
font-weight: 300;
line-height: 1.2;
padding: 15px 20px;
text-decoration: none;
text-transform: uppercase;
&:hover {
background-color: $blue-light;
border-bottom: 2px solid $blue-dark;
color: white;
font-weight: 400;
}
}
ul.children {
margin-top: 10px;
li {
margin-bottom: 10px;
margin-left: 10px;
}
li a {
background-color: #f9f9f9;
border-bottom: 2px solid #f9f9f9;
color: $grey-dark;
display: block;
font-family: Lato;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
&:hover {
background-color: $blue-light;
border-bottom: 2px solid $blue-dark;
color: white;
font-weight: 400;
}
}
li.current_page_item {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
}
.page_item_has_children > .children {display: none;} /*hides the submenu*/
.page_item_has_children.current_page_item > .children,
.page_item_has_children.current_page_ancestor > .children {display: block;} /*shows the submenu for the current page or when on its subpages */
}
Inspecting it with developer tools didn't really help and what's strange is that the issue appears to be only on the first element. And in Firefox works fine, anyway.
Your div menu-menu-1-container is overlapping to your first menu because of line height property of your div .nav-menu use padding instead
.nav-menu {
padding: 17px; /* remove line-height property */
}
Updated working Code
I am trying to set a fixed bar menu in my webpage, with with a transition, not an instant transition, but a 1s transition. Here I leave the code
http://jsfiddle.net/t2fPk/
.sf-menu {
border-bottom: 3px solid #333;
background: #000;
position: relative;
padding: 0;
width: 100%;
}
.sf-menu > li {
border-right: 1px solid #333;
margin-bottom: -3px;
float:left;
}
.sf-menu > li > a {
border-bottom: 0px;
color: #B3B3B3;
font-family: 'Handlee', cursive;
font-weight: 500;
font-size: 28px;
text-transform: none;
font: 600 18px/22px "Open Sans", sans-serif;
color: #484848;
display: block;
padding: 17px 20px;
}
Something like this, but i can't get it
http://jsfiddle.net/ShL4T/8/
What kind of transition are you trying to do? I added a simple background color change to yours, fiddle
.sf-menu {
border-bottom: 3px solid #333;
background: #000;
position: relative;
padding: 0;
width: 100%;
}
.sf-menu > li {
border-right: 1px solid #333;
margin-bottom: -3px;
float:left;
}
.sf-menu > li > a {
border-bottom: 0px;
color: #B3B3B3;
font-family: 'Handlee', cursive;
font-weight: 500;
font-size: 28px;
text-transform: none;
font: 600 18px/22px "Open Sans", sans-serif;
color: #484848;
display: block;
padding: 17px 20px;
background-color:green;
}
.sf-menu > li > a:hover{
transition: background-color 1s ease;
background-color: red;
}
Here is a nice article on CSS transitions that should help http://css-tricks.com/almanac/properties/t/transition/
If you want to do nice animations I recommend looking into the javascript library Greensock. It's really fast and does a nice job of animation.
Noticing your class tags I'm guessing you might be using the Superfish navigation plugin.
If so, the best way to animate would be done inside their JavaScript file. Here's a link to the documentation:
http://users.tpg.com.au/j_birch/plugins/superfish/options/
The animation ones you want to use are:
speed: 'normal'
speedOut: 'fast'
I want to align an addition(plus) mark and text next to it, however, since the "+" is too small, it is enlarged with a tag. This causes the character to become too big, making it hard for me to align them. How would I align the + character and Text evenly next to each other?
This is the code:
http://jsfiddle.net/rs75V/
Have you tried
vertical-align:middle;
or
vertical-align:-10%;
? This looks all right to me.
Try playing around with this:
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
I think it's what you're looking for, it has a ton of different ways to move text alignment up or down.
It's hackish, but this should work.
a{
font-family: arial, sans-serif;
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
border-bottom: 1px solid #BBB;
color: #333;
padding: 4px 10px;
text-align: center;
text-shadow: 0 1px 0 #EEE;
font-weight:bold;
font-size:20px;
line-height:40px;
display:inline-block;
cursor:pointer;
}
span{
font-size:40px;
vertical-align:-15%;
}
Try floating your a and span.
a{
font-family: arial, sans-serif;
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
border-bottom: 1px solid #BBB;
color: #333;
padding: 4px 10px;
text-align: center;
text-shadow: 0 1px 0 #EEE;
font-weight:bold;
font-size:20px;
cursor:pointer;
line-height: 40px;
float: left;
}
span {
font-size:40px;
float: left;
margin: 0 .1em 0 0;
}
You can display the span as an inline-block and then use padding on it...
a{
font-family: arial, sans-serif;
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
border-bottom: 1px solid #BBB;
color: #333;
padding: 4px 10px;
text-align: center;
text-shadow: 0 1px 0 #EEE;
font-weight:bold;
font-size:20px;
display:inline-block;
cursor:pointer;
}
span{
font-size:40px;
line-height: 0;
display: inline-block;
padding-bottom: 9px;
}
Try this:
span {
font-size: 40px;
line-height: 0;
vertical-align: middle;
}
This css is causing the text to shift upwards in Firefox when rolled over but not in other browsers
#element{
height:40px;
}
#element a,img{
vertical-align:middle;
}
#element a{
font-size:16px;
color:#d1d1d1;
text-decoration:none;
}
#element:hover a{
border-bottom: #fff 1px dotted;
}
Makes sense to me. You are adding a border of 1px width. This will change the dimensions of the element. A simple solution is to have a permanent border and just change its color:
#element a {
font-size: 16px;
color: #d1d1d1;
text-decoration: none;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: transparent;
}
#element:hover a {
border-bottom-color: #fff;
}
Add display: inline-block; and margin-bottom: -1px; to compensate for the extra pixel on the bottom on hover.
#element:hover a{
border-bottom: #fff 1px dotted;
margin-bottom: -1px;
display: inline-block;
}
I have a menu that needs a dotted border on hover, is it possible to stop it nudging the list items to the right on hover?
http://jsfiddle.net/mkTvp/
It will be in a CMS so I can't set a width on the LI's
Give the items 2px transparent borders: http://jsfiddle.net/mkTvp/1/
Just add a border to the original style the same color as the background:
li {
display: block;
float: left;
padding: 3px;
border: 2px solid #fff; /*same as background color*/
}
Example here.
a {
background-color: #F78F1E;
color: #fff;
display: block;
font-family: helvetica, sans-serif;
font-size: 0.688em;
font-weight: bold;
padding: 12px 12px;
text-decoration: none;
text-transform: uppercase;
width: auto;
}
li {
display: block;
float: left;
padding: 1px;
border: 2px solid white; /** Same as background-color */
}
li:hover { border: 2px dashed #F78F1E;}