I am trying to have an image show up when the user hovers over some text in a span. I have gotten it to work for the user hovering over an entire div, but I just want it to trigger over the span. Here's the full code:
<html>
<head>
<title>gif test</title>
<style>
#gif {
position: absolute;
left: 50px;
top: 120px;
display: none;
}
#trigger:hover #gif {
display: block;
}
</style>
</head>
<body style="font-family:Helvetica;">
<h1>gif test</h1>
<hr noshade />
<p>Hover <span id="trigger">here</span></p>
<div id="gif"><img src="img/hey.gif" /></div>
</body>
</html>
I wanted it to be so that when the user puts their mouse over "here", the image shows, but not if the mouse is over "Hover". Is there something special about spans that prevents hovers from working the same way? Or am I referencing the #gif div incorrectly?
Thanks.
Your CSS is incorrect, #trigger;hover #gif means a child of #trigger:hover with the id gif. Meaning your DOM is supposed to be:
<div id='trigger'>
<div id='gif'><img src='img/hey.gif' /></div>
</div>
If you want to control the state of an element outside the hierarchy, where the controlled element is not a child or a sibling, then CSS isn't enough you need some javascript:
<html>
<head>
<title>gif test</title>
<style>
#gif {
position: absolute;
left: 50px;
top: 120px;
display: none;
}
#gif.show {
display: block;
}
</style>
</head>
<body style="font-family:Helvetica;">
<h1>gif test</h1>
<hr noshade />
<p>Hover <span id="trigger" onmouseover="show()" onmouseout="hide()">here</span></p>
<div id="gif"><img src="img/hey.gif" /></div>
</body>
<script type="text/javascript">
showBox() {
var gifbox = document.getElementById("gif");
gifbox.classList.add("show");
}
hideBox() {
var gifbox = document.getElementById("gif");
gifbox.classList.remove("show");
}
</script>
</html>
Per j08691, I had my hierarchies wrong. New code:
<html>
<head>
<title>gif test</title>
<style>
#gif {
position: absolute;
left: 50px;
top: 120px;
display: none;
}
#trigger:hover + #gif {
display: block;
}
</style>
</head>
<body style="font-family:Helvetica;">
<h1>gif test</h1>
<hr noshade />
<p>Hover <span id="trigger">here</span>
<span id="gif"><img src="img/hey.gif" /></span>
</p>
</body>
</html>
Now, the image is a sibling of #trigger (both have parent <p>; the + is the sibling selector).
Related
My thing is not working i can't figure out any errors too.As far as i know i tried to separate those mountains and cloud on different level which seems not to be working rather they're sitting beside on their parent element
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="images/icon2.ico">
<title>Farhan Sadiq</title>
</head>
<body class="body">
<div class="top-container">
<img class: "top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>Farhan Sadiq</h1>
<p><span class="underline">WebDevloper</span> and <span class="underline">GameDevloper</span></p>
<img class: "bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
.body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.top-container {
background-color: #CEE5D0;
}
.middle-container {
background-color: pink;
width: 200px;
height: 200px;
}
.bottom-container {
background-color: yellow;
width: 200px;
height: 200px;
}
.underline {
text-decoration: underline;
}
.bottom-cloud {
position: absolute;
}
you have a typo in the section, the property class uses = instead of : , then what does the output you expect mean, how do you separate it?
There is a typo class in the tag. You have to change the class in this img tag class: "top-cloud" so it looks like this class="top-cloud".
I have been trying to place my Menu Div above my background, and it is failing to appear at all. Even in inspect element nothing appears when I try to show where the div is. I have already tried z-index and position relative/absolute/fixed.
I am trying to make a landing page for my website and have been stuck up on this for a long time now. I have tried rearranging the order of the Menu Div in front of the
This is My HTML Code
.body{
margin: 0;
padding: 0;
height: 100%;
}
.menu_top{
background-color: #ffffff;
position: relative;
top: 0;
width: 100%;
height: 100;
z-index: 5;
}
.home_logo_box{
z-index: 5;
}
.home_logo{
top: 30%;
position: absolute;
left: 42%;
}
<html>
<head>
<title>
Home
</title>
<meta charset="utf-8">
<link rel="stylesheet" href="coincontrast_home.css">
<link rel="stylesheet"; style="text/css" href="style.css">
</head>
<body>
<div src="particles">
<div id="particles-js"></div>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
</div>
<div src="menu_top">
<img src="https://image.flaticon.com/icons/png/128/33/33447.png" class="home_logo">
</div>
<div class="home_logo_box">
<img src="https://image.flaticon.com/icons/png/128/87/87386.png" class="home_logo">
</div>
</body>
</html>
There are no error messages
Your issue is because you are not giving the div elements an id or class.
<div src="menu_top">
Should actually be:
<div class="menu_top">
This means that it will also line up with your CSS. If you wanted to change the div element to an id it would look like this:
<div id="menu_top">
And you need to change your CSS from: .menu_top to #menu_top.
Also, as Thomas Byy said, you should move your <script> tags to outside of the <body> element, they could be moved to the <head> element or just before the closing </html> element.
This will help you
.body{
margin: 0;
padding: 0;
height: 100%;
}
#menu_top{
background-color: #ffffff;
position: relative;
top: 0;
width: 100%;
height: 100;
z-index: 5;
}
.home_logo_box{
z-index: 5;
}
.home_logo{
position: relative;
bottom:0;
left: 42%;
}
<html>
<head>
<title>
Home
</title>
<meta charset="utf-8">
<link rel="stylesheet" href="coincontrast_home.css">
<link rel="stylesheet"; style="text/css" href="style.css">
</head>
<body>
<div src="particles">
<div id="particles-js"></div>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
</div>
<div id="menu_top">
<img src="https://image.flaticon.com/icons/png/128/33/33447.png" class="home_logo">
</div>
<div class="home_logo_box">
<img src="https://image.flaticon.com/icons/png/128/87/87386.png" class="home_logo">
</div>
</body>
</html>
I think you shutdown your computer to solve that problem. Hehehe sorry just kidding, I think JackU was right when you name a class you should use a class element so that we you go to your css files you can easily call it. Because in your situation you didn't declare menu_top as a class name, Unfortunately, you make your menu top as a link or source from.
The div with style contentdetailleft is absolute and so will be positioned to the div with the style container (since container is absolute). You can see that I have set left to 0px and top to 0px just to illustrate this. If you run it you will see the div with contentdetailleft overlap the div with style contentTop as you would expect. This is the HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;left:0px;top:0px;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
Now remove the left:0px and top:0px on the contentdetailleft style (see the HTML below). Now the div with style contentdetailleft is within the div with style contentBottom. How can this be?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
Thanks
Ian
The reason you are seeing this change in behavior is because the default positioning that occurs when you use "position: absolute;" is "left: 0;". However, "top: 0;" is not default behavior, so when you add that (as you correctly said), ".contentdetailleft" is positioned to the ".container" element.
Because ".contentdetailleft" comes after ".contentheaderleft" in the DOM (*and more importantly, because ".containerBottom" and ".containerTop" are still default position - static), once ".containerdetailleft" becomes positioned absolutely it is pulled out of the normal flow of the DOM and positioned based on it's relative/absolute parent (".container"). At this point it is sitting at the top-left corner of container, on top of ".containerTop", and thus on top of ".contentheaderleft".
You don't need the style "left: 0;" on ".contentdetailleft" once it has been positioned absolutely. If you would like to keep it absolute and have the "top" styling, but not have it overlap/cover ".contentheaderleft", simply position it from the top at the exact height of ."contentheaderleft" (42px), i.e. "top: 42px;".
*see below, all I updated was the top position of ".contentdetailleft"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;left:0px;top:42px;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
I am trying to make a website for school about gothic cathedrals, and can not get the css class to work. I am trying to make a menu on the side of the page that will stay in the same position, and just typed 'hi' to test it. Nothing I have looked up is working and it would be greatly appreciated if someone could tell me what I'm doing wrong.
<html type = "text/css">
<head>
<script>
div.mydiv {
color: red;
position: fixed;
left: 0;
top: 200px; /* 200px from top */
}
</script>
<title>
Cathedral Project
</title>
</head>
<body>
<h1>
<marquee behavior = "alternate" style = "background-color:#828180" scrolldelay = "1">
<img src="gothic.jpg">
</marquee>
</h1>
<div class="mydiv">hi
</div>
</body>
</html>
Currently your css is in a <script> tag. It needs to be in a <style> tag. It should look like this:
<style type="text/css">
.mydiv { /* styles go here */ }
</style>
Change
<script>
div.mydiv {
color: red;
position: fixed;
left: 0;
top: 200px; /* 200px from top */
}
</script>
To
<style>
div.mydiv {
color: red;
position: fixed;
left: 0;
top: 200px; /* 200px from top */
}
</style>
You place your CSS code in the <style type="text/css"></style> tag, not in the <script></script> tag.
And it would be great for you if you indent the code, it will help you not making silly errors like missing the tags.
I'm currently working on a menu for a website and got a problem: I have a logo which should be on the left side and menu buttons which should be on the right side. This is what I got so far:
<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Share:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Menu</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: 'Share', cursive;
}
#header {
background-color: ;
}
#header_logo {
width: ;
margin-top: ;
}
#header_menu {
width: 100%;
}
.menubutton {
height: 2.5em;
line-height: 2.5em;
display: inline-block;
background-color: ;
margin-left: 20px;
}
a {
font-family: 'Share', cursive;
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
</style>
</head>
<body>
<div id="wrapper" align=""> <!-- Beginning of wrapper -->
<div id="header"> <!-- Beginning of Header -->
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;"/>
</div>
<div id="header_menu" align="right">
<div class="menubutton">
Home
</div>
<div class="menubutton">
Info
</div>
<div class="menubutton">
Werben
</div>
<div class="menubutton" align="right" style="margin-right: 20px;">
Kontakt & Impressum
</div>
</div>
</div> <!-- End of header -->
</div> <!-- End of wrapper -->
</body>
</html>
The problem is that the logo is not on a line with the menu buttons…
Before I added the logo everything worked perfect. I tried different things but nothing worked. Do you guys have an idea how I can solve that problem?
Add float:left to your #header_logo div.
jsFiddle example
Note that you may also want to reduce or eliminate the line-height property on your .menubutton class if you want the spacing to be even tighter.
You may also try for display: inline-block;
This property allows a DOM element to have all the attributes of a block element, but keeping it inline.
Also do check this article