So, my website has a header and a div containing Revolution Slider immediately after it. I'm trying to add a box-shadow below the header - and above the slider. But it doesn't work, unless I also add margin-bottom to the header - but that renders the whole exercise moot.
This is the code:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
Could someone help me figure out what's causing this?
See the following questions:
Does css border-shadow add to an element's size
Is css box-shadow part of element's box model?
According to the box-shadow spec:
An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only
So if you don't want overlap, you'll have to add the margin youself
#header {
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
margin-bottom: 10px;
}
#slider {
position: relative;
}
<div id="header">Header</div>
<div id="slider">Slider</div>
Actually, the issue turned out to be related to z-index properties of the different divs. With some tweaking I managed to get it all sorted out without using any margin.
Anyway, thank you all for your time and help!
If you need as you say the box-shadow below the header only and above the slider you can use minus in the last number in box shadow as the following:
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
This will make the box-shadow appear only at the bottom.
Working example:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
When you use the default rendering mode for box-shadow(outer shadow), you need to add a margin in that direction(10px on y-axis in your example) so the overflowed box content will be visible.
If you want to display your box shadow inside the header, just add the keyword inset to your declaration.
Related
I have my column's borders change size when they are hovered on. But it moves the position of my image below them. I tried increasing the margin bottom of the columns so that it doesn't effect the image. But that did not work. I also tried using the z-index property, but that had no effect as well. What is the best way to fix this issue?
Code Pen: https://codepen.io/isaiahwebdev/pen/zWjyEJ
.plans-col {
width: 33.33%;
float: left;
padding: 10px;
margin-bottom: 40px;
text-align: center;
}
.plans-price:hover {
cursor: pointer;
border: 10px solid #eee;
}
.plans-price .title {
margin: 50px 0;
}
It's because of a border that is different width when you hover. Whenever you are applying any transformation, the borders need to stay the same width. The trick is to apply the transparent border for the object before hover.
.plans-price {
list-style: none;
border: 10px solid transparent;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.082), 0 6px 20px 0 rgba(0, 0, 0, 0.082);
}
.plans-price:hover {
cursor: pointer;
border: 10px solid #eee;
}
Now, I have seen that your original plans-price had border of 1px. You have a few options here:
use my solution where object doesn't have initial border,
keep my solution for the transparent border but add 'faux border' using solid inset box-shadow of 1 px and the desired color or
change the initial border width to 10px
Enjoy :)
How can I get the content in a two-column area to line up correctly? Here is a link to the page showing the content in question. After I get the two divs to line up, then I will try to add the yellow arrow that is seen in the single-column version. That will likely be another question when the time comes.
Here's the CSS
#half-box-container {
overflow:auto;
width: 100%
}
#half-box-left, #half-box-right {
width: 50%;
margin:5px;
padding: 1em;
-moz-box-shadow: -3px 3px 3px #cccccc;
-webkit-box-shadow: -3px 3px 3px #cccccc;
box-shadow: -3px 3px 3px #cccccc;
}
#half-box-left {
float:left;
}
#half-box-right {
float:right;
}
#half-box-content
{
left: 30px;
top: 0;
color: #39275b;
font-size: 100%;
}
Here's the HTML that I'm using.
<div id="half-box-container">
<div id="half-box-left">
<div id="triangle-right"></div>
<div id="half-box-content">
<h5>Left Headline</h5>
Content goes here.
</div>
</div>
<div id="half-box-right>
<div id="triangle-right"></div>
<div id="half-box-content">
<h5>Right Headline</h5>
Content goes here.
</div>
</div>
</div>
As developer3466402 said, you didn't close the ID of half-box-right. Also you're not supposed to have two elements with the same ID. A browser can only display that as correctly as it can interpret it, and there is only supposed to be one object for each id. Try using classes for the child elements instead.
The reason they won't line up on the same line is when you add the padding and margin, their added widths exceed 100% of the width they can use, so they go on different lines. One reason is that they're using the content-box box-model, which makes the padding go outside of the boxes. This is what you're going to want to do:
#half-box-left, #half-box-right {
width: 50%;
padding: 1em;
box-sizing:border-box;
-moz-box-shadow: -3px 3px 3px #cccccc;
-webkit-box-shadow: -3px 3px 3px #cccccc;
box-shadow: -3px 3px 3px #cccccc;
}
This will put the padding inside the element instead of outside. If you don't want to remove the margins from the elements, you can instead simply make the widths smaller than 50%, provided that makes them small enough to escape those 20px of added width they use together.
Looking in the page you linked I saw you forgot to close the ID name of "half-box-right". I guess it is the problem.
Also you can reduce the width for both half-box-right and half-box-left to 38% for they be side by side instead of the right be bellow the left div.
I am trying to figure out why the box in this fiddler has so much padding above and below the text.
http://jsfiddle.net/fZ6d7/1/
CODE
<style>
.simplebox {
padding: 6px;
background: #eee;
border-radius: 8px;
border: 1px solid #ddd;
box-shadow: 0 1px 1px #fff inset, 0 -1px 0px #ccc inset;
}
.simplebox-content {
box-shadow: 0 1px 1px #ddd inset;
border: 1px solid #cccccc;
border-radius: 5px;
background: #fff;
padding: 0 8px;
}
</style>
<div class="simplebox" data-editurl="/TextualReporting/ShowProgressEditor?itemId=5d205a60-64de-4717-ac1d-9db00189db74" style="">
<div class="simplebox-content">
<p>This is a test. This text has too much padding above and below.</p>
</div>
</div>
Any insight?
Your issue is the default padding and margin! You can use this basic universal reset to remove all default padding and margin for all of your html elements:
* { padding: 0; margin 0;}
Add it to the very top of your css stylesheet, that way nothing will have padding unless you specify it. So your <p></p> (or any others) wont have that pesky default margin.
Using some form of resets is a front end best practice. Interested in more advanced resets? Check out normalize.css.
Example in a fiddle: http://jsfiddle.net/agconti/SLjV2/2/
Paragraph <p> has got margin by default :-)
This is due to the <p> tag which has some margin as a standard. To remove it merely add
p {
margin: 0px;
}
to your css... or alternatively use another tag.
http://thc-cup.ucoz.com/forum/2-1-1
After you can see, the left has a radius at content background and border, but the left one does not! I managed to get it like the one in the left after adding to the div style: display:inline-block; but that messes the box and moves it under the left block.
Since this is a forum (my link) I can't edit html, but I can edit the CSS of the forum.
Here is the style of those blocks:
.postTdInfo { //Left block
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
.posttdMessage { //Right block
margin: 0px 0px 0px 0px;
padding: 25px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 25px;
I searched all the day for a solution but can't seem to find one.
Is there any way of changing CSS so that the block accepts border radius?
Edit: my first answer didn't solve the problem.
The problem is that you're working on a td element, which has the display property by default set to table. Either add display: block; to .posttdMessage, or, if this causes problems, add another <div> element directly inside the table cell and style that with rounded borders instead.
I am requested to make the following design:
Here's how I'm trying to achieve the cascaded shadow:
box-shadow: -6px 0px 10px #514E49
But it results in the shadow being displayed in the opposite direction:
I tried changing the h-shadow parameter to 6px, but then the shadow is only visible in the rightmost edge.
I tried using inset as Emil suggested, but it causes the v-shadow to display inset as well and becomes visible inside the box, which should be avoided, here is what it looks like:
try this:
box-shadow:inset 6px 0px 10px #514E49;
edit:
box-shadow: 6px 0px 10px #514E49;
float:right;
http://jsfiddle.net/6V7Et/4/
you have to reverse the order of the menu
Another way to avoid float:right and reversing the menu is by using a negative spread and increased h-shadow like this:
.box {
background: #817E77;
display: inline-block;
width: 100px;
height: 40px;
box-shadow: inset 10px 0px 10px -4px #514E49;
float:left;
}
jsFiddle result
I believe this will best be tackled with z-index since your problem is the other divs are hiding the previously rendered ones.
so:
.box {
....your stuff here....
float:right
}
http://jsfiddle.net/XKNn4/
Another solution, one that doesn't involve reversing the order of the menu or using z-index would be to put the box-shadow on a pseudo-element.
demo
Relevant CSS:
li {
overflow: hidden;
position: relative;
box-shadow: 6px 0px 10px #514E49;
/* the other styles */
}
li:not(:first-child):after {
position: absolute;
right: 100%; width: 100%; height: 100%;
box-shadow: 6px 0px 10px #514E49;
content: '';
}