I have a list of divs that have a one pixel outline around them, when hovered on the div the outline for that div changes color. As expected, since the divs stack on top of one another the borders stack and will become and extra pixel thicker. I add a 1px margin to the top in order to avoid this, but this ruins the hovering effect.
Here is an basic example of what I'm doing and the issue with the hover
http://jsbin.com/UcOTelUH/1/edit?html,css,output
When hovering all sides change color as they should except for the bottom since it's overlapped. Is there a way to avoid this using sibling selectors or some other trick?
You can use (see here):
div{
width: 100px;
height: 30px;
border: 1px solid #000;
margin-bottom:-1px;
position:relative;
z-index:0;
}
div:hover{
border-color:red;
z-index:1;
}
Or if you want to use the outline property instead of border, use:
div{
width: 100px;
height: 30px;
outline: 1px solid #000;
margin-top: 1px;
position:relative;
z-index:0;
}
div:hover{
outline-color:red;
z-index:1;
}
Related
I would like to draw a border around an image with no visible gap between the image and the border.
img{
display: block;
border: 1px solid black;
}
<img src="https://files.catbox.moe/r099uw.png">
Result of above snippet in Chrome (Version 84):
There is a small gap between the image and the border to the right and below the image.
The answer to this similar question suggests setting display: block on the image, but this does not seem to solve the problem in this case. Based on other answers I have also tried vertical-align:bottom, padding:0, margin: 0; adding width/height, but all to no avail. Increasing the border to 2px gets rid of the gap, but is not an ideal solution.
I tested the above snippet in Chrome, Firefox, and Microsoft Edge. It displays without a gap in Firefox, but with a gap in Chrome and Edge.
How can I create a bordered image that displays consistently without a gap across all platforms?
It appears that adding box-sizing: border-box; as well as a specific height solves the problem in Chrome and Edge.
img{
border: 1px solid black;
height: 16px;
box-sizing: border-box;
}
<img src="https://files.catbox.moe/r099uw.png">
If anybody knows a better solution, or why this is necessary, please let me know.
Edit: This solution is not perfect, as the gap can reappear depending on the position of the image. For example:
img{
border: 1px solid black;
height: 16px;
width: 16px;
box-sizing: border-box;
position: relative;
left: 1px;
}
span{
border: 1px solid red;
}
<span>
<img src="https://files.catbox.moe/r099uw.png">
</span>
Result in Chrome (zoomed in for detail):
You can fix this with css styling. This is what we can do, let's define a css class or id with desired width and height that you would like to have for image. Now use your image as background for defined div or class. Stroke/Border effect can be done by giving border to defined class or id. Once you're done you can adjust your image by making some changes to background-size. That will make you image zoom in or zoom out. So you can easily cover up the gap for any image. Here is the code
HTML :
<div id="image"> </div>
CSS :
#image {
display:inline-block;
width:30px;
height:30px;
border:1px solid #000;
background-image:url(TOn2E.png);
background-repeat:no-repeat;
background-position: center;
background-size: 150%
}
For adjusting image you can make changes to background-size in percentage.
try this:
img {
outline: 1px solid black;
}
<img src="https://files.catbox.moe/r099uw.png">
Also, if necessary, try to append outline-offset, like outline-offset: -1px;
I would like to ask what have I done wrong on my hover border-below function without re sizing the image? I have followed the guide given here under inner border but still my link when I hover the image still re size.
.navbar-div a img, .navbar-div a {
border: none;
overflow: hidden;
float: left;
}
.navbar-div a:hover {
border-bottom: 5px solid black;
}
.navbar-div a:hover img {
margin: -5px;
Here is my JSFiddle link.
Thank You
You have a constraint on the total height of the container for the anchor containing the image. When you add the border you are adding 5px to the height of the container, which will shrink the image since it is maintaining its aspect ratio to fill the smaller available height. Since margins are not considered when calculating the size of the container it is changing size. I changed it to change the size of the padding instead here.
.navbar-div a:hover {
border-bottom: 5px solid black;
padding-bottom: 5px;
}
You may consider trying a different, less complicated approach. Since you will always know your background color you could make the border invisible but always there by just changing the color as seen here.
You can use :after pseudo-element. Code:
.navbar-div a:hover:after {
content:"\a0";
display:block;
padding:2px 0;
line-height:1px;
border-bottom:2px solid #000;
}
http://jsfiddle.net/w4zvad1x/
You must change the
.navbar-div a:hover img {
margin: -5px;
}
What it is doing is to shrink the space inside the DIV, so the image will shrink also.
I have a simple set of links at the top of a page with a black border underneath. The active link should show a white border underneath. This border should sit directly over the black border.
I am unable to change the HTML at this stage, only the styling.
Here is a fiddle - http://jsfiddle.net/grimmus/8E4D5/
<div class="c-landing-pg-tabs-container">
<div class="c-landing-pg-tabs paymentsLeft">
<div>Payments</div>
<div>Inquiries</div>
<div>Trade</div>
</div>
</div>
I am having difficulty getting it positioned over the black border. I can change the display to inline-block, increase the height of the A element, but it sits underneath all the time. Tried also to change to position:relative and nudge it down a bit. It seems some sort of z-index might work but not sure if it's possible because all elements are contained within the same parent.
Thanks for any tips.
Remove the overflow:hidden from .c-landing-pg-tabs-container and add padding-bottom: 12px; to .c-landing-pg-tabs a.active-tab. The new rules will look like this:
.c-landing-pg-tabs-container {
position: relative;
height: 41px;
width: 100%;
min-width: 240px;
border-bottom: 2px solid #282828;
margin-bottom: 16px;
}
.c-landing-pg-tabs a.active-tab {
border-bottom: 2px solid #FFF;
color: #FFF;
padding-bottom: 12px;
}
Here's your modified fiddle: http://jsfiddle.net/sc5pB/
I want to create border-bottom. And I try this
<div class="borderblog"></div>
.borderblog{
border-bottom: 1px dotted black;
}
but this only work if i put some text in that div. like this
<div class="borderblog">text</div>
and i don't want to put any text there. I only want to have one line dotted border bottom.
I also try to use HR tags but it don't work.
Demo in jsFiddle
set height and width
.borderblog{
border-bottom: 1px dotted black;
width:20px;
height:1px;
}
DEMO
You can set div height to one like:
.borderblog{
height: 1px;
border-bottom: 1px dotted black;
}
Div is block element and if it doesn't have any context the height is 0 and border is not visible because border is inside div. Width is not needed, since block element fills parent (container) width as default.
div does not have any height width by default, unless you specify it
so when you add text it gets some value and is shown, so the bordering is applied
.borderblog{
height: 1px;
border-bottom: 1px dotted black;
}
Well, it works for me on IE8, FF9 and Chrome32.
However, you can use <hr> element to create the dotted line as follows:
<hr class="borderblog">
.borderblog {
border: 0; /* <-- Reset the useragent stylesheet at first */
border-bottom: 1px dotted black;
}
WORKING DEMO.
Also, If you need a solid border and if by any reason the previous approaches didn't work for you, you can use background color for a 1px-height div
.borderblog {
height: 1px;
background-color: black;
}
Demo.
In this case you can add a border-bottom as well, to make it 3D visually.
Updated Demo.
All you have to do, just put height and width in css:
.borderblog{
width:100px; //depends what width border you want
height:1px; //depends what height you want, 1px is enought for border only
border-bottom: 1px dotted black;
}
And this is it, no need for text within :)
Is there a way, when I have over lapping (touching) div's, to make the 1px border not become 2 pixels. And I know I could just put a border on 2 of the sides, but then the one edge of the div wouldn't have a border. By the way, I'm using jQuery Masonry.
yes the div on the right would look something like this
border: 1px solid #fff;
border-left: none;
the second border-left will override the left border that was just put on there
EDIT:
ok, since youre using jQuery masonary - do it like this
.container {
width:50px;
height:80px;
border:1px solid black;
margin-right: -1px;
margin-bottom: -1px;
}
the overlapping method I mentioned will work
Combining borders and margins (even with border-box) is tricky because your layout depends on the container width. It is better to add a child to the element positioned by Masonry and style that...
.container .post {
float: left;
width: 240px;
}
.container .text {
outline: 1px solid #999;
padding: 10px;
margin: 0 1px 1px 0;
}
outline allows the border to appear "outside" the div which makes them easier to overlap
http://jsfiddle.net/4xmUY/
(if you happen to use this answer please accept Scott's answer as this should be a comment on his answer but the explanation doesn't fit there).