I am working on an Background Ad-System and my z-index isn't working.
#page
{
width: 1100px;
margin: 100px 0px 0px -550px;
min-height: 906px;
background-color: #fff;
left: 50%;
cursor: auto;
position: absolute;
z-index: 1;
}
#adGfwADS
{
width: 100%;
min-height: 1050px;
background-repeat:no-repeat;
cursor: pointer;
position: absolute;
z-index: 10;
background-color: #000; background-image: url(http://crazysportz.de/1.jpg); background-position: 50% 0px;
}
See Fiddle.
(Make the right col bigger to see the image and divs better)
Ok.. the wrong div is up... The Code stand at jsfiddle and show at z-index.
#page
{
width: 1100px;
margin: 100px 0px 0px -550px;
min-height: 906px;
background-color: #fff;
left: 50%;
cursor: auto;
position: absolute;
z-index: 1;
}
#adGfwADS
{
width: 100%;
min-height: 1050px;
background-repeat:no-repeat;
cursor: pointer;
position: absolute;
z-index: 10;
background-color: #000; background-image: url(http://crazysportz.de/1.jpg); background-position: 50% 0px;
}
<div id="dimensions">
<div id="adGfwADS" class="adGfwADS" url="http://google.de">
<div id="page">blupp</div>
</div>
</div>
The div id="page" will show but this is wrong then z-index is lower as from adGfwAds and i use position to use z-index but z-index work not =(
Related
I have set up a modal for phots, so when i click on a small photo i get a larger photo up in a modal, the modal has position: fixed; and the modal-content has position: absolute; i can center it with margin: auto; left: 0; right: 0;but then the width goes all the way to the right and left, i want the modal content width to be the same as the photo inside it or the content of the modal-content
my code:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 30px;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
margin-bottom: 30px;
margin: auto;
border: 1px solid #888;
}
.modalimg {
position: relative;
text-align: center;
}
.modalimg img{
max-width: 100%;
max-height: 400px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
its maybe a bit messy now but i have tried alot of different things with no luck..
This is what I use when I center an absolute-positioned element, this works for me all the time:
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
here you are please
.element {
position: absolute;
top: 15px;
z-index: 2;
width: 40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin: 0 auto;
left: 0;
right: 0;
background: red;
color: #fff;
text-align: center;
}
<div class="element">
text..
</div>
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
border: 1px solid #888;
}
to align absolute div to center
left: 0;
right: 0
text-align: center
this will align the div in center.
Here's a possible solution that uses:
absolute positioning on the content container (.modal-content)
doesn't use absolute|fixed on the actual content
The content container (.modal-content) will grow along with its content. Finally, it's moved back to the middle using transform: translate(-50%, -50%);:
.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
border: 2px solid red;
transform: translate(-50%, -50%);
}
<div class="modal">
<div class="modal-content">
<img src="//placehold.it/200x200" alt="">
</div>
</div>
Demo
Try before buy
Here is a shadow that I am trying to replicate using just CSS and I just cannot work out how to do it. I have spent hours trying. I think I need to create 2 shadow elements but I'm not sure how to proceed.
The closest thing I get is with this (an abysmal attempt - I know):
.type-product:before, .type-product:after{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 21px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 35px 20px #777;
transform: rotate(-8deg);
}
.type-product:after{
transform: rotate(8deg);
right: 20px;
left: auto;
}
Most appreciative if any CSS gurus could provide any help.
NOTE: I don't think that this link covers my problem fully. It just discusses the curve - whilst I need a curve with a color-gradient...
To me that looks like something that can be achieved using a couple of elements like shown below. The shadow is actually a linear-gradient on top of which a white circle is placed. The drawback of this approach is that it would work only with a solid background (because the circle that is overlayed would need a solid color).
That just doesn't look like it could be possible using a box-shadow because the shadow itself seems like a gradient which goes from transparent or white on the left to black in the middle to transparent or white again on the right.
The output is responsive and can adapt itself to all dimensions of the parent container. Just :hover the container in the snippet to see it in action :)
.wrapper {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.content {
height: 85%;
width: 100%;
border: 1px solid;
}
.wrapper:before {
position: absolute;
content: '';
bottom: 0px;
left: 0px;
height: 15%;
width: 100%;
background: linear-gradient(to right, transparent 2%, #444, transparent 98%);
}
.wrapper:after {
position: absolute;
content: '';
bottom: -186%;
/* height of before - height of after - 1% buffer for the small gap */
left: -50%;
height: 200%;
width: 200%;
border-radius: 50%;
background: white;
}
* {
box-sizing: border-box;
}
/* just for demo */
.wrapper {
transition: all 1s;
}
.wrapper:hover {
height: 300px;
width: 400px;
}
<div class='wrapper'>
<div class='content'></div>
</div>
You can do this with :before pseudo element and box-shadow
div {
width: 200px;
height: 100px;
border: 1px solid #aaa;
position: relative;
background: white;
}
div:before {
content: '';
border-radius: 50%;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
left: 0;
transform: translateY(103%);
box-shadow: 0px -54px 13px -47px #000000, -4px -45px 35px -28px #999999;
}
<div></div>
Aside from the answers, this could also be a good box shadow for your class as well. (This is just preference & similar to what you want).
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.type-product {
position: relative;
}
.type-product:before {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
left: 10px;
width: 50%;
top: 70%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(-8deg);
}
.type-product:after {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
right: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(8deg);
}
<div class="type-product box">
</div>
Hope you like it.
I make use of many covered background-images.
If i use the same image within the page content area and inside the fixed left panel it flickers very heavy.
Reproduced:
http://jsfiddle.net/7aUnL/8/
HTML:
<div class="wrapper">
<div class="inner">
<div class="header cover">
<div style="background-image:url(http://abload.de/img/1444863452uaupx.jpg)" class="image cover"></div>
</div>
</div>
</div>
<div class="flickermaker">
<div style="background-image:url(http://abload.de/img/1444863452uaupx.jpg)" class="icon cover"></div>
</div>
CSS:
div.wrapper {
float: left;
width: 100%;
}
div.inner{
margin-bottom: 120px;
margin-left: 252px;
margin-right: 12px;
position: relative;
}
div.header {
display: inline-block;
margin-bottom: 10px;
min-height: 140px;
overflow: hidden;
padding-bottom: 8px;
position: relative;
width: 100%;
}
div.image {
bottom: 0;
box-shadow: -3px 0 5px 3px rgb(0, 0, 0);
float: left;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
text-align: center;
top: 0;
width: 140px;
z-index: 2;
}
.cover {
background-color: rgb(248, 248, 248);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
div.flickermaker{
border-right: 1px solid rgb(205, 205, 205);
bottom: 0;
height: auto;
left: 0;
margin-left: 0;
top: 0;
z-index: 999;
font-size: 0.85em;
overflow: hidden;
width: 240px;
position: fixed !important;
}
.icon {
border-left: 3px solid rgba(114, 184, 251, 0.4);
height: 100%;
left: -3px;
position: absolute;
transition: border-color 0.3s ease 0s;
width: 50px;
height:50px;
}
Without the small icon the problem disappears. Any suggestions?
Edit: with a smaller version of the same image everything is fine:
http://jsfiddle.net/nxU3s/1/
The "flickering" image is a 1.6MB 1920x1080 file, most likely some browsers are not yet ready to deal with this range of dimensions (Firefox flickers, Chrome does not). Background-size is a pretty new property so don't expect perfect support in such extreme cases.
Anyway I can't see a serious real life application of your example. Use thumbnails instead of high definition images. You also need to clean your markup which is quite a nonsense.
In the end consider the <img> tag who will be most of the time easier to use .
I have a div tag. I want to remove the children's inheritance of #overlay's opacity
Here is my code:
<body id="bg">
<div id="overlay">
<header id="colortext">dgjdhgjdhd</header>
</div>
</body>
And this my css code.
#bg{
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-image: url(../Images/bg.jpg);
}
#overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: #000;
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#colortext{
background-image:none;
margin-top: 7px;
margin-left: 16px;
top: 2%;
left: 2%;
color: #FFFFFF;
text-align: left;
font-size: xx-large;
opacity:1 !important;
}
I want to have like this site background: http://www.ehsanakbari.ir/
How can I do this?
You cannot stop children elements from inheriting their parent's opacity.
Instead, you could use an rgba value for the parent's background color instead of opacity:
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: rgba(0,0,0,0.5);
}
See this SO question for more info.
I would like to have the Wrapper-Top layer on top of the other one. I set z-index and position, which should be sufficient. Am I missing something? Here is the website: Thank you in advance.
EDIT: here is the code I used:
<body>
<div class="Wrapper-Top">
</div>
<div class="Wrapper-Middle">
hjklhjkhkjlhjkl
</div>
</body>
.Wrapper-Top {
min-width: 980px;
width: 100%;
height: 179px;
top: 0px;
left: 0px;
background:url(img/header-bg.png)
repeat-x 50% 0%;
z-index: 20;
}
.Wrapper-Middle {
min-width: 980px;
width: 100%;
height: 300px;
margin: 0 auto;
background: #eee;
top: 160px;
left: 0px;
position: absolute;
z-index: 10;
text-align: center;
}
You are missing a position attribute on .Wrapper-Top.
z-index on MDN
Initial value: auto
Applies to: positioned elements
Inherited: no
When it isn't present, your z-index:20 in .Wrapper-Top is doing nothing.
i think this is what you want..
<body>
<div class="Wrapper-Middle">
hjklhjkhkjlhjkl
</div>
<div class="Wrapper-Top">
</div>
.Wrapper-Top{ min-width: 980px;
width: 100%;
height: 179px;
top: 0px;
left: 0px;
background: url(img/header-bg.png) repeat-x 50% 0%;
z-index: 20;
position: absolute;
}
.Wrapper-Middle{min-width: 980px;
width: 100%;
height: 300px;
margin: 0 auto;
background: #eee;
top: 0px;
left: 0px;
z-index: 10;
text-align: center;
}
use position absolute both of this and give highest z-index value what you want to top of anothe one. like this
.Wrapper-Top{top: 0px; left: 0px; position:absolute; z-index: 2; }
.Wrapper-Middle{top: 160px; left: 0px; position: absolute; z-index: 1;}