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:
}
Related
I have a parent div which has overflow:hidden. Inside a parent div, there is a dynamic div which height is more than the height of the parent div. How can I make the child div to be displayed as it is? Now it will be clipped because of the height of the parent div. I do not want to allow scrollbars to be displayed.
<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; background-color: transparent; overflow:hidden;">
<div style="width:100%;top:5px;left:150px;position:absolute;z-index:5000;background-color:#323B5A;-webkit-box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);-moz-box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);">
sgssgsgsgsdgsdgsgsg<br>aafafafafa<br>sgggdgdsgsgsdgdg
</div>
</div>
Update
It seems to me that this would work just fine. But I do not want to use position:relative with the child div.
<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; background-color: transparent; overflow:hidden;">
<div style="width:100%;top:5px;left:150px;position:relative;z-index:5000;background-color:#323B5A;-webkit-box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);-moz-box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.85);">
sgssgsgsgsdgsdgsgsg<br>aafafafafa<br>sgggdgdsgsgsdgdg
</div>
</div>
You could add a position:absolute to take the inner div out of the flow.
If you take the child div out of flow, using position fixed or absolute, than it would be visible. But please note: the parent div must remain static:
.holder {
position: relative;
}
.parent {
overflow: hidden;
height: 100px;
border: 1px solid blue;
}
.child {
position: absolute;
left: 10px;
top: 10px;
right: 10px;
height: 200px;
border: 1px solid red;
}
<div class="holder">
<div class="parent">
<div class="child">Visible?</div>
</div>
</div>
Also on JSFiddle.
I have two inline elements within a div. One element is floated to the left and the other to the right. I have used absolute positioning to place the block containing inline elements at the bottom of a DIV.
Problem: The element floating to the right skews out of its container. How can I fix this so that it stays within its container? Here is the CodePen.
HTML
<div class="posts__post">
<article>
<a class="posts__post--preview" href=""><img src="http://lorempixel.com/470/310/food" /></a>
<a class="posts__post--title" href=""><h1>Bryce Canyon A Stunning U.S Travel Destination</h1></a>
<div class="posts__post--meta">
<a class="posts__post__timestamp"><i class="fa fa-clock-o" aria-hidden="true"></i>10 days ago</a>
<a class="posts__post__tag">Motivation</a> <!-- element floating out --->
</div>
</article>
</div>
SCSS
.posts__post{
height: 400px;
width: 310px;
margin: 40px auto;
//margin-bottom: 40px;
position: relative;
text-align: left;
background-color: white;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
.posts__post--preview img{
width: 100%;
height: auto;
border-radius: 5px 5px 0px 0px;
}
.posts__post--tag{
font-size: em(15);
font-weight: bold;
color: $light-grey;
}
.posts__post--meta{
color: $light-grey;
position: absolute;
bottom: 25px;
left: 0;
display: block;
}
.posts__post--title, .posts__post--tag, .posts__post--meta{
margin: 0 25px;
display: inline-block;
text-docoration: none;
}
.posts__post__timestamp{
float:left;
}
.posts__post__tag{
float:right;
}
}
This is because of margin that you have given to posts__post--meta, instead of using margin use padding, and box-sizing:border-box
.posts__post--meta{
padding: 0 25px;
display: inline-block;
text-docoration: none;
width: 100%;
box-sizing: border-box;
}
For more info about box-sizing
.posts__post--meta{
color: $light-grey;
position: absolute;
bottom: 25px;
left: 0;
right:0; //add this
display: block;
}
Just to add a note I have noticed while I'm working on a php application. Using float within a <div> is overridding the whole div. to clarify my point. if you have <div class="page-wrapper"> and within it you have <div id="img-align"> and it has a float, it override the "page-wrapper" and stand alone. don't use it unless you really need it. Thanks
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
This is the illusion that I am attempting to create:
Notice that my designer wants the border cut off in the middle of the div, this is what I need to know how to do. I don't think overlapping with a z-index will work because of how the HTML is laid out.
This is the HTML code of which the structure may not be changed for maximum device compatibility, however, if adding an element is the solution, I believe that may be done:
<div id="nav_icons_con" class="mopn">
<div id="inner_nav_container" class="show_inner_nav">
<div class="nav_link_container">Home</div>
</div>
</div>
Here is the basic current CSS code:
#nav_icons_con {
z-index: 1;
cursor:pointer;
height: 5.005em;
width: 5.005em;background-image:url(background.png);
background-size:70%;
background-repeat:no-repeat;
background-position:center;
margin:.385em .385em 0 0;
}
#nav_icons_con.mopn{
background-color:#FFF;
border:2px solid #83C5E6;
border-bottom:none;
box-shadow:5px 5px 10px #666;
}
#inner_nav_container, .inner_nav_container{
cursor:pointer;
display:none;
position:absolute;
top:5.39em;
right:.385em;
width:12.5em;
white-space:normal;
background-color:#FFF;
border:2px solid #83C5E6;
border-top:none;
box-shadow:5px 5px 10px #666;
}
#inner_nav_container.show_inner_nav, .inner_nav_container.show_inner_nav{display:block;}
The typical way to do this is to position the tab element over the sub element, so as to cover up that section of the border. However, the use of box-shadow complicates this.
One way is to add another element inside the root element, so that the root element can still cast the shadow, but the element inside is positioned above. See my code below, for a basic example.
Working Example:
.icon {
width: 50px;
height: 50px;
position: relative;
/*Create the shape for the shadow.*/
border: 5px solid #83C5E6;
box-shadow: 5px 5px 10px #666;
}
.icon-content {
background: #fff;
position: relative;
/*Move back over the border.*/
top: -5px;
left: -5px;
/*Make tall enough to cover the top border.*/
width: 50px;
height: 55px;
/*Add border, except on the bottom.*/
border: 5px solid #83C5E6;
border-bottom: 0;
/*Position up a layer.*/
z-index: 1;
}
.nav {
position: absolute;
left: -5px;
top: 100%;
width: 400px;
padding: 1em;
background: #fff;
border: 5px solid #83C5E6;
box-shadow: 5px 5px 10px #666;
}
<div class="icon">
<div class="icon-content">
</div>
<div class="nav">
<div class="item">Home</div>
</div>
</div>
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.