I'm relatively new to coding, and working on a repo in Github. I have 12 clickBoxes on the same page that I'm applying a hover effect to, so that a PNG appears on hover. When the hover effect is applied, the clickBox no longer works, and vice versa. I'm pretty sure it's an issue with HTML
The clickBox I'm currently working on is .clickBox-Ministries. This is the hover effect in CSS:
.clickBox-Ministries,
.png-overlay {
position: absolute;
width: 6%;
height: 14%;
top: 12%;
left: 11%;
}
.png-overlay{
/*display: none;*/
position: absolute;
width: 12%;
height: 13%;
top: 12.5%;
left: 8%;
z-index: 1;
opacity: 0;
}
.common-parent{
position: relative;
}
img.png-overlay:hover{
display: inline;
opacity: 1;
/*transition: opacity 0.1s ease-in-out;*/
cursor: pointer;
}
When I set up the HTML this way, the clickBox doesn't work and neither does the hover effect:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<!-- Main Nav -->
<div class=clickContainer>
<div class="common-parent">
<div class="clickBox-Ministries">
</div>
<img class="png-overlay" src="Ministries_Overlay.png">
</div>
When I remove the closing tag from the .common-parent, the PNG hover effect works but the clickBox does not.
Finally, when I remove the closing tag from .clickBox-Ministries, the clickBox works but the PNG hover effect does not:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<!-- Main Nav -->
<div class=clickContainer>
<div class="common-parent">
<div class="clickBox-Ministries">
<img class="png-overlay" src="Ministries_Overlay.png">
</div>
Any thoughts?
Basically, your clickBox-Ministries div has no height because it has no content - except when you leave off its terminating /div, in which case it thinks the img is its content and takes on the image's natural height.
By default, div elements are block level elements. See https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements for discussion on how they pick up their default width and height.
One way to check what is happening is to inspect the elements via your browser's dev tools. You'll see in your example that the div takes on the width of the viewport (possibly minus a bit for default margin, depending on what you have box-sizing set as) and height of 0 unless it has the img within it.
On a more minor point, to make the image fade out gradually in the same way as it fades in, put the transition on the img class, not on just the hover.
Here is a snippet which does these alterations. It's a bit strange because without any natural height to the clickable div it's only the img that does anything (on hover in that case). If you want the div above the img to be clickable it needs some clickable area, i.e. some content or to have height and width explicitly set.
So when you run this snippet you get a blank page and have to sort of wave the mouse around near the top left to get the img to appear.
body {
width: 100vw;
height: 100vh;
}
.clickContainer {
width: 100%;
height: 100%;
}
.clickBox-Ministries,
.png-overlay {
position: absolute;
width: 6%;
height: 14%;
top: 12%;
left: 11%;
}
.png-overlay{
/*display: none;*/
position: absolute;
width: 12%;
height: 13%;
top: 12.5%;
left: 8%;
z-index: 1;
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
.common-parent{
position: relative;
width: 100%;
height: 100%;
}
img.png-overlay:hover{
display: inline;
opacity: 1;
cursor: pointer;
}
<!-- Main Nav -->
<div class=clickContainer>
<div class="common-parent">
<div class="clickBox-Ministries">
</div>
<img class="png-overlay" src="https://picsum.photos/id/1015/200/300">
</div>
</div>
Related
My goal here is to create an image slideshow. I'm trying to add the left and right arrows on each side, however my right arrow won't fit in the div. I'm kind of a beginner so bear with me, I was following w3 schools on the slideshow tutorial to make sense of things. I don't want to copy literally everything from w3 schools but like i said i'm a beginner and i'm trying to make sense of things. My next goal is to move on to js and try to solve things there myself.
<html>
<head>
<title>Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="myscript.js"></script>
</head>
<body>
<div class="container">
<div class="regular-img" >
<img id="city" src="NYC.jpg">
</div>
<div class="regular-img" >
<img id="king" src="KING.jpg">
</div>
<a id="prev">❮</a>
<a id="fwd">❯</a>
</div>
</body>
</html>
````
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
background-color: yellow;
height: 65vh;
width: 95vw;
margin: 75px auto;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
.regular-img {
display: none;
}
a {
cursor: pointer;
/* color: white;
opacity: 0.7; */
position: absolute;
top: 50%;
font-size: 18px;
user-select: none;
font-weight: bold;
padding: 16px;
margin-top: -22px;
width: auto;
}
#fwd {
right: 0;
}
enter code here
Okay, the fellow developer no need to be afraid just add position: relative to .container and you will be good to go. It is because when you give something a position absolute it will relate to the closest parent element whose position is relative. if none is present it will relate to the HTML element so by adding a relative property to the .container right arrow will relate to its parent container and will stay in the container. Google the difference between position relative and absolute and you will have a better understanding
The solution here is very simple. You have added position: absolute; to the arrows. But you didn't add position: relative; to the parent div.
All you have to do is add this :
.container {
position: relative;
}
I'm an illustrator who is doing a piece for the web and fairly new to HTML, CSS, and Javascript. For my basic scene, I need an image of a bird to overlap an image of the sky, because I am going to animate the bird simply (flapping wings, etc.) in the final version.
I've made a div that holds the image of the mountain and the image of the bird. Using CSS, I've successfully overlapped them with z-index, but I can't seem to get relative percentage values to work in terms of their relationship to one another (i.e. I need the bird at a certain place in the sky). I also looked up a method for making the whole design responsive with a tag to control the viewport, but even after including it nothing scales. I'd appreciate any help--I'm trying to wrap my mind around positioning but nothing I try is working.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id='scene'>
<img class='sky' src='skybox.png'>
<img class='bird' src='bird.png'>
</div>
</body>
</html>
CSS
#scene {
position: relative;
z-index: -1;
}
.sky {
position: relative;
z-index: 1;
}
.bird{
position: relative;
z-index: 2;
/* this is where I'd like to add some percentage that
would be responsive and also put the bird at a certain
place in the sky. Pixel values work to position it but
the top has to be negative even to get it in the sky at
all, and percentages do nothing */
}
You want to put the parent container into position: relative and then the children as position: absolute That way, you can control how they act within the parent div.
It's a lot easier if whatever pictures you're using are the same dimensions. If they are, you just set the margins like so:
.bird, .sky, .sun {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Here's a snippet for you to study. :) Let me know if you have any questions!
.scene {
position: relative;
width: 50vw;
height: 50vh;
z-index: 0;
overflow: hidden;
}
.bird, .sky, .sun {
position: absolute;
}
.bird {
border: 1px solid red;
height: 10%;
width: 5%;
bottom: 10%;
left: 20%;
background-color: red;
z-index: 1;
overflow: hidden;
}
.sky {
width: 100%;
height: 100%;
background-color: lightblue;
}
.sun {
top: -10%;
right: -10%;
height: 30%;
width: 20%;
border-radius: 100%;
background-color: yellow;
z-index: 2;
overflow: hidden;
}
<div class="scene">
<div class="bird"></div>
<div class="sky"></div>
<div class="sun"></div>
</div>
I'm currently working on a small little project where i want to use the HTML/CSS checkbox-'hack' to simulate a toggleable image rotation. Problem is, when i add more content to the page and resize it, the images wont stay together at all.
I've tried scaling the images by % and vw/vh without success, as well as scaling the header above the images to make sure they don't 'jump' around when they move.
https://jsfiddle.net/9u3vz5mo/
#cup {
width: 75%;
height: 50vh;
position: relative;
z-index: 1;
}
#mouth {
position: absolute;
width: 7%;
height: 3%;
z-index: 2;
top: 43.5%;
left: 50.5%;
}
<h1>Paragraph Time, please let this work oh lord</h1>
<div class="images">
<img id="cup" src="https://i.imgur.com/SFV05KS.png">
<input type="checkbox" id="checkmouth">
<label for="checkmouth">
<img id="mouth" src="https://i.imgur.com/95acGMs.png">
</label>
</div>
What i hope to achieve is a version where the images scale responsivly to the sites size, and where the rest of the content is shown without having the mouth fly of the designated space on the cup.
Add position: relative to parent element of both images (.images in this case) .
Then adjust position of #mouth
position: absolute elements are positioned relative to first parent element with position: relative
When setting the position to relative, you can add additional positioning attributes (top, bottom, left, right). The relative element is relative to itself. For example, if you set top: 10px the element will move 10px to the top from its normal position.
.images{
position: relative;
}
#cup {
width: 75%;
height: 50vh;
position: relative;
z-index: 1;
}
#mouth {
position: absolute;
width: 7%;
height: 6%;
z-index: 2;
top: 58.5%;
left: 50.5%;
}
#checkmouth {
display: none;
}
input:checked + label > img {
transform: rotateX(180deg);
transition-duration: 0.5s;
}
input:not(:checked) + label > img {
transform: rotateX(0deg);
transition-duration: 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./style.css">
<title>Document</title>
</head>
<body>
<h1>Paragraph Time, please let this work oh lord</h1>
<div class="images">
<img id="cup" src="https://i.imgur.com/SFV05KS.png">
<input type="checkbox" id="checkmouth">
<label for="checkmouth">
<img id="mouth" src="https://i.imgur.com/95acGMs.png">
</label>
</div>
</body>
</html>
Always specify 100% width or vw for scaling, and do not set a specified height for images you want to scale correctly. Place them in a div container.
Your problem is setting a specified height .
I'm creating a merchandising page where there will be several products photoshopped onto the background image. I want customers to be able to hover on a dot positioned on the product to reveal it's information and contain a link similar to http://www.wineenthusiast.com/custom-cellars/ but I want to do it in pure CSS. I only want the info and link to appear when a user hovers on the dot and then on the containing div. The issue I keep running into is that since both elements are contained in the same div, the corresponding image is displayed. This will be too messy when there are 15 products on this page. Still a noob coder so any help would be greatly appreciated, thanks!
Here's the fiddle: http://jsfiddle.net/jakvisualdesign/hvb77m8L/2/
and the code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link rel="stylesheet" href="style.css">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div class="base">
<img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg" />
</div>
<div class="pop-container-a">
<img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg">
<div class="dot"></div>
</div>
</div>
</body>
</html>
and the CSS:
#container {
position:relative;
width: 960px;
margin-left: auto;
margin-right: auto;
}
.base {
width: 100%;
height: 100%;
position: absolute;
}
#container.pop-container-a img {
position: absolute;
}
.dot {
width: 10px;
height: 10px;
position: absolute;
background-color: red;
z-index: 10;
border-radius: 50%;
}
.pop-container-a img {
position:absolute;
opacity: 0;
width: 150px;
transition: opacity .5s ease;
}
.pop-container-a:hover .dot, .pop-container-a:hover img {
opacity: 1;
}
.pop-container-a {
position: absolute;
top: 100px;
left: 50px;
display: inline-block;
}
Fixed that up for you: http://jsfiddle.net/hvb77m8L/3/
The trick is using the adjacent sibling selector + to allow hovering on the dot to affect the image next to it. So, this:
.pop-container-a:hover .dot, .pop-container-a:hover img {
opacity: 1;
}
becomes this:
.dot:hover + img {
opacity: 1;
}
Edit: and since that selects an element immediately following the targeted one, also note that I changed this:
<img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg">
<div class="dot"></div>
to this:
<div class="dot"></div>
<img src="https://s3.amazonaws.com/steinersports/CMS+Pages/Yankees+Man+Cave/background.jpg">
Edit 2: To make the images remain when hovered on, you can make them inactive by default by setting their width to 0:
.pop-container-a img {
opacity: 0;
width: 0; // in addition to being invisible, the image will not respond to hovering
position: absolute;
transition: opacity .5s ease;
}
Then, when the dot is hovered, return the images to normal width and normal opacity:
.dot:hover + img {
width: 150px;
opacity: 1;
}
And when the image is in this state, it can now remain there with a hover effect:
.dot + img:hover {
width: 150px;
opacity: 1;
}
A new fiddle to demonstrate this: http://jsfiddle.net/hvb77m8L/6/
I am making a website with css and jquery. One of my script is to show a text at a specific location on a mouse click. The text is displayed good in google chrome at its intended position. but in IE9 and FF17 they are displaced from the intended position. My background image is such that it fits to the size of the window of the browser.
I am attaching the screenshot which will give a better idea. Also I am writing the code. maybe only a small tweak is required but I do not get it. Please help me in this.
This is the comparison between chrome and IE. the right one is chrome which is the right one. FF and IE display at same positions.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
*Here will my script which is just simple .show and .hide functions*
});
</script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin-top: 0px;
padding-top: 0px;
top: 0px;
margin-left: 0px;
padding-left: 0px;
left: 0px;
}
body {
overflow: hidden;
}
#background {width: 100%; height: 100%; display: block; position: absolute; z-index:1;}
.content {
visibility:hidden;
border-style: none;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
margin-top: 40%;
background-color: transparent;
font-size:1.5em;
opacity: 0.697;
}
#thought_text{
margin-left: 25%;
margin-right: 25%;
}
<div><img id="background" alt="background" src="tot1.png"></div>
<div class="content" id="thought_text">Here goes the text<br></div>
There is a simple hack that will work in IE9 for vertically centering elements. It uses the transform: translateY property to adjust an element within another element. We can apply a class to our inner element like so:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
You'll need to add the appropriate vendor prefixes. Here is a great article on this: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Firstly, for fixed positioning, use: top, bottom, left, right attributes instead of margin-top, margin-right..
Secondly, you've applied same z-index'es on siblings.
Thirdly, use of img element for background this way is not the best solution.
You should go for CSS background-image for body or text-div wrapper, stretched to 100%.
Full solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Here will my script which is just simple .show and .hide functions*
});
</script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image:url(http://25.media.tumblr.com/6d28260f10f17c0d2eab47398fd855f6/tumblr_mj9ha54DuW1rub5xuo1_1280.jpg);
background-position: top center;
background-repeat:no-repeat;
}
.content {
top: 40%;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
background-color: transparent;
font-size:1.5em;
opacity: 0.697;
border-style: none;
}
#thought_text{
left: 25%;
right: 25%;
color:#000;
}
</style>
<body>
<div class="content" id="thought_text">Here goes the text<br></div>
</body>
</head>
Consider removing #thought_text{} block in css file and combining it in the .content {} block to avoid overriding of attribute values
or
adding !important directive to the attributes
and also change
margin-top: 40%; to some fixed value such as margin-top: 250px; which ensures the top positions as same in all the browsers.
As I understand, you stretch image to whole page and want to center your block with text. You have 50% width (100% - 25% margins from both side) and 40% top margin.
With position:fixed you have top and left properties to set position relative to page.
.content {
position:fixed; /* taking it over the page */
z-index:2; /* and over the image */
left:25%; /* move to 25% from left */
width:50%; /* and setting width */
top:40%; /* move to 40% from top */
font-size:1.5em;
opacity: 0.697;
}
And you can remove
#thought_text{
margin-left: 25%;
margin-right: 25%;
}
You get original bug because top/bottom margin and padding in percents calculates from width not height according to spec.
this is just an idea , hope that useful .
<style>
#background {
background:url('tot1.png') no-repeat;
width: 100%;
height: 100%;
position: absolute;
z-index:1;
}
</style>
<div id="background">
<div class="content" id="thought_text">Here goes the text<br></div>
</div>
You can use a bit of javascript to detect if IE or Firefox are present, and then change the margin/position of the text accordingly.
function detectBroser(){
if (navigator.userAgent.indexOf("Firefox")!=-1)
return "Firefox";
else if (navigator.userAgent.indexOf("MSIE")!=-1)
return "Internet Explorer";
}