Is there a way to make my #inner_div stop appearing behind the #main_div if it exceeds a certain width? I tried removing the overflow:hidden from #main_div in css but that causes the background of the #main_div to load very slowly, so I would like to find another solution if possible. Thanks
Main div css:
#main_div {
-moz-border-radius:5px;
-moz-box-shadow: 0 3px 3px rgba(255, 255, 255, 0.1), 0 3px 0 #BBBBBB, 0 4px 0 #AAAAAA, 0 5px 3px #444444;
background: none repeat scroll 0 0 #F6F6F6;
border: 1px solid #FFFFFF;
margin: 20px auto;
overflow: hidden;
padding: 10px;
width: 970px;
}
Inner div css:
.inner_div{
font-size:12px;
font-weight:normal;
font-style:normal;
margin: 5px 0px 0px 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
z-index: 0;
visibility: hidden;
position: absolute;
/* white-space: nowrap;*/
text-align: left;
padding: 5px 5px 5px 5px;
width:200px;
}
Instead of using overflow:hidden, you should use the new "micro clearfix".
Go here: http://nicolasgallagher.com/micro-clearfix-hack/
In your markup, you simply just add the class "cf" on #main_div
Related
I want to make box-shadow to the left and right sides,however there is alway a shadow in the top of the box,I have checked my code many times.
#box {
margin: 0 auto;
margin-top: 0px;
border: 1px solid #ffffff;
border-top-color: #e99f2e;
overflow: hidden;
box-shadow: 2px 0 20px 2px #7f7e7f, -2px 0 20px 2px #7f7e7f;
}
<div id="box"></div>
First understand the syntax of box-shadow and then it get's easy to apply box-shadow at any side as you have planned your design,
syntax -
box-shadow : offset-x | offset-y | blur-radius | spread-radius | color
#box {
margin: 0 auto;
margin-top: 0px;
overflow: hidden;
box-shadow: -10px 0 2px -2px #7f7e7f, 10px 0 2px -2px #7f7e7f;
height: 150px;
width: 50%;
background:#cff;
margin-top:20px;
}
<div id="box"></div>
There is a hack actually.
You can achieve this by adding an "empty" top and bottom shadow.
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(30, 53, 125, 0.9), -12px 0 15px -4px rgba(30, 53, 125, 0.9);
I don't think this is as good as the other answers, but this is an alternative approach using absolute positioned pseudo elements with shadows.
.lr-shadow {
background:#fff;
border: 1px solid #fff;
border-top-color: #e99f2e;
width:100%;
max-width:500px;
height:200px;
position:relative;
margin:0 auto;
}
.lr-shadow:before, .lr-shadow:after {
box-shadow: 0 0 20px 2px #7f7e7f;
content:" ";
position:absolute;
top:50%;
transform:translateY(-50%);
height:90%;
z-index:-1;
}
.lr-shadow:before {
left:5px;
}
.lr-shadow:after {
right:5px;
}
<div class="lr-shadow"></div>
You can achieve this effect if you set the spread to the negative of blur parameter. For the left box shadow, set position to negative blur and the right box shadow, position to positive blur. I used 20px in this demo:
#box {
margin: 0 auto;
margin-top: 40px;
border: 1px solid #ffffff;
border-top-color: #e99f2e;
overflow: hidden;
width: 150px;
height: 150px;
box-shadow: 20px 0px 20px -20px #7f7e7f, -20px 0px 20px -20px #7f7e7f;
}
<div id="box"></div>
Check out this CSS Box-shadow generator to explore further.
I have used CSS border-image to attain certain effect in the menu bar. Its working good in Firefox. But doesn't work in Chrome.
See www.imptools.com. Is there any workaround for chrome?
CSS
nav.mainMenu{
width:#16cols; height: 50px;
margin:0 auto; position: relative;
top:-25px;
ul{
width:100%; height:50px; overflow: visible;
background: url('../imgs/gun_metal.png');
border-radius: 15px; box-shadow: 0px 3px 3px #dark;
li{
float:left; width: auto;
margin: 0 20px; overflow: visible;
height: 80px; position:relative; top:-15px;
a{
width: auto; height: auto;
float:left; padding: 0 15px;
font-family: #sansSec;
color:#light;
line-height: 80px;
font-size: 24px;
font-weight: bold;
text-shadow: 3px 3px 3px #dark;
}
}
li.active, li:hover{
background: #primary;
border-radius: 15px 0 15px 15px;
border-image:url(../imgs/menu_active_bg.png);
border-image-width:15px 15px 0px 0px;
border-image-outset: 0px 15px;
}
}
Try setting the border before setting the image like so
border: 50px solid transparent;
I have noticed that in Safari this statement doesn't matter but it does matter in chrome
According to chrome platform status,
Blink will begin to require a border style in order to paint border images. This has always been required by the spec, but has not been enforced. In order to not be affected by this change, add e.g. 'border-style: solid' where border-image is used.
so adding
border-style: solid;
should fix your issue.
li.active, li:hover{
background: #primary;
border-radius: 15px 0 15px 15px;
-webkit-border-radius: 15px 0 15px 15px;
-moz-border-radius: 15px 0 15px 15px;
-khtml-border-radius: 15px 0 15px 15px;
border-image:url(../imgs/menu_active_bg.png);
-webkit-border-image:url(../imgs/menu_active_bg.png);
-moz-border-image:url(../imgs/menu_active_bg.png);
-khtml-border-image:url(../imgs/menu_active_bg.png);
border-image-width:15px 15px 0px 0px;
-webkit-border-image-width:15px 15px 0px 0px;
-moz-border-image-width:15px 15px 0px 0px;
-khtml-border-image-width:15px 15px 0px 0px;
border-image-outset: 0px 15px;
-webkit-border-image-outset: 0px 15px;
-moz-border-image-outset: 0px 15px;
-khtml-border-image-outset: 0px 15px;
}
Try it like below.
li.active, li:hover{
background: #primary;
border-radius: 15px 0 15px 15px;
border-image:url('../imgs/menu_active_bg.png') 100% 100% 0% 0% / 15px 15px 0px 0px / 0 15px 0 0px;
-webkit-border-image:url('../imgs/menu_active_bg.png') 100% 100% 0% 0% / 15px 15px 0px 0px / 0 15px 0 0px;
}
i have a box whose width is variable because it depends of the size of a container. The box has no content so im using margins to define its width relatively but it is not working. This is my code:
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
content:"";
border-top: 2px solid red;
margin: -20px 0 7px -7px;
position:absolute;
width:auto;
}
This is my fiddle http://jsfiddle.net/x7rrj/3/
Please notice how the red border goes outside of the box without honoring the right margin and if i set the width to auto then the red border wont display at all. Is it possible to solve this using CSS only?
Thank you.
I looked at the fiddle and noticed the top red border wasn't showing.
It had a line with the padding: 0 100%;
Removing that line seem to fix your issue.
Is this the final result you wanted?
http://jsfiddle.net/z5952/
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
border-top: 2px solid white;
content: "";
margin: -9px 0 7px -7px;
position: absolute;
width: auto;
}
Is this something you are looking for?
http://jsfiddle.net/x7rrj/16/
since you are using position:absolute to position the line, you may also use top, right and left to control the position and width as well:
.box:before {
border-top: 2px solid red;
content: "";
padding: 0 100%;
position: absolute;
top: 3px;
right: 3px;
left: 3px;
}
Okay, i found the answer thanks to an idea given to me by Edward. The problem was solved by replacing margins with top, left and right.
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
border-top: 2px solid white;
content: "";
width: auto;
position: absolute;
top: 3px;
right: 3px;
left: 3px;
}
I'm trying to make an inset pill using pure CSS:
Where the two color blocks are clickable separately.
But I can't figure out how to apply the box shadow to the containing element. The closest I got was using an :after element and positioning it over the links; but that covers up the links, making them un-clickable:
(jsFiddle)
<div class="pill">
✚
⦿
</div><!--/.pill-->
.pill {
position: relative;
float: left;
&:after {
content: "";
display: block;
border-radius: 8px;
box-shadow: inset 1px 2px 0 rgba(0,0,0,.35);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
a {
display: block;
padding: 4px 6px;
text-decoration: none;
color: #fff;
float: left;
&.plus {
background: #3c55b1;
border-radius: 8px 0 0 8px;
border-right: 1px solid darken(#3c55b1, 30%);
}
&.circle {
background: #40be84;
border-radius: 0 8px 8px 0;
border-left: 1px solid lighten(#40be84, 15%);
}
}
}
I'm aware of the pointer-events property, but browser support is pretty shabby.
So what do we think? Possible?
You are not using the spread property on the box shadow, so you want to create a border, instead using box shadow add a border to each element.
Remove the:after property and will get the normal behavior
jsFiddle
Make it simple,
draw your box-shadow from a, so it doesn't matter wich size they take.
http://codepen.io/gcyrillus/pen/xwcKg
.pill {
position: relative;
float: left;
background:#eee;
padding:0.5em;
}
a {
display: inline-block;
padding: 4px 6px;
width:1em;
text-align:center;
text-decoration: none;
color: #fff;
font-weight:bold;
box-shadow:inset 1px 2px 0 rgba(0,0,0,.35);
}
.plus {
background: #3c55b1;
border-radius: 8px 0 0 8px;
border-right: 1px solid #0c2571;
position:relative;
}
.circle {
background: #40be84;
border-radius: 0 8px 8px 0;
box-shadow:
inset 0px 2px 0 rgba(0,0,0,.35),
inset 1px 0 0 #70de94
;
}
Over the last year, I noticed that lots of sites have moved their share/popularity stats to a left sidebar that remains visible on the screen even if you scroll the window down. Here is the URL for a page that has this kind of functionality: http://news.cnet.com/8301-31921_3-57371426-281/anti-sopa-forces-have-isp-snooping-bill-in-their-crosshairs
What's the best way to create that kind of sidebar?
an easy way is to use CSS to absolutely position it and set the Z index so that it appears above everything else
try this on your HTML page
<style>
.side-sharebar {
display: block;
left: 482px;
position: fixed;
top: 20px;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #EEEEEE;
border-color: #CCCCCC transparent #CCCCCC #CCCCCC;
border-radius: 3px 0 0 3px;
border-style: solid;
border-width: 1px;
box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.25) inset, 0 1px 0 #FFFFFF inset;
left: auto !important;
margin-left: -98px;
margin-top: 2px;
position: absolute;
top: 0;
width: 76px;
}
.side-sharebar ul li {
border-bottom: 1px solid #CCCCCC;
box-shadow: 0 1px 0 #FFFFFF;
padding: 10px 2px 10px 0;
position: relative;
text-align: center;
}
.side-sharebar ul {
list-style: none outside none;
}
</style>
....
<div class="side-sharebar"><ul><li>one</li><li>two</li></ul></div>