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;
Related
How I can make center align my pseudo-element after? Like margin: 0 auto; for block elements.
<div>
This is test text. This is test text. This is test text.
</div>
CSS code:
div:after {
position: absolute;
display: block;
content:"";
border-color: #EAB920 transparent transparent transparent;
border-style: solid;
border-width: 2.5em;
width: 0;
height: 0;
}
It after element look like simple triangle. Property margin: 0 auto; does not work.
If you want the pseudo element centered horizontally relative to the text, you set the display of the targeted element to inline-block so that the width shrinks to fit the content. Then remove the absolute positioning from the pseudo element and margin: auto will work as expected.
Example Here
.target {
display: inline-block;
}
.target:after {
content: '';
display: block;
margin: auto;
border-color: #EAB920 transparent transparent transparent;
border-style: solid;
border-width: 2.5em;
width: 0;
height: 0;
}
<div class="target">This is test text. This is test text. This is test text.</div>
If you don't want the pseudo element centered horizontally relative to the text, don't set the element to inline-block - (example)
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.
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/
I have a simple div in which I have 2 textarea. I set the textarea's width to 100% but then it just go a little out of the div.
See this fiddle.
HTML:
<div class="offer_a_help">
<textarea></textarea>
<br/>
<textarea></textarea>
</div>
CSS:
.offer_a_help {
width: 350px;
height: 250px;
position: absolute;
top: calc(100%/2 - 350px/2);
left: calc(100%/2 - 250px/2);
background-color: #eee;
border-radius: 5px;
border: 1px solid #bbb;
}
.offer_a_help textarea {
width: 100%;
}
Why is that happening and what's the simplest way to fix this?
I believe it may be an issue with the textarea having either a border or padding. Both of those would be calculated with the 100% width and cause the width to be wider than the container.
You can add border-box to make the padding and border be calculated WITH the width instead of IN ADDITION to
Try adding:
.offer_a_help textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
You need to reset padding and margin (I've set margin to -1 to accomodate outer div border):
Demo
.offer_a_help textarea {
width: 100%;
margin: 3px -1px;
padding: 0;
}
Change your css to this.
.offer_a_help textarea {
width: 100%;
margin:0;
padding:0;
}
You can also add padding to your .offer_a_help class
http://jsfiddle.net/YE5MP/5/
I have a parent div with two child div(header and body), I want to set header position fixed on top and only body should scroll.
HTML
<div class="box">
<div class="header">Header</div>
<div class="body">Body</div>
CSS
.box {
height: 300px;
border: 1px solid #333;
overflow: auto;
}
.header {
position: absolute;
width: 100%;
height: 100px;
background: #ccc;
}
.body {
height: 300px;
background: #999;
margin-top: 101px;
}
I found the header div overlaps parent div's scroll bar. I can't set parent div position as relative because I want header position fixed. I can't set header position as 'fixed' because this content avilable somewhere middle of the page.
How can I avoid absolute positioned child not overlaps parent's scroll bar?
Find jsfiddle: http://jsfiddle.net/T43eV/1/
The overflow property should be set on the .body, not .box, as such : http://jsfiddle.net/T43eV/8/
Does this help?
.box { position:relative; }
EDIT: There isn't any need to use absolute anyway, remove that and put overflow:auto on .body.
jsFiddle
.box {
height: 300px;
border: 1px solid #333;
}
.header {
width: 100%;
height: 100px;
background: #ccc;
}
.body {
height: 200px;
background: #999;
width:100%;
overflow: auto;
}
EDIT: I don't think you can do this consistently across platforms. You could kind of do it by setting your right property on .header to be as large at the scrollbar, but the size of the scrollbar is bound to the operating system and isn't a single size.
You could look into an iframe as that will create a page within your page, scrollbar and all.
If it helps set z-index:-1 in .header and the header will not overlap the scroll bar.
Here is the working fiddle:
http://jsfiddle.net/T43eV/28/
One way of doing it would be by using a sticky position. This will keep the header inside the scrollable div but won't make it overlap the scroll (or get behind the scroll if you set a lower z-index)
.box {
height: 300px;
border: 1px solid #333;
overflow: auto;
}
.header {
position: sticky;
top:0;
height: 100px;
margin-bottom:-100px;
background: #ccc;
}
.body {
height: 300px;
background: #999;
margin-top: 101px;
}
However this is not supported by internet explorer