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/
Related
I can't seem to get a border around a circle in CSS. I've double-checked to make sure the HTML classes were the same in CSS and tried various combinations of CSS properties. For some reason border: 4px solid #a569bd; is filling in the circle instead of becoming a border.
jsfiddle
/* circle icons for legend */
.layer-circle {
width: 8px;
height: 8px;
margin-top: 8px;
margin-left: 5px;
position: absolute;
display: flex;
border-radius: 50%;
}
.allbrew {
background-color: black;
}
.brewhunyrds {
background-color: black;
border: 4px solid #a569bd;
}
<b>Points of Interest</b>
<div class='poi-layer-options'>
<div class="layer-circle allbrew"></div>
<a class="layer-text" id="allbrew"><span>Breweries</span><br></a>
<div class="layer-circle brewhunyrds"></div>
<a class="layer-text" id="brewhunyrds"><span>Trail Breweries (100 yards)</span><br></a>
</div>
The code you posted doesn't correspond to what you describe (the jsfiddle does), but what you describe can happen if box-sizing: border-box; applies to that element (maybe caused by an according CSS rule with a * selector): Since in this case the given width includes the border and a border of 2 x 50% adds up to 100% (i.e. the full width), the border will completely fill the element.
To avoid that, add box-sizing: content-box; to the CSS rules for that element. This will add the border width to the element width / place the border outside the element.
Your fiddle modified accordingly: https://jsfiddle.net/sayxcfrn/
I have the following situation and a don't want to use JS for this:
There is a header (blue) then a div which might contain content (if not it should collapse completly) and then the body (gray).
Now I want to div with the green border left and right to fill the whole gap between the header and the body. The gap is caused by margin: 10px; on the div with the red border.
The only "solution" I have found so far is to set padding: 1px 0; to the div with the green border (see commented line in fiddle). Is there any better solution to force the div or the border to cover the whole height occupied by the child and collapse completly if there is no child?
I have no control over the content inside the div, so not using margin is not a solution.
Fiddle: http://jsfiddle.net/w5NW4/1/
I guess you are looking like this :- DEMO
Give the overflow:hidden to your banner class for achieving the desired result..
CSS
.banner {
border-left: 1px solid #008000;
border-right: 1px solid #008000;
overflow: hidden;
}
You can try using overflow: auto; property instead of using padding.
It will work.
Check it at Fiddle: http://jsfiddle.net/w5NW4/3/
.banner{
border-left: 1px solid green;
border-right: 1px solid green;
overflow: auto;
}
Another solution is to give padding: 10px; to .banner and removing margin: 10px; from the banner child element.
Working Fiddle
Also, try to avoid inline stylings.
I'm trying to place a button. I have its position set to absolute, so I can't figure out how to place it properly.
Its the button that says "Is this your product?"
See an example here: (removed)
I want it to be placed right on top of the widget in the right sidebar with 5px spacing all around. How do I do that?
I originally took the button from here: http://cssdeck.com/t/uHhhprW6
Appreciate the help.
if your Button will be always in same place so you can do it with:
.but {
position: absolute;
width: 80px;
height: 25px;
background-color: #DEDEDE;
right: 0;
margin: 5px;
}
And just edit your right or top whatever you want. little example
The quickest way I could get it to work was remove the top, left, float, and margin-left declarations from your .email rule, and change its position to relative.
.email {
position: relative; /* not absolute */
width: 220px;
height: 30px;
font: .75em "lucida grande", arial, sans-serif;
margin: 0 0 5px 0;
}
I would imagine there are much cleaner/simpler ways to make this particular button - there seems to be a lot of absolute positioning going on with the containing element and its children. But the changes I have suggested seem to work as a quick fix.
When an element has position: absolute, you have to position it using left, right, top and bottom. The values you use on this properties should be relative to the closest positioned ancestor (a "positioned" element being one with a position value other than blank or static).
Consider, for example, the following HTML:
<div id="container">
<div id="position_me"></div>
</div>
And the following CSS:
#container {
width: 500px;
height: 500px;
position: relative;
border: 1px solid green;
}
#position_me {
width: 20px;
height: 20px;
position: absolute;
left: 100px;
top: 100px;
border: 1px solid red;
}
The red box will be 100 px from the top border of the container, and 100px from the left border of the container.
See working example.
If you use position: absolute on the button, you can specify it's location using the top, right, bottom and left properties. For example, to position an element with the id button to the top right of a page, with 5px spacing both on top and at the right, you could use this CSS code:
#button {
position: absolute;
top: 5px;
bottom: 5px;
}
If you just want the element to go to the right side of the parent element, you should use float: right. Then you can use margin-top, margin-right, margin-bottom and margin-left to make sure the element gets some margin around it.
See my example Fiddle for the difference. Note that both 'buttons' are within the same div in the HTML code, but the absolute positioned one appears to be outside of that block.
Have a look at this article for more information on CSS positioning.
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.
I have the following code:
<div style="width: 100px;
overflow: hidden;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>
(XHTML 1.0 transitional)
What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding.
Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?
What I get is the first div in the following image, what i want is something like the 2nd div:
image
I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.
I just changed my CSS from:
padding: 20px;
overflow: hidden;
to
padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);
Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.
Unfortunately, in your case this won't work so well, as you need a real border on the div.
Your best bet is to use a wrapping div and set the padding on that.
I had a similar problem that I solved by using clip instead of overflow. This allows you to specify the rectangular dimensions of the visible area of your div (W3C Recommendation). In this case, you should specify only the area within the padding to be visible.
This may not be a perfect solution for this exact case: as the div's border is outside the clipping area, that will become invisible too. I got around that by adding a wrapper div and setting the border on that, but since the inner div must be absolutely positioned for clip to apply, you would need to know and specify the height on the wrapper div.
<div style="border: 1px solid red;
height: 40px;">
<div style="position: absolute;
width: 100px;
background-color: #c0c0c0;
padding-right: 20px;
clip: rect(auto, 80px, auto, auto);">
2222222222222222222222111111111111111111111111113333333333333333333</div>
</div>
Wrap the div and apply padding to the parent
.c1 {
width: 200px;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 50px;
}
.c1 > .c1-inner {
overflow: hidden;
}
<div class="c1">
<div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
</div>
</div>
If you have a right-adjacent element to the one in question, put padding on its left. That way the content from the left element will flow up to but not past its margin, and the left padding on the right-adjacent element will create the desired separation. You can use this trick for a series of horizontal elements which may have content that needs to be cut off because it is too long.