I have this image currently. The circle, the close image, and get your quotes image. (see below)
Correct image layout
I can't get all elements to be fixed together so when I change the size of the screen the elements move together instead of separately across the page. (see below)
Incorrect image layout
I have looked into the positioning of each element, but I maybe misunderstanding something, or my code is messy. Please see below:
HTML:
<body>
<!--Thanks for visiting image-->
<div id="thanks-for-visiting-img-bg" class="thanks-for-visiting-bg">
<div id="thanks-for-visiting-img-container" class="thanks-for-visiting-img-container">
<img src="../images/thanks_for_visiting_img.png" alt="Thanks for visiting" id="thanks-for-visiting-img" class="thanks-for-visiting-img">
</div>
</div>
<!--Get Quotes button-->
<div>
<img src="../images/btn.png" alt="Get Your Quotes" id="get-quotes-btn" class="get-quotes-btn">
</div>
<!--Close button-->
<div>
<img src="../images/close_green.png" alt="Close Thanks For Visiting image" id="close-btn" class="close-btn">
</div>
</body>
</html>
CSS:
/*CONTAINER*/
.thanks-for-visiting-img-container {
width: 550px;
height: 550px;
z-index: 2147483647;
left: 0px;
right: 0px;
margin: auto;
top: 0px;
bottom: 0px;
display: block;
outline: none;
max-width: none;
max-height: none;
position: fixed !important;
cursor: default !important;
}
/*IMAGE BACKGROUND*/
.thanks-for-visiting-bg {
display: block;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
/*z-index: 2147483647;*/
overflow: auto;
background-color: rgb(0, 0, 0);
opacity: 0.83;
}
/*-- GET QUOTES BUTTON --*/
.get-quotes-btn {
cursor: pointer;
position: absolute;
background-color: rgba(0, 0, 0, 0);
background-repeat: no-repeat;
background-size: cover;
width: 288px;
height: 49px;
border-radius: 0px;
z-index: 2;
right: 0px;
bottom: auto;
left: -20px;
top: 425px;
margin: auto;
display: block;
}
.close-btn {
cursor: pointer;
position: absolute;
right: 50%;
bottom: 100px;
left: 65%;
top: 80px;
}
.thanks-for-visiting-img-container and .thanks-for-visiting-bg has to be fixed because the bg class' CSS doesn't work without it and the img container has to be fixed because the page will need to scroll underneath it. Can anyone help?
You can put all the div tags (Get Quotes, the image and the close button) in another div tag and then, add this CSS class to that new div tag:
.mainClass {
display: flex;
flex-direction: column;
}
Related
I want to use an img on my page as background-image of an image-slide banner. The reason is to include alt-text for accessibility reasons. To move the img in the background, I have to give it a negative z-index. Otherwise, it always shows on top of the content.
Tag-Lines are included on the banner as h1 titles. These titles can't be selected or interacted with, once the banner is in the negative z-index. So far, there is no problem. However, some of the background-images I want to include on some pages, were not taken by myself, so they need an image credit. The link which leads to the original-photo on the image-credit can't be clicked on. Optically, it's shown above the image and the banner, but it can't be clicked on.
So is there a way to make the content of the banner interactable. I could include the image as background-image, but in this case, how can I include alt-text to the background-image?
.slider {
width: 100%;
position: relative;
height: 600px;
z-index: -1;
}
.banner {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.banner-image {
position: fixed;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
height: 640px;
z-index: -2;
}
.image-credits {
background-color: black;
color: white;
padding: 2px 8px;
margin: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.image-credits a {
color: white;
}
<div class="slider">
<div class="banner">
<img class="banner-image" src="https://via.placeholder.com/1280" alt="Description, what you see">
<div class="content">
<h1>Some tagline</h1>
<p class="image-credits">Photo by <a href="image-source" target="blank">Photographer</a\></p>
</div>
</div>
</div>
I tried setting the page up with positive z-values. But then the background-image always shows on top of the rest of the content on the page, and the content remains interactable. Also, I applied pointer-events:none; to all other elements of the slider, except of the image-credits. That also didn't work out.
Seems its not workin when you set z-index both parent and child elements. Try to remove z-index from .slider and it should work.
If you specify z-index on an element, it gonna impacts his descendants too. If you specify a negative z-index, then the corresponding elements are going "behind" <body> element. Then all your click are on <body> element. As <body> have a transparent background, you could have the impression click on your link, but you are not.
To be able to click on your link, it should have no element with greater z-index in front. Below, I have made you an example without z-index on .slider (which is one of the ascendants of your link, so it specifies indirectly z-index for him)
.slider {
width: 100%;
position: relative;
height: 600px;
}
.banner {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.banner-image {
position: fixed;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
height: 640px;
z-index: -2;
}
.image-credits {
background-color: black;
color: white;
padding: 2px 8px;
margin: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.image-credits a {
color: white;
}
<div class="slider">
<div class="banner">
<img class="banner-image" src="https://via.placeholder.com/1280" alt="Description, what you see">
<div class="content">
<h1>Some tagline</h1>
<p class="image-credits">Photo by <a href="#" target="blank">Photographer</a\></p>
</div>
</div>
</div>
I'm having a very difficult time getting my image centered and responsive without overlapping my text. How do I fix this.
View the issue here
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 50%;
left:50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="bg3.jpg" /></div>
You have position absolute in your div so you can adjust the top value
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 200px; /* just a sample with a fixed pixel value */
left:50%;
overflow: visible;
}
or try using
position: relative;
That image should probably be a background instead.
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 40px;
margin: 0px;
width: 100%;
background: url('http://kenwheeler.github.io/slick/img/fonz1.png') center top no-repeat;
background-size: contain;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
Or you can move that image behind the text by modifying the z-index.
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 50%;
left: 50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
z-index: -1;
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png" /></div>
It's because of the positioning of your elements.
If you want to have a fixed header your content needs to be pushed down the height of your header. Do this by wrapping your content in a container, and giving it a margin-top equal to the height of your header.
header {
position: fixed;
height: 100px;
}
.content-container {
position: relative;
margin-top: 100px;
}
And your HTML:
<header></header>
<div class="content-container">
</div>
Give your content-container the position: relative. If you want to center items in the center you can either use flexbox or give it a margin: 0px auto;.
Position relative means it's positioned relative to other elements.
Some other things I noticed in your code which could be done better/cleaner:
Use the units em or rem for font-size
It's not necessary to prefix your classes with the element (div.shadow -> .shadow and img.logo -> .logo)
Also I would recommend ordering your CSS following the CSS Box Model. This opts for much cleaner code and better readability.
This means you will get something like this:
.class {
// Positioning first
position: relative;
top: 0;
right: 0;
z-index: 1;
// It's size
width: 500px;
height: 500px;
// It's margin
margin: 0px auto;
// It's border
border: 1px solid blue;
// It's padding
padding: 2em 0;
// Content styling
color: #676766;
background: blue;
}
I don't know why you have written this complex css. It can be possible by some easy css coding.
<style>
div.shadow {
width: 100%;
float: left;
text-align: center;
}
img.logo {
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
width: 100%;
float: left;
}
</style>
I render a div with an image that looks like it's a video (but it's just an image, for performance). When the user clicks on the image, JS swaps out the image with the appropriate youtube embed code and plays the video.
Below the image/video div, I have another div with some action icons (share, like etc). Rather than have the actions below the image/video div, I'd like to put them over the image/video div on:hover. See below image for better description:
Here's the current structure of my code.
The HTML:
<div class="youtube-container col-sm-6 col-lg-4">
<div class="youtube-player" data-id="<%= trailer.youtube_id %>">
<div class="holder">
</div>
</div>
</div>
<div class="row icons">
<div class="icon">
<img src="icon1">
</div>
<div class="icon">
<img src="icon2">
</div>
<div class="icon">
<img src="icon3">
</div>
</div>
CSS:
.icons img {
height: 35px;
margin: -10px 0 0 5px;
}
.icons {
float:left;
margin: 30px 10px 10px 10px;
}
.icon img {
height: 55px;
}
.youtube-container {
display: block;
margin: 20px auto;
width: 100%;
width: 100%;
}
.youtube-player {
display: block; width: 100%; /* assuming that the video has a 16:9 ratio */
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
cursor: hand;
cursor: pointer;
display: block;
}
img.youtube-thumb {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
height: auto
}
div.play-button {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("http://i.imgur.com/TxzC70f.png") no-repeat;
}
#youtube-iframe { <--- the iframe dynamically generated when someone clicks the image
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
After the page is loaded, Javascript goes through and 1) finds all the .holder divs 2) inserts a dynamically generated image 3) Adds an on.click event listener to .holder that, when clicked, swaps the image for a youtube iframe.
I understand how to implement the "on hover" part, by I need help with CSS and overlaying the icons on top of the image/video.
I need to create a div-element, which has 100% width and height for the visible part of the screen. Below this there should be another div-element with variable height, which can only be seen, if the user scrolls down. It is like a one-page website...
JSFiddle: http://jsfiddle.net/sopk6vx3/
#main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#overlay {
display: none;
opacity: 0.8;
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
top: 0;
left: 0;
}
#overlay section {
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
background-color: #FFF;
width: 94%;
height: 90%;
border-radius: 5px;
margin: 2% 3%;
}
<div id="main">
<header>Navigation</header>
<footer>Footer of main-element</footer>
</div>
<div id="tour">
Here is some tour-information about the product
</div>
<div id="overlay">
<section>Main Content</section>
</div>
Via click on a navigation element the #overlay will be fade in to show the content.
So how do I do the correct CSS for the #main and #tour element? As in the fiddle it doesn't work.
And could the overlay-css been optimized?
I'm creating a quiz editor.
User should be able to put check box on image
I have a div who represent a zone
inside, there is an image
on the image there are check box.
image may have any size, i don't know the size of image
check box should be positioned relative to the image
image should be center on the zone
I need something dynamic, screen should be resizable
i have the following code:
HTML
<div class="boundary" >
<div class="mycomponent">
<div class ="container">
<img style="display: block; max-height: 100%; max-width: 100%; margin-left: auto; margin-right: auto;" src="image.jpg" >
<img style="left: 20.3501%; top: 44.448%; display: block; position: absolute;" id="imgi0" src="uncheck.png">
<img style="left: 52.7185%; top: 35.7171%; position: absolute;" id="imgi1" src="uncheck.png">
<img style="left: 82.0456%; top: 31.3517%; position: absolute;" id="imgi2" src="uncheck.png">
</div>
</div>
</div>
CSS
.boundary
{
left: 0px;
display: block;
position: absolute;
right: 0px;
bottom: 50px;
top: 75px;
background-color: aquamarine;
}
.mycomponent
{
height: 43%;
width: 89.29%;
top: 26.78%;
left: 5.496%;
overflow-y: hidden;
overflow-x: hidden;
position: absolute;
padding: 0px;
text-align: center;
border-color:#000000;
border-style: solid;
background-color: beige;
}
.container
{
display: inline-block;
position: relative;
overflow: hidden;
}
jsfiddle : http://jsfiddle.net/jlogan/91p06yjm/
This code works fine on chrome and safari but failed in firefox and ie9+
any clue ?
Thansk a lot
I updated and cleared your fiddle to make it clearer. You can give your class "mycomponent" max-height instead of height.
.container{
max-height: 43%; // You had "height:43%";
width: 89.29%;
top: 26.78%;
left: 5.496%;
overflow-y: hidden;
overflow-x: hidden;
position: absolute;
padding: 0px;
text-align: center;
border-color:#000000;
border-style: solid;
background-color: beige;
}
Working fiddle
It's working for me in every browser, even if you resize the window.