I`m doing this website, and I need to put some shadows over google Maps <div> to achieve a shadow effect:
However, it`s not working.
This is how my css looks like right now:
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map_canvas {
height: auto;
z-index: 1;
}
#topBar {
background-image:url(img/top.jpg);
background-repeat:repeat-x;
height: 100px;
min-height:100px;
-moz-box-shadow: 0px 5px 5px #888;
-webkit-box-shadow: 0px 5px 5px #888;
box-shadow: 0px 5px 5px #888;
z-index:900;
}
As you can see, I`m using an image to create the shadow.
But my problem is: the map is not even loading.
If I put a fixed height instead of auto, it loads. But I fail at giving that shadowy vision. What happens is that the map is loaded ON TOP of the div with the shadow.
I already tried this solution already, with no success:
How to float a div over Google Maps?
Thanks in advance!
I think it will be fixed if you just add a position to the elements. Z-index needs a position to work..
So put "position:relative;" on both elements and you will be fine.
Related
I want to add a box shadow to my Nav-bar/header at the top of my page.
When I do like this:
.shadow { box-shadow: 0px 0px 5px #333 }
It works fine; however, because of the curvature you can see it curving at the bottom corners - I need it to be a straight down shadow.
Now because my header wraps the top of the page - the width is 100% - I could extend the side off-screen:
.shadow {
...
box-shadow: 0px 0px 5px #333;
left: -10px;
right: -10px;
padding: 0px 10px /* compensates for the spaces created either side */
}
This way the curves are hidden off screen; however this seem's like a filthy, dirty solution - is this the only way to achieve the effect I'm going for?
I've thought of adding an after with a background gradient to simulate the shadow - like so:
.shadow:after {
content: "";
position: absolute;
left: 0px;
right: 0px;
top: 100%;
height: 10px;
background: gradientStuffICantRemember
-o-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
-ie-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
-ff-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
-webkit-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated
}
However this is unbarabely filthy and disguisting.
Should I just extend out the header?
box-shadow has another parameter called spread that defines the size of the shadow..... it could help:
box-shadow: h-dist v-dist blur spread colour;
Cheers!
Here is a Plunker I just created: http://plnkr.co/edit/jKo6yavo9fFNHiMsEvAL?p=preview
It is a simple single row layout. What I need is a fixed minimum margin on both sides (left and right) of the row. Let's say 25px. Resizing the window should always show at meast 25px of grey background before and after the row.
I tried modifying the table.container style from:
table.container {
width: 580px;
margin: 0 auto;
text-align: inherit;
}
to
table.container {
width: 580px;
margin: 0 25px 0 25px;
text-align: inherit;
}
But it seems it does not work for the right margin (goes out of the page). Any suggestion?
I think the simplest solution would be to use the left and right table borders instead of margin.
Something like the CSS below should do the trick.
table.container {
width: 580px;
border-left: solid 25px #f1f0ef !important;
border-right: solid 25px #f1f0ef !important;
text-align: inherit;
}
Since not all email clients support margin your other option would be to add padding/border to an outer table/tables.
If you have any questions let me know.
I was just wondering if there's a way to create a div with the "border" inside the div. What I mean is: I have a div of 200px for example and I want the border to be inside that 200 pixels, without exceeding.
I need to achieve the effect of a div with a border not on the edge of the shape, but 5px more inside. An image can talk more than hundreds words
I want this:
Here is my code:
http://jsfiddle.net/hpLYD/1/
The CSS:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid blue;
}
Padding property is expanding the whole div including the border.
How can I achieve that effect using only css? is it possible?
You can do this using the CSS3 property box-shadow. Add the following to your CSS:
box-shadow: 0px 0px 0px 5px #f00;
jsFiddle example
While box-shadow is most likely the best way to go, people seem to forget that the question required that the border didn't exceed 200px. In order to actually achieve this you can use the inset parameter on the box-shadow attribute (which will make an inner shadow).
You will also need to change the box-sizing to border-boxsuch that the size is proportional to the border and not the content.
Here's an JSFiddle with the result
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid red;
box-shadow: 0px 0px 0px 5px blue inset;
box-sizing: border-box;
}
<div class="mydiv"></div>
.mydiv{
position:relative;
height:150px;
width:200px;
background:#f00;
}
.mydiv:before{
position:absolute;
content:'';
position: absolute;
top: 10px;
bottom: 10px;
left:10px;
right: 10px;
border:1px solid #daa521;
}
Here's an JSFiddle with the result
You can't place a border within an element, however you can use box-shadow to give that effect:
.circle {
border-radius: 50%;
width: 190px;
height: 190px;
background: red;
border: 3px solid blue;
box-shadow: 0px 0px 0px 10px red; /* 10px box-shadow */
}
JSFiddle example.
Do note though that this is a CSS3 style property and isn't supported on all browsers. You may also need to use vendor-prefixes on some browsers (-webkit, -moz, etc). Check http://caniuse.com/#search=box-shadow for support.
I suppose you could add another class to the circle.
I have done this for you.
I dont think you can add a padding to a rounded border (dont quote me on that), but I did the fiddle in about 30 seconds.
.scirle {see fiddle}
http://jsfiddle.net/hpLYD/7/embedded/result/
The problem is a border takes up screen real estate whether we like it or not.
If a 1px border is on 100px element, even if we could get it to appear inside, that element would now only be 98px inside. But what we are stuck with in reality is a 100px element that's actually 102px caused by the borders on the outside. Border-box doesn't seem to do anything to borders in latest Chrome - they always appear on the outside.
An easy way to solve this is using an absolutely positioned CSS :after or :before element, this basically means no screen space is lost by the border. See example:
.border{ position: relative; }
.border{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed rgba(50,50,50,0.5); }
I just stumbled on a problem where the shared border between a menu bar and the main content box does not go on properly (as the content box is too small)
Image: http://imgur.com/O3ra9
Code: http://jsfiddle.net/gh55e/2/
So I was wondering if there was a way to fix the border. Maybe by giving them both one and making it overlap? Just have no idea how to do this as margin -x doesn't work.
Give the right element a border all around, then use the margin-top and margin-left properties in the negatives to make them overlap. Here's an updated jsfiddle:
http://jsfiddle.net/gh55e/4/
CSS:
#right {
width: 85px;
float: right;
background-color: #e1e1e1;
padding: 0px 10px 10px 10px;
margin-top: -54px;
}
For later visitors, this is the CSS that eventually fixed it.
#right {
width: 385px;
float: right;
background-color: #e1e1e1;
padding: 0px 10px 10px 10px;
margin-left: -10px;
}
You basically make a margin of 10px and move it back for 10 px
The problem only affects IE (Mine's 9) and as it's shown there are unwanted paddings on each side of the img tag.
Here's the CSS:
.imgclass {
position:relative;
top: 10px;
left: 60px;
border: 1px solid #666;
box-shadow: #666666 0px 0px 3px;
border-radius: 5px;
opacity: 0.9;
}
And so far I've tried img>padding 0& img>display>block & img>vertical-align.
Screenshot: http://i.stack.imgur.com/u2K4E.png
Thanks in advance
try adding the below to your imgclass in CSS
filter:alpha(opacity=90);
padding: 0;
and also check for padding in parent element
you can adde specifically that padding = 0
padding: 0;
also it would be good to know what class/attributes are applied to the div/element containing the image as if it is larger then padding may not be the issue? perhaps specify a specific width and height if you can to prevent css guessing.