I have one problem with internet explorer about css div positioning.
I have created this DEMO from codepen.io .
If you check this demo with chrome or firefox then you can see the .test div positioning vorking correctly but when you open the demo with internet explorer then you can see the .test div shifted to the left side. How can i fixed this problem to work all browser anyone can help me in this regard ?
.test {
display: block;
position: absolute;
height: auto;
top: 0;
left: 0;
right: 0;
max-width: 580px;
min-width: 300px;
margin-top: 64px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
padding-top: 2px;
background-color: #f7f7f7;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 840px;
}
.header {
height: 12rem;
background: #009688;
}
<div class="test"></div>
position : absolute
The element is positioned relative to its first positioned (not static) ancestor element.
So you need to specify position (position:relative | fixed | absolute i.e. any position apart form static) to the parent (this case body or html)
It works fine without position: absolute;
https://jsfiddle.net/agnmx7s6/1/
To center align the DIV below code enough.
body{text-align:center}
Remove the below code in .text class
position: absolute;
You can achieve this without absolute positioning.
Please check the fiddle - https://jsfiddle.net/afelixj/agnmx7s6/4/
Also added negative margin-top to the center div.
Related
I know about the box-shadow property in CSS, but this produces a shadow that looks like being projected on a wall right behind the element. I need to create a shadow that looks like the element is standing on the ground like this:
This is what I have so far:
div {
display: inline-block;
height: 150px;
width: 150px;
background: url(https://via.placeholder.com/150);
margin-left: 20px;
box-shadow: -5px 5px 10px 0 rgba(0,0,0,0.75);
}
<div></div>
<div></div>
You can achieve this without using the box-shadow property on the element itself, but on the pseudo element ::before.
transform: skewX(60deg); will make it look like the light source is coming from the side
height: 10%; will make it look like projected on the ground
width: 70% and some positioning will hide the actual element
And at last box-shadow: -25px -4px 4px 0 rgba(0,0,0,0.75); will produce the shadow
Of course for older browsers you should use vendor prefixes.
div {
position: relative;
display: inline-block;
height: 150px;
width: 150px;
background: url(https://via.placeholder.com/150);
margin-left: 30px;
}
div::before {
content: "";
position: absolute;
z-index: -1;
bottom: 0;
left: 15px;
height: 10%;
width: 70%;
box-shadow: -25px -4px 4px 0 rgba(0,0,0,0.75);
transform: skewX(60deg);
}
<div></div>
<div></div>
I am trying to to align one div below another and apply a margin top to the one below:
<div id="divContainer">
<div id="div1">
</div>
<div id="div2">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
I applied a margin to the second div, but it is not working:
#divContainer {
pointer-events: none;
position: absolute;
top: 10px;
left: 10px;
}
#div1 {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.1);
box-sizing: border-box;
border-radius: 5px;
}
#div2 {
padding: 10px;
background: rgba(0, 0, 0, 0.1);
box-sizing: border-box;
border-radius: 5px;
top: 10px;
width: 200px;
background: rgba(0, 0, 0, 0.1);
}
This results in the bottom div appearing below the first one. However the top: 10px; has no effect. I found online that to fix the margin problem, I should use display: inline-block; This however causes the two divs to appear next to each other rather than one being above the other.
How do I get the desired effect while keeping the second div below the first one?
top: 10px; works only for absolutely positioned elements. margin-top: 10px; will work after you set div2 position to relative.
You just need to set position: relative on #div2:
#divContainer {
pointer-events: none;
position: absolute;
top: 10px;
left: 10px;
}
#div1 {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.1);
box-sizing: border-box;
border-radius: 5px;
}
#div2 {
padding: 10px;
background: rgba(0, 0, 0, 0.1);
box-sizing: border-box;
border-radius: 5px;
top: 10px;
width: 200px;
background: rgba(0, 0, 0, 0.1);
position: relative;
}
You're not using margin-top but using top. And to the top,right,bottom, or left values need to be positioned. By default, position is static. So, those value for static position will not work:
position: relative;/*or absolute, or fixed*/
top: 30px;/*give your value*/
Now, this works.
We specially use them for positioning purposes. Thus, you may just use margin-top instead.
I'm not sure what you're after here, but I've created a fiddle with your code changing some colours for visibility and top to margin-top which is what I think you're after.
JSFiddle
I have an A4 page for print:
.page
{
width: 21cm;
min-height: 29.7cm;
padding: 1.2cm;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
Inside this page I'm trying to put in the bottom a table:
<table id="t_obs">
<tr>
<td>TEXT</td>
</tr>
</table>
With the css:
#t_obs
{
position: absolute;
bottom:0px;
}
But only with bottom: -100px it's going to the bottom, why?
Thanks.
use position:relative to .page
.page
{
width: 21cm;
min-height: 29.7cm;
padding: 1.2cm;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
position:relative;
}
DEMO
Works when you add position:relative to .page.
See http://jsfiddle.net/8EZv6/1/
You just need to add position: relative to .page like so:
http://jsfiddle.net/qX2Kb/
When you use position: absolute the element you position is only positioned with regards to the closest parent with position specified. If you don't specify position for any parent it will be positioned relative the body.
If you want your table to be positioned relative the containing .page element ,then you should add position: relative to the CSS for .page
.page {
position: relative;
...
}
Hopefully this will help show what I mean: http://jsfiddle.net/2nx8Z/4/
You can read more about positioning here: http://developer.mozilla.org/en-US/docs/Web/CSS/position
I want to move the header up to the topmost. But it won't go, here's the fiddle http://jsfiddle.net/DCtH7/4/
As you see in the fiddle, there is a white space above the header. I tried padding: 0 but it won't work.
Add position: absolute to the header
header {
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: white;
width: 100%;
height: 34px;
box-shadow: 0px 3px 3px black;
margin: 0 auto;
position: absolute;
}
An example : http://jsfiddle.net/DCtH7/6/
As an alternative way change margin to padding here:
header #header-content {
padding: 10px;
}
This will also fix the problem without use any absolute position
An example : http://jsfiddle.net/DCtH7/7/
I am willing to add some inset box-shadow to a tag that is containing a Google Maps element. However, it seems nothing happens, probably because Google loads some other div's in the original element, hence covering the generated box-shadow.
How can I achieve this effect?
Here's the code I have:
<section id="map-container">
<figure id="map"></figure>
</section>
#map-container {
position: relative;
float: right;
width: 700px;
background-color: #F9FAFC;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#map {
position: relative;
height: 400px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset;
}
Thank you!
That's how I did it. The following method won't overlap map controls, so you will be able to manipulate the map, i.e. drag, click, zoom, etc.
HTML:
<div class="map-container">
<div class="map"></div>
</div>
CSS:
.map-container {
position: relative;
overflow: hidden;
}
.map-container:before, .map-container:after, .map:before, .map:after {
content: '';
position: absolute;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
z-index: 1;
}
.map-container:before { top: -5px; left: 0; right: 0; height: 5px; }
.map-container:after { right: -5px; top: 0; bottom: 0; width: 5px; }
.map:before { bottom: -5px; left: 0; right: 0; height: 5px; }
.map:after { left: -5px; top: 0; bottom: 0; width: 5px; }
DEMO: http://jsfiddle.net/dkUpN/80/
UPDATE: The old solution (see 1st revision) didn't have pseudo-elements support and was compatible with old browsers. Demo is still available here: http://jsfiddle.net/dkUpN/.
I just had the same issue while trying to add an inset shadow to one side of an embedded map. I tried adding it to the map-canvas element but no shadows were visible. No idea about the reason of this behaviour, maybe is the position:absolute of some of the elements within the map.
Anyway, instead of adding other unsemantic elements to the code, I'd rather go for a pseudoelement made of a thin (5px) strip overlayed to the map:
This adds the shadow on the left side:
#map-container:before {
box-shadow: 4px 0 4px -4px rgba(0, 0, 0, 0.5) inset;
content: "";
height: 100%;
left: 0;
position: absolute;
width: 5px;
z-index: 1000;
}
demo: http://jsfiddle.net/marcoscarfagna/HSwQA/
For a right side shadow instead:
#map-container:before {
box-shadow: -4px 0 4px -4px rgba(0, 0, 0, 0.5) inset;
content: "";
height: 100%;
right: 0;
position: absolute;
width: 5px;
z-index: 1000;
}
Figured it out. Here the working CSS:
#map-container {
position: relative;
float: right;
width: 700px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset;
}
#map {
position: relative;
height: 400px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
z-index: -1
}
When faced with this sort of problem, I usually revert to using custom overlays. (https://developers.google.com/maps/documentation/javascript/overlays#AddingOverlays)
Use a custom overlay to add a div inside the map on whichever layer suits you best, you will be able to style this div with CSS.
Andrei Horak answer works best.
But Sometimes using z-index is not an option because of your layout. Appending an extra div to google maps is a second best option:
#map_canvas .shadow{
width:100%;
position:absolute;
left:0;
top:0px;
height:100%;
z-index:99999;
position:relative;
-webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
pointer-events: none;
}
Then in your google maps script:
google.maps.event.addListener(map, 'idle', function() {
// Add shadow effect on map
$("#map_canvas .shadow").remove();
$("#map_canvas").prepend('<div class="shadow">');
});
The pointer-events:none; is a little bit tricky because of cross browser compatibility. Find more on pointer-events here
One other option, while not working in all cases, is to put the box-shadow on the element next to the map. Google themselves did it this way here
You will need to look at the elements that Google is adding and target and override those with your CSS styles. Use Firebug, webkit "inspect element" etc. to see the elements that get added and their styles.
If you are looking to style the infowindow have a look at this question.
This applies to most objects that appear on google maps. Targeting them with your own css is possible but I doubt anyone ever did it because it is hard (i tried).
I added an extra that contained the inset shadow.
HTML:
...
#mapContainer{
position:relative;
}
.map{
width:425px;
height:350px;
z-index:9999;
position:absolute;
top:0;
left:0;
#include borderAffect($pad:0,$borderCol:#00467F,$insetVal:true);
}