This question already has answers here:
CSS hover border makes elements adjust slightly
(14 answers)
Closed 2 years ago.
I am trying to keep on the position when it creates borders of the list elemants on the menu.
When i do border box is looks "it is not working" (ı am sure it is , but i cant see it )
Here is the my basic Html Code
<div class="menu-bar">
<ul>
<li>Anasayfa</li>
<li>Hakkımızda</li>
<li>Kadromuz</li>
<li>Çalışma Alanlarımız</li>
<li>Vekalet bilgileri</li>
<li>İletişim</li>
</ul>
</div>
Here is my Css Code
.menu-bar{
width: 1000px;
height: 50px;
background-color:#212331;
box-sizing: border-box;
}
.menu-bar ul {
margin-top: 0px;
list-style-type: none;
}
.menu-bar li {
display: inline-block;
margin-left: 30px;
}
.menu-bar a {
font-family:'Open Sans', sans-serif;
font-weight: bold;
color:#ffffff;
text-decoration: none;
line-height: 50px;
padding: 15px 10px;
}
.menu-bar a:hover{
border:2px solid red;
color: #cf9452;
transition: 0.5s;
}
Here is the what is actually going on the page .
Instead of the border use this -
.menu-bar a:hover {
box-shadow: inset 0 0 0 2px red;
}
This should fix it for you
.menu-bar a {
border:2px solid transparent;
}
Related
This question already has answers here:
Add a CSS border on hover without moving the element [duplicate]
(4 answers)
Closed 2 years ago.
I want the links to stop having extra movements while hovering.
When I add 'position: absolute' to the links, that stops the unwanted movements.
But by doing so, the links jump out of the normal 'display:flex' flow.
Therefore, I prefer not to add 'position: absolute'.
What is the best way to stabilize links while hovering using 'Display: flex;'?
(HTML and CSS solutions only)
HTML
<!DOCTYPE html>
<html>
<head>
<link href="portfolio1.css" type="text/css" rel="stylesheet">
</head>
<body>
<section>
<h2 class="seperate">Topics</h2>
<ul>
<li ><a class="nav" href="#">HTML</a></li>
<li ><a class="nav" href="#">CSS</a></li>
<li ><a class="nav" href="#">Javascript</a></li>
</ul>
</section>
</body>
</html>
CSS
* {
margin: 10px auto;
}
body {
color: white;
font-family: Helvetica;
text-align: center;
}
h2 {
font-family: "Times New Roman";
border: 2px solid pink;
width:30%;
margin: 20px auto;
padding: 10px auto;
}
section {
background-color: #FF745C;
border-top: 5px dotted tomato;
margin: 10px auto;
height: 100%;
width: : 100%;
overflow: scroll;
/*display: flex;*/
}
section ul{
width: 100%;
margin: 0 auto;
list-style-type: none;
display: flex;
padding-left:0;
}
section ul li {
display: inline-flex;
margin: 10px auto;
}
a {
width: 100px;
height: 20px;
background-color: #FF9985;
border-radius: 5px;
color: white;
}
a:hover {
border: 1px solid #FF441F;
border-radius: 10px;
font-weight: 600;
transition: border, border-radius, font-weight 150ms ease-in;
}
If you add a border on hover that isn't present by default, this can change the element's dimensions. Try adding an invisible border by default so that only the color changes:
a {
border: 1px solid transparent;
}
a:hover {
border-color: #FF441F;
}
I solved your problem by editing style of a tag.
a {
width: 100px;
height: 20px;
background-color: #FF9985;
border-radius: 5px;
color: white;
border: 1px solid #FF9985;
}
h1{
text-align:center;
font-family: 'Nosifer', cursive;
font-size:35px;
}
nav {
border-top: 5px solid black;
padding:5px 5px;
text-align:center;
}
nav a:link,a:visited {
border-radius: 0 0 15px 15px;
padding:0px 15px;
}
nav a {
float: left;
font-weight: bold;
color: #000;
margin: 0 5px;
background-color: #131313;
font-family: 'Nosifer', cursive;
text-decoration: none;
font-size: 20px;
color:red;
}
nav a:hover {
background-color: #D10000;
color: black;
padding-top: 12px;
padding-bottom: 10px;
}
.active{
background-color: #D10000;
color: black;
padding-top: 12px;
padding-bottom: 10px;
}
body{
background-color: #ffe6e6;
}
<nav>
HOME
COMPUTER PARTS
BUILD A COMPUTER
MEDIA
GO TO MAIN
</nav>
Can anyone please help me. I tried to use align="center", text-align:center;
and I tried many other things but for some reason, it's not centering my nav bar in the center of my web page. Also when I tried to display an image at the bottom of the nav bar and center it, it does not center.
Without seeing your markup, it's hard to say. But probably because of float: left on nav a. Remove that from nav a, and add display: inline-block;.
You're not even positioning anything...
Use the properties top: value, left: value, right: value, and bottom: value to position your navigation bar. You can use these properties in combination with transform: translate(X, Y).
text-align will only align text within an element, if there is indeed text. If there isn't any text, it won't do anything.
You need remove 'float: left' from 'nav a' selector and re-write code following way:
nav a {
display: inline-block;
font-weight: bold;
color: #000;
margin: 0 5px;
background-color: #131313;
font-family: 'Nosifer', cursive;
text-decoration: none;
font-size: 20px;
color:red;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have quite a problem, I created a button that leads to an iTunes page.
When I did the CSS I had no problem until I noticed that I didnt link the button to the page. So when I did, I couldn't disable the underline of my text inside my button.
I worked my way through and now I'm stuck with a text that is not underlined and changes color when hovered as I wanted. Only thing is that the border doesn't change color at the same time as the text.
Example: I can hover (and thus change the color) my border without touching my text, and obviously this is not what I want.
Snippet :
.navigation{
background-color:#C5C5C5;
}
.btniTunes {
margin-left: 150px;
margin-top: 150px;
font-family: 'Roboto', sans-serif;
background-color: transparent;
border: 1px solid #ffffff;
display: inline-block;
cursor: pointer;
color: white;
font-size: 18px;
padding: 10px 18px;
text-decoration: none;
}
.btniTunes:hover {
background-color: black;
color: #E80C7A;
border: 1px solid #E80C7A;
text-decoration: none;
}
.btniTunes a {
text-decoration: none;
color: white;
}
<nav class="navigation">
<ul class="bouttons">
<div class="btnSite">
TO THE SITE
</div>
<div class="btniTunes">
TO THE ITUNES
</div>
</ul>
</nav>
So basically, I want to have a button that links to a page, with black background, white text and border, that has the text and border color that changes to #E80C7A when hovered and without underline on the text.
Just close the brackets in css:
.btniTunes {
margin-left:150px;
margin-top: 150px;
font-family: 'Roboto', sans-serif;
background-color:transparent;
border:1px solid #ffffff;
display:inline-block;
cursor:pointer;
color:white;
font-size:18px;
padding:10px 18px;
text-decoration:none;
}
.btniTunes:hover {
background-color:black;
color:#E80C7A;
border:1px solid #E80C7A;
text-decoration:none;
}
.btniTunes a {
text-decoration:none;
color: white;
}
and also if you want the <a> to cover the button, set its "display" to the block:
.btniTunes a {
text-decoration:none;
color: white;
display:block;
width:100%;
height:100%;
}
Here you are :)
Remove the padding from .btniTunes and add it to .btniTunes a and add display: block; to it.
.btniTunes {
margin-left: 150px;
margin-top: 150px;
font-family: 'Roboto', sans-serif;
background-color: red;
border: 1px solid #ffffff;
display: inline-block;
cursor: pointer;
color: white;
font-size: 18px;
text-decoration: none;
}
.btniTunes:hover {
background-color: black;
color: #E80C7A;
border: 1px solid #E80C7A;
text-decoration: none;
}
.btniTunes a {
display: block;
padding: 10px 18px;
text-decoration: none;
color: white;
}
.btniTunes:hover a {
color: #E80C7A;
}
<nav class="navigation">
<ul class="bouttons">
<div class="btnSite">
TO THE SITE
</div>
<div class="btniTunes">
TO THE ITUNES
</div>
</ul>
</nav>
I would like add a border-bottom that displays when I hover over it with the mouse. I want it to override the border underneath so it looks like it changes colour. An example of this can be found here http://www.formaplex.com/services (in the nav bar)
Here is a jsfiddle https://jsfiddle.net/ey006ftg/
Also, a small question: does anyone know why there is a small gap in-between the the links (can be seen when hovering from link to link) and how to get rid of it.
Thanks
Just add this to your css:
nav a {
border-bottom: solid transparent 3px;
}
Here's a jsfiddle with the above code: https://jsfiddle.net/AndrewL32/ey006ftg/1/
You can use a negative margin to overlay the border below, as shown:
nav {
border-top: 1px solid grey;
border-bottom: 3px solid black;
width: 100%;
font-size:0;
}
nav ul {
width: 1056px;
margin: 0 auto;
text-align: center;
width: 1056px;
}
nav ul li {
display: inline-block;
width: 17%;
}
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
}
nav a:hover {
color: orange;
transition: 0.2s;
border-bottom: solid orange 3px;
margin-bottom: -10px;
}
a {
color: black;
text-decoration: none;
outline: 0;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
As for fighting the inline gap, seeing as you defined a font-size later for the a tag, I would just add a font-size:0, which I added to nav in the above Snippet.
fiddle demo
Simply set your default border to transparent - change color on hover
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: solid transparent 3px; /* add this! */
transition:0.3s; /* or even this :) */
}
Try this fiddle
To set border-bottom the way you want, you have to add border to anchor tag like this:
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 3px solid black;
}
and to make sure the space between menu items is gone use a little fix adding negative margin to your li tags inside menu like this:
nav ul li {
display: inline-block;
width: 17%;
margin-right: -4px;
}
I have this select that is behaving strange on IE9.
First of all links that should open wiki page not working only on IE9 browser and second problem is on hover, why when cursor pass over help and log off the icon is overridden by hover background color?
<ul id="main">
<li class="username" tabindex="1" > <a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">LogOff</li>
</ul>
</li>
</ul>
CSS:
ul#main {
color: gray;
width: 120px;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
border-top: 1px solid #f2f2f2;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:green;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
Fiddle: http://jsfiddle.net/RwtHn/1455/
I can at least help you with the Icon issue. The issue is that you are overidding the background with a color. You can have a color or a background image. Not both. You will need to either have a different image in the background that is essentially the same but with different colors, do without the image when you hover or do without the color when you hover.
I'm sorry I can't be more helpful with the IE problem. I sincerely hate IE for things like this.
EDIT: This is something that you can do as mentioned in the comment below
.logoff:hover{
background: #f4f4f4 url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png");
height: 25px;
}
Thanks ANeves for this information. I learnt something here too.
OK, for the overridden icon issue credits goes for "ANeves",
but you may use below CSS for preventing extra code lines:
#main > li > ul > li:hover
{
background-color: #f4f4f4;
}
for the IE9 clicking issue, just add below CSS:
#main ul:hover
{
display: block;
}
and that's it
thanks to http://www.cssplay.co.uk/menus/cssplay-click-click.html
On hover you are overriding the background property. Since this property has both the colour and the image, you are overriding the image as well.
Set only the colour, then:
.help:hover{
background-color: #f4f4f4;
}
.logoff:hover{
background-color: #f4f4f4 ;
}
http://jsfiddle.net/RwtHn/1456/