I would like to make a div that has a margin-top: -110px, but I want to add a border-right on it starting from the top of the div, but without the margin-top: -110px attribute.
I know I could use two or more div, but it needs to be done with only 1. Can it be done with CSS or I need to use JavaScript?
You can achieve this using the CSS pseudo-elements:
div {
width: 100px;
height: 200px;
border-top: 100px solid red;
position:relative;
background-color: gray;
}
div:after {
display: block;
position:absolute;
content:" ";
width: 0;
height: 100%;
border-right: 3px solid lime;
top: 0;
right:-3px;
}
http://jsfiddle.net/6W2KP/5/
Related
I would like to add a white border over all my images in my content div using css. Images in the header and footer div areas should not be affected. how do I achieve this? See example image below. There are images of different sizes on the web pages.
See image:
You can do this without having an extra element or pseudo element:
http://cssdeck.com/labs/t6nd0h9p
img {
outline: 1px solid white;
outline-offset: -4px;
}
IE9&10 do not support the outline-offset property, but otherwise support is good: http://caniuse.com/#search=outline
Alternate solution that doesn't require knowing the dimensions of the image:
http://cssdeck.com/labs/aajakwnl
<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>
div.ie-container {
display: inline-block;
position: relative;
}
div.ie-container:before {
display: block;
content: '';
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
border: 1px solid white;
}
img {
vertical-align: middle; /* optional */
}
You could try this:
Html:
<div class="image">
<div class="innerdiv">
</div>
</div>
Css:
.image
{
width: 325px;
height: 239px;
background: url("https://i.picsum.photos/id/214/325/239.jpg?hmac=7XH4Bp-G9XhpuKz5vkgES71GyXKS3ytp-pXCt_zpzE4") 0 0 no-repeat;
background-size: cover;
padding: 10px;
}
.innerdiv
{
border: 1px solid white;
height:100%;
width: 100%;
}
jsFiddle
Hope this is what you meant :)
I solved this with box-shadow: inset and it works with IE11 and up. I wanted a border in the corners around the image but this examples have the border 10px inset. It requires a parent div with :before or :after element but handles it very well.
.image {
width: 100%;
height: auto;
}
.image__wrapper {
position: relative;
}
.image__wrapper:before {
content: '';
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
box-shadow: inset 0 0 0 3px red;
}
CodePen Demo
Whatever the div ID or class is you can simply add
#yourDivIDExample {
...
}
#yourDivIDExample img{
border:1px solid #ffffff;
}
This will create a border around the images in the div itself.. same works for classes or global rule also ..
img {
border:1px solid #ffffff;
}
You can do something like this DEMO
HTMl
<div class="imgborder">
<div class="in-imgborder">
</div>
</div>
CSS
.imgborder {
width: 300px;
height: 300px;
position: relative;
background: url(http://placekitten.com/300/300) no-repeat;
}
.in-imgborder {
width: 290px;
height: 290px;
position: absolute;
top: 4px;
left: 4px;
border: 1px solid red;
}
I'm trying to mockup this design:
But, I can't render the red border correctly. I tried with the obvious solution:
border: 1px solid #939393;
border-left: 4px solid red;
But It's affected by the top and bottom borders, leaving the red stripe with diagonal corners, as you can see in this fiddle:
http://jsfiddle.net/anp0e03k/
Is there any way correct way to fix this?
The only thing that I can think is to add a div inside with red background and negative margins on top and bottom, but it seems to be an overkill and would love to find something that doesn't ruins the html semantic.
Apply the left border to a :before pseudo element of the div and remove the divs left border.
Compatibility: All modern browsers and IE8 +
Give the :before
height: 100% to span the entire height of your div
margin-top: -1px to overlap the top border
padding-bottom: 2px to overlap the bottom border
Then use either
position: absolute on the :before with position: relative on the div like this example:
body {
background-color: #c2c2c2;
}
div {
margin: 50px;
background-color: #FFF;
border: 1px solid #939393;
height: 50px;
width: 200px;
border-left: none;
position: relative;
}
div:before {
content: '';
display: block;
border-left: 4px solid red;
height: 100%;
margin-top: -1px;
padding-bottom: 2px;
position: absolute;
top: 0;
left: 0;
}
<div>
</div>
or
display: inline-block for the :before like this example:
Note: You will probably want to use vertical-align: top / middle / bottom for the :before. This example uses the value top.
body {
background-color: #c2c2c2;
}
div {
margin: 50px;
background-color: #FFF;
border: 1px solid #939393;
height: 50px;
width: 200px;
border-left: none;
}
div:before {
content: '';
display: inline-block;
border-left: 4px solid red;
height: 100%;
margin-top: -1px;
padding-bottom: 2px;
vertical-align: top;
}
<div>
There is text in this
</div>
Final result
I got two divs. One next to another.
<div id="first"></div>
<div id="second"></div>
When the background color of the first div is not set, than the second div drops shadow on the first one as you would normally expect it to. Example: http://jsfiddle.net/a46zueo9/1/
#first {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
}
#second {
width: 100px;
height: 100px;
border: 1px solid red;
box-shadow: 0 0 20px #000;
margin-left: 100px;
}
But if the first div has some background color set, than the second div stops dropping shadow on it.
#first {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: #4af;
float: left;
}
#second {
width: 100px;
height: 100px;
border: 1px solid red;
box-shadow: 0 0 20px #000;
margin-left: 100px;
}
Example: http://jsfiddle.net/a46zueo9/
I was wondering if it's normal behavior. If so, than why? If not than how can I fix it?
yes its a normal behavior in first example that div is like a frame with nothing in the background to support
but in second example it have base so its like a sheet which can cover
to solve it
first{
z-index: 1;
position: relative;
}
second{ z-index: 2;
position: relative; }
It's z-index problem, because when there is no background-color, than it's transparent. Use #second{ z-index: 6; position: relative;} JSFiddle
Just remove marging-left from second div, and add float: left; on it.
I am trying to set up a custom toolbar for a textarea, I have the following
html:
<div id="main">
<div id="toolbar"></div>
<textarea></textarea>
</div>
css:
#main {
background-color: #ddd;
height: 400px;
width: 400px;
position: relative;
}
#toolbar {
background-color: #444;
height: 40px;
color: white;
}
textarea {
outline: none;
border: none;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
margin: 0;
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0;
}
It works exactly as I expected in Chrome, but in firefox / ie the text area is not consuming all the available space in the div.
How do I set it up so the toolbar takes up 40px at the top of the div, and the textarea consumes all the rest of the height.
I am sizing this stuff dynamically so can not use a "px" height or width for the textarea.
Codepen here: http://codepen.io/anon/pen/pDgvq
Better Suggestion
Set the textarea's width and height to 100%. Then, give it a 40px top-border that is transparent (color doesn't really matter, actually). Be sure to set box-sizing to border-box. Now position the relative toolbar on a higher z-index - voila.
Pen: http://codepen.io/anon/pen/nFfam
Oldie
Rather than moving the textarea down, move the toolbar up:
#main {
background-color: #ddd;
height: 200px; width: 400px;
position: relative;
top: 40px;
}
#toolbar {
background-color: #444;
height: 40px; width: 100%;
position: absolute;
top: -40px;
}
textarea {
width: 100%; height: 100%;
box-sizing: border-box;
}
Pen: http://codepen.io/anon/pen/mEGyp
Both Firefox and IE9+ support the calc() CSS function (you're out of luck with IE8 though; not sure what you're supporting).
I've added these lines to the textarea's CSS in your pen (updated version):
width: calc(100% - 2px);
height: calc(100% - 41px);
padding: 0;
The padding is just for normalization; you can choose whatever suits your needs, but be sure to adjust the pixel values in calc() accordingly. The 2px for width are to compensate the left and right border; the 41px for height are 40 for the toolbar and 1 for the bottom border.
Add width:-moz-available; height:100%;resize: none; to textarea
textarea {
outline: none;
border: none;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
margin: 0;
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0; width:-moz-available; height:100%;
resize: none;
}
UPDATED DEMO
Another Method
You can add a div around textarea and give position:absolute to the div
HTML
<div id="main">
<div id="toolbar"></div>
<div id="container">
<textarea></textarea>
</div>
</div>
CSS
#container{
position:absolute;
bottom:0px;
top:40px;
width:100%
}
textarea {
outline: none;
border: none;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
resize: none; height:100%; width:99.5%
}
DEMO 2
You can use height and width for textarea in % also apply top to the toolbar div in %
e.g. If top is 10% give 90% height to textarea.
I hope this is your desired result: Demo
#main {
background-color: #ddd;
width: 400px; height: 200px;
padding: 0;
}
div #toolbar {
background: #444;
width: 100%; height: 40px;
}
textarea {
margin: 0;
width: 100%; height: 100%;
}
Imagine (or if you can't imagine, watch) this piece of code:
<div class="block"></div>
<style>
.block {
width: 10px;
height: 10px;
display: block;
background-color: red;
border: 1px solid #000000;
border-bottom: 0;
}
</style>
Now look at the bottom line. This is my problem; I want the left and right border to be 1px longer (so the bottom border is the part between the left border and right border).
Is it possible to accomplish this??
This is a way to do it, since the box model does not support what you need, using only one div:
<div class="block"><div></div></div>
and the css:
.block {
width: 10px;
height: 10px;
border: 1px solid #000000;
border-bottom: 0;
padding-bottom: 1px;
}
.block div {
width: 10px;
height: 10px;
background-color: red;
}
This will extend the black border on the left and right side with 1px.
Try this :)
http://jsfiddle.net/z6ASC/
This is possible if you have two containers, one for the outside left/right borders, and one for the inside bottom-border. I've put together a demo showing this.
DEMO:
http://wecodesign.com/demos/stackoverflow-7074782.htm
<style type="text/css">
#borderOutside {
height: 200px;
width: 300px;
border:1px solid #900;
border-bottom: none;
padding-bottom: 5px; /*this is the gap at the bottom*/
}
#borderInside {
height: 100%;
border-bottom: 1px solid #900;
}
</style>
<div id="borderOutside">
<div id="borderInside"><!--Your Content--></div>
</div>
It can be done without adding any extraneous elements in your HTML via this strategy:
.block {
position: relative;
width: 10px;
height: 10px;
display: block;
background-color: red;
}
.block:before {
position: absolute;
content: '';
width: 10px;
height: 11px;
top: -1px;
left: -1px;
border: 1px solid #000;
border-bottom: none;
}
The pseudo element :before is only supported from IE8, but works in all other major browsers.