<!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>
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);
}
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
I would like to have an element looking like a navbar at the top of my website:
It should be fixed, like a navbar. However, as soon as the user scrolls down, it should disappear under the rest of the content:
I tried something like that, where the #title element is the "navbar":
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="title" class="center-align">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div id="showcase" class="center-align">
</div>
</body>
<style>
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: -1;
}
#showcase {
margin-top: 50vh;
height: 75vh;
background-color: #212121;
}
</style>
</html>
However this is not working, the #title seems to be also affected by the 50vh margin-top (you can see it by setting its z-index to 1 instead of -1).
No need to use z-index
By default sibling are stacking by the order from bottom to top so the 1st child will at the bottom, the last child at the top. See example here:
Example of sibling z-index:
.div1 {
width: 100px;
height: 100px;
background: red;
}
.div2 {
margin-top: -50px;
margin-left: 50px;
width: 100px;
height: 100px;
background: green;
}
.div3 {
margin-top: -50px;
margin-left: 100px;
width: 100px;
height: 100px;
background: aqua;
}
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
Solution to your problem:
#title {
width: 100%;
height: 100px;
text-align: center;
position: fixed;
top: 0;
}
#showcase {
margin-top: 120px;
height: 90vh;
background: black;
}
<div id="title">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div id="showcase">
</div>
Try change your style with the following css . I made some changes for test purpose.
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: -1;
background: red ;
top:0;
}
#showcase {
margin-top: 50vh;
height: 275vh;
background-color: #212121;
}
Hope it helps
Here's an example using a fixed navabr and a normal div for the content having a margin-top:
body {
margin:0;
height:100%;
}
.navbar {
width: 100%;
height: 50px;
line-height: 50px;
position: fixed;
background-color: lightblue;
z-index:-1;
}
.content {
width: 100%;
float: left;
height: 1000px;
margin-top: 50px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="navbar">
Navbar
</div>
<div class="content">
Content
</div>
</body>
</html>
Add top: 0 to the title id. Like:
#title {
position: fixed;
width: 100%;
height: 50vh;
z-index: 1;
top: 0;
}
How do I get two div areas over each other? On the following website I try to get the search field in center and over the slider:
http://informationen.lensbreak.com
<div style="width: 100%; height: 100%; position: relative;">
<div sytle="width: 100%; height: 100%; position: absolute; top: 0; left: 0;">[rev_slider testslider]</div>
<div sytle="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;">[search]</div>
</div>
The whole thing should stay responsive.
Try this:
(I added border for each div to help you see areas of divs.)
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
</head>
<body>
<div style="width: 100%; height: 100%; border: red 3px solid">
<div style="width: 100%; height: 100%; border: blue 2px solid ">[rev_slider testslider]</div>
<div style="width: 100%; height: 100%; border: green 1px solid ">[search]</div>
</div>
</body>
</html>
If you want You can also use
<table>
instead of div it can be easier for You.
As a rule you should not use inline-styling if you can avoid it - use classes instead. And below is a solution that will center the searchbox both horizontally and vertically over your slider.
/* This is for your search form */
#completeSearchForm {
margin: 0 auto;
transform: translate(0px, -50%);
}
/* This is for the div that contains the search form */
.your-modifier {
position: absolute;
left: 0;
right: 0;
top: 50%;
}
When IE8 is "normal" standards compliant mode the html and css below does what it should and properly centers the red div. However in compatibility mode it does not get centered. Anyone here able to explain why and suggest an alternative?
<html>
<head><title>test</title></head>
<body>
<div
style="position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 0;
width: 900px;
background-color: red"
>
test
</div>
</body>
</html>
to make it working without the doctype just do this way:
style="position: absolute;
margin-left: -450px;
left: 50%;
top: 0;
width: 900px;
background-color: red"
<!doctype html>
<html>
<head>
<title></title>
<style>
div {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin: -150px 0 0 -150px;
background: navy;
}
</style>
</head>
<body>
<div></div>
</body>
</html>