The div comes with a scroll bar instead increasing it height. I don't want the scroll to come instead the div should increase its height.
<div class="widgetContainer">
<div id="5395634ee4b071f136e4b68e" style="background-color: red;">node1<div id="53956358e4b071f136e4b690" style="background-color: red;">vip1<div id="539803eae4b0ffad82491508" style="background-color: gray;">obj1</div><div id="5395635ee4b071f136e4b691" style="background-color: green;">obj2</div><div id="539803e4e4b0ffad82491507" style="background-color: green;">obj3</div></div><div id="539803f2e4b0ffad82491509" style="background-color: blue;">vip2</div></div><div id="5395637fe4b071f136e4b692">node2<div id="539803eae4b0ffad82491501" style="background-color: green;">vip1</div><div id="5395635ee4b071f136e4b694" style="background-color: green;">vip2</div></div><div id="53956371f136e4b692" style="background-color: red;">node3</div><div id="5656" style="background-color: red;">node4</div><div id="5395637fe4b071f13b692" style="background-color: red;">node5</div></div>
.widgetContainer {
height: 100%;
width: 100%;
background-color: white;
display: block;
position: relative;
color: black;
}
.widgetContainer > div {
float:left;
width: 30%;
min-height: 100px;
margin: .5%;
overflow: auto;
-webkit-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
-moz-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
border: 0.25% solid;
}
.widgetContainer > div div {
width: 80%;
height: 100px;
margin: 1.5% auto;
overflow: auto;
-webkit-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
-moz-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
border: 0.25% solid;
}
Below is the fiddle i have tried,
My fiddle: http://jsfiddle.net/u5j0z6ut/
It's because it has a fixed height from this css:
.widgetContainer > div div {
width: 80%;
height: 100px;
margin: 1.5% auto;
overflow: auto;
-webkit-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
-moz-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
border: 0.25% solid;
}
Either remove that, or if you want the others to be fixed, change it for that div. Which brings you to another problem which is that you have ids starting with numbers.. they shouldn't ideally. But you can still do it like this:
#\35 3956358e4b071f136e4b690 {
height: auto;
}
Fiddle with that change.
Remove the harcoded height .
Check this fiddle.
css
.widgetContainer > div div {
height: 100%;
}
You can try to using this
<div style="min-height: 300px; height:auto;">
Related
I want to set box shadow inside a box or div but only at right and left sides.
I want something like this below. Please help me.
To get it to appear only on the sides you need to essentially have two different sets:
box-shadow:inset 5px 0 8px -5px #000,inset -5px 0 8px -5px #000;
You can create one inner div and one outer div. Then you need to set the shadow separately for both divs.
.outer, .inner {
width: 200px;
height: 50px;
display: inlin-block;
}
.outer {
-webkit-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
}
.inner {
-webkit-box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
}
<div class="outer">
<div class="inner"></div>
</div>
Or you can use also one div, with 2 inset parameters:
.outer {
width: 200px;
height: 50px;
display: inlin-block;
-webkit-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75), inset -10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75), inset -10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset 5px 0 8px -5px #000,inset -5px 0 8px -5px #000, inset -10px 0px 23px -9px rgba(0,0,0,0.75);
}
<div class="outer">
</div>
And what about a linear-gradeint solution:
.box {
width:200px;
height:100px;
background:
linear-gradient(to left,#ccc , transparent 20%),
linear-gradient(to right,#ccc , transparent 20%);
}
<div class="box">
</div>
You can do this using the two div's. check the below code.
But it will great if you can use the background image.
<div class="div1">
<div class="div2"><div>
<div>
.div1 {
width: 200px;
height: 100px;
border: 1px solid #c51e1e;
margin: 50px;
overflow: hidden;
}
.div2 {
width: 80%;
height: 100px;
margin: 0 auto;
box-shadow: 0px 0px 27px 17px #d6cdcd;
}
try this with html:
<div id="box"></div>
and css:
#box {
border: 1px solid;
position: relative;
overflow: hidden;
}
#box:before {
content: "";
box-shadow: 0px 0px 20px 10px #888888;
position: absolute;
height: 100%;
width: 0px;
}
#box:after {
content: "";
box-shadow: 0px 0px 20px 10px #888888;
position: absolute;
height: 100%;
width: 0px;
right: 0px;
top: 0;
}
Here is code i have tried but box shadow
div {
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
<div>abc</div>
what i need is this, , It is possible using background image but what i want to do this using css.
here is original image :
Thank you
#Prasanga Please find following code as per your requirement.
div {
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}
<div></div>
You can also try this ---
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow:0px 15px 0px 0px white,0px -15px 0px 0px white, 5px 0px 8px #444,-5px 0px 8px #444;
}
<html>
<head></head>
<body>
<div ></div>
</body>
</html>
Very simple here :
div{
background: white;
box-shadow: -10px 0 8px -8px black, 10px 0 8px -8px black;
}
<div>abc</div>
i want the shadow to appear in one side (Top) with css only,
i have tried many solutions but always there is a shadow in all sides
this is my try
.box-container{
width:100%;
height: 80px;
padding:10px 10%;
background-color: #f00;
}
.box-inner{
width:80%;
height: 100%;
background-color: #ff0;
box-shadow: inset 0 5px 5px rgba(0,0,0,0.5);
}
<div class="box-container">
<div class="box-inner"></div>
</div>
Try to use this:
.box-container{
width:100%;
height: 80px;
padding:10px 10%;
background-color: #f00;
}
.box-inner{
width:80%;
height: 100%;
background-color: #ff0;
box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
}
<div class="box-container">
<div class="box-inner"></div>
</div>
Please do try this box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7); for only top
Think this will help you...
try to use this
.box-container{
width:100%;
height: 80px;
padding:10px 10%;
background-color: #f00;
}
.box-inner{
width:80%;
height: 100%;
background-color: #ff0;
-moz-box-shadow: inset 0 8px 8px -8px rgba(0,0,0,0.8);
-webkit-box-shadow: inset 0 8px 8px -8px rgba(0,0,0,0.8);
box-shadow: inset 0 8px 8px -8px rgba(0,0,0,0.8);
}
<div class="box-container">
<div class="box-inner"></div>
</div>
Have a look at http://www.css3.info/preview/box-shadow/ for more information about box-shadow.
Hope this was what you were looking for!
As you can see I've created a sideBar:
<div id="sideBar">
<button class="button">Home</button><br>
<button class="button">About Me</button><br>
<button class="button">Gallery</button><br>
<button class="button">Contact</button>
</div>
<div id="content">
<p>Content Div</p>
</div>
My css:
#sideBar {
background-color: grey;
width: 200px;
float: left;
height: 200px;
-webkit-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
}
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
-webkit-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
width: 200px;
}
#content {
background-color: white;
color: black;
float: left;
width: 200px;
border: 1px solid black;
height: 200px;
}
#content p {
margin-left: 20px;
}
Fiddle:
http://jsfiddle.net/of4dcp2u/1/
I've used some inner shadow. The only problem is that I can't get the shadow work in de border lines. The white borders don't have any shadow.
I don't want to use any images for buttons. Is there a solution for this problem?
Sam, Put shadow to the content div like this
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
width: 200px;
}
#content {
background-color: white;
color: black;
float: left;
width: 200px;
border: 1px solid black;
height: 200px;
-webkit-box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
}
The box-shadow you have set to .button is going in the wrong direction. Use this code:
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
-webkit-box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
width: 200px;
}
I would like to achieve a CSS border similar to the one seen around the Tim Cook image on this page: http://www.macstories.net/news/tim-cook-at-d11/ — however, I would only like the border around images in the body text on my own site, not, for instance, images in the sidebar of my site.
What code would I need to achieve the cool border, and how can I target only images in the body text?
If your "body text" is, say, in a div classed as "main", you can target the images just in that section like so:
.main img {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
margin: 30px 0;
padding: 10px;
background: #FFF;
border: 1px solid #CCC;
position: relative;
display: block;
}
img{
-webkit-box-shadow:0 0px 7px rgba(0,0,0,0.3);
box-shadow:0 0 5px rgba(0,0,0,0.2);
padding:10px;
background:#fff;
border:1px solid #ccc;
width:auto;
height:auto;
}
Well i think it would be something like this for just a generic shadow effct.
The HTML:
<div id="example" class="outerglow">Full Shadow</div>
The CSS:
#example {
font-size: 1.4em;
color: #CCCCCC;
line-height: 40px;
text-align: center;
background-color: #333333;
margin: 25px auto;
padding: 5px 10px;
height: 40px;
width: 80%;}
.outerglow {
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);}
and here is the jsfiddle to look see..
http://jsfiddle.net/KMtc6/
Forgive me if my code is sloppy or jumbled.