The link below shows a simplified version of a website I'm working on and the problem I'm presented with.
I have several encapsulated box elements. There is the main container, and several divs within that container that will hold content, as that content expands, I need the container div to expand automatically. I can't seem to accomplish this unless I add a specific height in the CSS.
JSFiddle Example
HTML:
<body>
<div id="container">
<div id="block1">
<div id="one">one</div>
<div id="two">two<br />two<br /></div>
<div id="three">three<br />three<br />three<br /></div>
<div id="four">four<br />four<br />four<br />four<br /></div>
</div>
</div>
</body>
CSS:
#container {
width: 1050px;
margin: auto;
padding: 5px;
background-color: #ededf0;
background:
url("http://wguayan.comuv.com/brushed_metal_clear_apple.jpg") repeat;
}
#one, #two, #three, #four {
border-width: 1px;
border-color: black;
border-style: solid;
background-color: white;
border-radius:6px;
-moz-border-radius:6px;
/* Firefox 3.6 and earlier */
}
#one {
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#two {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 5px;
text-align: center;
box-shadow: 9px 9px 12px #888888;
}
#three {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#four {
float: left;
width: 100px;
position: relative;
top: 0px;
left: 0px;
padding: 10px;
box-shadow: 9px 9px 12px #888888;
}
#block1 {
width: 100%;
border-width: 1px;
border-color: black;
border-style: solid;
}
Just apply overflow: hidden to #block1
Related
I have an outer div with box-shadow and I want this to appear over an inner div. But it always appears under it. The jsfiddle is here.
My HTML is:
<div class="wrapper">
<div class="inner">
</div>
</div>
And CSS:
.wrapper {
width: 200px;
height: 100px;
border: 1px grey solid;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
.inner{
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
}
Is it possible to get it so that the box-shadow appears over the inner blue div? The semantics of the HTML cannot change.
Set the position of the child to relative and the z-index to -1:
.wrapper {
width: 200px;
height: 100px;
border: 1px grey solid;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
.inner {
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
position:relative;
z-index:-1;
}
<div class="wrapper">
<div class="inner">
</div>
</div>
update the styles of inner class with position absolute and give z-index: -1;;
.inner {
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
position:relative;
z-index:-1;
}
Here is the updated jsFiddle
You can do what you are wanting without the inner container as well.
http://codepen.io/creativenauts/pen/rLWZqp
* {
box-sizing: border-box;
}
.wrapper {
width: 200px;
height: 100px;
border: 20px solid #fff;
background-color: lightblue;
box-shadow: 0px 0px 1px rgba(#000, 0.5);
position: relative;
&:before {
position: absolute;
content: '';
width: 100%;
height: 100px;
top: -20px;
left: -20px;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
}
I am attempting to code a blog page with a header, a navigation, a left sidebar, a right sidebar, and content. All of these sections are child divs being wrapped in an outer div. However, not all the properties of the parent div are being recognized, and bgSide is appearing overtop of the wrapper instead of underneath it and I cannot for the life of me figure out why.
I do not have any floats and I have already run my code through a program to ensure there's nothing wrong with the markup. overflow: hidden does nothing.
UPDATE ONE: Solved width property not inheriting. Still need solutions for wrapper height not working, left and right aligning to body instead of wrapper, and image showing up on top instead of behind.
UPDATE TWO: Solved height property not working by changing height: 100%; to height: 100vh;
<!DOCTYPE html>
<head>
<style>
body
{
background:{color:background};
background-repeat: no-repeat;
background-position: center top;
background-image: url('{image:background}');
margin: 0px;
padding: 0px;
word-wrap: break-word;
}
#bgside img
{
position: fixed;
z-index: 1;
margin-left: 0px;
margin-bottom: 0px;
height: 100%;
padding: 0px;
}
#wrapper
{
z-index: 2;
height: 100%;
min-height: 300px;
width: 60%;
min-width: 600px;
max-width: 900px;
margin: 0px auto; /* center the body */
padding: 0px;
border: 1px solid {color:side link border};
border-top: 0px;
border-bottom: 0px;
text-align: center;
background: {color:background};
-moz-box-shadow: 0px 0px 20px 20px #000
-webkit-box-shadow: 0px 0px 20px 20px #000;
box-shadow: 0px 0px 20px 20px #000;
}
#header
{
background: {color:header background};
position: fixed;
z-index: 3;
top: 0px;
width: 60%;
min-width: 600px;
max-width: 900px;
height: 100px;
padding: 0px;
border: 1px solid {color:side link border};
border-width: 0px 1px;
text-align: center;
vertical-align: center;
}
#header img
{
background: transparent;
width: 100%;
min-width: 600px;
max-width: 900px;
height: 100px;
min-height: 100px;
max-height: 100px;
}
#nav
{
background: {color:navigation background};
position: fixed;
z-index: 4;
top: 100px;
width: 60%;
min-width: 600px;
max-width: 900px;
height: auto;
padding: 10px 0px 15px 0px;
border: 1px solid {color:side link border};
text-align:center;
line-height:5px;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#nav a
{
background: {color:top link bg};
padding: 2px 15px 3px 15px;
margin: 4px;
font-family: calibri;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: {color:top link text};
-webkit-transition: all 0.5s ease-in-out;
}
#nav a:hover
{
color:{color:top link text hover};
background:{color:top link bg hover};
-webkit-transition: all 0.5s ease-in-out;
}
#right
{
background: {color:sidebar background};
position: fixed;
z-index: 3;
top: 135px;
right: 0px;
height: 100%;
width: 10%;
min-width: 150px;
text-align: center;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#left
{
background: {color:sidebar background};
position: fixed;
z-index: 3;
top: 135px;
left: 0px;
height: 100%;
width: 10%;
min-width: 150px;
text-align: center;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#content
{
/* Not coded yet */
}
</style>
</head>
<body>
<div id="bgside"><img src="{image:bgside}" alt="bgSide"/></div>
<!-- START OF CONTAINER -->
<div id="wrapper">
<div id= "header"><img src="{image:header}" alt="header"/></div>
<div id= "nav">
A BUNCH OF LINKS
</div>
<div id="left">
CONTENT
</div>
<div id="right">
CONTENT
</div>
<div id="content">
CONTENT
</div>
</div>
<!-- END OF CONTAINER -->
</body>
</html>
Try adding inherit to things inside the wrap that don't cascade. Some programs do this for you. For example:
height:inherit;
background:inherit;
color:inherit;
This may take a while but it works for me!
SOLUTIONS:
Width property not inheriting:
Change width properties of #nav and #header to width: inherit;
Height property not being recognized in wrapper:
In wrapper CSS, change height: 100%; to height: 100vh;
Left and Right ignoring wrapper and aligning to body:
Remove this code:
position: fixed;
z-index: 3;
top: 135px;
right: 0px;
and replace with float: right; and do the same with #left while assigning left instead of right. Then add overflow: hidden; to #wrapper
bgside ignoring z-index and layering on top:
Change z-index: 0; to z-index: -1;
I want to place boxshadow on an image. I'm trying following but it just adds it behind the image, making it not visible. How that can be done?
CSS and HTML:
.box2 {
float: left;
height: 150px;
width: 150px;
box-shadow: inset 0px 0px 0px 10px #f00;
}
<div class="box2"><img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" /></div>
Problem:
JSFiddle Demo:
http://jsfiddle.net/Lwm95h7q/
You can do this with :after, for example.
.box1{
height: 150px;
width: 150px;
background: green;
box-shadow:inset 0px 0px 0px 10px #f00;
float: left;
margin-right: 50px;
}
.box2 {
position: relative;
float: left;
height: 150px;
width: 150px;
box-shadow: inset 0px 0px 0px 10px #f00;
}
.box2:after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
box-shadow: inset 0px 0px 0px 10px #f00;
z-index: 1;
}
Take a look at the fiddle:
http://jsfiddle.net/skeurentjes/Lwm95h7q/5/
Just replace box-shadow with
outline: 10px solid #f00;outline-offset:-10px;
.box1{
height: 150px;
width: 150px;
background: green;
box-shadow:inset 0px 0px 0px 10px #f00;
float: left;
margin-right: 50px;
}
.box2 {
float: left;
height: 150px;
width: 150px;
outline: 10px solid #f00;
outline-offset:-10px;
}
<div class="box1">some text</div>
<div class="box2"><img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" /></div>
This can be achieved by using an :after pseudo element with the box-shadow over the top of the img:
Add position: relative; to .box2 to allow the pseudo element to be positioned relatively to it
Add .box2:after with position: absolute; to take it out of the document flow. Set the height and width equal to the height and width of .box2 and position it to the top and left of .box2. Apply the box-shadow to this
.box1 {
background: green;
box-shadow: inset 0px 0px 0px 10px #f00;
float: left;
height: 150px;
margin-right: 50px;
width: 150px;
}
.box2 {
float: left;
height: 150px;
position: relative;
width: 150px;
}
.box2:after {
box-shadow: inset 0px 0px 0px 10px #f00;
content: "";
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
<div class="box1">some text</div>
<div class="box2">
<img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" />
</div>
you have not given padding so.. add this css
.box2 {
float: left;
height: 150px;
width: 150px;
box-shadow: inset 10px 10px 10px 10px #f00;
padding: 10px;
}
I've see a lot of threads remotely related that basically suggest CSS triangles in the ::after or ::before pseudos, but none have really panned out. I'm throwing this out to see if anyone has any ideas.
I'm looking to create a div with a pointed or pitched top that still maintains a uniform border and box-shadow with the rest of the div.
See link for an image of what I'm trying to create:
If you dont want to use a image you could do something like this. But working with an image is lot easier in this case.
body {
background-color: #CCC;
}
.wrapper {
}
.outer {
width: 0;
height: 0;
border-style: solid;
border-width: 0 205px 32px 205px;
border-color: transparent transparent #ffffff transparent;
position: absolute;
}
.inner {
width: 0;
height: 0;
border-style: solid;
border-width: 0 200px 32px 200px;
border-color: transparent transparent #ea2225 transparent;
margin-left: -200px;
margin-top: 5px;
position: absolute;
}
.fix {
background-color: #FFF;
height: 10px;
width: 410px;
position: absolute;
margin-top: 32px;
}
.red {
width: 396px;
height: 300px;
background-color: #ea2225;
margin-top: 37px;
position: absolute;
border-left: 7px solid #FFF;
border-right: 7px solid #FFF;
border-bottom: 6px solid #FFF;
-webkit-box-shadow: 3px 5px 5px 0px rgba(48,48,48,1);
-moz-box-shadow: 3px 5px 5px 0px rgba(48,48,48,1);
box-shadow: 3px 5px 5px 0px rgba(48,48,48,1);
}
<div class="wrapper">
<div class="fix"></div>
<div class="outer">
<div class="inner">
</div>
</div>
</div>
<div class="red"></div>
See http://jsfiddle.net/0csqog8s/
this should get you started:
Update
This is an updated fiddle which is much better presented.
.first {
display: inline-block;
width: 3em;
height: 3em
}
.second {
position: relative;
display: inline-block;
width: 3em;
height: 3em
}
.third {
position: absolute;
display: inline-block;
width: 0;
height: 0;
line-height: 0;
border: 1.5em solid transparent;
margin-top: -1em;
border-bottom: 1em solid #007BFF;
left: 0em;
top: 0em
}
.forth {
position: absolute;
display: inline-block;
width: 0;
height: 0;
line-height: 0;
border: 1.5em solid #007BFF;
border-bottom: 1.5em solid #007BFF;
left: 0em;
top: 1.5em
}
<span class="first"><span class="second"><i class="third"></i><i class="forth"></i></span></span>
I need the div "child2" to keep a small distance from child1 which contains dynamic data , and also currently the data in child1 is being overflowed,i don't get it
<div id="parent">
<div id="child1">
<br/>
<div id="child2">
</div
with the style of these div's being as described below
#child2
{
width: 300px;
left: 550px;
position: relative;
color: #27CCFF;
z-index: 0;
border: thin solid #CDCDCD;
top: auto;
}
#parent {
position: relative;
width: 924px;
-webkit-box-shadow: 3px 3px 30px #E4E4E4;
-moz-box-shadow: 3px 3px 30px #E4E4E4;
box-shadow: 3px 3px 30px #E4E4E4;
background-color: #E4E4E4;
left: 192px;
height: auto;
}
#child2 {
top: 0px;
width: 800px;
color: #333333;
font-size: 14px;
font-family: Arial;
left: 50px;
position: relative;
float: left;
}
You could use : margin to do this ,
If margin does not work you could use padding
#child2 {
top: 0px;
width: 800px;
color: #333333;
font-size: 14px;
font-family: Arial;
left: 50px;
position: relative;
float: left;
margin-top: ...;
OR padding-top: ...;
}