The original idea was to have one div with this style:
background-color:rgba(0,0,0,0.7);
However, I discovered that rgba is only supported by newer browsers
I was wondering how could I make a "rgba"-background using a div with this style:
display:block;
height:100%;
width:100%;
background-color: #000;
opacity:0.6;
When I left it at this, this div did not show... :(
Is there a better way to do this?
I assume you want to use the inner div to be a background color for the outer div since you are looking for the most cross-browser background opacity.
<div class="outer">
<div class="inner"></div>
</div>
Based on this article from CSS-Tricks: http://css-tricks.com/snippets/css/cross-browser-opacity/ and the implementation you are looking for you want to use this css:
.outer {
border: 1px solid #000;
width: 300px;
height: 300px;
position: relative;
}
.inner {
background-color: green;
width: 100%;
height: 100%;
position: absolute;
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
The inner div has absolute position because if you don't any content you place inside the outer div will be affected by or affect the background inner div.
Here is a working fiddle: http://jsfiddle.net/X8Asy/
You can also replace the width and height with:
top: 0;
bottom: 0;
left: 0;
right: 0;
but width and height is fewer properties.
You can make the div visible by setting an actual width and height, not 100%:
width: 500px;
height: 500px;
background-color: #000;
opacity: 0.6;
Online demo: http://jsfiddle.net/nEw2E/
Related
I want to add an transparent layer over my img on a card when I hover over it, I have done that part but I want it to be cut to the img and not cover the footer on the card. If that makes sence?
this is the card with Hover. As u can see on the card, the img just covers like 90% of the card, I want the hover overlay to do the same
Card when not hover IMG
Card when hover IMG
.card {
position:relative;
width: 350px;
height: 335px;
background-size: contain;
background-repeat: no-repeat;
background-color: #fff;
border-radius: 5px;
margin: 30px;
float: left;
}
#card_oslo{
background-image: url(img/oslo.jpg);
}
#card_oslo:hover{
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.7);
transition: .5s;
}
You should use a pseudo-element for this. Use :after or :before and set it as full size also set the parent with position:relative; then change the opacity of the pseudo element on hover.
Working Demo.
.box {
position:relative;
}
.box:after {
content:"";
/* Set the element as full-size */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
/* Set bg and hide the element + animation */
background-color:#000;
opacity:0;
transition: all 0.5s ease 0s;
}
.box:hover:after {
/* Show the overlay on hover */
opacity:0.5;
}
/* For the demo */
.box {
width:200px;
height:200px;
background-color:red;
}
<div class="box"></div>
You can set the overlay to
position: absolute;
top: 0;
bottom: XXpx;
left: 0;
right: 0;
where XX is the footer height, then it will cover the whole card and leave the bottom x pixels free. You can also use % values instead of px.
If you want the overlay to contain text you need to put it into an extra div that you can then use as overlay.
I made a simplified version here https://jsfiddle.net/0L9fL1pj/
Been looking for a similar solution and since this thread never got a proper answer (neither proposed answer got me where I wanted and I doubt) but I got some important clues here and I thought I'd provide my current solution so anyone who has a similar problem can benefit.
I made a simple demo here: https://jsfiddle.net/Tdesign/2ynuajk0/14/
HTML:
<div id="imgBox2" class="shade">
<img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" width="350" height="335" loading="lazy" >
</div>
CSS:
#imgBox2 {
position: relative;
width: 500px;
}
.shade:hover::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 500px;
background-color: rgba(0,0,0,0.5);
}
I have the following code that does not cover the full page height if a page has content beyond the normal view port (not having to scroll). If I scroll down the outer div displays for just a small bit and that goes back to white.
Why is the outer div not taking the full height of the page even if it requires scrolling?
html ,body {
height: 100%;
font-style: Helvetica;
}
.page_background, .page { margin: 0 auto; }
.page_background {
width: 100%;
min-height: 100%;
background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
background: linear-gradient(#282828, #888888); /* Standard syntax */
position: absolute;
/*height: 100%;*/
}
.page {
background-color: #FFFFFF;
width: 85%;
min-height: 100%;
bottom: 0;
position: absolute;
height: 100%;
left: 7.5%;
}
<div class="page_background">
<div class="page">
</div>
</div>
I created a fiddle to demonstrate what I am doing. You can even see if you scroll in the fiddle, it doesn't take the gray border.
https://jsfiddle.net/1qwwtgjp/
Edit: Your Main Issue is CSS Positioning
See here: https://jsfiddle.net/1qwwtgjp/3/
You have used position: absolute; in your styles, but are looking for your content to flow (and your background height with it). Remove all the absolute positioning, including the left, bottom, etc, and the explicit height on your .page element so it can flow to whatever height it truly is. This will bring the outer wrapper along with it.
So the new styles for your .page class should be:
.page {
background-color: #FFF;
width: 85%;
min-height: 100%;
/** REMOVE THESE: **/
/* left: 7.5%; */
/* bottom: 0; */
/* position: absolute; */
/* height: 100%; */
}
Old Answer:
If I understand your question correctly, you may simply not be aware that browsers tend to have default margins on the <body> tag.
Simply add a style to remove it:
html, body { margin:0; }
and see if that solves your issue.
You can fix this by assigning overflow property to hidden for the outermost wrapper div.
.outerpagewrapperdiv{
overflow:hidden;
}
I'm trying to make a chrome extension to work with my android app and I need to code the html/css for it; once you interact with the extension you can add tags to a certain page, kinda like pocket.
I've managed to create the footer but now I'm stuck with the adding tags html/css, do I need to use lightbox to achieve the following look:
If not, any tips or tutorials on what should I do?
Thanks
insert 2 div's: CSS
/* ID OVERLAY */
#overlay {
position absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000; /* or transparent pixel
opacity: 0.3; /* your transparecy */
z-index: 1000; /* Must just be higher than your layout, 1, 2, whatever */
}
/* ID Lightboxlike Content */
#LBcontent {
position relative;
top: 200px;
width: 600px;
height: 300px;
background: #fff;
margin: auto;
z-index: 2000; /* Higher than the first one #overlay */
}
No lightbox needed
greetz
T
How do I make an html div tag to be on top of everything? I tried adding z-index: 1000, but it remains the same.
In order for z-index to work, you'll need to give the element a position:absolute or a position:relative property. Once you do that, your links will function properly, though you may have to tweak your CSS a bit afterwards.
Yes, in order for the z-index to work, you'll need to give the element a position: absolute or a position: relative property... fine.
But... pay attention to parents!
The element's z-index may be limited by its parent's z-index value.
You have to go down the nodes of the elements to check if at the level of the common parent the first descendants have a defined z-index.
All other descendants can never be in the foreground if at the base there is a lower definite z-index.
In this snippet example, div1-2-1 has a z-index of 1000 but is nevertheless under the div1-1-1 which has a z-index of 3.
This is because div1-1 has a z-index greater than div1-2.
.div {
}
#div1 {
z-index: 1;
position: absolute;
width: 500px;
height: 300px;
border: 1px solid black;
}
#div1-1 {
z-index: 2;
position: absolute;
left: 230px;
width: 200px;
height: 200px;
top: 31px;
background-color: indianred;
}
#div1-1-1 {
z-index: 3;
position: absolute;
top: 50px;
width: 100px;
height: 100px;
background-color: burlywood;
}
#div1-2 {
z-index: 1;
position: absolute;
width: 200px;
height: 200px;
left: 80px;
top: 5px;
background-color: red;
}
#div1-2-1 {
z-index: 1000;
position: absolute;
left: 70px;
width: 120px;
height: 100px;
top: 10px;
color: red;
background-color: lightyellow;
}
.blink {
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
.rotate {
writing-mode: vertical-rl;
padding-left: 50px;
font-weight: bold;
font-size: 20px;
}
<div class="div" id="div1">div1</br>z-index: 1
<div class="div" id="div1-1">div1-1</br>z-index: 2
<div class="div" id="div1-1-1">div1-1-1</br>z-index: 3</div>
</div>
<div class="div" id="div1-2">div1-2</br>z-index: 1</br><span class='rotate blink'><=</span>
<div class="div" id="div1-2-1"><span class='blink'>z-index: 1000!!</span></br>div1-2-1</br><span class='blink'> because =></br>(same</br> parent)</span></div>
</div>
</div>
More simply :
For z-index:1000 to have an effect you need a non-static positioning scheme.
Add position:relative; to a rule selecting the element you want to be on top
You need to add position:relative; to the menu. Z-index only works when you have a non static positioning scheme.
z-index property enables you to take your control at front. the bigger number you set the upper your element you get.
position property should be relative because position of html-element should be position relatively against other controls in all dimensions.
element.style {
position:relative;
z-index:1000; //change your number as per elements lies on your page.
}
I gonna assumed you making a popup with code from WW3 school, correct?
check it css. the .modal one, there're already word z-index there. just change from 1 to 100.
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 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 */
}
It seems like nesting an element inside a <dialog> element puts it on top of everything. It is placed both horizontally and vertically centered to the screen if you use showModal() but you lose the interactivity with other elements in the page.
document.querySelector("dialog").showModal();
<dialog>
<div class="element">I am on top of everything else</div>
</dialog>
<div class="backdrop">Backdrop element</div>
If you still want interactivity with the background elements, you can use the show() method. It is placed only horizontally centered to the screen.
document.querySelector("dialog").show();
<dialog>
<div class="element">I am on top of everything else</div>
</dialog>
<div class="backdrop">Backdrop element to check if I am underneath or not.</div>
I use jQuery and fade in divs. Works great on all browsers, but IE8 (I suspect other IE versions as well) will cut off divs that overflow an outer div when their opacity is set with filter: alpha(opacity=100). If you copy and paste the following into a file and load that with IE8, you'll see the blue square gets cut off because it overflows its outer div.
<html>
<head>
<style>
.outer {
filter: alpha(opacity=100);
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 150px;
border: 2px solid #f00;
background-color: #700;
}
.inner {
position: absolute;
top: 100px;
left: 50px;
width: 100px;
height: 100px;
border: 2px solid #00f;
background-color: #007;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
How can I get this to work where the inner div is allowed to overflow (yes I've tried overflow: visible) and I can use jQuery's animation mechanism for opacity?
in your example it's the Doctype or lack thereof causing it to break in IE8, but overall it's a problem with IE filters and hasLayout even with a proper Doctype is still happens in IE7. While not sure what exactly you're trying to animate I've come up with a workaround for the example in your OP
The key is not to have the outer div positioned, if you need it to be, wrap it another div which "place-holds" the position. The other thing I found was that IE could also do with an opacity filter on the inner div, but you may not in your real code
here's some workaround code:
CSS
#wrap{ position: absolute; top: 30px; left:150px}
.outer {
filter: alpha(opacity=50);
opacity: 0.5;
width: 200px;
height: 150px;
border: 2px solid #f00;
background-color: #700;
}
.inner {
position: absolute;
filter: alpha(opacity=50);
top: 100px;
left: 50px;
width: 100px;
height: 100px;
border: 2px solid #00f;
background-color: #007;
}
button {position: absolute; left: 0px; width: 100px;}
HTML
<button>Toggle Fade</button>
<div id="wrap">
<div class="outer">
<div class="inner"></div>
</div>
</div>
jQuery
$(document).ready(function() {
$('button').click(function(e) {
$('.outer, .inner').fadeToggle("slow", "linear");
});
});
If the toggle is not also applied to the inner div, then the animation is rather jerky in IE, it smoothly fades the outer div but the inner div just shows/hides instantly
the other browsers don't need opacity on inner as they rightly inherit it.. so on that one it's up to you wether you need that filter on inner