I am having some issues with this DIV not getting centered.
I am sure it is something with CSS,
I need some corrections to CSS below and to get rid of unnecessary CSS statements if not needed
I would like the div to be centered and 75% wide
Thanks,
.css_main_popup {
transition: opacity 10ms;
visibility: hidden;
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
margin: auto;
margin-left: auto;
margin-right: auto;
padding: 10px;
background: #fff;
border-radius: 5px;
width: 95%;
height: 90%;
overflow: auto;
align-self: center;
}
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>SMT Explorer</title>
<link rel="stylesheet" href="explorer.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="main_div" style="position: relative; "></div>
<div id="popup_factory" class="css_main_popup">
<a class="css_close_popup" href="#" style='text-align:right' onclick="CloseFPopup()">×</a>
</div>
<div id="popup_stations" class="css_main_popup">
<a class="css_close_popup" href="#" style='text-align:right' onclick="CloseSPopup()">×</a>
</div>
<script type="text/javascript" src="explorer.js"></script>
</body>
</html>
If it's a popup, it should propbably have position: fixed, not absolute. And then, these settings should work:
.css_main_popup {
visibility: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 90%;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
padding: 10px;
background: #fff;
border-radius: 5px;
overflow: auto;
transition: opacity 10ms;
}
So the important settings for centering (horizontally AND vertically) are position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); (no margin, no align-self)
That would result in something like this (visibility excepted):
.css_main_popup {
transition: opacity 10ms;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
padding: 10px;
background: #fff;
border-radius: 5px;
width: 75%;
height: 90%;
overflow: auto;
background: red;
}
<div class="css_main_popup"></div>
Just using left and position: absolute you are able to push the div to the center of the screen.
.css_main_popup {
transition: opacity 10ms;
visibility: hidden;
position: absolute;
font-weight: bold;
text-decoration: none;
color: #333;
border: 1px solid black;
width: 75%;
left: 15%;
font-size: 30px;
padding: 10px;
background: #fff;
border-radius: 5px;
height: 90%;
overflow: auto;
}
Related
I've found this great tutorial on youtube by CodingNepal (credits to them) where it is basically a a 3d card that flips whenever you hover on, made entirely by CSS and HTML. I want to implement it in a project that I am currently making where it is basically a gallery consisting of 4 rows and multiple column. The problem is I am having a hard time trying to duplicate it in order to achieve the "4 rows and multiple column". How do I do this?
this is the code of the page:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Gallery</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="gallerystyle.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="logo">
The Clutch
</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li>Home</li>
<li>Showroom</li>
<li><a class="active" href="Gallery.html">Gallery</a></li>
<li>About us</li>
<li>Feedback</li>
</ul>
</nav>
<div class="center">
<div class="front-face">
<div class="contents front">
<h2>
Image is here
</h2>
</div>
</div>
<div class="back-face">
<div class="contents back">
<h2>
Photo Info here
</h2>
</div>
</div>
</div>
</body>
</html>
And this is the code for the style sheet. Credits to CodingNepal on youtube for this amazing code
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
font-family: 'Montserrat', sans-serif;
background: linear-gradient(45deg,#111212 0%,#ebf9f9 100%);
}
.center,.front-face,
.contents,.back-face{
position: absolute;
}
.center{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 290px;
transform-style: preserve-3d;
perspective: 1000px;
}
.left{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 290px;
transform-style: preserve-3d;
perspective: 1000px;
}
.right{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 290px;
transform-style: preserve-3d;
perspective: 1000px;
}
.front-face, .back-face{
height: 100%;
width: 100%;
text-align: center;
background: linear-gradient(rgba(0,0,0,.2),
rgba(0,0,0,.2)),url(bg.jpeg);
background-size: cover;
background-position: center;
transform: translateY(0deg);
border-radius: 10px;
backface-visibility: hidden;
transform-style: preserve-3d;
transition: transform .7s cubic-bezier(.4,.2,.2,1);
}
.contents{
left: 0%;
top: 50%;
width: 100%;
perspective: 1000px;
transform: translateY(-50%) translateZ(60px) scale(0.94);
}
.front p{
font-size: 35px;
margin-bottom: 15px;
color: white;
}
.front span{
font-size: 23px;
color: white;
}
.front p:after{
content: '';
display: block;
left: 0;
right: 0;
width: 100px;
height: 2px;
background: white;
margin: 0 auto;
margin-top: 10px;
}
.back-face{
transform: rotateY(180deg);
background: linear-gradient(45deg,#043348 0%,#032535 100%);
}
.back {
color: white;
}
.back h2{
font-size: 33px;
padding-bottom: 5px;
}
.back span{
font-size: 25px;
}
.icons{
margin: 10px 0;
display: block;
}
i.fab{
color: #042f4b;
font-size: 20px;
height: 40px;
width: 40px;
background: white;
border-radius: 50%;
margin: 0 5px;
line-height: 40px;
cursor: pointer;
}
.center:hover > .back-face{
transform: rotateY(0deg);
}
.center:hover > .front-face{
transform: rotateY(-180deg);
}
img{
width: 250px;
height: 350px;
object-fit: cover;
}
The solutions I've tried already is implementing bootstrap but the problem is it destroys the layout of my navbar. I am not that efficient yet in using bootstrap and I am mainly doing the solution via the best of my knowledge about it. I am hoping you can help me with this problem, Thanks!
This is what it looks like on pc. This is what it looks like on mobile. I want the buttons on mobile to be smaller (auto-adjusted to the screen size).
This is the HTML and CSS for the page:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
height: auto;
right: 0;
top: 0;
}
.container .btn {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 20px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btt {
position: absolute;
top: 45%;
left: 24%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 20px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btc {
position: absolute;
top: 45%;
left: 76%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 20px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: white;
color: black;
}
.container .btt:hover {
background-color: white;
color: black;
}
.container .btc:hover {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div class="container">
<img src="some img" alt="" class="alignnone size-full wp-image-1660" />
ER DU ARRANGØR?</button>
ER DU MARKEDSFØRER?</button>
KONTAKT OSS!</button></div>
</body>
</html>
I'm assuming, if this is possible, that the solution would be to change the .container .btx for the buttons. I can't find a way to do this.
You should definitely look into media queries.
They allow you to work on different screens defined by various parameters (width, height, orientation).
#media (max-width: 800px) {
//your code goes here
}
I think this is what you're looking for.
Also take a look at viewport width and height units (vh and vw) that allow you to resize elements according to the size of the window.
div{
height: 50vh;//50% of the viewport (window) height
width: 40vw;//40% of the viewport (window) width
}
As answered in the above comment, you should definitely check out #media query and vh and vw. I'll also recommend you to take a look at calc().
I tweaked your code a bit with vh, vw, calc() with some minor modifications and this is what I came up with. Adjust the values in width and calc() to suit your need. Yeah, I don't use #media here.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
height: auto;
right: 0;
top: 0;
}
button {
position: absolute;
top: 45%;
width: 23vw;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: calc(0.5rem + 1vw);
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn {
left: 50%;
}
.container .btt {
left: 24%;
}
.container .btc {
left: 76%;
}
.container .btn:hover {
background-color: white;
color: black;
}
.container .btt:hover {
background-color: white;
color: black;
}
.container .btc:hover {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div class="container">
<img src="some img" alt="" class="alignnone size-full wp-image-1660" />
<button class="btn">ER DU ARRANGØR?</button>
<button class="btt">ER DU MARKEDSFØRER?</button>
<button class="btc">KONTAKT OSS!</button></div>
</body>
</html>
I found of my old css codes for responsive.
Yes you should use media, something like:
#media (max-width: 991px) {
.quotesBox {
font-size: 19px;
}
.ftrLinks li a {
padding: 0px 15px;
}
.socialLinks li {
padding: 0px 10px;
}
.socialLinks li a img {
width: 37px;
height: 37px;
}
}
I hope it can help you, just change for your needs
I have the following problem. When I try to position my button using
margin: 0 auto;
It sticks the button to the left. If I type any number eg.
margin: 0 100px;
it does work. I am curious what I am missing? I have
display: block;
width: 200px;
I would like to add that I need to position this button at the bottom of the container. 3% of the bottom edge of the screen and in the middle of the screen.
this is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
<div class="container">
<div class="group">
<div class="element">
</div>
</div>
button
</div>
</body>
</html>
and CSS
.container {
width: 1100px;
height: 100vh;
margin: 0 auto;
background-color: black;
position: relative;
}
.group {
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(53, 20, 131);
position: absolute;
}
.element {
width: 100px;
height: 100px;
top: 0;
left: 0;
background-color: rgb(131, 20, 44);
position: absolute;
}
.btn {
display: block;
position: absolute;
bottom: 3%;
width: 200px;
height: 46px;
margin: 0 auto;
border: 1px solid #fff;
text-align: center;
text-transform: capitalize;
padding: 14px 0 0 0;
font-size: 1em;
font-weight: 100;
text-decoration: none;
color: rgb(119, 20, 20);
border-radius: 25px;
letter-spacing: 3px;
}
Thank you in advance
Robert
Its because of the position absolute
if you want to center it try adding this to your code:
.btn{
left: 50%;
transform: translateX(-50%);
}
The reason why your margin: auto; does not work is because your button has a position: absolute;
Of course you want to solve this without having to change the elements' position. With position: absolute; you can use the left and right properties:
left: 0; and right: 0; this will center an element with the position of absolute relative to (the width of) its parent that has a position of relative.
View the Code Snippet below in Full Page to have a better view.
.container {
width: 1100px;
height: 100vh;
margin: 0 auto;
background-color: black;
position: relative;
}
.group {
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(53, 20, 131);
position: absolute;
}
.element {
width: 100px;
height: 100px;
top: 0;
left: 0;
background-color: rgb(131, 20, 44);
position: absolute;
}
.btn {
display: block;
position: absolute;
left: 0; /* added */
right: 0; /* added */
bottom: 3%;
width: 200px;
height: 46px;
margin: 0 auto;
border: 1px solid #fff;
text-align: center;
text-transform: capitalize;
padding: 14px 0 0 0;
font-size: 1em;
font-weight: 100;
text-decoration: none;
color: rgb(119, 20, 20);
border-radius: 25px;
letter-spacing: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
<div class="container">
<div class="group">
<div class="element">
</div>
</div>
button
</div>
</body>
</html>
As VXp already wrote in his comment: To horizontally center an absolutely positioned element inside its container, you need left: 50% (which moves its left border to the middle) and transform: translateX(-50%) (which moves the element back left by half of its own width) - see the snippet below, where those are the only changes to your given code. (and margin: 0 autowon't do anything in this case, since it's position: absolute)
.container {
width: 1100px;
height: 100vh;
margin: 0 auto;
background-color: black;
position: relative;
}
.group {
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(53, 20, 131);
position: absolute;
}
.element {
width: 100px;
height: 100px;
top: 0;
left: 0;
background-color: rgb(131, 20, 44);
position: absolute;
}
.btn {
display: block;
position: absolute;
bottom: 3%;
width: 200px;
height: 46px;
left: 50%;
transform: translateX(-50%);
border: 1px solid #fff;
text-align: center;
text-transform: capitalize;
padding: 14px 0 0 0;
font-size: 1em;
font-weight: 100;
text-decoration: none;
color: rgb(119, 20, 20);
border-radius: 25px;
letter-spacing: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
<div class="container">
<div class="group">
<div class="element">
</div>
</div>
button
</div>
</body>
</html>
Am trying to get a shape drawn in css on the header of my webpage. it supposed to look like this.
The shape am trying to draw for my header
but when I try to get the exact shape, IT looks like this below (Run the snippet)
Am not so good at css so am struggling here. The codes are below.
header {
padding: 0px !important;
height: auto !important;
}
.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}
.spanheader {
font-size: 20px;
}
.logo {
z-index: 1;
position: relative;
}
.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}
#draw {
height: 30px;
width: 100%;
background-color: #fff;
}
#green {
height: 60px;
width: 100%;
border-width: 0px;
border-left: 280px solid white;
border-top: 20px solid white;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<section id="header" class="header">
<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>
<div id="draw"></div>
<div id="green"></div>
</section>
What Am trying to achieve with my header and shape drawing
final look I want to achieve or what it should should look like at the end
You can just create a small white rectangle at the left top, skew it and move it a little to the left to remove the green triangle:
.green {
background-color:#0f0;
height:60px;
width:100%;
}
.draw {
height:30px;
margin-left:-15%;
width:30%;
background-color:#fff;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<div class="green">
<div class="draw">
</div>
</div>
Try using :after. See this snippet.
header {
padding: 0px !important;
height: auto !important;
}
.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}
.spanheader {
font-size: 20px;
}
.logo {
z-index: 1;
position: relative;
}
.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}
#draw {
height: 30px;
width: 100%;
background-color: #fff;
}
#green {
height: 60px;
width: 100%;
border-width: 0px;
position:relative;
}
#green:after{
content:'';
position:absolute;
top:0;
left:-25px;
height:30px;
width:250px;
background:white;
-moz-transform: skew(-60deg);
-webkit-transform: skew(-60deg);
transform: skew(-60deg);
}
<html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!-- Mirrored from byrushan.com/projects/ma/1-6-1/jquery/light/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 14 Jun 2016 14:12:13 GMT -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WEBPAGE </title>
</head>
<body>
<section id="header" class="header">
<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>
<div id="draw">
</div>
<div id="green"></div>
</section>
</body>
</html>
Take a look at this JSFiddle
header{
text-align:center;
padding: 5px 0;
background: grey;
color: white;
}
footer{
text-align: center;
padding: 50px 0;
position: relative;
}
footer::before,footer::after{
content: '';
display: inline-block;
width: 70%;
height: 50px;
background: green;
position: absolute;
bottom: 0;
right: -10px;
transform: skewX(-30deg);
}
footer::after{
width: 100%;
height: 30px;
transform: skewX(0);
}
#header {
width: 100%;
height: 30px;
background: #CCC;
text-align: center;
line-height: 30px;
}
#slashWrapper {
position: relative;
background: #FFF;
width: 100%;
height: 100px;
}
#whiteSlash {
height: 75px;
width: 300px;
background: #FFF;
position: absolute;
top: 0px;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
z-index: 2;
}
#greenSlash {
height: 50px;
width: 100%;
position: absolute;
bottom: 0px;
background: #00ff00;
}
#whiteSlashBottomCorner {
height: 25px;
width: 25px;
background: #FFF;
position: absolute;
bottom: 0px;
right: -25px;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
z-index: 2;
}
<div id="header">HEADER</div>
<div id="slashWrapper">
<div id="whiteSlash"></div>
<div id="greenSlash"></div>
<div id="whiteSlashBottomCorner">
</div>
I am a web developer. for my client's website I need to put an effect on hover a specific div as shown in this website . when i hover on a div the background should change by rotating. how can i do this. I can do only ease effect for background change using css3 transition. is there any way to do the same without using jquery ?
see the scrrenshot
jsbin
I simulate your provide the animation without jquery. The key to achieve it that use the parent & chidl relation and understand the key point when animation play.
.hover{
position: relative;
width: 200px;
height: 200px;
background-color: #1cf;
}
.background{
position: absolute;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
line-height:10;
background-color: #c33;
transition: all 0.3s;
z-index: 2;
font-size: 20px;
}
.content{
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
text-align: center;
font-size: 20px;
opacity: 0;
line-height: 10;
transform: scale(-1,1);
transition: all 0.3s;
}
.hover:hover .background{
transform: scale(-1,1);
opacity: 0;
}
.hover:hover .content{
transform: scale(1,1);
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="hover">
<div class="background">
This is background!!!
</div>
<div class="content">
This is content!
</div>
</div>
</body>
</html>
.spin{
position: relative;
top: 45%;
left: 45%;
height: 100px;
width: 100px;
background: red;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border-radius: 10px;
border: 1px solid black;
box-sizing: border-box;
padding: 10px 30px;
font-size: 25px;
font-family: thin;
text-align: center;
transition: 1.5s;
}
.spin:hover{
transform: rotate(360deg);
}
.flip{
position: relative;
top: 45%;
left: 0%;
height: 100px;
width: 100px;
background: red;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border-radius: 10px;
border: 1px solid black;
box-sizing: border-box;
padding: 10px 30px;
font-size: 25px;
font-family: thin;
text-align: center;
transition: 1.5s;
}
.flip:hover{
transform: rotateY(180deg);
background: black;
}
#font-face {
font-family: 'thin';
src: url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2');
}
<div class='spin'>Spin me!</div>
<div class='flip'>Flip me!</div>