I made a fixed header div to my site and added a shadow under it but it doesn't fit my browser (100% width) ??
here is my css:
body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
#head{
width: 100%;
height: 60px;
background-color: #5B86E1;
box-shadow: 0 10px 17px -5px #000000;
position: fixed;
}
#content{
width: 900px;
padding-top: 60px;
min-height: 100px;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="head">
</div>
<div id="content">
</div>
</body>
</html>
Here is a screen capture:
You have a negative spread radius; for it to be full width you want this:
box-shadow: 0 10px 17px 0px #000000;
Demo:
body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
#head{
width: 100%;
height: 60px;
background-color: #5B86E1;
box-shadow: 0 10px 17px 0px #000000;
position: fixed;
margin-right: auto;
margin-left: auto;
}
#content{
width: 900px;
padding-top: 60px;
min-height: 100px;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="head">
</div>
<div id="content">
</div>
</body>
</html>
The most waterproof solution: make your element longer (either with the width or padding property) than the viewport, and set negative margins (note: the margins are only really required to make this work with non-fixed elements). Your new #head css:
#head {
width: 110%;
margin: 0px -5%;
height: 60px;
top: 0;
background-color: #5B86E1;
box-shadow: 0 10px 17px 0px #000000;
position: fixed;
}
As other answers have mentioned: it is advised to set the border-radius spread property to a non-negative value. Or you could use separate box-shadows for each side.
Give the fixed element a position using left top ``right```
header{
position:absolute;
left:0px;
top:0px;
right:0px;
height:60px;
background-color:#00f;
box-shadow:0px 0px 17px #000;
}
Added a fiddle: https://jsfiddle.net/hpdymvqg/
The issue is beause you have a negative value for your box-shadow. Changing it to the following fixes the issue:
box-shadow: 0 10px 17px 0px #000000;
Tested here
Related
I'm new to html and css, and while I was creating a page for training, I made one div to fill the top horizontal space.
However I did not have succsess in doing that, and I have no idea why, I tried tweaking the margins, the padding, looked around on the internet and found no solution for my case. I wanna know if it is possible to fill all horizontal space with only one div.
Here is how my code currently is looking:
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Orbitron');
body{
background-color: green;
color: green;
font-family: 'Orbitron', sans-serif;
overflow-x: hidden;
}
div#page{
width: 900px;
height: 900px;
background-color: black;
box-shadow: 1px 1px 500px rgb(0,0,0);
padding: 10px;
margin: 0px auto 0px auto;
}
div#pageHead {
width: 102%;
background-color: rgb(20,20,20);
height: 70px;
position: relative;
margin: -8px 0px auto 0px;
}
<div id="pageHead">
<header></header>
</div>
<div id="page">
<header>
this is a test
</header>
</div>
Just apply margin:0 to the body tag. You are getting the default margin from the body.
body{
background-color: green;
color: green;
font-family: 'Orbitron', sans-serif;
overflow-x: hidden;
margin:0;
}
div#page{
width: 900px;
height: 900px;
background-color: black;
box-shadow: 1px 1px 500px rgb(0,0,0);
padding: 10px;
margin: 0px auto 0px auto;
}
div#pageHead {
width: 102%;
background-color: rgb(20,20,20);
height: 70px;
position: relative;
margin: -8px 0px auto 0px;
}
<div id="pageHead">
<header></header>
</div>
<div id="page">
this is a test
</div>
Try this
body{ margin :0; background-color: green;color: green; font-family: 'Orbitron', sans-serif; overflow-x: hidden;}
A div by default takes up as much horizontal space as possible. So it is generally as wide as its parent element.
As I understand your problem you are missing the the last few pixels on either side. This is not an issue of the div, but of the body element. The body element has to a default margin.
So you have to set the body margin to 0 (zero). Then you can either not specify a width for the div or give the div a width of 100%.
Then the div should take up the whole horizontal space of the webpage.
First problem, your page div is not valid (closed tag that is never opened).
For the width, add
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
to reset browser styles.
https://jsfiddle.net/dtz5h9yh/3/
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Orbitron');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: green;
color: green;
font-family: 'Orbitron', sans-serif;
overflow-x: hidden;
}
div#page{
width: 900px;
height: 900px;
background-color: black;
box-shadow: 1px 1px 500px rgb(0,0,0);
padding: 10px;
margin: 0px auto 0px auto;
}
div#pageHead {
width: 102%;
background-color: rgb(20,20,20);
height: 70px;
position: relative;
margin: 0;
}
<div id="pageHead">
<header></header>
</div>
<div id="page">
<header>
this is a test
</header>
</div>
Add this to your CSS:
*{
margin:0;
padding:0;
}
div#page{
width:100%;
}
Also remove the </header> from the div with id"page".
hope this helped
I have a basic HTML showing the safe zones used in broadcast. However, when I add text to the divs I have set up, it throws the alignment out of place.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="browserClock.css">
</head>
<body>
<div id="safeAction">Safe Action Area
<div id="safeText">Safe Text Area
</div>
</div>
</body>
</html>
html {
width: 1920px;
height: 1080px;
margin: 0;
padding: 0;
background-color: black;
}
body {
margin: 0;
width: 100%;
height: 100%;
background-position: 0 0;
}
#safeAction {
width: 1786px;
height: 1003px;
margin: 37px 66px 37px 66px;
border: 1px dashed white;
}
#safeText {
width: 1728px;
height: 971px;
margin: 16px 28px 16px 28px;
border: 1px dotted white;
}
Without the text, it lines up as per the EBU standard pixel spacing. With text it does not.
This is happening because the inner div with id safeText is positioned relative to the other contents of the div it is in. To fix this, set the position of safeText to absolute and use top to set the the distance from the top of the inner div to the top of the outer div (in your case 16px) instead of the top-margin. Finally, give the body relative positioning so that it is determined a parent.
JSFiddle
body {
margin: 0;
width: 100%;
height: 100%;
background-position: 0 0;
position: relative;
}
#safeAction {
width: 1786px;
height: 1003px;
margin: 37px 66px 37px 66px;
border: 1px dashed white;
}
#safeText {
width: 1728px;
height: 971px;
margin: 0px 28px 16px 28px;
border: 1px dotted white;
top: 16px;
position: absolute;
}
I have a header element in a header div but for some reason i can't seem to add any bottom margin or padding to it. Margin/padding top, left, and right work find however. is there a reason for this? here is my code.
html
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
css
#Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
/----------------------------------------/
#Header {
position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/
}
I would avoid using position styling like that; it tends to interfere with the way block elements interact with each other. Based on the styles and markup provided, I don't see a reason why padding/margin would not be working; however your example doesn't actually show any padding/margin applied, so it's hard to say what might be going wrong.
I would alter your styling thusly:
#Container {
width: 96%;
margin-left: auto;
margin-right: auto;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
height: 15%; /* This should really be a static number, not a percentage*/
width: 100%;
border-bottom: 2px solid #e8e2e2;
margin-bottom: 20px; /* This will push elements below your header div down by 20 px*/
}
Try to add pading to header tag's self. Because it is relative to other containers.
#Container {
position:relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position:relative;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
position:relative;
padding-top:20px;
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/
}
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
Firstly, please add #for Container as in #Container in css.
Below is the code where I have added margin bottom for h1. Please let me know if you still have any troubles.
<html>
<head>
<style type="text/css">
#Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
border:1px solid red;
margin-bottom:10px;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
<p>some text here</p>
</div>
</div>
</body>
</html>
Hope this helps.
Thanks
Padding-bottom and margin-bottom does actually work, it's just that it's not visible because you're currently setting the height of #Header to 15% and then giving it that light grey bottom border. This is what gives the illusion that padding-bottom or margin-bottom doesn't work.
See working version here http://codepen.io/sajadtorkamani/pen/zxxzgo
HTML
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
CSS
Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position: absolute;
/* height: 15%; */
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
padding-bottom: 20px;
/*background-color: red;*/
}
Just commenting out height: 15% for #Header solves the issue.
Can't get the form to be INSIDE the frame for the life of me when using relative position. In absolute it works, but changes spots depending on window size.
Help!
Here's the outcome
http://orange-restoration.com/water-damage-24-hour-help/
Set
<div id="main">
to position:relative, then set your
<div id="main-form">
to position:absolute
<div id="main-form">
<H3>Let us call YOU back </H3>
<script type="text/javascript" src="http://form.jotform.com/jsform/92640718225"></script>
</div>
CSS:
#main-form
{
position: relative;
top: 300px;
left: 600px;
width: 300px;
height: 220px;
margin: 1px;
background-color: white;
padding: 10px 30px 30px 30px;
border-radius: 15px;
z-index: 1000;
box-shadow: 5px 5px 3px #888888;
border-style:solid;
border-width:1px;
border-color:#888888:
}
I have two sections, results on the left and main on the right which reside in html > wrapper > container.
Now, the heights of both of these are not fixes and would want them to stretch to 100% depending on their contents. On some occasions, results are longer than main and vice versa. I've used 100% height, but it just doesn't seem to work. Please help!
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
width: 100%;
}
#container {
width: 1007px;
padding: 130px 0 0 0;
display: block;
}
.results {
width: 383px;
float: left;
background:
#fff;
display: block;
-webkit-box-shadow: -2px 0px 8px -6px #000;
-moz-box-shadow: -2px 0px 8px -6px #000;
box-shadow: -2px 0px 8px -6px #000;
padding-bottom: 60px;
}
.main {
width: 606px;
float: left;
padding: 15px 0 0 16px;
position: relative;
background: url(images/pattern.png) repeat;
height: 100%;
bottom: 0px;
}
<html lang="en>
<head></head>
<body>
<div id="wrapper">
<div id="container" class="clear fix">
<section class="results">
</section>
<section class="main">
</section>
</div>
</div>
</body>
</html>
Try to use "absolute" in instead of "relative" in position attribute.
I did here and worked.
For example:
.main {
width: 606px;
float: left;
padding: 15px 0 0 16px;
position: absolute;
background: url(images/pattern.png) repeat;
height: 100%;
bottom: 0px;
}
Hugs,
Vinicius.
In many cases the problem arises when one states the height should be 100% but you need to ask the question, "100% of what?". That answer is the parent of that element so the next question is, "What is the parent's height set to?". If you don't have a height set to the parent, then 100% of nothing is nothing.