Right, I have a header and a small div .sideShadow, I need .shideShadow div to be behind a #sideTopHeader div, right now it is on the top of it, you can see it here (to your right)
http://inelmo.com
CSS I use now
#sideTopHeader {
background: #333333;
z-index: 1;
position: relative;
height: 50px;
margin: 0 -30px 0 0;
-webkit-border-radius: 7px 7px 0 7px;
-khtml-border-radius: 7px 7px 0 7px;
-moz-border-radius: 7px 7px 0 7px;
border-radius: 7px 7px 0 7px;
}
.sideShadow {
border-color: transparent transparent transparent #1f1f1f;
border-width: 15px;
border-style: solid;
height: 0;
width: 0;
position: absolute;
top: 35px;
left: 395px;
z-index: 0;
}
#llya; put your .slidershow div outside of yours #sideTopHeader div instead of inside like this
HTML:
<div id="sideTopHeader"></div>
<div class="sideShadow"></div>
& position relative to it's parent . May be that's work for you
Without changing the markup: don't use a z-index on #sideTopHeader (BTW: why is this an ID? Is there really only one element inside the sidebar?) and set the z-index to -1 for .sideShadow.
But I really suggest, you'd better clean up your markup. You don't really need three nested DIV's for styling a single content-element. For example instead of having a nested div.sideShadow, you may use a pseduo-element for CSS-effects, like #sideTopHeader:after.
Related
I'm trying to color two adjacent DIV's with box shadows that extend into each others paths. For some reason the box shadow of one of the elements will bleed onto the top of the other div creating an ugly effect.
Here is the current effect: https://imgur.com/Gs3hT5P
But I am attempting to make it look like this: https://imgur.com/eBQLGCv
The code for what I have is as follows, keep in mind the expected result is not coded in HTML/CSS so maybe what I'm trying to accomplish is not possible with CSS as it is.
span {
position: relative;
display: inline-block;
background: #fff;
width: 40px;
height: 20px;
margin-right: 7px;
border-radius: 1px;
}
span:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
span.red {
box-shadow: 0px 0px 30px 10px #ff0000;
}
span.blue {
box-shadow: 0px 0px 30px 10px #00ccff;
}
<span class="red"></span>
<span class="blue"></span>
A solution is to set the shadows to the before pseudo-elements instead:
span.red::before {
box-shadow: 0px 0px 30px 10px #ff0000;
}
span.blue::before {
box-shadow: 0px 0px 30px 10px #00ccff;
}
Since you set their z-index to -1, those pseudo-elements will be behind their parents, i.e. the span elements.
Update: you fixed the HTML, so for information purposes I let what I wrote below.
Also don't forget to close your span elements this way (see HTML5 standard for more details):
<span class="red"></span>
<span class="blue"></span>
I have one problem with internet explorer about css div positioning.
I have created this DEMO from codepen.io .
If you check this demo with chrome or firefox then you can see the .test div positioning vorking correctly but when you open the demo with internet explorer then you can see the .test div shifted to the left side. How can i fixed this problem to work all browser anyone can help me in this regard ?
.test {
display: block;
position: absolute;
height: auto;
top: 0;
left: 0;
right: 0;
max-width: 580px;
min-width: 300px;
margin-top: 64px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
padding-top: 2px;
background-color: #f7f7f7;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 840px;
}
.header {
height: 12rem;
background: #009688;
}
<div class="test"></div>
position : absolute
The element is positioned relative to its first positioned (not static) ancestor element.
So you need to specify position (position:relative | fixed | absolute i.e. any position apart form static) to the parent (this case body or html)
It works fine without position: absolute;
https://jsfiddle.net/agnmx7s6/1/
To center align the DIV below code enough.
body{text-align:center}
Remove the below code in .text class
position: absolute;
You can achieve this without absolute positioning.
Please check the fiddle - https://jsfiddle.net/afelixj/agnmx7s6/4/
Also added negative margin-top to the center div.
This is what i´m trying to achieve:
But I can´t make the background be as long as the text while keeping the shadow with the whole content... I just get this:
As you can see it makes two shadows... this is my markup and css:
<span class="interior_title">Samsung, HP Pop-Tops Do Double Duty <br>Rich Jaroslovsky</span>
span.interior_title{
background: #c7c7c9;
font-size: 50px;
color: #2f2f31;
width: 550px;
font-family: 'chaletcomprime';
margin: 0 auto;
text-transform: uppercase;
line-height: 47px;
padding: 0px 15px;
margin-left: 90px;
-moz-box-shadow: 0 0 7px #000;
-webkit-box-shadow: 0 0 7px #000;
box-shadow: 0 0 7px #000;
}
Any ideas on how to do it?
Example
It's close to what you want.
I made it like this. Two elements floated left one under the other one. Same style only the width is different.
<span class="one">Extra line here bal bal bal </span>
<span class="two">Line TwoM<span>
Now the problem here was the extra shadow that was casting on .two, I fixed that by using
.two:before{
background: tan;
content: "";
height: 10px;
left: 0;
position: absolute;
top: -10px;
width: 100%; }
Don't worry about IE, because :before work on IE8 as for the box-shadow it stops at IE9.
I'm trying to create this as below and couldn't finish it.
I can only manage to create a rounded corners on left but not slanted right.
(source: kerrydeaf.com)
#talkbubble
{
width: 100px;
height: 35px;
background: #FFCC05;
position: relative;
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
margin-right:50px;
}
Or here is
http://jsfiddle.net/alma/USezL/23/
i think this is what u are looking for http://css-tricks.com/snippets/css/css-triangle/
http://jsfiddle.net/zQKhb/
#talkbubble
{
width: 100px;
height: 36px;
background: #FFCC05;
position: relative;
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
margin-right:50px;
}
#talkbubble:before
{
content:"";
display:block;
position: absolute;
right: -36px;
top:0;
width: 0;
height: 0;
border: 18px solid transparent;
border-color: transparent transparent #FFCC05 #FFCC05;
}
You were missing some crucial points in your triangle on the right. First of all, by default a :before element is display: inline, so to create the effect you were seeking you needed display: block instead.
Second, the right: 120px was moving it 120 pixels away from the right side of its original position. That is, it was being pushed to the left, out of view. Instead, you needed a negative right position (move to the right) of 100% (the width of the speech bubble). That way, it'd end up to the right of it.
Third, not sure what shape you were going for but it was almost everything but a triangle ;).
I went for this instead:
#talkbubble:before
{
content:" ";
display: block;
position: relative;
right: -100%;
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 20px solid transparent;
border-bottom: 35px solid #FFCC05;
}
The first part is for the positioning, the second part is creating the actual triangle (see http://css-tricks.com/snippets/css/css-triangle/).
In the jsfiddle I made the triangle blue so you can see exactly where it is. Change the border-right width to make the angle bigger. http://jsfiddle.net/USezL/31/
The new twitter-bootstrap docs have a nice interface for delimiting examples.
How do I get this same effect, but within the well?
My attempt: http://jsfiddle.net/YdusM/
How about that: jsFiddle
Apply .well:before {...} instead .corner_text:before {...}
UPDATE:
Apply 'example element' for specific well-block: jsFiddle
Instead of applying :before to outer div. I made it to .well and adjusted the padding top and left to -20px..
ie
.well:before {
position: relative;
content: "Example";
top: -20px;
left: -20px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
Check the fiddle http://jsfiddle.net/YdusM/7/
You can just inspect the code in the docs, and you wil find this css, applied to the exmaple wrapper:
.bs-docs-example::after {
content: "Example";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: whiteSmoke;
border: 1px solid #DDD;
color: #9DA0A4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
Add something similar as a custom class to your css, or you could even do it in less to use the bootstrap variables and mixins. If you want the text to be addaptable, it would perhaps be better to forget about the :after and adapt this styling a bit to apply it to a specific element holding the text you want and place it inside the wrapper.
edit:
For the positioning to work, you should set the wrapper to position: relative; as well. Not sure what you are after, but i updated your fiddle to demonstrate: http://jsfiddle.net/YdusM/9/