How would I create a "short" vertical border between columns in xaringan / remark?
I want to add a vertical border between columns in my slides, but one that's only about 80% the height of the div. Here's the xaringan example for two column layout: https://slides.yihui.name/xaringan/#15
I suppose the css for the border of the left column could look something like this:
.pull-left {
border-right-width: 1px;
border-right-style: solid;
padding-right: 2px
}
But how can I get it to be a little shorter than the height of the div?
Yes, you can create 80% height from the parent div
<div></div>
div {
height:200px;
width:500px;
background:gold;
position:relative;
border-top:10px solid grey;
border-bottom:2px solid #000;
}
div:after {
content:"";
position:absolute;
top:20%;
right:0;
width:2px;
height:60%;
background:#000;
}
Related
I there a way to make each border in a div extend 1 or 2 pixels in each way so that they form a cross in each corner?
You can't do it by default css border property. However, you can achieve what you want by trying :before and :after selectors for the div:
<div class="cross-borders"></div>
.cross-borders {
width:200px;
height:200px;
border:1px solid #000;
border-top:0;
border-bottom:0;
position:relative;
margin:20px auto;
}
.cross-borders:before,
.cross-borders:after {
content: ' ';
width:210px;
height:1px;
background-color:#000;
position:absolute;
top:5px;
left:-5px;
}
.cross-borders:after {
top: auto;
bottom: 5px;
}
JSFiddle
I know I can use box-sizing:border-box; to create the border inside an elements actual width, but I want my image to be not affected by the border.
example:
div {
width:100px;
height:100px;
box-sizing:border-box;
background-image:url("someplace/demo.jpg");
background-size:100%;
border:1px solid black;
}
With the codes above, the image width and height will be 98px, because border takes 1 pixel for each parallal sides.
But I want my image to still stay 100 px / 100% and border as an overlaping border on top of the image.
Is there any way to do this ???
you need to set background-size to actual size of your container.
div {
width:100px;
height:100px;
box-sizing:border-box;
background:url("http://lorempixel.com/100/100") center no-repeat ;
background-size:100px 100px;
border:1px solid black;
}
img ~ div {
border:15px solid rgba(100,200,0,0.5);
}
div + div {
background-size:100%;
}
div, img {
display:inline-block;
}
<div></div>
<img src="http://lorempixel.com/100/100"/>
<div></div>
<div></div>
I inserted image and bigger border in demo to easely see the different effects
for he outline , you will need ,outline offset
div {
width:100px;
height:100px;
box-sizing:border-box;
background:url("http://lorempixel.com/100/100") center no-repeat ;
background-size:100px 100px;
outline:15px solid rgba(100,200,0,0.5);
outline-offset:-15px;
}
<div></div>
border increased to make effect obvious
or box-shadow ?
div {
width:100px;
height:100px;
box-sizing:border-box;
background:url("http://lorempixel.com/100/100") center no-repeat ;
background-size:100px 100px;
box-shadow:inset 0 0 0 15px rgba(100,200,0,0.5);
}
<div></div>
use outline instead of border
div {
width: 100px;
height: 100px;
background-image: url("someplace/demo.jpg");
background-size: 100%;
outline: 1px solid black;
}
.classname {
outline: 2px solid red;
}
Ref: http://www.w3schools.com/cssref/css3_pr_outline-offset.asp
I'm trying to create semi-transparent borders like on this screenshot. I could only achieve this.
How to make the borders look like those on the screenshot?
There is a CSS3 property for the background that you can use in order to have a semi-transparent borders that stay outside the background of the element. It's called background-clip. By default its property is background-clip: border-box;.
In you case you should probably use:
background-clip: padding-box;
That way the background will touch the borders but will not cover them so they will stay semi-transparent.
Reference: http://www.w3schools.com/cssref/css3_pr_background-clip.asp
Another options is using box-shadow in stead of border. For example:
element { box-shadow: 0 0 0 5px rgba(255, 255, 255, .5; }
It will have the same effect.
you dont. you just create an element behind your box and style it to look like a border:
body{
background:url(http://fc07.deviantart.net/fs70/f/2013/174/3/e/recycled_texture_background_by_sandeep_m-d6aeau9.jpg) 1000px 1000px;
}
.boxContainer{
width:500px;
height:200px;
display:block;
margin:0 auto;
position:relative;
}
.boxContainer .border{
width:100%;
height:100%;
display:block;
background:white;
opacity:0.3;
border-radius:10px;
position:absolute;
}
.boxContainer .box{
display:block;
margin:10px;
width:calc(100% - 20px);
height:calc(100% - 20px);
background:#EEEEEE;
position:absolute;
border-radius:5px;
}
<div class="boxContainer">
<div class="border"></div>
<div class="box"></div>
</div>
UPDATE:
here is an example of how it would look on your website:
Fiddle
Please look at these two examples:
http://jsfiddle.net/GBVF8/5/ (with SkelJS)
http://jsfiddle.net/5Br2N/5/ (without SkelJS)
Here's my css for the SkelJS example:
#wrapper {
height:100%;
border:3px solid black;
}
.container {
height:100%;
border:3px solid darkslategray;
}
.row {
height:100%;
border:3px solid gray;
}
.col1 {
vertical-align: middle;
border:3px solid green;
height:100%;
}
.col2 {
vertical-align: middle;
border:3px solid red;
height:100%;
}
I would like cell heights like shown in the second example but using SkelJS. Basically I want the first and second columns to be vertically aligned in the middle. I want the height to be fluid so it just centers in the middle based on the content inside the tallest div. I don't want to have to set a static height, like 300px. Please advise. Thanks!
I'm tyring to nest three divs and have each. I want the appearance to look like each parent is 10px larger than it's child and be responsive when the horizontal width changes. When I do this with two DIVs everything works well.
CSS
#holder
{
margin:auto;
width:90%;
height:150px;
background-color:#999;
padding:10px;
border: 1px solid;
}
#inside
{
position:relative;
width:100%;
height:100%;
background-color:#9F0;
border: 1px solid;
}
HTML
When I add the third child, that's when it all goes wrong. The middle child (the green box) moves partially out of it's parent.
CSS
#holder
{
margin:auto;
width:90%;
height:150px;
background-color:#999;
padding:10px;
border: 1px solid;
}
#inside
{
position:relative;
width:100%;
height:100%;
background-color:#9F0;
border: 1px solid;
padding:10px;
}
#header
{
position:relative;
width:100%;
height:100%;
background-color:#C00;
}
HTML
<div id="holder">
<div id="inside">
<div id="header"/>
</div>
</div>
I do understand padding and margin and that those will add the "real" width and height of the box, but I can not figure out how to get these boxes inside of each other. things I have tried are below
playing with margins and padding
playing with different % on the widths of child boxes. This works to a point, but depending on the width of the browser window the ratio of the distance between the children changes.
Sounds like a cascade-type comment list.
Well... Remove the width from #inside and #header. DIVs are block-level elements.
Add
#holder div {
padding-left: 10px;
}
Every DIV under #holder will inherit the padding-left css property.
I think (and hope :P) that's what you were looking for.