demo
html:
<span id="foo">foo</span>
css:
#foo{
background: #f00;
display: inline-block;
border-top: 5px solid #000;
margin-top: 20px;
}
But the margin-top is applied over whole element. I want a space between red background and black border.
I've tried it with :before pseudo but with this I've to give width for the border and this is not good idea because the #foo element's width may vary.
I think You can try :before to ge
link
span:before{ border-top: 5px solid #000;display:block;content:"";margin-top:-6px;}
Use a padding and background-clip: content-box;
#foo{
background: #f00;
display: inline-block;
border-top: 5px solid #000;
margin-top: 20px;
padding-top: 20px;
background-clip: content-box;
}
<span id="foo">Foo</span>
Of course, this limits other available padding things, but this answers the question.
Here is a JavaScript solution to this:
The idea is to wrap the <span> in a <div>. Get the width and height of the span element using JavaScript. Set the width of the div equal to the width of the span. Set the height of the div equal to the height of the span + 20 and finally, give the span element a 20px marginTop.
Note that I've added box-sizing: border-box to #border so that it's width would be the same as the #foo element.
var border = document.getElementById('border');
var span = document.getElementById('foo');
border.style.width = (parseInt(window.getComputedStyle(span).width.slice(0, -2))) + 'px';
border.style.height = (parseInt(window.getComputedStyle(span).height.slice(0, -2))) + 20 + 'px';
span.style.marginTop = '20px';
#foo {
position: relative;
background: #f00;
display: inline-block;
}
#border {
position: relative;
border-top: 5px solid black;
box-sizing: border-box;
}
<div id="border">
<span id="foo">foo</span>
</div>
I got the easier solution by changing the markup like this:
<span class="content"><span class="border-top"> </span>Lorem Ipsum</span>
Here is the demo
Can use the following pseudo class to achieve this. You just need to alter the height and top value of :after to achieve the required border spacing. You will also need to change the margin-top of #foo, in case you want a larger top border.
#foo{
background: #f00;
display: inline-block;
padding-top: 10px;
position: relative;
margin-top: 10px;
}
#foo:after{
content: '';
position: absolute;
background-color: #000;
height: 5px;
width: 100%;
top: -9px;
left: 0;
z-index: -1;
}
http://jsfiddle.net/5cstrzsx/1/
Related
Imagine the following CSS:
#foo {
border: 1px solid black;
border-right: 1px solid blue;
}
In this case, at least under Chrome, the top and bottom right corner pixels of the element are blue, not black. Is it possible to make them black?
You can't do it with the normal CSS border options, but if you want to, you can still have a pure CSS solution:
Basically, what you are going to do is create two pseudo elements with CSS, and cover the corners:
#foo {
border: 100px solid black;
border-right: 100px solid blue;
height:300px;
position:relative;
}
#foo:after, #foo:before{
content:'';
background:black;
width:100px;
height:100px;
display:block;
position:absolute;
}
#foo:after{
bottom:-100px;
right:-100px;
}
#foo:before{
top:-100px;
right:-100px;
}
It might be a little messy, but it works. Set the :after and :before elements width height and position to the width of the border.
And that gives this effect:
JSFiddle Demo
I hope my crappy photoshop skills explain borders to you.
If you look in the 4 corners of the square you can see little lines, thats where one border starts and the next one begins.
This will always be in issue :P
You could either make it a background image (crappy way)
or you can use other divs to make the borders (crappy as well)
The first solution would be using a pseudo-element, which you will position absolutely to cover the right border. In order to ensure that it covers the border entirely, you will have to offset its top, bottom and right positions by the negative value of the border width. In this case I have used a width of 5px to better illustrate the example:
#foo {
background-color: #eee;
border: 5px solid grey;
width: 100px;
height: 100px;
position: relative;
}
#foo::before {
content: '';
position: absolute;
top: -5px;
bottom: -5px;
right: -5px; /* move by border width */
background-color: blue;
width: 5px;
}
<div id="foo"></div>
Alternatively, you can use CSS box shadow:
#foo {
background-color: #eee;
box-shadow: inset 0 0 0 5px grey;
width: 100px;
height: 100px;
position: relative;
}
#foo::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 5px;
background-color: blue;
}
<div id="foo"></div>
As others have pointed out, your problem is how borders are drawn in CSS.
<div id="foo">Problem</div>
#foo {
border: 30px solid black;
border-right: 30px solid blue;
}
The simplest way to work around this is to use a pseudo element. Since this workaround is entirely dependent on the value of the border-width, I’ll show an example using an SCSS variable to help make it clear where that width value is coming in.
Note: You don’t need SCSS to solve this problem, using a variable just helps readability/maintainability.
HTML:
<div id="foo"></div>
SCSS:
/* Set SCSS variable */
$border-width: 30px;
#foo {
border: $border-width solid black;
position: relative; /* anchor the absolute positioned ::after element */
}
#foo:after {
content: '';
background: blue;
width: $border-width;
height: 100%;
position: absolute;
right: -$border-width;
}
Demo: http://jsbin.com/cimaxe/6
Hopefully it’s clear that everywhere you see $border-width you can replace it with a value like 30px.
I am creating a simple horizontal navigation. Trouble I'm running into is when I am adding a css triangle to the "active" page using <after> pseudo element, the overall <li> height for that item is increasing, which throws the whole bar off.
I'm sure I'm just overlooking something, but I've tried troubleshooting it and the solution is eluding me. Any help would be very much appreciated!
Here is a codepen: http://codepen.io/joshmath/pen/HiBvd
the :after element takes up space when it is positioned relatively, so there are two things you can do.
1) set the height of the <li>:
nav ul {
li {
height: 1em; // 1em == the height of one line of text
overflow: visible; // not required, but good to have
}
}
2) position the pseudo element absolutely (I typically do this)
nav ul {
li.current {
position: relative;
&:after {
position: absolute;
top: 100%; // align the top of the pseudo element with the bottom of li.current
left: 50%; // center
margin-left: -6px; // half the width of the pseudo element to correct the center
// your styles:
content: '';
width: 0px;
height: 0px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #3ad2bc;
}
}
}
You just need to add a position relative to your menu item, then the after can be positioned absolute, then it won't affect your height.
Code Snippet below
nav ul li.current{
position:relative;
a{
color: #3ad2bc;
}
&:after{ //colored triangle
content: '';
width: 0px;
height: 0px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #3ad2bc;
margin-left: 0;
position:absolute;
bottom: -10px;
left:50%;
margin-left:-12px;
}
}
check this codePen
I adding a
position: relative;
text-align: center;
in li properties and position absolute in pseudo element added
I made a span in a div. This span is only a black border, positioned above the div.
I want this span (black border) adapts to the div width and height. Like a border in interior to this div.
My problem is that border exceed the div : http://jsfiddle.net/QHRYJ/
div {
background: pink;
width: 300px;
height: 200px;
}
span {
position: absolute;
width: inherit;
border: 4px solid;
margin: 10px;
height: inherit;
}
-->-->-->-->
*EDIT : what I want : http://www.hostingpics.net/viewer.php?id=623039div.png*
The comments speak for themselves, however, if you still want to achieve it your way:
div {
position: relative;
background: pink;
width: 300px;
height: 200px;
}
span {
position: absolute;
top:0 ;
left: 0;
right: 0;
bottom: 0;
border: 4px solid;
}
You need to give your parent div a position so its child elements orientate themselves on its parent. Then, as your span is absolutely positioned, you can just expand it by explicitly setting left, right, bottom and top to 0.
If you want to have a spacing between span and div, add margins to the span.
I think you have an XY Problem here.From what you've described in the comments (adding a border to the <div> on hover), you don't need a <span> element for that. You can achieve this using the :hover pseudo-selector. For example:
div:hover {
border: 4px solid #000
}
Here's a jsFiddle Demo
You might want to specify box-sizing on the <div> to prevent it from resizing:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Can I ask a little help about creating that shape with CSS?
The button needs a circle for the icon, and the simple box for the text.
Here is a possible version using the :before pseudo element. The pseudo element is converted into a circle by using border-radius: 50% and is then positioned before the rectangular div#menu as required.
You can add a image (like the one in question) to the pseudo element by using the content property like shown below:
content: url(http://yoursite.com/yourimage.png);
or using the background-image property also:
background-image: url(http://yoursite.com/yourimage.png);
#menu {
position: relative;
width: 100px;
height: 24px;
line-height: 24px;
color: white;
background-color: peru;
border: 1px solid peru;
border-radius: 2px;
padding-left: 24px;
}
#menu:before {
position: absolute;
content: '';
height: 40px;
width: 40px;
top: -9px; /* (height of parent - height of pseudo) / 2 - border-top of parent for vertical mid */
/* top: -17px; (height of parent - height of pseudo) - border-top of parent for bottom align */
left: -24px; /* some value less than width - depends on amount of overlap needed */
border: 1px solid transparent;
background-image: url(http://lorempixel.com/40/40/people/1);
background-color: peru;
border-radius: 50%;
}
/* Just for demo */
* {
font-family: Calibri;
letter-spacing: 2px;
}
#menu {
margin: 25px;
}
<div id='menu'>Menu Text</div>
Note: This is in essence a different version of the answer posted by Jason Gennaro. If you need support for IE lower versions, use his answer because they don't support :before.
Here's a quick and dirty version:
HTML
<div id="circle"></div>
<div id="rectangle">Header Text</div>
CSS
#circle{
border-radius: 50%;
width: 85px;
height: 85px;
background: brown;
float:left;
}
#rectangle{
width:300px;
height:40px;
background:brown;
color:white;
float:left;
margin-top:20px;
margin-left:-40px;
position:relative;
z-index:-1;
padding-left:60px;
padding-top:6px;
font-family:arial;
font-size:2em;
}
DEMO
http://jsfiddle.net/H6Lkk/
Explanation
use border-radius:50% and any width to create a circle.
float the two divs to allow for the overlap
use position and z-index to place the rectangle under the circle
add the logo image as necessary in the #circle
I'm trying to float a div over another one but in the center (width).
EDIT: I want the container div to be over the top div and centered.
Current CSS:
body {
background-color: #FFF;
margin: auto;
}
#top {
background-color: #F2F2F2;
border-bottom: 1px solid #CCC;
height: 150px;
position: relative;
}
#container {
background-color: #FFF;
border: 1px solid #CCC;
width: 920px;
height:300px;
position: absolute;
top:0;
right:auto;
}
This is what i get:
set left:50%
and margin-left:-460px (half the width of the div)
Try this. It's untested but you basically need to set the container div to relative and then the div inside that to absolute.
body {
background-color: #FFF;
margin: auto;
}
#top {
background-color: #F2F2F2;
border-bottom: 1px solid #CCC;
top: 50%;
left: 50%;
position: absolute;
}
#container {
background-color: #FFF;
border: 1px solid #CCC;
width: 920px;
height:300px;
position: relative;
right:auto;
}
I would suggest setting #top's position attribute to absolute and using a little javascript to set the left attribute to #container's left + half of #container's width - half of #top's width.
i.e, after including jQuery (untested):
$(document).ready(function(){
var topLeft = $("#container").css("left") + ($("#container").css("width")/2) - ($("#top").css("width")/2);
$("#top").css("left", topLeft);
});
In the case that left is zero, like the example you gave, that $("#container").css("left") term is unnecessary.
EDIT: You'll also have to be sure to set the z-index attributes of the two divs appropriately.