I have a block position absolutely within its parent. The parent has a border left and right. This causes the absolutely positioned block (which also has borders) to be 2px too small.
What is the best way to go about fixing this?
Goal:
I basicly want the two blocks to align. Their borders should basicly look like 1 border. The problem is that even with border-box the child div is smaller and thus doesn't align.
html
<div class="container">
<div class="diagonal"></div>
</div>
css
* {
box-sizing: border-box;
}
body {
background-color:red;
}
.container {
width:1170px;
margin:0 auto;
margin-top:200px;
height:700px;
position:relative;
z-index:3;
background-color:white;
border-style:solid;
border-color:transparent #D2D8DE #D2D8DE #D2D8DE;
border-width:0 1px 1px 1px;
}
.diagonal {
width:100%;
height:400px;
transform:skewY(-10deg);
position:absolute;
top:-200px;
left:0;
background-color:white;
border-style:solid;
border-color:transparent #D2D8DE;
border-width:0 1px;
z-index:-1;
}
JSFiddle
I think you're looking for this:
* {
box-sizing: border-box;
}
This property tells the browser to account for any border and padding in the value you specify for width and height
EDIT :
If you want to have different borders for inner and outer div and you want them to align, then set .diagonal{ left:-1px; } where 1px is width of inner div's border.
I've changed width and color so that result would be easier to notice. NB: In this case you don't need box-sizing: border-box;
body {
background-color: red;
}
.container {
width: 1170px;
margin: 0 auto;
margin-top: 200px;
height: 700px;
position: relative;
z-index: 3;
background-color: white;
border-style: solid;
border-color: transparent black black black;
border-width: 0 3px 3px 3px;
}
.diagonal {
width: 100%;
height: 400px;
transform: skewY(-10deg);
position: absolute;
top: -200px;
left: -3px;
background-color: white;
border-style: solid;
border-color: transparent blue;
border-width: 0 3px;
z-index: -1;
}
<div class="container">
<div class="diagonal"></div>
</div>
Related
How would you create such corner arc using css?
This is starter template: https://codepen.io/anon/pen/rwraXG
I was hoping that I would be able to use black outer div and red inner div, and use border radius to leave just the top left corner showing through. I messed something midway.
.bar {
width: 100px;
height: 20px;
background-color: red;
}
.outer {
height: 100%;
width: 8px;
background-color: black;
}
.inner {
height: 100%;
width: 100%;
background-color: red;
border: 2px solid black;
border-radius: 15px 0px 0px 0px:
}
<div class="bar">
<div class="outer">
<div class="inner"></div>
</div>
</div>
Modified your codepen: https://codepen.io/anon/pen/dRjoow
Essentially, it was a syntax error. You had a colon (:) at the end of your border-radius property like this:
.inner{
...
border-radius: 15px 0px 0px 0px:
}
instead of a semi colon (;) like this:
.inner{
...
border-radius: 15px 0px 0px 0px;
}
so it wasn't rendering.
fiddle: https://jsfiddle.net/m8wf66u6/
HTML:
<div class="outer">
<div class="inner">
</div>
</div>
CSS:
.outer {
height: 200px;
width: 400px;
background-color: black;
}
.inner {
height: 100%;
width: 100%;
background-color: red;
border-top-left-radius: 20px;
}
The only problem is the : at the end of the last line.
border-radius: 15px 0px 0px 0px;
Note that you can also use :
border-top-left-radius: 15px;
I suggest you to do it with 2 DIVs as below:
HTML :
<div class="outer">
<div class="inner"></div>
</div>
CSS :
.outer,.inner{
width:200px;
height:80px;
}
.outer {
background-color:black;
}
.inner {
background-color:red;
border-radius:20px 0 0 0; /* numbers are : top left bottom right*/
}
https://codepen.io/FaridNaderi/pen/pwZJyP
Hope it helps
It is possible to do this with the inner and outer boxes as you have. You would change your css to the below. You don't need to declare the color red on '.bar' because your '.inner' div will be the red portion of this.
.bar{
width:200px;
height:100px;
}
.outer{
height:100%;
width:100%;
background-color:black;
}
.inner{
height:100%;
width:100%;
background-color:red;
border-radius: 20px 0 0 0;
}
As long as your parent div ('.bar') has a set width and height '.inner' and '.outer' can have width and heights of 100%.
*Please note though that the higher you make '.bar' the better the top left tab will look.
How can I create the following mock-up in HTML and CSS?
I have tried adding a separated <div> to create the sloped edge using transform: rotate(); with no luck.
Mainly, what I want to achieve is:
Two <div> elements with content
The two <div> elements have sloped edges and shadows
The skew transformation can create the slope, but unfortunately it applies to the whole div, not just one edge of it. You can use overlapping or nested divs to mix straight and skewed edges on the same box - however, this makes the shadows a bit problematic (see http://jsfiddle.net/z9am39sp/).
Another weakness is that with this particular setup, you can't fit the text to the skewed shape.
Still, it may be close enough for your purposes. Your call.
I gave it a shot and here is my working fiddle.
I used CSS3 transform: skew on a pseudo element.
HTML
<div class="container">
<div class="slope">content 2</div>
<div class="slope">content 1
<br/>text</div>
<div class="slope">content 3
<br/>text
<br/>text</div>
</div>
CSS
*, *:before, *:after {
box-sizing: border-box;
}
body {
background: #ddd;
}
.container {
/*border: 1px solid red;*/
padding: 0 3px 0 0;
overflow: hidden;
}
.slope {
width: 100%;
padding: 5px;
margin: 0 0 40px;
position: relative;
background: #fff;
}
.slope:before {
content:"";
width: 100%;
height: calc(100% + 26px);
position: absolute;
top: -13px;
left: 0px;
z-index: -1;
background: #fff;
box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.4);
transform: skew(0deg, 2deg);
}
.slope:last-of-type {
margin-bottom: 5px;
box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.4);
}
.slope:last-of-type:before {
margin-bottom: 0px;
height: calc(0% + 26px);
box-shadow: none;
}
Notes:
You might need to play with the transform: skew(Ndeg) and height: calc(100% +
Npx) depending on the size of the divs
You might also need vendor prefixes
Not sure about responsiveness but according to my tests, it works
fine.
You can use the :before and :after selectors. You can read more about them here
Also here is a fiddle
Feel free to leave a comment if you have any other question.
HTML
<div class="div-1"> </div>
<div class="div-2"> </div>
CSS
body{
background:#ccc;
}
.div-1{
width:100px;
height:150px;
position:relative;
background:#fff;
}
.div-1:before{
content:"";
position:absolute;
border:20px solid transparent;
border-right:100px solid #fff;
border-top:0px;
bottom:-20px;
left:-20px;
}
.div-2{
width:100px;
height:50px;
position:relative;
background:#fff;
margin-top:30px;
}
.div-2:before{
content:"";
position:absolute;
border:20px solid transparent;
border-left:100px solid #fff;
border-bottom:0px;
top:-20px;
right:-20px;
}
HTML:
<html>
<head>
<title>Parallax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<br><br>
</nav>
<h2>One ring to rule them all</h2>
<button>View Our Work</button>
</body>
</html>
CSS:
*
{
margin: 0;
}
body
{
background-image: url("background.jpg");
color: white;
font-family: Helvetica;
padding: 0;
}
h2
{
font-family: "Kingthings Calligraphica";
font-size: 30pt;
text-align: center;
margin-top: 30%;
}
nav
{
border: 1px solid red;
position: fixed;
padding: 10px 20px;
width: 100%;
top: 0;
}
nav div
{
float: left;
height: 100%;
width: 20%;
background-color: rgba(0,0,0,0.6);
transition: background-color 0.5s;
}
nav div:hover
{
background-color: rgba(0,0,0,0);
cursor: pointer;
}
button
{
border: 1px solid white;
border-radius: 3px;
background-color: rgba(0,0,0,0);
color: white;
padding: 10px 20px;
width: 100%;
}
Result:
Why does the nav go off the screen but the button doesn't?
That's cause you use
width:100%;
and
border: 1px solid red;
which equals to
100% + 2px;
than you also add padding
and it just adds to the math.
This will work: http://jsbin.com/vubug/2/edit
nav{
box-shadow: inset 0 0 0 1px red;
position: fixed;
width:100%;
top: 0;
}
To let the browser do the math you can also use the calc CSS property. (*2014 still experimental)
Also worth to note: action elements (input, button etc) act differently across browsers and even OS. The padding applied to a 100% width button is applied inwards, while applied to a 100% width block level DIV element it acts outwards adding to the set width.
One of the logic reasons is that you cannot have block-level elements inside the <button></button> (and have a valid markup) that will allow you to use that element's padding instead, so browsers try to compensate that applying the padding in the inner button's space. TEST CASE
Using CSS3 box-sizing: border-box ;
DEMO
<div id="widthAuto">DIV {width: auto;}</div> <!-- DESIRED -->
<div id="width100">DIV {width: 100%;}</div> <!-- OVERFLOWS -->
<div id="fixed">DIV {position:fixed;}</div> <!-- LOOSES WIDTH -->
<div id="fixed_width100">DIV {position:fixed; width:100%;}</div> <!-- OVERFLOWS -->
<div id="fixed_width100_boxSizing">DIV {position:fixed; width:100%; box-sizing: border-box;}</div>
CSS:
div{
background:#ddd;
border:10px solid red;
padding:10px;
margin-bottom:5px;
font-family:monospace;
}
div[id^=fi]{border-color:blue}
#widthAuto{
width:auto;
}
#width100{
width:100%;
}
#fixed{
position:fixed; /* Not in flow and looses the "auto" width :( */
/*just for preview*/ top:200px;
}
#fixed_width100{
position:fixed;
width: 100%; /* same issue as #width100 */
/*just for preview*/ top:300px;
}
#fixed_width100_boxSizing{
position:fixed;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*just for preview*/ top:400px;
}
Simplest solution
Or simply use the fixed element as a 100% width dummy wrapper and apply padding, border, whatever you need to an inner element. That's the way I do.
I need to create a solid color inset border. This is the bit of CSS I'm using:
border: 10px inset rgba(51,153,0,0.65);
Unfortunately that creates a 3D ridged border (ignore the squares and dark description box)
You could use box-shadow, possibly:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
<div id="something"></div>
This has the advantage that it will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow you can add additional shadows of course:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
<div id="something"></div>
Edited because I realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over the background:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
padding: 0;
position: relative;
}
#something div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(0, 255, 0, 0.6);
}
<div id="something">
<div></div>
</div>
Edited after #CoryDanielson's comment, below:
jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images.
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
<div id="something"></div>
I would recomnend using box-sizing.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
#bar{
border: 10px solid green;
}
To produce a border inset within an element the only solution I've found (and I've tried all the suggestions in this thread to no avail) is to use a pseudo-element such as :before
E.g.
.has-inset-border:before {
content: " "; /* to ensure it displays */
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 4px dashed red;
pointer-events: none; /* user can't click on it */
}
The box-sizing property won't work, as the border always ends up outside everything.
The box-shadow options has the dual disadvantages of not really working and not being supported as widely (and costing more CPU cycles to render, if you care).
It's an old trick, but I still find the easiest way to do this is to use outline-offset with a negative value (example below uses -6px). Here's a fiddle of it—I've made the outer border red and the outline white to differentiate the two:
.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}
<div class="outline-offset"></div>
If you want to make sure the border is on the inside of your element, you can use
box-sizing:border-box;
this will place the following border on the inside of the element:
border: 10px solid black;
(similar result you'd get using the additonal parameter inset on box-shadow, but instead this one is for the real border and you can still use your shadow for something else.)
Note to another answer above: as soon as you use any inset on box-shadow of a certain element, you are limited to a maximum of 2 box-shadows on that element and would require a wrapper div for further shadowing.
Both solutions should as well get you rid of the undesired 3D effects.
Also note both solutions are stackable (see the example I've added in 2018)
.example-border {
width:100px;
height:100px;
border:40px solid blue;
box-sizing:border-box;
float:left;
}
.example-shadow {
width:100px;
height:100px;
float:left;
margin-left:20px;
box-shadow:0 0 0 40px green inset;
}
.example-combined {
width:100px;
height:100px;
float:left;
margin-left:20px;
border:20px solid orange;
box-sizing:border-box;
box-shadow:0 0 0 20px red inset;
}
<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>
I don't know what you are comparing to.
But a super simple way to have a border look inset when compared to other non-bordered items is to add a border: ?px solid transparent; to whatever items do not have a border.
It will make the bordered item look inset.
http://jsfiddle.net/cmunns/cgrtd/
Simple SCSS solution with pseudo-elements
Live demo: https://codepen.io/vlasterx/pen/xaMgag
// Change border size here
$border-width: 5px;
.element-with-border {
display: flex;
height: 100px;
width: 100%;
position: relative;
background-color: #f2f2f2;
box-sizing: border-box;
// Use pseudo-element to create inset border
&:before {
position: absolute;
content: ' ';
display: flex;
border: $border-width solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: $border-width solid black;
// Important: We must deduct border size from width and height
width: calc(100% - $border-width);
height: calc(100% - $border-width);
}
}
<div class="element-with-border">
Lorem ipsum dolor sit amet
</div>
You can do this:
.thing {
border: 2px solid transparent;
}
.thing:hover {
border: 2px solid green;
}
If box-sizing is not an option, another way to do this is just to make it a child of the sized element.
Demo
CSS
.box {
width: 100px;
height: 100px;
display: inline-block;
margin-right: 5px;
}
.border {
border: 1px solid;
display: block;
}
.medium { border-width: 10px; }
.large { border-width: 25px; }
HTML
<div class="box">
<div class="border small">A</div>
</div>
<div class="box">
<div class="border medium">B</div>
</div>
<div class="box">
<div class="border large">C</div>
</div>
I know this is three years old, but thought it might be helpful to someone.
The concept is to use the :after (or :before) selector to position a border within the parent element.
.container{
position:relative; /*Position must be set to something*/
}
.container:after{
position:relative;
top: 0;
content:"";
left:0;
height: 100%; /*Set pixel height and width if not defined in parent element*/
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:1px solid #000; /*set your border style*/
}
You may use background-clip: border-box;
Example:
.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}
<div class="example">Example with background-clip: border-box;</div>
So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn't look all that good I fixed it with the following:
#top-menu .menu-item a:hover {
border-bottom:4px solid #ec1c24;
padding-bottom:14px !important;
}
#top-menu .menu-item a {
padding-bottom:18px !important;
}
I hope this will help someone out there.
Simpler + better | img tag | z-index | link image | "alt" attribute
I figured out a method where you do not need to use the image as a background image but use the img HTML tag inside the div, and using z-index of the div as a negative value.
Advantages:
The image can now become a link to a lightbox or to another page
The img:hover style can now change image itself, for example:
black/white to color, low to high opacity, and much more.
Animations of image are possible The image is more accessible because
of the alt tag you can use.
For SEO the alt tag is important for keywords
#borders {
margin: 10px auto;
width: 300px;
height: 300px;
position:relative;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right: 0;
z-index: -1;
}
<div id="borders">
<img src="https://i.stack.imgur.com/RL5UH.png">
</div>
I am confused as to have to make it work in CSS only to have a div where the border would be only visible on half it's width.
The border style is a simple 1px solid #000;
However, I want the top of the div's border to not be visible everywhere (on 100% on the div's width),
rather only on the first 50% of the div's width.
I haven't been able to get an example of this anywhere, and it needs to be in percentages, so the usual bag of tricks (image over the second half,...).
If you do not want to mess with the HTML at all, you can do it with an empty pseudoelement, using CSS only. You still need to know the background color, of course (assuming white here):
<span class="half-a-border-on-top">Hello world!</span>
<style>
.half-a-border-on-top {
border-top:1px solid black;
position: relative;
}
.half-a-border-on-top:after {
padding:0;margin:0;display:block;/* probably not really needed? */
content: "";
width:50%;
height:1.1px;/* slight higher to work around rounding errors(?) on some zoom levels in some browsers. */
background-color:white;
position: absolute;
right:0;
top:-1px;
}
</style>
Result:
Snippet
.half-a-border-on-top {
border-top:1px solid black;
position: relative;
}
.half-a-border-on-top:after {
padding:0;margin:0;display:block;/* probably not really needed? */
content: "";
width:50%;
height:1.1px;
background-color:white;
position: absolute;
right:0;
top:-1px;
}
<span class="half-a-border-on-top">Hello world!</span>
Fiddle:
http://jsfiddle.net/vL1qojj8/
Edit 2023: Now that even Safari seems to fully and properly support linear-gradient, the answer by 红了樱桃绿了吧唧 is probably more elegant, and will work without knowing the background color.
Would this work:
#holder {
border: 1px solid #000;
height: 200px;
width: 200px;
position:relative;
margin:10px;
}
#mask {
position: absolute;
top:-1px;
left:1px;
width:50%;
height: 1px;
background-color:#fff;
}
<div id="holder">
<div id="mask"></div>
</div>
You can use CSS gradient border
.half-a-border-on-top {
border-top: 1px solid;
border-image: linear-gradient(to right, #000 50%, transparent 50%) 100% 1;
}
<span class="half-a-border-on-top">Hello world!</span>
let show you how i edit the code of leo, to put a half border at left in center.
try this:
html code
<div class="half-a-border-on-left">Hello world!</div>
css code
<style>
.half-a-border-on-left {
border-left: 1px solid black;
position: relative;
height: 50px;
background: red;
}
.half-a-border-on-left:after {
padding:0;
margin:0;
content: "";
width: 1px;
height: 10px;
background-color:white;
position: absolute;
left:-1px;
top: -10px;
}
.half-a-border-on-left:before {
padding:0;
margin:0;
content: "";
width: 1px;
height: 10px;
background-color:white;
position: absolute;
left: -1px;
bottom: -5px;
}
</style>
Those are code i use to put a half border thank you leo,
I love Hyderabad
***
.div_1 {
width: 50px;
border-bottom: 2px solid black;
}
.div_2 {
width: max-content;
margin-bottom: 10px;
}
<div class="div_1" ><div class="div_2">I love Hyderabad</div></div>