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%;
}
Related
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
<!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>
This code runs as intended on Chrome:
Please hover over the blue ball for animation:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
height: 200px;
border: thin solid #6D6;
overflow: hidden;
}
h2 {
position: absolute;
border-radius: 100%;
background-color: blue;
height:100px;
width: 100px;
transition:all 1s ease-out;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
h2:hover {
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div class='container'>
<h2></h2>
</div>
</body>
</html>
But the ball in the middle expands to the bottom in Firefox, and I have to set top or bottom in order to bring it back to its correct position. Is there is anyway to make it stay in the middle without assigning top and bottom value just like in Chrome?
A nice trick to center block elements in the middle of a relative positioned container, is using top: 50% and transform: translateY(-50%).
It requires IE9+
.container {
position: relative;
width: 100%;
height: 200px;
border: thin solid #6D6;
overflow: hidden;
}
h2 {
position: relative;
border-radius: 100%;
background-color: blue;
height: 300px;
width: 200px;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
<div class='container'>
<h2></h2>
</div>
JSFiddle demo: https://jsfiddle.net/oujab44t/1/
<head>
<style>
.container {
to;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class='container'>
<h2></h2>
</div>
</body>
</html>
I have an HTML page with somewhat large text elements. I want the text to align to the bottom of the containing div so that it touches the bottom of the div.
I tried following but still there is some space between the text and the bottom. Is there any way I can remove this space and make the text touch the bottom?
Here is a live sample of what I have tried.
<html lang="en">
<head>
<style type="text/css">
.bottomAlignedText {
position: relative;
}
.bottomAlignedText span {
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="bottomAlignedText" style="width: 600px; height: 600px; border: 1px solid;">
<span style="font-size:300px;">Test</span>
</div>
</body>
</html>
You can do this with line-height
.bottomAlignedText {
position: relative;
}
.bottomAlignedText span {
position: absolute;
bottom: 0;
left: 0;
line-height: 0.7;
}
<body>
<div class="bottomAlignedText" style="width: 600px; height: 600px; border: 1px solid;">
<span style="font-size:300px;">Test</span>
</div>
</body>
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>