I have a problem with the css for my web page. Basically, I want to make it so when you hover over one of the links in the navigation bar, it puts a border around it. So, this is what I made:
a
{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
}
a:visited
{
font-weight: bold;
color: #4096ee;
text-decoration: none;
}
a:hover
{
font-weight: bold;
border-radius: 5px;
color: #4096ee;
padding: 4px;
border: solid 2px;
border-color: #303030;
text-decoration: none;
}
a:active
{
font-weight: bold;
color: white;
text-decoration: none;
}
And then I have 4 links on the same line with 4 &emsp in between them. Now, whenever I hover over a link, the border appears, but it kind of nudges the other links over to make space for the border. Is there any way I can stop this from happening?
why dont you put a border on the items and make it the same color as your background and simply change color on hover
try adding box-sizing : border-box to your css. This would make the border to go inside the element.
Change your CSS like this:
a
{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
border-radius: 5px;
padding: 4px;
border-color: transparent;
}
This way there will be no nudging.
You can just add a padding to the regular links. The hover state will override the regular padding and add the border.
a {
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
padding: 6px;
postion: absolute;
}
http://jsfiddle.net/5dQL5/
a{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
border: 2px solid transparent;
}
Just add a border with the same width (in your case 2px) but make it transparent and that's all.
Add default 2px border to anchor tag, but make it tranparent. So it will not visible at first time when page is loaded. Then when you hover any anchor tag, change the border-color to #303030
Try this code
a{
border: 2px solid transparent;
}
a:hover{
border-color: #303030;
}
Related
I have a button which displays a bottom border when hovering over it.
I want to reduce the length of the bottom border using CSS without changing the interactable size of the button. (Imagine the purple border only stretching to the length of the word) My current CSS is:
.storybook-button {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
cursor: pointer;
display: inline-block;
line-height: 1;
padding: 15px 25px;
color: #333;
background-color: transparent;
border-bottom: 5px solid blueviolet;
}
<div class="storybook-button">Button</div>
Any help would be appreciated!
Use background instead of border.
.storybook-button {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
cursor: pointer;
display: inline-block;
line-height: 1;
padding: 15px 25px;
color: #333;
background-color: transparent;
background: linear-gradient(blueviolet 0 0) center bottom / 100% 5px no-repeat;
transition: 0.3s linear;
}
.storybook-button:hover {
/* border-width border-height */
background-size: 50% 5px;
}
<div class="storybook-button">Button</div>
I have this element:
.container {
font-size: 14px;
line-height: 20px;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.link {
color: #3072c4;
cursor: pointer;
}
.counter {
display: inline-block;
min-width: 9px;
padding: 0 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
<span class="container">
<span class="link">
Feedback
</span>
<span class="counter">166</span>
</span>
Its height must be 17px, horizontal padding should be 4px and font size should be 12px. It looks like a prototype in Chrome and Firefox:
But there is a problem in Internet Explorer:
It lowers the text inside, it is not well aligned vertically. If I set line-height and width of element to 18px (as well as every other even value), everything is OK, but I need 17px. How to avoid text lowering in IE?
You can add a specific style for IE. You can try this:
.container {
font-size: 14px;
line-height: 20px;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.link {
color: #3072c4;
cursor: pointer;
}
.counter {
display: inline-block;
min-width: 9px;
padding: 0 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE Edge 12+ CSS styles go here */
.counter {
display: inline-block;
min-width: 9px;
padding: 0px 4px 1px 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
}
<span class="container">
<span class="link">
Feedback
</span>
<span class="counter">166</span>
</span>
I have a button for my page that I'm also styling it
<button id="logButton" >Iniciar sesión</button>
And then the css code
#logButton
{
width:119px;
margin-bottom: 5px;
padding-top: 3px;
margin-left:35%;
height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
Here's a fiddle also.
If I add the bootstrap class btn it doesn't do that and neither the font size nor the width of the button changes, my question is what does bootstrap do to keep text in place?
It's a natural behavior of an element, with fixed height and width, content will always overflow,it's better to use min-width and min-height.
#logButton
{
min-width:119px;
margin-bottom: 5px;
padding-top: 3px;
margin-left:35%;
min-height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
<button id="logButton" >Iniciar sesión Iniciar sesión</button>
and If you want to know about bootstrap's .btn here is css:
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
#logButton
{
/* Removed height & width*/
padding: 10px 20px; /* Added */
margin-bottom: 5px;
margin-left:35%;
font-weight: bold;
font-size: 31px;
font-family: helvetica, arial, sans-serif;
}
Don't hardcode a width. Using padding on the left and right sides. Here you go.
#logButton
{
padding: 3px 15px 0 15px;
margin-bottom: 5px;
margin-left:35%;
height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
if you want to hide overflow of text then use {overflow:hidden} is css code.
if you want to keep text but not want to increase with then use {height:auto}
I've got a problem with some css. I have 2 buttons, one is an href and one is a form. The hover works on the form button but not on the href button.
.ims-button, .ims-button a:link, .ims-button a:visited {
background-color: rgb(255, 204, 0);
border: 1px solid #999;
border-radius: 5px;
box-shadow: 2px 2px 2px #999999;
font-family: Ubuntu, Arial, "Arial Unicode MS", Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
padding: 5px;
vertical-align: middle;
margin-bottom: 4px;
margin-left: 4px;
color: #000000;
text-decoration: none;
}
.ims-button:hover, a.ims-button:hover, .ims-button a:hover {
background-color: rgb(255, 204, 0);
border: 1px solid #999;
border-radius: 5px;
box-shadow: none;
font-family: Ubuntu, Arial, "Arial Unicode MS", Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
padding: 5px;
margin: 4px 0 0 4px;
vertical-align: middle;
}
I cannot see why the href isnt working.
The site: http://goo.gl/pl7DFR
Once on the site, under the grey box with the photo in you can see the Add to cart link - click that and you'll see the 2 buttons - Checkout doesnt work, Add to Basket does...
Any ideas?
You're attempting to apply margin to an inline (the "a") element, which isn't possible. Change the checkout link to
display: inline-block;
and you'll get quite a bit closer to what you're expecting.
See https://stackoverflow.com/a/5700058/2517689 for more information on inline behavior.
Can someone help me find the error when I tried to display the list in one line but it didn't do it.
#main-nav ul ul li { display: inline; }
But the text is not displaying line. Please take a look jsfiddle.net/EZJwM
I changed the
display: inline
to
float:left
and got this http://jsfiddle.net/EZJwM/5/
The menu isn't centered but they display in one line.
solution to your problem js fiddle demo
i change display:block to display:inline to get it on one line but you have
to work it out considering you style design i think for main-nav you should use css classes
to avoid intersection on what you exactly want otherwise you will get all so fuzzy
change 1
#main-nav ul li{ display: inline; }
change2
#main-nav a:after {
color: #aeaeae;
content: attr(data-description);
font-size: 11px;
font-style: italic;
font-weight: 400;
display: inline;
line-height: 0;
margin: 3px 0 -3px;
text-transform: lowercase;
}
change 3
#main-nav ul ul a {
border: 0;
border-bottom: 1px solid #252525;
border-top: 1px solid #4c4c4c;
color: #fff;
display: inline;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 11px;
letter-spacing: 0;
font-weight: 400;
padding: 8px 20px !important;
text-align: left;
text-transform: none;
}