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.
Related
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 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;
}
I was trying to get a double bordered (underlined) header. First one is full width, second is just text width. Borders should overlap
There is an easy solution with two elements nested like that:
<h1><span>Title</span></h1>
and css:
h1 {
border-bottom: 1px solid red;
}
h1 span {
display: inline-block;
padding: 0 0 10px;
margin-bottom: -1px;
border-bottom: 1px solid blue;
}
Span has inline-block display property so it has right width.
I'm wondering if it's possible to get same effect with :after, :before selectors and only h1 element.
It can be done. I've used vw units.
Take a look at this Working Fiddle
HTML:
<h1 class="SpecialBorder">Title</h1>
CSS:
*
{
margin: 0;
padding: 0;
}
.SpecialBorder
{
display: inline-block;
position: relative;
}
.SpecialBorder:before , .SpecialBorder:after
{
content:'';
position: absolute;
left: 0;
bottom: 0;
}
.SpecialBorder:before
{
width: 100vw;
border-bottom: 1px solid red;
}
.SpecialBorder:after
{
width: 100%;
border-bottom: 1px solid blue;
}
Explanation:
the before & after pseudo elements are the ones that draw the borders.
both of them are empty elements. with a certain width that causes their border to be visible.
they are absolutely position at the bottom of their <h1> parent.
before: responsible for the red border. so his width is set to '100%' of view port.
after: responsible for the red border. so hes width is set to 100% of his parent (the <h1>), that's why the h1 is set to `display:inline-block;" (so it will span ony just as his content)
vw unit is supported by new browsers only.
notice that if you cant use vw units, you can still make something familiar to that.
delete the display:inline-block; from h1 (causing it to span all the way again)
change the width of before to 100% (to make it span all the way),
change the with of after to some fixed value of your choice.
Edit: as thgaskell stated in th comment,
there's a bug where vw units don't update properly on webkit
browsers when the window is resized.
Edit 2:
for making elements to show after the title, you can use a <br /> tag, or clearing techniques like showed here.
I'm not sure if that's what you want, but you could do these rules:
h1 {
...
}
/* here are the direct children of every h1 */
h1>* {
...
}
::after and ::before selectors would make sense when inserting new content (note the double colons). Here's some MDN on ::after selector and some examples:
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
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).
I am having trouble getting a background-image to overlay the border of another div. We have a sidebar panel with various sidebars, including a navigation menu. To the right is the content panel. We'd like anything selected on the sidebar to appear connected to the content panel:
In the example above, there is a background image on the Personal Info <li> tag. I'd like to extend this image one pixel to the right so that the line next to the selected value isn't visible.
Here is my CSS for the submenu (selected) and the Content area to the right:
.submenu-item li span{
padding: 4px 0 4px 16px;
min-height: 16px;
border-bottom:0px;
}
.submenu-item li{
font-size:12px;
border: none;
padding: 0px 0 0px 16px;
}
.submenu-item span.Active{
background-image: url(../images/submenu-select.png);
background-repeat: no-repeat;
}
#Content {
margin-left:190px;
border-left: 1px solid #b0b0b0;
padding: 20px;
background: #FFFFFF;
min-height:600px;
}
Is there a way to do this other than putting a right border on my sidebar (and excluding it on the list item tag)?
If you have a border on that right, you just can't eliminate that part of the border.
However, you're in luck. Try using margin-right: -1px; in your CSS. This will drag the
element to the right 1 pixel, and hopefully over the border. You may need to also set
position: relative;
z-index: 100;
Also, because it's over to the right 1 pixel, to make it align on the left with the others, you may need to make the active element 1 pixel wider.
Alex's solution should work, but another way to do it would be to remove the border-left CSS atrtribute from #Content and instead use a 1 pixel wide gray GIF or PNG image on the DIV containing the submenu items.
Like this:
#SubMenu { background: url(grayline.gif) #CCCCCC top right; }
That would remove the need to worry about the selected submenu element not being aligned.