I have a few nested div blocks and my problem is that the last one left_navigation_container doesn't have a 7px spacing at the bottom margin and I'm not sure why (jsfiddle).
HTML:
<div class="left_navigation_outer">
<div class="left_navigation_header_outer">
<div class="left_navigation_header_logo">
<strong>Title</strong>
</div>
</div>
<div class="left_navigation_container">
</div>
</div>
CSS:
div.left_navigation_outer {
background: green;
background-repeat: repeat;
margin:10px;
-moz-box-shadow: 0px 0px 5px #ababab;
-webkit-box-shadow: 0px 0px 5px #ababab;
box-shadow: 0px 0px 5px #ababab;
}
div.left_navigation_header_outer {
background: blue;
background-repeat: repeat;
height: 50px;
border-top: 4px solid black;
}
div.left_navigation_header_logo {
line-height:50px;
color: #efefef;
text-shadow: 0 -1px #000;
text-align: center;
text-transform: uppercase;
}
div.left_navigation_container {
background: red;
background-repeat: repeat;
height: 50px;
margin: 7px;
}
Your problem is caused by the way of calculating margin for this element - it refers to the its siblings', not parent's position.
You can set margin for other div containing "TITLE" text and see same issue with margin-top.
EDIT: You can add <div style="width: 100%; height: 1px;"></div> after <div class="left_navigation_container"></div> to trigger bottom margin and make it visible.
You can fix that by giving div.left_navigation_outer a padding-bottom
Weird... not sure why but if you add a padding-bottom 1px to div.left_navigation_outer it fixes it - here's my fork of your fiddle
div.left_navigation_outer {
background: green;
background-repeat: repeat;
margin:10px;
-moz-box-shadow: 0px 0px 5px #ababab;
-webkit-box-shadow: 0px 0px 5px #ababab;
box-shadow: 0px 0px 5px #ababab;
padding-bottom:1px; /* tricky hack to get the bottom spacing */
}
Related
I want to render a box on another box's border, like shown in this image:
Expected Output
I tried doing this using flexbox, but couldn't come up with any solution.
How can I approach this design? Any help would be appreciated!
This is a reproduction as close as possible to that picture you showed.
The positioning is obtained using position:relative for the card container and position:absolute for its inner parts.
.card{
position:relative;
width: 400px;
height: 200px;
border: solid 2px gray;
border-radius: 15px;
padding: 5px 5px 5px 5px;
text-align: center;
background: linear-gradient(white 50%, #F1FAFF 50%);
margin-top: 100px;
}
.inner{
border: solid 1px lightgray;
border-top: none;
height: 80%;
width: calc(100% - 20px);
box-shadow: 0px 2px 2px lightgray;
position: absolute;
bottom: 10px;
left: 10px;
background: white;
}
.label{
position: absolute;
top: -15px;
left: 25px;
background: #F5F5F5;
padding: 5px 10px;
font-family: sans-serif;
font-weight: 600;
border-radius: 5px;
}
<div class="card">
<div class="label">13 Mar - 12 Apr</div>
<div class="inner">
</div>
</div>
That can be achieved using legend. If you want custom style, then use postiion: relative on parent div (what you call the box with border), use position: absolute on the child div and adjust top, left, margins or translate values.
You can use two div do to it.
first div with border
second div for shadow box
.outer{
border:2px solid #333;
width:200px;
height:150px;
border-radius:20px;
}
.inner{
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
width:180px;
height:130px;
margin:10px;
}
<div class="outer">
<div class="inner">
</div>
</div>
I want to apply a border radius to a box-shadow but not the div itself, so the end result will be a rounded box shadow on the left side with 90 degree angle div.
.div-to-style {
-webkit-box-shadow: -20px 0px 0px 0px blue;
-moz-box-shadow: -20px 0px 0px 0px blue;
box-shadow: -20px 0px 0px 0px blue;
border-radius: 8px 8px 8px 8px;
background-color: red;
width: 200px;
height: 50px;
margin-left:40px;
}
<div class="div-to-style">
</div>
<p>
Want the red section to have a straight border on the left
</p>
https://jsfiddle.net/alair016/vdcohttk/
The problem with this CSS is that the border-radius is applied to the box-shadow as well as the div on the left side.
The box shadow is not an element. You can't add border-radius to an effect.
Try a pseudo-element instead:
.div-to-style {
border-radius: 0 8px 8px 0;
background-color: red;
width: 200px;
height: 50px;
margin-left: 40px;
position: relative;
}
.div-to-style::before {
content: '';
position: absolute;
left: -20px;
width: 20px;
height: 100%;
background: blue;
z-index: -1;
border-radius: 8px 0 0 8px;
}
<div class="div-to-style">
</div>
Bonus Option: No pseudo-element - Gradient background
.div-to-style {
border-radius: 8px;
background: linear-gradient(to right, blue, blue 20px, red 20px);
width: 200px;
padding-left: 20px;
height: 50px;
margin-left: 40px;
position: relative;
}
<div class="div-to-style">
</div>
You can use a pseudo-element to create the shadow, and apply the border-radius to that pseudo-element.
Working Example:
.div-to-style {
background-color: red;
width: 200px;
height: 50px;
margin-left:40px;
}
.div-to-style:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: relative;
z-index: -1;
-webkit-box-shadow: -20px 0px 0px 0px blue;
-moz-box-shadow: -20px 0px 0px 0px blue;
box-shadow: -20px 0px 0px 0px blue;
border-radius: 8px 8px 8px 8px;
}
<div class="div-to-style">
</div>
<p>
Want the red section to have a straight border on the left
</p>
The gist is, you need 2 divs. Add the box shadow and radius to the outer div, and the other background or border styles to the inner div.
.div-to-style {
-webkit-box-shadow: -20px 0px 0px 0px blue;
-moz-box-shadow: -20px 0px 0px 0px blue;
box-shadow: -20px 0px 0px 0px blue;
border-radius: 8px 8px 8px 8px;
margin-left: 40px;
}
.inner-style {
background-color: red;
width: 200px;
height: 50px;
}
<div class="div-to-style">
<div class="inner-style">
</div>
</div>
<p>
Want the red section to have a straight border on the left
</p>
Here is a code example:
https://jsfiddle.net/vdcohttk/2/
== Edit
If you're going to downvote, please write a comment explaining why. Thanks!
Right now I can either auto-size the container div to the inner div or I can center the whole thing... but I can't figure out how to do both at the same time.
Below is the CSS/Layout as I have it. Right now both the page and main elements are centered but if the content is beyond a certain size it goes over the borders without either element re-sizing.
LAYOUT
</head>
<body>
#using Monet.Common
<div id="contentContainer">
<div class="page">
#Html.Partial("NavBarPartial")
<section id="main">
<div id="content">
#RenderBody()
</div>
<div id="footer">
<span style="color: Gray;"> </span>
</div>
</section>
</div>
</div>
</body>
</html>
CSS
#contentContainer {
width: 100%;
}
.page
{
width: 50%; /*1030px;/*75em;/*83.7em;*/
margin-left: auto;
margin-right: auto;
}
#content {
padding: 20px;
}
#main
{
width:auto;
display:block;
height: auto;
background-color: white;
/*border: 1px solid #999;*/
border-radius: 5px 10px / 10px;
-webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
-moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
}
footer,
#footer
{
/*background-image: url('Images/TEST2body_bot.png');*/
background-color: #fff;
background-repeat: no-repeat;
color: #999;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0 0 30px 0;
font-size: .9em;
border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
}
EDIT
The problem I'm having is best illustrated w/two examples. In one instance I have a table that is 1030px wide. This table is left-justified perfectly but the right edge of the table flows well beyond the right border of the main element.
Another problem is with a set of radio buttons. When the page loads there is supposed to be nothing but white space to the right of the buttons. A specific menu appears to the right of the radio buttons based on the user's selection. When the page loads it looks like there's just enough space for the menus, however they are loading UNDERNEATH the radio buttons instead of to their right.
SECOND EDIT
This is the CSS that allows me to auto-size the div, however everything is left justified (commented out certain sections and added display: inline-block and overflow: auto to .page).
/*#contentContainer { Had to comment this whole section out
width: 100%;
}*/
.page
{
/*width: 50%; /*1030px;/*75em;/*83.7em; Needed to comment this attribute as well*/
display: inline-block;
overflow: auto;
margin-left: auto;
margin-right: auto;
}
#main
{
height: auto;
display:block;
height: auto;
background-color: white;
/*border: 1px solid #999;*/
border-radius: 5px 10px / 10px;
-webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
-moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
}
You need to set the parent element to
display: table-cell;
vertical-align: middle;
text-align: center;
#and some kind of height:
height: 350px;
The #page-div to:
display: inline-block;
Like this:
http://jsfiddle.net/YA2Ns/1/
Don't ask me why, but changing adding display:table and margin: 0 auto to the .page element worked. I actually no longer need the contentContainer div anymore. Here's the final product.
CSS
.page
{
display: inline-block;
overflow: auto;
display: table;
margin: 0 auto;
}
#main
{
height: auto;
display:block;
height: auto;
background-color: white;
/*border: 1px solid #999;*/
border-radius: 5px 10px / 10px;
-webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
-moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
}
#content {
padding: 20px;
}
footer,
#footer
{
/*background-image: url('Images/TEST2body_bot.png');*/
/*background-color: #fff; */
background-repeat: no-repeat;
color: #999;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0 0 30px 0;
font-size: .9em;
border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
}
LAYOUT
<body>
#using Monet.Common
<div class="page">
#Html.Partial("NavBarPartial")
<section id="main">
<div id="content">
#RenderBody()
</div>
</section>
</div>
<div id="footer">
<span style="color: Gray;"></span>
</div>
</body>
I'm working on an image grid and want to create an effect similar to this http://instagram.com/instagram/ (the images in the squares on the lower part of the page where the border expands. This is what I have so far:
HTML:
<div id="page-title"> </div>
<div id="wrapper" style="min-height:300px;">
<!--start: Container -->
<div class="container" style="margin-left:100px;">
<div style="position: absolute; width:200px; border: 1px solid black; height:200px;">
<div style="position: relative; background:url('/testimages/1354189822.jpg')" class="polaroids">
</div>
</div>
</div>
</div>
</div>
CSS:
.polaroids {
background: #fff;
float: left;
width: 158px;
height:158px;
padding: 5px 5px 5px;
text-align: center;
text-decoration: none;
color: #333;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-webkit-transition: all .2s ease-in-out;
border: 4px solid white;
background-color: black;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin:0 auto !important;
}
.polaroids:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
z-index: 5; border-top: 10px solid white;
border-bottom: 10px solid white;
border-left: 8px solid white;
border-right: 8px solid white;
}
The middle div does not seem to want to centre. Where am I going wrong? http://jsfiddle.net/b5XDK/
for horizontal center use margin:0 auto; on the child element and remove the float:left;
http://jsfiddle.net/roine/b5XDK/10/
remove this
.polaroids { float:left }
remove your float:left of .polaroids
Here is the code for the box I'm applying the shadow on.
width: 295px;
max-width:90%;
height: auto;
padding-bottom:20px;
float:left;
text-align:center;
margin-left:10px;
margin-top:50px;
background-color: white;
-webkit-box-shadow: 0px 0px 5px #CCC;
box-shadow: 0px 0px 5px #CCC;
-moz-box-shadow: 0px 0px 5px #CCC;
position:relative;
The 3 boxes of Beautiful Design Valid Code Structure and Seo Integrated all carry this box-shadow property but it doesn't appear at the bottom.
Is there a bounding box around these grouped elements that might have a size restriction applied to it that is somehow cutting off the box-shadow on the bottom of that last element?
Have you tried clearing your float?
Demo: http://jsfiddle.net/uriahjamesgd_73/5fQPV/
<!-- HTML -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box clear"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
/* CSS */
.box {
position:relative;
width: 75px;
max-width:90%;
height: 75px;
padding:0 0 20px 0;
float:left;
text-align:center;
margin: 10px 0 0 10px;
background-color: white;
-webkit-box-shadow: 0px 0px 5px #CCC;
-moz-box-shadow: 0px 0px 5px #CCC;
box-shadow: 0px 0px 5px #CCC;
}
.clear {
clear:left;
}
It seems the problem is with your box-shadow property.
Try this:
.box{
width: 295px;
max-width:90%;
height: auto;
padding-bottom:20px;
float:left;
text-align:center;
margin-left:10px;
margin-top:50px;
background-color: white;
-webkit-box-shadow: 0px 0px 5px 2px #ccc;
-moz-box-shadow: 0px 0px 5px 2px #ccc;
box-shadow: 0px 0px 5px 2px #ccc;
position:relative;
}
Check out this link for more experiments.
If it still doesn't work looks like some element might have a size restriction applied that is somehow cutting off the box-shadow on the bottom of that last element.
Hope it helps :)