I am sure others might have experienced the same problem, but not only am I new to CSS, English is also not my main language, and therefore I don't really know how to go about researching on how to solve this issue. I don't know what to call this situation. Basically, upon hover, the text slightly moves instead of staying where it belongs. I am assuming I am doing something wrong with paddings. But I know that it is possible to have this "button" effect, as in, the background color of the hover effect having that size, but I really can't figure out a solution... I have been hours and hours trying different methods but no success. I am also not sure if I am styling the links properly. Can someone help please?
Here's my navbar CSS code below:
.nav-items {
display: flex;
transform: translateX(0px);
margin-right: 5%;
}
.nav-items li {
list-style: none;
padding: 25px;
}
.nav-items a {
color: white;
text-decoration: none;
letter-spacing: 1px;
font-size: 14px;
}
.nav-items li a:hover {
background-color:#006aff;
padding: 20px;
transition: 0.2s ease-in-out;
}
As I can see you are adding the padding in the hover state.
Your code should be like this the way you have described you want to show the navigation items.
.nav-items a {
color: white;
text-decoration: none;
letter-spacing: 1px;
font-size: 14px;
padding: 20px;
transition: 0.2s ease-in-out;
}
.nav-items li a:hover {
background-color: #006aff;
}
Related
Have the following class
.home-cards a {
display: inline-block;
padding-top: 10px;
text-transform: uppercase;
font-weight: bold;
}
.home-cards a:hover {
font-size: 16px;
color: red;
}
Am trying to add a transition/transform to either the font-size or color in order to make the hover effect less jerky. Have been unable to find anything that discusses those two elements in regards transition. Any help would be appreciated as this is a non-commercial project for big Sis's recipe site ... yeah the net needs another one of those but in her defense non-gluton recipes only.
Sorry forgot to mention the font-size is 12px and font-color is a sort of grey if not hovered over
I just added these lines and hope it helps you:
font-size: 12px; (To set the font size)
transition: .5s font-size, 1s color; (Means 0.5 seconds to changing the font-size and 1s to changing the color of the link)
color: grey; (To change the text color)
text-decoration: none; (To remove the underline of the link)
.home-cards a {
display: inline-block;
padding-top: 10px;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
transition: .5s font-size, 1s color;
color: grey;
text-decoration: none;
}
.home-cards a:hover {
font-size: 16px;
color: red;
}
<div class="home-cards">
Test
</div>
You can choose which properties you want the transform to apply to.
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
a {
font-size: 12px;
color: grey;
transition: font-size 0.5s ease, color 0.5s ease;
}
a:hover {
font-size: 16px;
color: red;
transition: font-size 0.5s ease, color 0.5s ease;
}
My Link
If you have a different element tag inside of your anchor tag for example:
<p style="display: inline; margin: 0;">test</p>
Try different css selector:
.home-card a:hover p{
font-size: 14px;
color: red;
}
You may want to remove extra margin from p tag...and make it display inline since p tag is a block-level element.
StackOverflow Community!
I have a problem with my Website where I am hovering over an item on my navigation bar, and it doesn't cover the full spot I intend for it to cover. For those moderators who keenly notice that this question is answered Here and Here as well, it isn't applicable in my situation since one is a span tag, and the other is a vertical dropdown, not a horizontal navigation bar. Attached below is a screenshot of the problem.
The effect I intend is to get the background right to the edge of the top and bottom, and pushing the background to the edge of the right and left
I've tried playing around and looking online, but the answer that is most consistent is:
Use display: block
Which would mess up the flow of the navigation bar if I were to implement it. Can someone point me in the right direction?
CSS used to style the nav bar and it's elements:
nav {
text-align: center;
background-color: black;
}
nav ul {
list-style-type: none;
padding: 10px;
}
nav li {
display: inline-block;
transition: background-color 0.3s ease-in-out 0s;
}
nav li:hover {
background-color: lightgrey;
}
nav a {
text-decoration: none;
color: white;
}
NOTE:The issue is with me adding some padding to the ul element, I understand that. I am just not sure how to circumvent it without screwing the navigation bar
Just put the padding on the li instead.
nav {
text-align: center;
background-color: black;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline-block;
transition: background-color 0.3s ease-in-out 0s;
padding: 10px;
}
nav li:hover {
background-color: lightgrey;
}
nav a {
text-decoration: none;
color: white;
}
<nav>
<ul>
<li><a>One</a></li>
<li><a>Two</a></li>
</ul>
</nav>
My button text appears on one line in safari (even after initial click) however on google chrome my button will appear on one line when you first get to the button however when you go through more posts and come across the load more button again the text is messed up. This only happens on google chrome.
when you get to the load more button the first time..
when you get to the load more button the second time..
here is my css... i've tried adding in width, although it solves the issue the button is then not centered
.elm-wrapper {
margin: 1em auto;
text-align: center;
}
.elm-button {
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
background-color: #ffffff;
text-shadow: none;
box-shadow: none;
border: none;
padding-top: 45px;
padding-bottom: 25px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 19px;
color: #848484;
outline: none;
}
.elm-button.ajax-inactive {
display: none;
}
.elm-button.is-loading .elm-button-text {
display: none;
}
.elm-loading-anim {
display: none;
}
.elm-button.is-loading .elm-loading-anim {
display: block;
}
.elm-loading-icon {
width: 1.5em;
height: 1.5em;
}
.elm-button:not(.is-loading)::before {
content: "v";
font-size:11px;
float: right;
margin: 6px 0 0 16px;
font-family: 'Days One', sans-serif;
}
Would you like to try using:
.btn {
white-space: nowrap;
text-align: center;
}
While white-space: nowrap force the text in the button to never wrap, you can also make the button display as inline-block, so you don't have to give it a specific width.
You can just use non-breaking space ( ) between words in your html. It's rough but works in any browser.
Also better to set left and right paddings inside the button.
I am working on a new button styles and currently facing a challenge: my <button> CSS :hover selector is not behaving as expected.
All attempts to making it work have proven futile.
How can I possibly achieve that effectively?
Below is my code:
.button_depression {
background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif)
no-repeat;
border: 0;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;
}
.button_depression:hover {
background-color: #959595;
}
Simply use background for your hover; not background-color as illustrated in the snippet below:
.button_depression:hover {
background: #959595;
}
Brief summary:
background CSS property is a shorthand to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.
When working without the shorthand, the background-image property supersedes background-color and as such, setting background-color alone without abnegating it (background-image) will result in its precedence.
In other words, background-image: none; in combination with background-color: #959595; will work. (Refer to snippet below)
.button_depression:hover {
background-color: #959595;
background-image: none;
}
(background-image: unset; works well too, but can't tell if supported by all browsers)
Note that you can be achieved the same, using the background shorthand, simply as above, with background: #959595; (which I prefer: simple, less verbose, same result).
More details here ....
You can't see the button hover changing the background color due to the background image. You can set the button image to None on hover and then change the color. This might be what you want. Alternatively you can just set background to the background color you wanted. Your preference how you want to acomplish this.
.button_depression {
background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif) no-repeat;
border: 0px;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;
}
.button_depression:hover {
background: None;
background-color: #959595;
}
I am trying to sort out my navigation div. I am having a whole variety of problems and I have been trying to sort them out for hours. I am a rookie programmer so please forgive me.
First here is a snap of my css
#navigation {
background: rgba(109, 183, 229, 1);
display: block;
position: static;
height: 40px;
width: 96%;
padding: 1% 2% 0% 2%;
clear: both;
border-style: solid;
border-color: #31679a;
border: 0% 0% 1% 0%;}
The border isn't behaving, because it is displaying it all the way around even though I clearly specify 0% for 3 sides. (SOLVED: changed to border-width, and changed % to px as border doesn't allow %)
Next I can't seem to center it perfectly in the middle. I've tried all sorts of things, but I can't seem to get it to function properly. (SOLVED: Magesh and Adam both provided good solutions to this problem, however Adam's achieved my desired results much easier)
I can't seem to get it to not be squeezed when resizing the window. This used to work, but after a couple of changes, it has stopped. I want it to disappear when the width is too small.
I feel like this will be a silly question, and the answer will be a small % here and there I have overlooked. But it is becoming very frustrating. (You may also notice the main body is overflowing over the border I've put at the bottom - no idea why). I will be extremely greatful for any help here.
EDIT: Sorry, I forgot to add. View it here: www.dweeman.com/eb/sitetemplate.html
EDIT: I've created this fiddle for you
NOTE: This answer is for your centering problem
HTML:
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Gallery</li>
</ul>
CSS
ul{
display:table;
width:100%; /*This ensures that the element covers the entire width*/
text-align:center; /*To center the text*/
list-style:none; /*Remove the bullets*/
margin:0; /*Remove margins*/
padding:0; /*Remove extra padding*/
}
ul li{
display:table-cell;
}
See here for example -> Click here
Warning : This is just for example, you could style this better.
Direct Solution: Replace this code with the code on your website,It'll work perfectly :)
#ddmenu {
display: table;
width: 100%;
text-align: center;
background: #31679a transparent;
border-radius: 0.125em;
cursor: pointer;
color: #8aa8bd;
}
#ddmenu li{
display: table-cell;
font-size: 1.20em;
text-shadow: 1px 1px 0 #fff;
border-right: 0px solid #dae0e5;
}
#ddmenu li a {
display: block;
padding: 0 0.750em;
line-height: 1.40em;
font-weight: bold;
text-decoration: none;
color: #31679a;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
If you remove the width:100% from the #ddmenu and then put a text-align:center on #navigation that should centre the menu.
To make it stop scaling down at a certain width you can use a min-width
#navigation {
min-width:700px;
}
To make it completely disappear at a certain width you can use a media query in your css. Insert it at the end of your main css.
#media only screen and (max-width: 700px){
#navigation {
display:none;
}
}