I have a HTML page and for some reason the text is going outside of where it should.
Here is an image of this. Note this image is cut smaller
The text in the image should have been in the gray area.
I am not the best at CSS and HTML so this might be obvious.
I have tried to fix it but nothing i did work it only made it worse when ever i tried to fix it.
Here is the code.
#screen {
position: fixed;
background: none;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
#levels {
position: fixed;
background: black;
left: calc(50% - 224px);
top: 0px;
width: 448px;
height: 126px;
}
#rockCount {
position: relative;
background: gray;
left: calc(50% - 128px);
top: 84px;
width: 256px;
height: 32px;
}
.level {
position: relative;
background: gray;
left: 0px;
top: 10px;
width: 64px;
height: 64px;
margin-left: 64px;
float: left;
}
#rock {
position: fixed;
background: black;
left: calc(50% - 128px);
top: calc(50% - 128px);
width: 256px;
height: 256px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stone breaker</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="screen">
<div id="levels">
<div class="level" id="level0"></div>
<div class="level" id="level1"></div>
<div class="level" id="level2"></div>
<div id="rockCount">
<div id="countText">Rocks destroyed: 0/10</div>
</div>
</div>
<div id="rock"></div>
</div>
</body>
<script src="main.js"></script>
</html>
First off all, you should only use the 'div' element when there is no better tag avaliable. You can find an overview of the different tags here:
https://www.w3schools.com/tags/
Regarding your problem, i'd say it's because of the following css:
#rockCount {
position: relative;
background: gray;
left: calc(50% - 128px);
top: 84px;
width: 256px;
height: 32px;
}
You say that the element should be positioned relative to its current position. And then you say that it should be position 84px down from this position.
You can read more about positioning here:
https://www.w3schools.com/css/css_positioning.asp
Related
when I scroll down on my page, my container overlap the header, but I want my header to overlap the container, so I made my header on a fixed position, but it does not work
here is my html code:
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="page">
<header class="leheader">
<div id="bloc1"></div>
<img src="https://i.imgur.com/dm6H7GV.png">
<div id="bloc2"></div>
</header>
<main class="container"></main>
</div>
</body>
</html>
and here is my css code:
body,
html,
.page {
background: #666666;
width: 99%;
height: 100%;
}
.leheader {
display: flex;
width: 99%;
position: fixed;
flex: 1 100%;
height: calc(100%-50px);
}
#bloc1 {
margin-left: 1px;
margin-top: 0.5px;
height: 50px;
width: 90px;
background: #cccccc;
border-radius: 10px 0 0 0;
}
#bloc2 {
background: #467491;
margin-top: 4px;
width: 93%;
height: 37px;
}
.container {
position: absolute;
top: 57px;
left: 9px;
background: #cccccc;
width: 99%;
height: calc(100% - 33px);
}
where is the problem ?
Try adding the z-index property to the header.
like this....
z-index: 2
In CSS to make something Fixed position you also need to give it a z-index (which is its position on z-axis). Read more about Z-Index here. Apart from it you also have to give it a position in terms of top, left, bottom and left to tell it where it has to fixed.
.leheader {
display: flex;
width: 99%;
position: fixed;
top:0;
left:0;
z-index:2;
flex: 1 100%;
height: calc(100%-50px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>title</title>
<style>
#div1 {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
width: auto;
height: 100%;
background: blue;
}
#div2 {
position: absolute;
top: 30%;
left: 0px;
width: 6000px;
height: 300px;
background: black;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
For example in the html page above
Starting view
When scrolling to the right
I thought setting the div1 width to auto would match the div2 width but it does not work. Am I missing something? Do I need to auto update the width with javascript or can it be done with CSS only?
I want it cover the entire page even if the page gets resized.
Set position: relative on #div2, #div1 will then expand with it:
#div1 {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
width: auto;
height: 100%;
background: blue;
}
#div2 {
position: relative;
top: 30%;
left: 0px;
width: 6000px;
height: 300px;
background: black;
}
<div id="div1">
<div id="div2"></div>
</div>
I have a problem with my brand new html & css sites : I want to have a that opens when hovering on a floating element of itself. The problem is not on animation but on layout. When it's empty, it works well, but when I add content into the , it goes under the floating element. To solve this, I've tried different overflow values as explained here, but of course the part of the whitch is "outside" of it got impacted.
(in this sample, the "menu" is already opened)
section
{
background-color: white;
margin: 10px;
}
.scroll_aside{
overflow-y: auto;
width: 100%;
height: 100%;
}
.aside_left{
width: 70%;
height: 100%;
display: block;
background-color: gold;
position: fixed;
top:0;
}
.aside_left .cote{
position: relative;
top:0px;
right: -80px;
width: 80px;
background-color: orange;
margin-top: 100px;
margin-left:0;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TEST2.css"/>
</head>
<body>
<div class='aside_left'><span class='cote' onclick="openjourney()">Floating on the right</span>
<div class="scroll_aside">
<section style='height: 400px'>Section 1</section>
<section style='height: 800px'>Section 2</section>
</div>
</div>
</body>
</html>
Another thing I've noticed is that when the content is thin enough, it goes to the top....
But what I want, is to have the content taking all the , so going at the top and with width=100%.
Is there a way to do that ?
Thank you in advance....
Instead of float use absolute position:
section {
background-color: white;
margin: 10px;
}
.scroll_aside {
overflow-y: auto;
width: 100%;
height: 100%;
}
.aside_left {
width: 70%;
height: 100%;
display: block;
background-color: gold;
position: fixed;
top: 0;
}
.aside_left .cote {
position: absolute;
left: 100%;
width: 80px;
background-color: orange;
top: 100px;
}
<div class='aside_left'><span class='cote' onclick="openjourney()">Floating on the right</span>
<div class="scroll_aside">
<section style='height: 400px'>Section 1</section>
<section style='height: 800px'>Section 2</section>
</div>
</div>
Good afternoon guys,
I'm working on a small project for my job and they have asked me to make a map and pinpoint specific cities. I have finished it on my pc and I'm trying to make sure that when I load it up onto another pc (such as their laptops) that the points stay in place. I hope this is enough information for what I am trying to do as this is my first post. Any and all help would be greatly appreciated.
The basics of the code is:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>States/Cities</title>
</head>
<style media="screen">
html,body{
background-color: #AADAFE;
}
.Vegasdot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 246px;
left: 306px;
position: absolute;
z-index: 2;
}
.SaltLakedot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 88px;
left: 395px;
position: absolute;
z-index: 2;
}
.Phoenixdot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 333px;
left: 386px;
position: absolute;
z-index: 2;
}
.statesMap{
padding-top:3%;
padding-left:12%;
position: absolute;
z-index: 1;
}
<img src="StatesGIMP.png" alt="States Map"
class="statesMap" usemap="#States">
<span class="Vegasdot"></span>
<span class="SaltLakedot"></span>
<span class="Phoenixdot"></span>
There are a couple of things going on here.
First, position: absolute; is relative to its parent container. so if you wrap your image and dots in a wrapper div, you can position your dots relative to this .wrapper. This .wrapper needs position: relative; in order to function as the relative parent to position: absolute; children
Second, you will need to position your dots with percentages so that they scale with the image
Third, we apply a transform: translate(-50%,-50%) which is relative to the height and width of itself. This will make it so that the center of the dot is what we are positioning, so that when the image scales the center of the dot stays the same
Also, we can DRY up your css by moving the common rules into a .dot class
example: https://codepen.io/tylerfowle/pen/MrwreX
HTML:
<div class="wrapper">
<img src="http://ontheworldmap.com/usa/usa-states-map.jpg" alt="States Map"
class="statesMap" usemap="#States">
<span class="Vegasdot dot"></span>
<span class="SaltLakedot dot"></span>
<span class="Phoenixdot dot"></span>
</div>
CSS:
html,body{
background-color: #AADAFE;
}
.wrapper {
position: relative;
}
.dot {
height: 10px;
width: 10px;
border-radius: 50%;
background: black;
z-index: 2;
position: absolute;
transform: translate(-50%,-50%);
}
.Vegasdot{
top: 48%;
left: 17%;
}
.SaltLakedot{
top: 37%;
left: 24.5%;
}
.Phoenixdot{
top: 60%;
left: 22%;
}
.statesMap{
width: 100%;
z-index: 1;
}
I'm trying to make a backdrop for a menu that will be used to detect if the user has clicked somewhere other than on the menu and close the menu.
For some reason despite setting
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
The backdrop won't stretch beyond one of the parent divs.
I've distilled the webpage to something simple and stuck it here http://codepen.io/ben_irule/pen/LZWwjL?editors=1100
<!DOCTYPE html>
<html>
<head>
<style>
.app-layout {
height: 100%;
}
.layout {
height: calc(100% - 35px);
display: block;
}
footer {
height: 35px;
background-color: green;
}
.content {
position: relative;
/* attribute of doom*/
transform: translate3D(0, 0, 0);
display: block;
height: 100%;
margin-left: 320px;
margin-right: 280px;
}
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="app-layout">
<div class="layout">
<div class="content">
<div class="menu-backdrop"></div>
</div>
</div>
<footer></footer>
</div>
</body>
</html>
I've noted one transform attribute that when disabled stops the parent div from being problematic. However when I disable the equivalent attribute in the full blown app it does not resolve the issue.
I'm interested in understanding what conditions will result in a fixed position element being bound by a parent div.
I've been searching the web all morning but haven't found anything resembling my current issue.
.content {
position: relative;
/* attribute of doom*/
transform: translate3D(0, 0, 0);
display: block;
height: 100%;
margin-left: 320px;
margin-right: 280px;
}
Margin left and margin right is what stopping you to stretch beyond what it is now. Try reducing it.
Here is a better way of doing it. See if this solves your problem. Since you have a specific numbered margin, add those to menu-backdrop.
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin-left: -320px;
margin-right: -280px;
margin-bottom: -32px;
background-color: blue;
}
This will pull the backdrop beyond the width of the containing div. A negative margin usually does the job:
.menu-backdrop {
position: fixed;
margin-left:-30px;
margin-right:-30px;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}
Perhaps changing your layout to this:
<body>
<div class="app-layout">
<div class="layout">
<div class="menu-backdrop"></div>
<div class="content">
Need to stretch more!!
</div>
</div>
<footer>Footer</footer>
</div>
</body>
and styling similar to:
.menu-backdrop {
position: fixed;
max-width:750px;
margin:auto;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}