This question already has answers here:
CSS hover border makes elements adjust slightly
(14 answers)
Closed 7 months ago.
I have this category img and on hover effect appear border top red and my title goes down for 2 px. How can I fix this by removing this 2 px.
.box {
display: inline-block;
background: pink;
margin-right: 10px;
width: 187px;
min-height: 70px;
height: 100%;
&:hover {
background: #F2F2F2;
border-top: 3px solid #E72D35;
}
}
Include a border of the same width but transparent in the original state to keep the same size and text position for both states. You also might want to add a little transition, BTW, for a smoother effect:
.box {
display: inline-block;
background: pink;
margin-right: 10px;
width: 187px;
min-height: 70px;
height: 100%;
border-top: 3px solid transparent;
transition: all 0.3s;
}
.box:hover {
background: #F2F2F2;
border-top: 3px solid #E72D35;
}
<div class="box">Box 1</div>
<div class="box">Box 2</div>
.box {
display: inline-block;
background: pink;
margin-right: 10px;
width: 187px;
min-height: 70px;
height: 100%;
border-top: 3px solid transparent;
&:hover {
background: #F2F2F2;
border-color: #E72D35;
}
}
I'm no expert, but I had an idea (I hope I understood the problem correctly) to add a 3px padding and remove it on hover, I applied it here:
.box {
display: inline-block;
background: pink;
margin-right: 10px;
width: 187px;
min-height: 70px;
height: 100%;
padding-top: 3px
}
.box:hover {
background: #F2F2F2;
border-top: 3px solid #E72D35;
padding-top: 0px;
}
https://codepen.io/bahax/pen/RwMyGyg
Related
This question already has answers here:
HTML Div border not showing
(3 answers)
Closed 2 years ago.
I want to add borders for images and my top-nav and here is my code I have tried
.navtop {
background: #b7f582;
width: 100%;
height: 100px;
overflow: hidden;
}
.navtop a {
width: auto;
min-width: 90px;
text-align: center;
text-decoration: none;
height: 100px;
-webkit-transition: 0.5s;
background: #82a8f5;
float: left;
}
.navtop a:hover {
transition: 0.5s;
transform: translateY(10px);
background: #d96cbc;
color: black;
}
.navtop img {
float: left;
width: 100px;
height: 100px;
border-color: black;
border-width: 5px;
}
<div class="navtop">
<img src="RingLogo.png">
Home
</div>
How can I add a border color to a <div> area and and image? See, I can add a border onto buttons but not anything else.
Use the border in one statement for simplicity because you are missing the border-style:
border: 5px solid black;
You can check for other border-styles and other options via this link.
You haven't specified the border-style, that's why it's not working. Either add border-style: solid or use the shorthand to define all 3 properties (border-width, border-style and border-color) in a single line: border: 5px solid black.
The reason why defining only border-width and border-color is working on <button>s is that browsers apply some default styles, so buttons already have a border-style defined, as shown below:
console.log(window.getComputedStyle(document.getElementById('defaultButton')).borderStyle);
.navtop {
background: #b7f582;
height: 100px;
overflow: hidden;
border: 5px solid green;
}
.navtop a {
width: auto;
min-width: 90px;
text-align: center;
text-decoration: none;
height: 100px;
-webkit-transition: 0.5s;
background: #82a8f5;
float: left;
}
.navtop a:hover {
transition: 0.5s;
transform: translateY(10px);
background: #d96cbc;
color: black;
}
.navtop img {
float: left;
width: 100px;
height: 100px;
border: 5px solid black;
box-sizing: border-box;
}
#styledButton {
border-color: red;
border-width: 5px;
}
<div class="navtop">
<img src="RingLogo.png">
Home
<button id="defaultButton">Foo</button>
<button id="styledButton">Bar</button>
</div>
you can do something like this also close the </div>, div is not self closing element.
.navtop {
background: #b7f582;
width: 100%;
height: 110px;
overflow: hidden;
border:5px solid red;
}
.navtop a {
width: auto;
min-width: 90px;
text-align: center;
text-decoration: none;
height: 100px;
-webkit-transition: 0.5s;
background: #82a8f5;
float: left;
}
.navtop a:hover {
transition: 0.5s;
transform: translateY(10px);
background: #d96cbc;
color: black;
}
.navtop img {
float: left;
width: 100px;
height: 100px;
border: 5px solid blue;
}
<style>
</style>
<div class="navtop">
<img src="http://placekitten.com/301/301">
Home
</div>
I'm tried to give background-image over background-color, can anyone help.
Here's my code,
.next {
width: 40px;
height: 45px;
border-radius: 100%;
border: 1px solid #000;
background-image: url(http://placehold.it/10x10);
background-color: #fff;
}
<div class="next"></div>
Is that what you want, Try This
.next {
width: 40px;
height: 45px;
border-radius: 100%;
background: #fee8fe url(http://placehold.it/10x10) no-repeat center;
}
<div class="next"></div>
You can use background instead of background-image & background-color. Check updated snippet
.next {
width: 40px;
height: 45px;
border-radius: 100%;
border: 1px solid #000;
background: #fff url(http://placehold.it/10x10) repeat;
}
<div class="next"></div>
I'm trying to place these two divs inline.
HTML
<div class="thisFlak">
</div>
<div class="thisFlakNotes">
</div>
CSS
.thisFlak{
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
}
.thisFlakNotes{
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
}
I cannot mess with ".thisFlak" to much because it hold alot of other stuff.
FIDDLE
https://jsfiddle.net/xwzcbn6w/
DEMO
CSS
.thisFlak {
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
/* to make it inline */
display: inline-block;
/* aligning vertically you can make it top / bottom / baseline */
vertical-align: middle
}
.thisFlakNotes {
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
/* to make it inline */
display: inline-block;
/* aligning vertically you can make it top / bottom / baseline */
vertical-align: middle
}
By Adding float:left / display:inline to both classes you can achieve it.
Here is the updated fiddle linkUpdated fiddle
display:inline-block; will allow you to keep the dimensions and put your divs on the same line. It will treat the divs like words in a sentence though so you will need to comment out any space between them and as they are different heights, you will need to add vertical alignment:
.thisFlak{
vertical-align:top;
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
display:inline-block;
}
.thisFlakNotes{
vertical-align:top;
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
display:inline-block;
}
<div class="thisFlak">
</div><!-- comment out this space
--><div class="thisFlakNotes">
</div>
Update
Also if you don't want the boxes to wrap when the page is too small for them to fit on one line, you will need to add white-space:nowrap to the parent (or make sure the width of the parent is wider than the two children)
What you're looking for is:
display: inline-block;
Your code:
.thisFlak{
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
display: inline-block;
}
.thisFlakNotes{
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
display: inline-block;
}
float...
https://jsfiddle.net/maky/xwzcbn6w/2/
.thisFlak {
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
float: left;
}
.thisFlakNotes {
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
float: left;
}
just put display : inline-block or float : left to each div
.thisFlak{
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
float : left;
display : inline-block;
}
.thisFlakNotes{
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
float : left;
display : inline-block;
}
LIVE DEMO
Consider the following menu example: (note the red border)
<div class="menu-wrapper">
<div class="menu-item">Hello</div>
<div class="menu-item">Stack</div>
<div class="menu-item">Overflow</div>
</div>
.menu-wrapper {
display: flex;
flex-direction: column;
width: 200px;
background-color: #ccc;
border-left: 5px solid #bbb;
height: 300px;
}
.menu-item {
padding: 20px;
cursor: pointer;
}
.menu-item:hover {
margin-left: -5px;
background-color: #444;
color: #fff;
border-left: 5px solid red;
}
Now, imagine that the height of menu-wrapper is small, and we want the vertical scroll bar to appear. For example, we could replace:
height: 300px;
with:
height: 100px;
overflow-y: auto;
But, the red border disappears then:
Why is that? How would you fix that?
PLAYGROUND HERE
Since overflow hides what overflows, you may instead draw the border on the background or with an inset shadow , so it is drawn on the whole height of cntainer : DEMO
.menu-wrapper {
display: flex;
flex-direction: column;
width: 200px;
background-color: #ccc;
box-shadow: inset 5px 0 #bbb;/* here draws an inside left border via shadow */
height: 300px;
height: 100px;
overflow:auto;
}
.menu-item {
padding: 20px;
cursor: pointer;
}
.menu-item:hover {
background-color: #444;
color: #fff;
border-left: 5px solid red;
}
I think this works:
The problem is that the red border of menu-item is hiding behind the grey border of the menu-wrapper. So, I removed the border from the wrapper and put it in the item, like this:
.menu-wrapper {
...
/* border-left: 5px solid #bbb; No longer needed */
height: 100px;
overflow-y: auto;
}
.menu-item {
padding: 20px;
cursor: pointer;
border-left: 5px solid #bbb; /* Add border to menu-item rather than the wrapper */
}
.menu-item:hover {
/* margin-left: -5px; No longer needed*/
background-color: #444;
color: #fff;
border-left: 5px solid red;
}
Note: The grey border of the menu-wrapper doesn't take the full height anymore. You could use box-shadow on the wrapper (as answered by GCyrillus) to fix this.
You could integrate both the solutions, so the design won't look too bad in older browsers where box-shadow isn't supported.
.menu-wrapper {
...
box-shadow: inset 5px 0 #bbb;
}
I have element with 3 borders: left (4px), top (1px) and bottom (1px):
But border-left looks like this:
how to set border-left outside of the box, to make render without cutting of edges?
This is Example of my code:
HTML:
<a class="element">Some Text</a>
CSS:
.element {
display: block;
width: 200px;
height: 40px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 4px solid red;
}
Solved problem using :before pseudo element in CSS:
.element {
display: block;
width: 200px;
height: 40px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
position: relative; /* Make sure you have this */
padding-left: 8px; /* Nudge the text by few pixels in the box */
}
.element:before {
content: "";
background-color: red;
display: block;
width: 4px;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
This should solve the problem:
-webkit-background-clip:padding;
-moz-background-clip:padding;
background-clip:padding-box;
Look at the simple example :
<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>
this may help you.
Add padding to the left side.
.element {
padding-left:4px;
}
DEMO here.