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>
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>
I am trying to design a webpage where the top division is an image with a transparent button on it.The problem is that each time I minimize the window, the button changes position. Can anyone tell me what the problem is?
<html lang=="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="utf-8">
<title>Deut65</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<ul id="nav">
<img id="logo" src="logo.png"></img>
<li>Home</li>
<li>Editor</li>
<li>About</li>
</ul>
<div id="image-div">
<img id="top-image"src="fotoDeut65.jpeg">
<button id="image-button">Button</button>
</div>
<style>
#image-div{
top: -50%;
left: -50%;
width: 100%;
height: 100%;
}
#top-image{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 100%;
min-height: 100%;
width: 400px;
height: auto;
}
#image-button{
position: relative;
z-index: 1;
margin-left: auto;
margin-right: auto;
top: 191px;
left: 420px;
right: -420px;
bottom: -191px;
}
</style>
<!--until here-->
</body>
</html>
Set position:absolute; if you want button float on img
The style above has misstakes, try the below to comprehensive:
<style>
#image-div{ background:lightblue;
}
#top-image{
width:100px;height:100px;
}
#image-button{background:red;
position: absolute;
left:0;
width:100px;height:100px;
}
</style>
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%;
}
There are two div tags absolutely positioned.
The point is to prevent the first one to go over the one on the right on window resize to less than total width.
p.s. : This only occurs in firefox.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<style>
body{
direction: rtl;
}
#sidebar{
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 300px;
min-height: 1000px;
background-color: #66ccff;
}
#content{
position: absolute;
top: 0;
right: 300px;
bottom: 0;
left: 0;
min-width: 1100px;
background-color: #008844;
}
</style>
</head>
<body>
<div id="sidebar"></div>
<div id="content">
</div>
</body>
</html>
Remove left: 0; from #content
#content {
position: absolute;
top: 0;
right: 300px;
bottom: 0;
/*left: 0;*/
min-width: 1100px;
background-color: #008844;
}
JSFiddle