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>
Related
I am trying to create an html page that has a section that appears when an element is hovered over. I did this by using :hover + .myclass in my CSS. It was working fine until I tried positioning the elements.My div that needed to appear had a background color, but when I positioned the elements in the div, the background color disappeared! Here is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript, Social">
<meta name="description" content="Web-app to find and befriend new people!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu {
display: block;
position: fixed;
top:0%;
left:0%;
height: 100%;
width: 3%;
padding:0%;
margin: 0%;
background-color: greenyellow;
}
.big_menu {
display: none;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
.big_menu:hover {
display: block;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
.menu:hover + .big_menu {
display: block;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
</style>
</head>
<body>
<div class="menu">
<p style="position: absolute; top: 5%; left: 5.8%">Home</p>
</div>
<div class="big_menu">
<p style="position: absolute; top: 5%; left: 5.8%;">Details</p>
</div>
</body>
</html>
Can someone please explain to me why this is happening and how to fix it?
ETA the Correct Answer:
Temani's answer was correct, but I can elaborate a bit: elements positioned absolutely are removed from the flow of the document. Simply removing the absolute position from the second p element is enough to get the background to show
Position: absolute and parent height?
body {
margin: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
```
positon: fixed does not cling to the top when applied.
I don't think there are any elements, so I think I should stick up completely, why not?
https://jsfiddle.net/9gqcxLn0/
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
you should use top:0
I don't see an issue other than you never told it where it was supposed to fix to. You likely wanted a top: 0 in the style, but it should remain fixed from where it was located without it, I believe.
html, body {
margin: 0;
padding: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
main {
height: 200vh;
}
<main>
abcdefghijk
<div class="content"></div>
12345678901234567890
</main>
<!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>
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
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>