This question already has answers here:
How to center a "position: absolute" element
(31 answers)
Closed 4 years ago.
I am trying to position my button in the center left:50% top:50% but it ends up more than 50%. its a video background i am trying to do with overlay. i have the video tag in a is set to position: absolute; other text are position fine until when it comes to the button. i am thinking it's probably the way i position the video background but i'm not sure.i could really use some help on this thanks.
CSS
/*----Global----*/
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
html,body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.fullscreen-video-wrap{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
opacity: 0.5;
}
.travel{
position: absolute;
top: 10px;
left: 16px;
z-index: -1;
font-size:18px;
font-family: Raleway;
}
.blue{
color: rgb(0, 119, 255);
}
.motto{
position: absolute;
top: 27px;
left: 16px;
z-index: -1;
font-size:14px;
font-family: Abril Fatface;
}
.destination{
position: absolute;
text-align: center;
top: 50%;
left: 0;
width: 100%;
z-index: -1;
font-family: Raleway;
font-size: 18px;
}
.quotes{
position: absolute;
text-align: center;
top:55%;
left: 0
width:100%;
z-index: -1;
font-family:Raleway;
font-size: 14px;
}
.button{
position: absolute;
text-align: center;
top: 60%;
left: 50%;
z-index: -1;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Traveling.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="New.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
#import url('https://fonts.googleapis.com/css?family=Raleway');
#import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
</style>
<body>
<div class="fullscreen-video-wrap">
<video autoplay muted loop >
<source src="videos/sunrise_01.mp4" type="video/mp4">
</video>
</div>
<div class="header-content"></div>
<h1 class="travel">Traveling<span class="blue">.com</span></h1>
<p class="motto"><i>Travel <span class="blue">Beautifully</span></i></p>
<h4 class="destination">Find your destination</h4>
<p class="quotes">“A lie can travel half way around the world while the truth is putting on its shoes.”
― Mark Twain</p>
<button class="button">Sign up</button>
</body>
</html>
You can use a transform to translate the element -50%, this should work
.button{
position: absolute;
text-align: center;
top: 60%;
left: 50%;
transform: translateX(-50%); /*Added*/
z-index: -1;
}
Let me know if that help!
Edit
When you give to an element with position: absolute; a left: 50% it's never gonna be centered really, it will push him to the 50% of the father element, look at this picture
What I did adding transform: translateX(-50%); is move the element over itself -50%
Hope this helps you to understand, here you can find more information about translateX() function, and you can read about the transform property too.
Related
I am having trouble with getting a HTML website to display the way I want. I have made a banner and a nav bar, but I'm having a hard time when trying to add anything below the nav; it either covers the banner or gets covered by it.
This is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Home: Old Barber </title>
</head>
<body id="body"><link rel="stylesheet" href="test.css">
<div id="wrapper">
<header id="header"> Welcome </header>
<div id="bannerHolder">
<div class="banner">
OLD BARBER
</div>
<nav id="nav">
Home
Products
About
</nav>
</div>
</div>
<div class="container">
<img src="https://www.open.edu/openlearn/ocw/pluginfile.php/1654608/mod_oucontent/oucontent/93155/8a822f73/b6b08556/mse_s6_figure_3.jpg" alt="Barber" class="img"></img>
<div class="overlay">
<div class="text">Shop</div>
</div>
</body>
</html>
Here is the CSS:
/* Imported fonts */
#import url('https://fonts.googleapis.com/css2?family=Merienda:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
#wrapper {
background: orange;
display: block;
margin: auto;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
}
#bannerHolder {
background: #aaa;
display: block;
height: 100px;
}
#bannerHolder .banner {
background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
background-position: center;
background-size: 100%;
color: white;
font-family: 'Merienda', cursive;
font-size: 800%;
height: 200%;
left: 0;
margin: auto;
position: relative;
right: 0;
text-align: center;
text-shadow: 2px 2px 4px black;
}
#body{
background-color: gray;
}
#nav{
background-color: orange;
color: black;
display: flex;
justify-content: space-around;
padding: 0.5%;
position: relative;
text-align: center;
}
#h1{
font-family: 'Italianno', cursive;
}
.container{
position: relative;
width: 50%;
}
.img{
display: block;
height: auto;
width: auto;
}
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: auto;
opacity: 0;
transition: .5s ease;
background-color: orange;
}
.container:hover .overlay{
opacity: 1;
}
.text{
color: white;
font-size: larger;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Any help is greatly appreciated. Thanks.
EDIT: under is the result after removing the position: absolute; from the header. This, however, also alters the way in which I'd like the page to be displayed; which is that the banner, nav etc. is supposed to fill the page on the left, right and top.
The problem is that You have
<div id="wrapper"> and <div class="container"> below.
<div id="wrapper"> - has position: absolute as a style.
Position absolute https://developer.mozilla.org/en-US/docs/Web/CSS/position:
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value of z-index is
not auto. The margins of absolutely positioned boxes do not collapse
with other margins.
That means that Your wrapper div, creates no space, so container div ignores its position.
Try to remove position: absolute from Your header.
Edit:
Sorry for late answer
#wrapper {
background: orange;
text-align: center;
}
#bannerHolder .banner {
background-image: url(https://p0.zoon.ru/d/d/5ce4efe774cfee5d9265c8ee_5d6e753f1d26b.jpg);
background-position: center;
background-size: 100%;
color: white;
font-family: 'Merienda', cursive;
font-size: 800%;
text-align: center;
text-shadow: 2px 2px 4px black;
}
body {
background-color: gray;
margin: 0;
padding: 0;
}
Edited CSS for header would look something like this. What I've done is I removed the height parameter of #bannerHolder. This height was defining the height of 100px for bannerHolder, however the height of the inside elements of bannerHolder was bigger, so there was an overlap. I also removed some unused CSS properties.
Also for banner to fill the whole space - the common pattern is to set padding: 0; margin: 0; for body tag. I often start my projects with this set-up:
html, body {
padding: 0;
margin: 0;
}
https://jsfiddle.net/oamx38y6/36/
I have a banner div element that has a picture overlapping it. I want to have my text not be overlapped by the image, but am having issues.
Example of the problem:
Here is what my html looks like:
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: white;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<img class="header-logo img" src="../../../assets/CatPicture.png">
<div class="container-fluid header-banner-container">
<span class="banner-text">There is a cat above me</span>
</div>
My questions are:
Should the image be in the container-fluid div, as a best practice? Or is having it outside the banner as I do currently, correct?
How can I get the text to not be overlapped by the image?
Thanks for any advice for the questions, and any other advice you may have!
If the image is a logo or something that belongs in the header, then yes, you should keep the image in the header container, and the text too. You could resolve the issue of the overlapping text easily by simply increasing the vh of the container div and moving the banner-text top attribute down slightly this way.
However, if the case is other than above, and you want to keep the text in that position but make it visible, then you could move the banner text out of the text and position it absolutely from the top. As-is, adjusting the z-index to 0 (e.g.) while it is still within the container div would have no effect as the container div's z-index of -1 would take precedence, and if adjusted higher, would overlap the image also.
Hope this helps
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: white;
position: absolute;
transform: translateY(-50%);
top: 70px;
z-index: 0;
}
<img class="header-logo img" src="http://ssl.gstatic.com/images/icons/gplus-32.png">
<div class="container-fluid header-banner-container">
</div>
<span class="banner-text">There is a cat above me</span>
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Example</title>
<style>
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
border-radius: 100%;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: white;
position: absolute;
transform: translateY(-50%);
top: 49px;
z-index: 0;
left: 50px;
text-shadow: 0px 3px 3px black;
}
</style>
</head>
<body>
<img class="header-logo img" src="https://image.freepik.com/free-vector/geometric-background_23-2148064464.jpg">
<div class="container-fluid header-banner-container">
</div>
<span class="banner-text">There is a cat above me</span>
</body>
</html>
Good afternoon guys,
I'm working on a small project for my job and they have asked me to make a map and pinpoint specific cities. I have finished it on my pc and I'm trying to make sure that when I load it up onto another pc (such as their laptops) that the points stay in place. I hope this is enough information for what I am trying to do as this is my first post. Any and all help would be greatly appreciated.
The basics of the code is:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>States/Cities</title>
</head>
<style media="screen">
html,body{
background-color: #AADAFE;
}
.Vegasdot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 246px;
left: 306px;
position: absolute;
z-index: 2;
}
.SaltLakedot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 88px;
left: 395px;
position: absolute;
z-index: 2;
}
.Phoenixdot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 333px;
left: 386px;
position: absolute;
z-index: 2;
}
.statesMap{
padding-top:3%;
padding-left:12%;
position: absolute;
z-index: 1;
}
<img src="StatesGIMP.png" alt="States Map"
class="statesMap" usemap="#States">
<span class="Vegasdot"></span>
<span class="SaltLakedot"></span>
<span class="Phoenixdot"></span>
There are a couple of things going on here.
First, position: absolute; is relative to its parent container. so if you wrap your image and dots in a wrapper div, you can position your dots relative to this .wrapper. This .wrapper needs position: relative; in order to function as the relative parent to position: absolute; children
Second, you will need to position your dots with percentages so that they scale with the image
Third, we apply a transform: translate(-50%,-50%) which is relative to the height and width of itself. This will make it so that the center of the dot is what we are positioning, so that when the image scales the center of the dot stays the same
Also, we can DRY up your css by moving the common rules into a .dot class
example: https://codepen.io/tylerfowle/pen/MrwreX
HTML:
<div class="wrapper">
<img src="http://ontheworldmap.com/usa/usa-states-map.jpg" alt="States Map"
class="statesMap" usemap="#States">
<span class="Vegasdot dot"></span>
<span class="SaltLakedot dot"></span>
<span class="Phoenixdot dot"></span>
</div>
CSS:
html,body{
background-color: #AADAFE;
}
.wrapper {
position: relative;
}
.dot {
height: 10px;
width: 10px;
border-radius: 50%;
background: black;
z-index: 2;
position: absolute;
transform: translate(-50%,-50%);
}
.Vegasdot{
top: 48%;
left: 17%;
}
.SaltLakedot{
top: 37%;
left: 24.5%;
}
.Phoenixdot{
top: 60%;
left: 22%;
}
.statesMap{
width: 100%;
z-index: 1;
}
Im trying to make a loading page for my website but there is a white line along the top and one down the left side. Could someone please help me with this,
Thanks.
<DOCTYPE html>
<html>
<head>
<style>
html {
cursor: none;
}
.container {
background-color: black;
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
}
p {
color: white;
text-align: center;
position: absolute;
top: 0; bottom:0; left: 0; right:0;
font-family: courier;
font-weight: bold;
}
img {
position: absolute;
top: 0; bottom:0; left: 0; right:0;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<img src="progress.gif">
<p> Loading... Please wait </p>
</div>
It's the default margin, you can add
body {
margin: 0;
}
to your css.
I'm trying to add an overlay to my page which is 100% in size. The problem is that the inner divs and buttons are not clickable anymore. Is there a way out of this?
I used the answer here to add the overlay: CSS: How to get this overlay to extend 100% with scrolling?
What i'm trying to achieve is like the mask we add to a layer/group in photoshop.
Thanks
The overlay, being on a layer above that of the button container, is most likely intercepting pointer events. Disable them:
.overlay {
pointer-events: none;
}
you need to use a little bit of JavaScript or JQuery
here is the html page with JQuery and CSS
<!doctype html>
<html lang="en">
<head>
<title>
tester
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".overlay").fadeIn();
$(".popup").fadeIn();
});
$(".overlay").click(function(){
$(".overlay").hide();
$(".popup").hide();
});
});
</script>
<style>
*
{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "helvetica ";
}
button
{
position: absolute;
left: 47%;
height: 50px;
border: none;
top: 10%;
width: 5%;
border-radius: 10px/150px;
transition: 0.5s;
z-index: -2;
}
button:hover
{
cursor: pointer;
background: #212121;
color: white;
font-size: 20px;
}
.overlay
{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 667px;
background: black;
z-index: 1000;
opacity: 0.5;
display: none;
}
.overlay:hover
{
cursor: pointer;
}
.popup
{
width: 50%;
height: 350px;
background: white;
z-index: 1001;
position: absolute;
left: 25%;
top: 25%;
border-radius: 20px;
padding:15px;
text-align: center;
font-size: 36px;
display: none;
}
</style>
</head>
<body>
<button>
Pop up
</button>
<div class="overlay">
</div>
<div class="popup">
<p>AM A Pop Up</p>
<input type="button" value="click me">
</div>
</body>
</html>