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.
Related
I am currently working on a drag and drop web app with vue.js
In this app, we have some special designed borders on an input HTML element.
The designs look like this: (ignore the grey vertical line. This is drawn dynamically)
I have tried something like creating a sibling div an make it a little bit larger than the input, set it with z-index behind the input and set a color. But the problem is that the light blue border-right and border-left will always take 100% of the height. I need something like 75% or 80%.
The "overlapping" border can also be on the top, right or left on an element
Does anyone have a clue for the best way to solve this problem responsive?
border-image with gradient is what you need:
input {
border:2px solid;
padding:10px;
background:pink;
}
.one {
border-image:linear-gradient(to right, red 80%,blue 0) 2;
}
.two {
border-image:linear-gradient(to bottom,red 70%,blue 0) 2;
}
<input type="text" class="one">
<input type="text" class="two">
You can use :after and :before for the borders that cover the remaining 20%.
<div><input value="Text"/></div>
CSS:
input {
padding:20px;
border: 5px solid lightblue;
border-bottom: 5px solid gray;
position:relative;
display:block;
}
div:before {
content:' ';
width:5px;
height: 14px;
background:gray;
position:absolute;
display:block;
bottom:0;
left:0;
z-index:999;
}
div:after {
content:' ';
width:5px;
height: 14px;
background:gray;
position:absolute;
display:block;
bottom:0;
right:0;
z-index:999;
}
div {position: relative;width:fit-content;}
See example: https://codepen.io/MistaPrime/pen/XWryOOy
I would probably style the wrapping element and add psuedo elements on it.
https://codepen.io/slackday/pen/wvwQOvq
<html>
<head>
<title>How to create a overlapping border with different colors and widths / heights on a input element?</title>
</head>
<style>
body {
margin: 0;
padding: 0;
}
.site {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.input-wrapper {
position: relative;
}
.input-wrapper::before,
.input-wrapper::after {
height: 20%; /* adjust height of how much it should overlap */
width: 1px; /* same width as your input border */
position: absolute;
bottom: 0;
z-index: 1;
content: '';
background-color: #ccc; /** same color as bottom border */
}
.input-wrapper::before {
left: 0;
}
.input-wrapper::after {
right: 0;
}
input {
border: solid 1px aqua;
border-bottom: solid 1px #ccc;
position: relative; /* to position psuedo elements ::before, ::after */
padding: 1rem;
font-size: 16px;
line-height: 1;
}
input:focus {
outline: none;
}
</style>
<body>
<main class="site">
<div class="input-wrapper">
<input type="text" value="text" placeholder="Aorta" />
</div>
</main>
</body>
</html>
body{
position:relative;
width:200px;
margin:0 auto;
background:gold;
}
.btn{
position:absolute;
right:10px;
bottom:0;
background:blue;
color:white;
}
<button class='btn'>SEND</button>
why body in code snippet is not 200px?
where is btn in code snippet?
On my localhost body IS 200px and btn is there but outside of body (seams as his parent is html and not body.
Any help?
Here you are confused by a specific behavior of the background which is background propagation from body to canvas which make you thing that what you see is the whole body.
For documents whose root element is an HTML HTML element or an XHTML
html element [HTML]: if the computed value of background-image on the
root element is none and its background-color is transparent, user
agents must instead propagate the computed values of the background
properties from that element’s first HTML BODY or XHTML body child
element. ref
If you add a background color to the html element this one will get used and you will no more see the gold
html {
background: red;
}
body {
position: relative;
width: 200px;
margin: 0 auto;
background: gold;
}
.btn {
position: absolute;
right: 10px;
bottom: 0;
background: blue;
color: white;
}
<button class='btn'>SEND</button>
Now it's clear the body is not visible simply because its height is 0 since there is no in-flow element inside it as the button is position absolute. Considering this, bottom:0 is the top of you screen and you button is overflowing from the top.
Let's add some animation to see it:
html {
background: red;
}
body {
position: relative;
width: 200px;
margin: 0 auto;
background: gold;
}
.btn {
position: absolute;
right: 10px;
bottom: 0;
background: blue;
color: white;
transition:1s;
}
html:hover .btn {
bottom:-50px;
}
<button class='btn'>SEND</button>
And to make sure that your body is having a width equal to 200px and a height 0 simply add a border and you will see it. You will also notice the background propagation
body {
position: relative;
width: 200px;
margin: 0 auto;
background: gold;
border:5px solid;
padding:1px;
}
.btn {
position: absolute;
right: 10px;
bottom: 0;
background: blue;
color: white;
transition:1s;
}
body:hover .btn {
bottom:-50px;
}
<button class='btn'>SEND</button>
As you can see the body behave exactly like you want (centred with 200px width) and by adding a small padding and border we can also see that the button is placed at the bottom right.
You need to apply some of the properties to both your body and html because there is no content to apply your height: 100% to.
Try applying a border on your body to see how 'big' it is. If you do not set a height to you html at the same time, you will see that it has no height because of the lack of content.
body, html {
position: relative;
width: 200px;
height: 100%;
margin: 0 auto;
}
body {
background: gold;
}
.btn {
position: absolute;
right: 10px;
bottom: 0;
background: blue;
color: white;
}
<button class='btn'>SEND</button>
you must have to add a body height, 100% is not ok without any element in the body
try this CSS code
body{
position:relative;
width:200px;
margin:0 auto;
background:gold;
border: 1px solid #111;
height: 100px; /* this height for example */
}
.btn{
position:absolute;
right:10px;
bottom:0;
background:blue;
color:white;
}
Please try following code
body {
position:relative;
width:200px;
margin:0 auto;
background:gold;
}
.btn {
position:absolute;
right:10px;
bottom:0;
background:blue;
color:white;
top: 0;
height: 25px;
}
<button class='btn'>SEND</button>
Since you havent mentioned what end result you want. I have assumed few things and worked accordingly. Since all the absolute elements are by default related to body. The position relative to the body is not making any difference. Plus if you want a 200px width of the button container, its better to use a div here with max-width:200.Try the code below make changes accordingly. Hope it helps !!
CSS:
body{
//Removed everything
}
.btn{
position:absolute;
width:60px;height:20px;
top:50%;left:50%;
margin-top:-10px;margin-left:-30px;
background:blue;
color:white;
}
.button_holder{
position:relative;margin: 50px auto;
max-width:200px;height:100px;
background:gold;
}
Markup :
<div class="button_holder">
<button class='btn'>SEND</button>
</div>
https://codepen.io/anon/pen/MPvLqE
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>
my problem is that I am trying to center a div inside my full-width header like this:
</body>
<!-- the CSS -->
#header {
margin-top: -1em;
margin-left: -1em;
height: 2.95em;
padding:15px 0;
min-width:150%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
#insideHeader {
border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}
The result of this code is in the here.
Thanks in advance.
min-width:100%; seem to centre your div...
body {
background-color: red;
margin: 0;
}
#header {
margin: 0;
height: 2.95em;
padding:15px 0;
min-width:100%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
#insideHeader {
border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}
<body>
<div id="header">
<div id="insideHeader"></div>
</div>
</body>
or
http://jsfiddle.net/x1b7zpy4/1/
As my understanding you are trying to fit the outer box in the window and center align the inner box.
Add/Update following styles
html, body {
margin: 0;
padding: 0;
}
#header {
margin-top: -1em;
height: 2.95em;
padding:15px 0;
width:100%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
There are default padding/margin of browser. You need to override those in order to fit your outer box.
Once you do that, you need to remove your negative left margins which were put in order to make box stick to the boundary of window.
Then set the width to 100%.
For reference - http://jsbin.com/lomeganori/1/edit?html,css,output
give
#header
{
box-sizing: border-box;
//and remove height:2.5rem;
}
box-sizing:borderbox will removes all your troubles, and dont give height to parent
that will automatically take the height of the inner div
I'm trying to position a close icon from bootstraps sprite, in the top right side of the image ( not the box). I took this from a working example, but it wont work for me. It always ends up outside the box and at the right corner of the screen.
How can I get this right? I've setup a fiddle, but could not figure how to get the sprite in there. Can you help?
Fiddle
<!DOCTYPE HTML>
<html>
<head>
<link media="screen" type="text/css" href="icons.css" rel="stylesheet">
<title>Delete Image Icon Dev</title>
<style>
img.thumbnail {
background: none repeat scroll 0 0 #FFFFFF;
}
.image:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.image {
-moz-box-sizing: border-box;
border: 1px solid #DDDDDD;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
float: left;
height: 150px;
margin-bottom: 10px;
padding: 10px;
}
.image img {
vertical-align: middle;
}
.delete {
position:absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<div class="image"><img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg"><i class="icon-remove blue delete"></i></div>
</body>
</html>
This example can take an image of any height.
Turn the <i class="delete"> into a <div>
Wrap the <img> with the new delete div
Give .image:before a min-height: 150px; and remove the fixed height on .image
Apply position: relative to .delete
Apply the delete button to a pseudo elment with .delete:after or place another <i> to make it interactive.
Have an example!
Example without the delete pseudo element
HTML
<div class="image">
<div class="icon-remove blue delete">
<img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg">
<!-- <i class="delete-button"></i> if you need to use a real element -->
</div>
</div>
CSS
.image:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
min-height: 150px;
}
.image {
-moz-box-sizing: border-box;
border: 1px solid #DDDDDD;
float: left;
margin-bottom: 10px;
padding: 10px;
}
.delete {
position: relative;
vertical-align: middle;
display: inline-block;
}
.delete:after {
content: '';
position:absolute;
top:0;
right:0;
height: 20px;
width: 20px;
background: #F00;
}
/* If you need to use a real element remove .delete:after and use this --
.delete .delete-button {
content: '';
position:absolute;
top:0;
right:0;
height: 20px;
width: 20px;
background: #F00;
}*/
You need to set position:relative; to the .image div and then set the top and right parameters to the .delete element.
.image {
/* Other rules here */
position:relative;
}
.delete {
/* Other rules here */
position:absolute;
top:30px;
right:15px;
}
Here is a jsfiddle also: http://jsfiddle.net/eugbrqwc/15/. I added some text to the .delete element just to make it visible.
/e
you need to update your markup:
<div class="image">
<div class="img">
<img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg" />
<i class="icon-remove blue delete"></i>
</div>
</div>
and also your css:
img.thumbnail {
background: none repeat scroll 0 0 #FFFFFF;
}
.image:before {
content:"";
display: inline-block;
vertical-align: middle;
}
.image {
-moz-box-sizing: border-box;
border: 1px solid #DDDDDD;
float: left;
height: 150px;
margin-bottom: 10px;
padding: 10px;
vertical-align: middle;
}
.image .img {
display: block;
vertical-align: middle;
position: relative;
}
.delete {
position:absolute;
top:0;
right:0;
width: 10px;
height: 10px;
background: red;
}
Example: http://jsfiddle.net/eugbrqwc/17/
you don't need the height, width and background in .delete - just for showing purposes
Add a wrapper <div> around your image and icon, set it to display: inline-block and position: relative. Its size will conform to the image's, while allowing the icon to absolutely position itself to the top right.
Hi I created a fork of your fiddle and I have solved it. http://jsfiddle.net/bkx1dnsb/1/
You needed Position:relative on the image class
There was no icon so i added an X but your icon will be in the same spot.
Use the top & right from the delete class to tinker the positioning.
The reason it was going to the top right was because position absolute is relative to the browser window. Unless you set position releative on the parent of the absolute positioned element.
Hope that helps