I would like the settingsBox element to float over the canvas rather than below it. What can I change in my style sheet to achieve the intended result?
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
margin: 0px;
}
#fullCanvas {
width: 100%;
height: 100%;
background-color: blue;
z-index: 0;
}
#settingsBox {
width: 400px;
height: 400px;
z-index: 1;
border: 2px solid black;
background-color: lightgrey;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
}
</style>
<script>
function hideSettings() {
document.getElementById('settingsBox').style.visibility = 'hidden';
}
</script>
</head>
<body align="center">
<canvas id="fullCanvas">
This site requires html5 etc
</canvas>
<div id="settingsBox" onclick="hideSettings()">
Settings go in here. Click to hide
</div>
</body>
</html>
First, you have a little spelling mistake, you wrote position: abolute for your fullCanvas element, it should be:
#fullCanvas {
position: absolute;
// your other styles
}
and in order for z-index to work you have to set the position of the respective elements to absolute, fixed or relative, that means you will have to set your settingsBox to position: relative like this:
#settingsBox {
position: relative;
// your other styles
}
apart from that you're code looks good to me
Related
Just started coding CSS and having issues with a element (class is "strip") that seems to be invisible when I compile my code. If I set the position of the element to 'absolute' it seems to appear, however I need it to appear using 'relative' and this does not seem to be working.
The class of the div I am referring to is "strip", which at this point should appear as a red block in front of all other elements.
I've tried messing around with the z-index, but this hasn't seemed to change anything.
CSS:
.banner {
z-index: 2;
position: relative;
height: 56px;
width: 100%;
background-color: #F8F8F8;
margin: 0;
border-bottom-width: 1px;
border-bottom-color: #C6C6C6;
border-bottom-style: solid;
}
.header {
position: relative;
z-index: 3;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
font-family: "Titillium Web Regular", sans-serif;
text-transform: uppercase;
font-size: 12px;
bottom: 58px;
}
.logo img {
position: relative;
z-index: 4;
height: 50px;
width: 44px;
left: 3px;
bottom: 114px;
}
.strip {
position: relative;
bottom: 200px;
height: 100%;
width: 50%;
background-color: red;
z-index: 5;
}
body {
background-color: #d1e1ff;
margin: 0;
}
HTML:
<!DOCTYPE html>
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<div class = banner>
</div>
<div class = header>
<h1>club quiz<h1>
</div>
<div class = logo>
<img src = "https://myuwastudentguild.com/wp-content/uploads/2015/02/UWA_Student_Guild_Corpo15A_Black.png"/>
</div>
<div class = strip>
</div>
</body>
At this point, the in the "strip" class should be appearing as a red block in front of all other elements, however it is instead invisible.
Current Layout
Desired Layout
Basically I'm just looking to add a panel that runs down the centre of the page
Next to what Thanveer suggested
What exactly happening is - when you have
position:absolute; height:100%
it will occupy 100% of the screen and then you said bottom:200px so it will push this div from (0,0)(as it was absolute with respect to you body) to (0, -200). when you want this element to have
position:relative; height:100%
it will occupy the 100% of the parent element, which is body in your case that doesn't have any height.
So solution is either define some fixed height on body
body
{
background-color: #d1e1ff;
margin: 0;
height:500px;
}
OR
create parent wrapper on .strip and assign some height on that wrapper.
...
...
<div style="height:100px">
<div class="strip"></div>
</div>
...
...
Remember as you are trying to use position:relative;bottom: 200px;. it will be the real position of the .strip element (x,y) and then it will be push upward by 200 px to position will be (x, y-200).
Check the Fiddle
Hope it helps.
Use a fix height on class strip:
.banner {
z-index: 2;
position: relative;
height: 56px;
width: 100%;
background-color: #F8F8F8;
margin: 0;
border-bottom-width: 1px;
border-bottom-color: #C6C6C6;
border-bottom-style: solid;
}
.header {
position: relative;
z-index: 3;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
font-family: "Titillium Web Regular", sans-serif;
text-transform: uppercase;
font-size: 12px;
bottom: 58px;
}
.logo img {
position: relative;
z-index: 4;
height: 50px;
width: 44px;
left: 3px;
bottom: 114px;
}
.strip {
position: relative;
bottom: 200px;
height: 100px;
width: 50%;
background-color: red;
z-index: 5;
}
body {
background-color: #d1e1ff;
margin: 0;
}
<!DOCTYPE html>
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<div class = banner>
</div>
<div class = header>
<h1>club quiz<h1>
</div>
<div class = logo>
<img src = "https://myuwastudentguild.com/wp-content/uploads/2015/02/UWA_Student_Guild_Corpo15A_Black.png"/>
</div>
<div class = strip>
</div>
</body>
If you just want it to see using relative then all you have to do is give a fixed height inside your css
.strip {
height:200px;
}
And you have used a lot of position:relative in your code which is not necessary. So please check out how positioning in CSS works. That could make things much easier for you.
simple project, but a beginner at programming, so struggling. I am trying to set a couple of buttons to create a slider to change pictures. My problem is that when I set the position attribute to absolute in the div that contains the buttons, the div element that contains the buttons disappears.
So this is a screenshot of my page with position set to relative:
.buttons {
cursor: pointer;
position: relative;
}
and this is with it set to absolute:
.buttons {
cursor: pointer;
position: absolute;
}
And here is the code
html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="JavaScript2b.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
</head>
<body>
<div id="header">
</div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="500px" id="front" />
<div id="previous" class="buttons" onclick="change(-1);">
</div>
<div id="next" class="buttons" onclick="change(1);">
</div>
</div>
</div>
<div id="footer">
</div>
</body>
<script type="text/javascript" src="JavaScript2.js"></script>
</html>
css
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
display: block;
}
#container {
height: 80%;
width: 100vw;
background-color: white;
min-height: 580px;
text-align: center;
}
#imagewrap{
position: relative;
border: 1px solid #818181;
overflow: hidden;
z-index: 5;
display: inline-block;
top: 50%;
transform: translateY(-50%);
}
.buttons {
cursor: pointer;
position: relative;
}
#previous {
background-image: url(Images/carremoins.png);
background-repeat: no-repeat;
background-position: center center;
width: 20px;
height: 20px;
}
#next {
background-image: url(Images/carreplus.png);
background-repeat: no-repeat;
width: 20px;
height: 20px;
background-position: center center;
}
I would like the buttons to be on the picture, not below it, but can't understand why they disappear. Any help appreciated.
Try setting the z-index on the buttons to a value larger than that of the image (5).
.buttons {
cursor: pointer;
position: relative;
z-index: 10;
}
Your container, #imagewrap, has overflow: hidden. When you make its children position: absolute, you remove them from calculations determining the size of the parent element, so the parent is no longer large enough to display the children. That means they are overflow, which you have specified should be hidden.
You can solve this problem in several ways, depending on your needs. You can allow overflow, reposition the children so they are inside of the parent, and/or increase the size of the parent such that it encompasses its children. Any or all will make the children visible.
I'm puzzled by the following problem. I wish to (absolutely) position the baseline of some piece of HTML text at a certain y-coordinate, while the text should be starting at a certain x-coordinate. The following diagram clearly demonstrates the issue.
So I basically want to control where the point (x,y), henceforth called the "basepoint", in the diagram is located on the screen, relative to the top-left corner of the BODY of the document or some DIV. Important: I don't know beforehand what the font-family or font-size of the text is. This is important, because I don't want to change all the positions in my CSS whenever I change fonts.
In the following code, I try to position the basepoint at (200,100), but instead it positions the top-left of the DIV at that point.
<html>
<style>
BODY
{
position: absolute;
margin: 0px;
}
#text
{
position: absolute;
top: 100px;
left: 200px;
font-family: helvetica, arial; /* may vary */
font-size: 80px; /* may vary */
}
</style>
<body>
<div id="text">css=powerful</div>
</body>
</html>
So how should I modify this code? Should I use the vertical-align property of the enclosing DIV? (I tried, but couldn't get the desired result).
Thanks for any useful replies.
Hacky solution based on this blog post.
HTML:
<body>
<div id="text">css=powerful</div>
</body>
CSS:
body {
margin: 0;
}
#text {
font-size: 30px;
line-height: 0px;
margin-left: 100px;
}
#text:after {
content: "";
display: inline-block;
height: 120px;
}
JsFiddle. The basepoint is aligned to (100, 120).
jsFiddle Goofy (and crazy ugly/hacky), but it works.
<body>
<div id="spacer"></div>
<div id="text">
<img src="http://placehold.it/10X100" id="baseline">css=powerful</div>
</body>
...
body {
margin: 0px;
}
#spacer {
float: left;
width: 190px;
height: 100px;
background-color: red;
}
#baseline {
visibility: hidden;
}
#text {
float: left;
background-color: yellow;
font-family: helvetica, arial; /* may vary */
font-size: 60px; /* may vary */
}
Edit
I guess, really, it's all about the image. So you could just simplify and use a transparent spacer gif. Still stupid hacky, I know.
jsFiddle
By default inline-block/inline and text in block are baseline vertical-aligned. Create an pseudo element inside the block you want to move in Y and defining the height of this spacer.
/**
Create a vertical spacer. It will be aligned with the parent's content baseline:
**/
.text::before{
content: "";
/*the Y value:*/
height: 100px;
width: 0px;
display: inline-block;
}
/**
The rest (only for this demo)
**/
body{
font-family: sans-serif;
font-size: 60px;
margin: 0;
}
body::before{
content: "";
display: block;
position: absolute;
top: 100px;
width: 100%;
height: 2px;
margin: -1px 0;
background-color: #00D500;
z-index: 1;
}
body::after{
content: "";
display: block;
position: absolute;
top: 100px;
left: 200px;
height: 8px;
width: 8px;
margin: -4px;
border-radius: 50%;
background-color: #FF0077;
z-index: 1;
}
.text {
margin: 0;
position: absolute;
/*the X value:*/
left: 200px;
}
<p class="text">css=powerful</p>
Try this :
HTML :
<div id="text-holder">
<div id="text-holder-position"></div>
<div id="text">css=powerful</div>
</div>
<div id="heightJudger"></div>
CSS :
BODY
{
position: absolute;
margin: 0px;
}
#text
{
position: relative;
margin-top:-0.938em;
left:0px;
font-family: helvetica, arial;
font-size: 80px;
/*You can remove this*/
background: yellow;
opacity: 0.5;
}
#text-holder
{
position: absolute;
height: 200px;
left: 200px;
}
#text-holder-position {
position: relative;
height: 200px;
width: 200px;
background: green;
}
#heightJudger {
position:absolute;
height:200px; width:200px;
background:red;
top:0; left:0;
}
if you want to change the position, change the "height" and the "left" parameters of the #text-holder
This way you will be able to control your basepoint position.
I put the height judger and some color so you can see if it's what you exepct.
EDIT : Changed the #text margin unit to em.
JSFiddle
I can't get the img element to move to the left hand side. The left: 0px attribute isn't doing anything. In fact, I can't seem to move anything inside the #top div to move.
The img tag is inside top. I omitted rest of the webpage but I hope this is enough.
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="topBorder"> </div>
<div id="top">
<img src="logo.png" style="width:50%; height: 20%; left: 2em"/>
</div>
</body>
</html>
CSS code:
body {
max-width: 60em;
margin: auto;
position: relative;
}
div {
border: solid;
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}
#topBorder {
background-color:#255FAA;
height: .7em;
width: 100%;
border: transparent;
}
#top {
background-color: white;
border: transparent;
height: 13%;
width: 100%;
font-family: Georgia, Palatino Linotype;
}
#top img{
border: solid black;
position: relative;
left: 0px;
}
It looks like the text-align:center from your div element is the problem. Try overriding that in #top and I think it will start behaving as you expect. See this fiddle:
http://jsfiddle.net/3KyrW/
Your #top should have positive: relative, then your #top img should have position: absolute ... that will move the image around in your header.
I am not 100% sure about what how are trying to position. But adding a display: block; and a float: left; to #top img seems to float the image to the left. The left: 0px; is not needed when using position: relative; so I removed it. Also added a position: relative; to the #top <div>.
Also you seem to have inline styles in your <img> tag? That seems off.
<img src="logo.png" style="width:50%; height: 20%; left: 2em"/>
So I took that out & added it to the CSS as well. New <img> tag looks like this:
Revised CSS is here:
#top {
position: relative;
background-color: white;
border: transparent;
height: 13%;
width: 100%;
font-family: Georgia, Palatino Linotype;
}
#top img{
border: solid black;
position: relative;
display: block;
float: left;
width: 50%;
height: 20%;
left: 2em;
}
I'm trying to create this type of an overlapping by using z-index on divs:
However, if I set the z-index of the parent to a smaller number than z-index of the "non-child" element, the child stays at the back with it's parent too.
I'm wondering if there is any way to overcome this issue..
Are you trying to do something like this ?
http://codepen.io/mudittuli/full/rEgkw
It's hard to tell without seeing your code, but I believe you are using some of the DIVs as ancestors; try to use all of them separately. That example does what you want:
<!DOCTYPE html>
<html>
<head>
<title>Positioning test</title>
<style>
div { position: absolute; width: 100px; height: 100px; color: #fff; text-align: center; }
#parent { z-index: 1; background-color: red; left: 100px; top: 20px; }
#not-child { z-index: 2; background-color: green; left: 140px; top: 40px; }
#child { z-index: 3; background-color: blue; left: 70px; top: 60px; }
</style>
</head>
<body>
<div id="parent">Parent</div>
<div id="not-child">Not-child</div>
<div id="child">Child</div>
</body>
</html>