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.
Related
I am having trouble with getting a HTML website to display the way I want. I have made a banner and a nav bar, but I'm having a hard time when trying to add anything below the nav; it either covers the banner or gets covered by it.
This is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Home: Old Barber </title>
</head>
<body id="body"><link rel="stylesheet" href="test.css">
<div id="wrapper">
<header id="header"> Welcome </header>
<div id="bannerHolder">
<div class="banner">
OLD BARBER
</div>
<nav id="nav">
Home
Products
About
</nav>
</div>
</div>
<div class="container">
<img src="https://www.open.edu/openlearn/ocw/pluginfile.php/1654608/mod_oucontent/oucontent/93155/8a822f73/b6b08556/mse_s6_figure_3.jpg" alt="Barber" class="img"></img>
<div class="overlay">
<div class="text">Shop</div>
</div>
</body>
</html>
Here is the CSS:
/* Imported fonts */
#import url('https://fonts.googleapis.com/css2?family=Merienda:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
#wrapper {
background: orange;
display: block;
margin: auto;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
}
#bannerHolder {
background: #aaa;
display: block;
height: 100px;
}
#bannerHolder .banner {
background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
background-position: center;
background-size: 100%;
color: white;
font-family: 'Merienda', cursive;
font-size: 800%;
height: 200%;
left: 0;
margin: auto;
position: relative;
right: 0;
text-align: center;
text-shadow: 2px 2px 4px black;
}
#body{
background-color: gray;
}
#nav{
background-color: orange;
color: black;
display: flex;
justify-content: space-around;
padding: 0.5%;
position: relative;
text-align: center;
}
#h1{
font-family: 'Italianno', cursive;
}
.container{
position: relative;
width: 50%;
}
.img{
display: block;
height: auto;
width: auto;
}
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: auto;
opacity: 0;
transition: .5s ease;
background-color: orange;
}
.container:hover .overlay{
opacity: 1;
}
.text{
color: white;
font-size: larger;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Any help is greatly appreciated. Thanks.
EDIT: under is the result after removing the position: absolute; from the header. This, however, also alters the way in which I'd like the page to be displayed; which is that the banner, nav etc. is supposed to fill the page on the left, right and top.
The problem is that You have
<div id="wrapper"> and <div class="container"> below.
<div id="wrapper"> - has position: absolute as a style.
Position absolute https://developer.mozilla.org/en-US/docs/Web/CSS/position:
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value of z-index is
not auto. The margins of absolutely positioned boxes do not collapse
with other margins.
That means that Your wrapper div, creates no space, so container div ignores its position.
Try to remove position: absolute from Your header.
Edit:
Sorry for late answer
#wrapper {
background: orange;
text-align: center;
}
#bannerHolder .banner {
background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
background-position: center;
background-size: 100%;
color: white;
font-family: 'Merienda', cursive;
font-size: 800%;
text-align: center;
text-shadow: 2px 2px 4px black;
}
body {
background-color: gray;
margin: 0;
padding: 0;
}
Edited CSS for header would look something like this. What I've done is I removed the height parameter of #bannerHolder. This height was defining the height of 100px for bannerHolder, however the height of the inside elements of bannerHolder was bigger, so there was an overlap. I also removed some unused CSS properties.
Also for banner to fill the whole space - the common pattern is to set padding: 0; margin: 0; for body tag. I often start my projects with this set-up:
html, body {
padding: 0;
margin: 0;
}
https://jsfiddle.net/oamx38y6/36/
The html page below contains a footer (position: fixed) and a "Sheet" (position: absolute).
My problem: How to prevent the bottom end of the Sheet to be hidden underneath the footer when I scroll down?
All my attempts with padding and margin failed ... (Please only html/css solutions.)
CSS
body {
background: green; }
.Background {
top: 0px;
right: 0px; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange;
padding: 0 10px 0 10px; }
.Sheet {
position: absolute;
top: 100px;
left: 25px;
border-style: solid;
border-width: 2px;
padding: 20px;
background: red; }
HTML
<body>
<div class="Background">
Background</div>
<div class="Sheet">
<div style="line-height: 200px">
Sheet<br>
Sheet<br>
Sheet<br></div>
Sheet<br>
Sheet</div>
<div class="Footer">
Footer </div>
</body>
Give margin-bottom to sheet which is equal or grater than footer fix height;
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
}
Update
if you want to bring in front of all then add z-index property.
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
z-index: 999; // use suitable maximum to bring in front all
}
The problem as I see it is the absolute position of the sheet, as absolute positions do not affect the height of the surroundung Element (in your case the body).
If possible try position: relative;. Then your margin can be counted in.
See https://jsfiddle.net/y3mg5zvb/
If it has to be absolute for any reason, you need a surrounding div with relative or static positioning that sets the height of the body.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
body {
background: green; }
.Background {
top: 0px;
right: 0px; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange;
padding: 0 10px 0 10px; }
.Sheet {
position: absolute;
top: 100px;
left: 25px;
border-style: solid;
border-width: 2px;
padding: 20px;
background: red;
max-height: 500px;
overflow: scroll;
top: 45px;
}
</style>
</head>
<div class="Background">
Background</div>
<div class="Sheet">
<div style="line-height: 200px">
Sheet<br>
Sheet<br>
Sheet<br></div>
Sheet<br>
Sheet</div>
<div class="Footer">
Footer </div>
</body>
</html>
This helps you?
Just don't use absolute position on .Sheet - there's no reason for it. Replace top and left with margin-top and margin-left and use a margin-bottom at least as high as the footer.
.Sheet {
margin-top: 100px;
margin-left: 25px;
margin-bottom: 30px; /* whatever value */
border-style: solid;
border-width: 2px;
padding: 20px;
background: red;
}
I think this is a perfect solution!!!
Solution by Joey, adapted by Nik
Set position absolute and margin
<!-- Solution by Joey, adapted by Nik -->
<!-- https://stackoverflow.com/questions/9350775/set-position-absolute-and-margin -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
body {
background: green; }
.Background {
text-align: right; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange; }
.Sheet {
position: absolute;
top: 200px;
left: 25px;
width: 50%;
background: red; }
.Sheet::after {
position: absolute;
content: "";
bottom: -80px;
height: 80px;
width: 1px; }
</style>
</head>
<body>
<div class="Background">
Background <br><br><br><br><br><br><br><br><br><br><br><br>Background</div>
<div class="Sheet">
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content</div>
<div class="Footer">
Footer</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
main {
z-index: 999;
}
footer {
width: 100%;
min-height: 40px;
background-color: black;
}
footer p{
color: white;
}
<body>
<main>
<p>david</p>
</main>
<footer>
<p>logo</p>
</footer>
</body>
try playing around with z-index and some
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 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