Preface: I'm quite unfamiliar with CSS
I would like to position this FAB button, currently on the bottom right corner of the screen, to the top right corner. The CSS I have for the below FAB is
"[tooltip]:before {left: 110% !important; right: auto !important}", ".container-fab {right: 0 !important; left: auto !important;}"
Image of FAB button on app
If you want to make the position of your button fixed, then just give it position: fixed; right: 0; top: 0; it will give you the fixed button on top right corner.
to give space from right most, just set right: 15px; top: 15px in above css.
you will get that button on top right corner.
I assume (what I got after reading your question) your button positioned absolute is inside parent div with position relative. You want to button to be on top right corner. I have also added in the code if your are using "[tooltip]:before" as a button
.parent{
height:100px;
width:100px;
position:relative;
background-color:yellow;
}
.parent::before {
content: "+";
position: absolute;
width: 20px;
height: 20px;
border-radius: 20px;
top: 0px;
right: 0px;
margin: 5px;
background-color: blue;
color: aliceblue;
display: flex;
/* to center the + symbol */
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>Document</title>
</head>
<body>
<div class="parent"></div>
</body>
</html>
.parent{
height:100px;
width:100px;
position:relative;
background-color:yellow;
}
.button {
position: absolute;
width: 20px;
height: 20px;
border-radius: 20px;
top: 0px;
right: 0px;
margin: 5px;
background-color: blue;
color: aliceblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>Document</title>
</head>
<body>
<div class="parent">
<button class="button">+</button>
</div>
</body>
</html>
Related
I have a doubt, I would like to scale the sides of my background image outside the visible width, so as to extend the background to the height that determined
To be more clear, I would like the browser to read only the width that I defined to be viewed, while the rest of the background would serve only to not leave the background spaghetti, my idea would be to extend the page down while the sides would serve only not to make the background ugly and disproportionate.
sorry my bad english.
CSS:
/* Main */
body{
margin: 0;
padding: 0;
}
.container{
position: absolute;
}
.main-logo h1{
position: inherit;
left: 0;
-webkit-text-stroke: 1.5px black;
font-size: 32px;
font-family: "8 BIT WONDER";
}
.background-img-main{
position: absolute;
width: 100%;
height: 1800px;
background-size: 0, 100%;
z-index: -100;
overflow: hidden !important;
}
HTML:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forbidden Series</title>
<link rel="stylesheet" href="assets/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<!--Container-->
<div class="container">
<!--Header-->
<header>
<div class="main-logo"><h1><font color="#780002">Forbidden </font><font color="#FFFFFF">Series</font></h1></div>
</header>
</div>
<img src="img/Screenshot_1.png" class="background-img-main">
<img src="img/background.jpg" class="background-media-main">
<!--Scripts-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
How I wish it were
set an height of 100% on your main container, and put and overflow:auto rule
.container{
position: absolute;
height:100%;
overflow:auto;
}
also, you want to set off the body and html overflow
body,html {
overflow:none;
}
I'm looking deeper into CSS floats and I can't really find a reason for this. (title)
According to MDN,
As mentioned above, when an element is floated,
it is taken out of the normal flow of the document (though still remaining part of it).
It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element.
So something like this
.container {
width: 800px;
height: 500px;
border: 1px solid red;
}
.left {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 5px 0 0 5px;
float: left;
}
.right {
width: 200px;
height: 200px;
border: 1px solid purple;
margin: 5px 0 0 5px;
float: left;
}
<!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>
<link rel="stylesheet" href="style.css">
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
is easily understandable.
But why this happens when changing the right box's float property to right?
.container {
width: 800px;
height: 500px;
border: 1px solid red;
}
.left {
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 5px 0 0 5px;
float: left;
}
.right {
width: 200px;
height: 200px;
border: 1px solid purple;
margin: 5px 0 0 5px;
float: right;
}
<!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>
<link rel="stylesheet" href="style.css">
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
I think this might happen because the first element with float "disappears" from the flow of the page, so it allows other elements to stand on the same line.
Am I right?
Can anybody help me understand this better?
Thanks.
I have the following HTML code and I am trying to position the links right below the image, but fail badly.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<html>
<head>
<body>
<style>
html, body {
height: 90%;
background:#000000;
color:#fff;
}
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
height: auto;
}
</style>
</head>
<img src="http://www.clker.com/cliparts/b/3/1/7/1374685821502984977google%20logo-md.png">
<br>Deutsch | English</p>
</body>
</html>
However, I need to place the links right below the image (centered) but it seems like it's impossible.
I wonder if any of you knows a solution that would work in this case.
try this
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<html>
<head>
<body>
<style>
html, body {
height: 90%;
background:#000000;
color:#fff;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
a{
width: 100%;
}
</style>
</head>
<img src="http://www.clker.com/cliparts/b/3/1/7/1374685821502984977google%20logo-md.png">
<br>Deutsch | English</p>
</body>
</html>
Try This Code
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
height: 90%;
background:#000000;
color:#fff;
}
img {
max-width: 100%;
}
.container {
position: relative;
}
.link {
position: absolute;
top: 200px;
left: 60px;
}
</style>
</head>
<body>
<div class="container">
<img src="http://www.clker.com/cliparts/b/3/1/7/1374685821502984977google%20logo-md.png" alt="" />
<h3 class="link">Deutsch | English</h3>
</div>
</body>
</html>
I started writing my first website, and tried to center the container id in CSS using various methods found on the web (the most common of which being margin-left:auto; margin-right:auto;) but it simply won't work, and I have no idea why, or what could I do about it (I know, I could make a table with three columns in the html file, but I don't want to mix and match tables and divs)
My code so far looks like this:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="content">
hello world!
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body {
background-color:#FFF;
}
#content {
width:980px;
background-color:#FCC;
position: absolute;
display:block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
align:center;
}
Solution #1:
Replace position: absolute; with position: relative; in #content(CSS).
JSFiddle - DEMO and Full Screen View
body, html {
background-color:#FFF;
height:100%;
}
#content {
width:980px;
height: 100%;
background-color:#FCC;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
text-align:center;
}
<div id="content">hello world!</div>
More Info about margin: 0 auto; center to work:
What, exactly, is needed for margin: 0 auto; to work?
Solution #2:
Add left: 50%; and margin-left: -490px; (half width of #content div) to #content
JSFiddle - DEMO and Full Screen View
#content {
width: 980px;
background-color: #FCC;
position: absolute;
display: block;
top: 0px;
bottom: 0px;
margin-left: -490px;
left: 50%;
text-align: center;
}
Container is in center you need to align text in the center if you want,
align:center
should be
text-align:center;
Demo
Are you trying to center the "Hello world" text?? If add
text-align: center;
Instead of
align:center;
You can't center something with position: absolute; on it, as far as I know. position: absolute; means, that the div has an absolute positioning to something.
If you want to center it, then you could wrap the container, in a div, with position: relative; on it, and then center that one.
Like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="wrapper">
<div id="content">
hello world!
</div>
</div>
</body>
</html>
With this CSS:
#charset "utf-8";
/* CSS Document */
body {
background-color:#FFF;
}
#wrapper {
position: relative; /* Needs to be there, for the #content-container to know,
what it's relative to. */
width: 100px; /* Needed as well */
display: block; /* For older browsers */
overflow: hidden; /* For older browsers */
margin: 0 auto 0; /* Adds the margin that centers it. */
}
#content {
width:980px;
background-color:#FCC;
position: absolute;
display:block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
align:center;
}
The other way is just to replace this from your code:
position: absolute;
top: 0px;
bottom:0px;
With this:
position: relative;
Then your code should work as well...
Why do you want to center it, with position: absolute; ? Perhaps you want to achieve something, that there is another way of doing...
Can someone explain me why the first code does result in a fixed footer with a small margin on the right as I used an extra 'div' but that without this as seen in the second code it doesn't show a margin on the right? Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
width: 100%;
margin: 0px auto;
}
.mymargin {
clear: both;
position: fixed;
bottom: 0px;
text-align: right;
width: 100%;
background-color: fuchsia;
}
footer {
margin-right: 20px;
}
</style>
</head>
<body>
Look in the right corner below!
<div class="mymargin">
<footer>
fixedfooterwithmargin-ontheright
</footer>
</div>
</body>
</html>
Second code without an extra div.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
width: 100%;
margin: 0px auto;
}
footer {
clear: both;
position: fixed;
bottom: 0px;
text-align: right;
width: 100%;
background-color: fuchsia;
margin-right: 20px;
}
</style>
</head>
<body>
Look in the right corner below!
<div class="mymargin">
<footer>
fixedfooter NO hmargin-ontheright
</footer>
</div>
</body>
</html>
Try right instead of margin-right:
footer {
clear: both;
position: fixed;
bottom: 0px;
text-align: right;
width: 100%;
background-color: fuchsia;
right: 20px;
}
jsfiddle: http://jsfiddle.net/ashishanexpert/3eFPt/
Your footer tag is already taking 100% of the width.. So margin will be out of it.
It worked in the first case because you gave the width to the parent. so margin on the child worked. try to add 100% to footer in first case and even that wont work as required.