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
Related
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 2 years ago.
I'm working on a project in ReactJS and I need to integrate a video in the background of a div. Now I have a div on top of the background which shows the video as is, but the rest of the background needs to be blurred, kinda like this. Is there any way I can do this using CSS?
Yes, use the filter CSS property on an element that will absolutely fill a parent element to act as a backdrop.
html,
body {
margin: 0;
padding: 0;
}
.filter-demo__main {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.filter-demo__bg {
/* You'll have to keep this and the img src in sync*/
background-image: url("https://placeimg.com/640/480/nature");
background-size: cover;
}
.filter-demo__bg {
position: absolute;
z-index: 1;
/*
* The negative values of top, right, bottom, left are to
* account for the "bleeding" effect of the underlying element's
* color showing through. Set them to 0 to see what I mean.
* Their values should about the negative value whatever you feed
* the blur().
*/
filter: blur(10px);
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
}
.filter-demo__actual {
z-index: 2;
border: 10px solid white;
max-height: 50%;
max-width: 50%;
}
<div class="filter-demo__main">
<div class="filter-demo__bg"></div>
<!-- Make sure the img src is the same as the background image for the filter-demo__bg -->
<img class="filter-demo__actual" src="https://placeimg.com/640/480/nature" alt="A placeholder image of nature" />
</div>
In my html I have given body a color and I need to place another element of its own color over it. I have already tried using position relative and absolute with z-index.
Here's the body tag.
<body bgcolor="cyan" style="position: relative;">
Here's the another element.
<p class="content">a</p>
Here's css I used by searching online.
.content{
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 10;
}
Everything seems right here! just remove display:none from your css
.content{
position: fixed; /* Sit on top of the page content */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 10;
}
Now this should appear as you are expecting it !
I'm currently working on a blog layout and have hit a wall trying to figure out the best way to achieve the image alignment.
Each blog post has two images; a 'background' image set to .5 opacity and second 'top' image set to 1 opacity. The background image needs to sit under the top image.
So far I have got the layout to this point here http://dev.thefold.com.au/sandbox/staggered/portfolio-2-col.html but cannot figure out how to get the background image under the top image, leaving a 160px distance between the top image and the background image - in a way that can accommodate undetermined image heights. This html/css will eventually be used in a Wordpress theme so the solution needs to accommodate user added images that will have different heights.
An image of what I am trying to achieve is here http://dev.thefold.com.au/sandbox/staggered/reworked.png
Any ideas on how to do this?
Okay, see here:
.bk-effect {
position: relative;
display: inline-block;
font-size: 0;
line-height: 0;
}
.bk-effect img:first-child {
position: relative;
z-index: 10;
}
.bk-effect img:last-child {
opacity: 0.5;
position: absolute;
z-index: 5;
bottom: -160px; /* How much down of the original image */
right: -150px; /* How much right of the original image */
}
<div class="bk-effect">
<img src="https://placehold.it/400x300/000">
<img src="https://placehold.it/400x300/000">
</div>
To reuse it:
Copy the CSS over
Make a div with the class bk-effect
The first image used as the main image
The last image will be used as the background image
Currently, the images will be offset by 160px down and 150px to the right. You can change these values by altering the relevant line below.
Note: I added font-size: 0; line-height: 0; to remove any space under the image. This allows the offset to be exact, but it also means that no text will display inside the .bk-effect element.
For the link provided, change the code to:
.img-portfolio > a {
position: relative;
display: inline-block;
font-size: 0;
line-height: 0;
padding-right: 50px; /* How much right of the original image */
padding-bottom:160px; /* How much down of the original image */
width: 85%; /* Move the 85% to here */
}
.img-portfolio > a img:first-child {
position: relative;
z-index: 10;
box-sizing: content-box;
width: 100%; /* Remove the 85% here and move it up */
}
.img-portfolio > a img:last-child {
opacity: 0.5;
position: absolute;
z-index: 5;
bottom: 0;
right: 0;
box-sizing: content-box;
}
Note: You can't change the width of the main image, of the offset on the right side is going to be off. Instead, change the width of the a link.
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;
}
Here is the link to the domain http://linenwoods.com I am working on. I am going to fit the navigation list items on the header, but when the drop down menu is implemented I'm pretty sure it'll go under the #main div like you see currently. Is there any easy way fix to this? I couldn't find anything related to this from a google search .. was hoping someone could help me out. Below is the relevant CSS .. I tried playing around with z-index with no luck as I was told IE8 renders it strangely. If you have the time please follow the link with IE and leave a response .. I am trying to be as cross-browser compatible as possible and already am at a pretty pathetic start. Any help would be appreciated :)
body {
background-image:url('Background1.jpg');
background-position: center;
height: 100%;
margin: 0;
padding: 0;
opacity: 0.8;
filter: alpha(opacity=80);
}
#main {
width : 1010px;
height: 1315px;
background-color: white;
margin-top: 15px;
filter: alpha(opacity=80);
}
header {
width: 1010px;
height: 230px;
background-color: white;
margin: 0 auto;
margin-top: 15px;
filter: alpha(opacity=80);
}
footer {
width: 1010px;
height: 230px;
background-color: white;
margin: 15px 0 15px 0;
filter: alpha(opacity=80);
}
Apply this CSS (works only in IE8 and 9):
ul.nav {
position: relative;
z-index: 2; /* 2 or higher */
}
IE7 does... weird things with the z-index. If you want to target IE7 as well, you can do this (CSS hack taken from this page):
ul.nav {
position: relative;
position: absolute !ie7; /* For IE7 only */
z-index: 2; /* 2 or higher */
}
Using z-index only works on positioned elements. When you tested zindex stuff, were your elements either absolute or relative?