I am trying to have a responsive web design, but when I shrink my browser size, button is overlapping my text parts, does anyone know how to fix this? 1st picture is for normal screen size, 2nd picture is for shrunk screen size. I'd like to show like 1st picture even for shrunk screen size.
HTML code is
<!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>Quote API</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="button">
<button onclick="getQuote()">Give me a quote!</button>
</div>
<div id="para">
<p id="quote"></p>
<p id="quoteauthor">test</p>
</div>
<script src="script.js"></script>
</body>
</html>
And CSS file code is
body{
background:rgb(68, 142, 226);
}
#para {
margin-top: 30%;
}
p {
text-align: center;
color:white;
}
button{
background:white;
border: 4px solid white;
border-radius:1em;
font-size:24px;
padding:1em 3em;
/*CSS center element trick*/
position: absolute;
top: 50%;
left: 50%;
-webkit-transform:
translate(-50%, -50%);
transform:
translate(-50%, -50%);
-webkit-transition-property:
all;
-webkit-transition-duration:
1s;
-webkit-transition-timing-function:
ease-out;
transition-property:
all;
transition-duration:
1s;
transition-timing-function:
ease-out;
}
button:hover{
background:green;
color:white;
font-size:34px;
/*the previous padding:1em 3em; is what enlarges the element on hover ***note that the unit em translates to the size of your font. example: font=24px then 1em = 24px*/
}
You are positioning your button absolutely, which takes it out of the elements flow. You just need to use some layout technique: for example, flex or grid. See the example below:
<!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>Quote API</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: rgb(68, 142, 226);
}
.vbox {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
color: white;
padding-block: 15%;
}
button {
background:white;
border: 4px solid white;
border-radius:1em;
font-size:24px;
padding:1em 3em;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-out;
}
button:hover {
background: green;
color: white;
font-size: 34px;
}
</style>
</head>
<body>
<div class="vbox">
<button onclick="getQuote()">Give me a quote!</button>
<span id="quote">Your favorite quote from your favorite author.</span>
<span id="quoteauthor">Your favorite author</span>
</div>
<script src="script.js"></script>
</body>
</html>
Related
What I have
I have 1 parent div containing 2 div's of bg-color green and orange, I animated so that when I hover over them they get bg-color red for duration 1s, for now everything works fine.
what I need
When I hover, it nicely animates for 1s, but when I move mouse from div's it immediately comes to original styles, but I need them to take 2s to revert back to original styles when I move mouse away from that elements
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.fst--row {
width: 80rem;
height: 20rem;
display: flex;
gap: 0.7rem;
}
.fst--row>div {
width: 50%;
height: 100%;
}
.fst--row>div:nth-child(1) {
background-color: #099268;
}
.fst--row>div:nth-child(2) {
background-color: #e67700;
}
.fst--row>div:hover {
animation: hover--flex 1s forwards;
}
#keyframes hover--flex {
to {
background-color: red;
}
}
<html>
<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>Document</title>
<link rel="stylesheet" href="flexLaying.css">
</head>
<body>
<div class="fst--row">
<div></div>
<div></div>
</div>
</body>
</html>
To the best of my knowledge, you can't do this with pure HTML/CSS animations. However, you have some options!
Firstly, if it's just one property, you should consider the CSS transition property. You can set it on the element to change as transition: 1s background-color;, then specify the intended :hover style (e.g. background-color: blue;) as you normally would. CSS magic handles the rest :)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.fst--row {
width: 80rem;
height: 20rem;
display: flex;
gap: 0.7rem;
}
.fst--row>div {
width: 50%;
height: 100%;
transition: 1s background-color;
}
.fst--row>div:nth-child(1) {
background-color: #099268;
}
.fst--row>div:nth-child(2) {
background-color: #e67700;
}
.fst--row>div:hover {
background-color: red;
}
<html>
<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>Document</title>
<link rel="stylesheet" href="flexLaying.css">
</head>
<body>
<div class="fst--row">
<div></div>
<div></div>
</div>
</body>
</html>
Or you can use javascript to toggle classes (Credit to https://stackoverflow.com/a/17626510/8273686), and trigger your animations that way.
$("#box1").hover(
function () {
$(this).removeClass('mouseleave').addClass('mouseover');
},
function () {
$(this).removeClass('mouseover').addClass('mouseleave');
}
);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.fst--row {
width: 80rem;
height: 20rem;
display: flex;
gap: 0.7rem;
}
.fst--row>div {
width: 50%;
height: 100%;
transition: 1s background-color;
}
.fst--row>div:nth-child(1) {
background-color: #099268;
}
.fst--row>div:nth-child(2) {
background-color: #e67700;
}
.mouseover {
animation: mouseover 1s forwards;
}
.mouseleave {
animation: mouseleave 1s forwards;
}
#keyframes mouseover {
from {
background-color: #099268;
}
to {
background-color: red;
}
}
#keyframes mouseleave {
from {
background-color: red;
}
to {
background-color: #099268;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<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>Document</title>
<link rel="stylesheet" href="flexLaying.css">
</head>
<body>
<div class="fst--row">
<div id="box1"></div>
</div>
</body>
</html>
I am trying to position a div in the center of a grid header but many of my attempts have failed.
Here's link to code pen: https://codepen.io/ZeePintor/pen/OKxLRe
Here's the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ermesinde Clube de Karaté</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:900|Work+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="brand">
<img src="/images/eck_logo.png">
<div class="page-headers">
<h1>ECK</h1>
<h3>ERMESINDE CLUBE KARATE</h3>
</div>
</div>
</div>
<div class="section1">Section1</div>
<div class="section2">Section2</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
And here is the css:
.wrapper{
display:grid;
width:100%;
background-color:#e3e3e3;
grid-template-rows:
[grid-start hd-start] 100vh
[hd-end sc1-start] 100vh
[sc1-end sc2-start] 100vh
[sc2-end ft-start] 125px
[ft-end grid-end];
grid-template-columns: 100%;
}
div div:hover{
border:1px solid black;
}
/*
HEADER
*/
.header{
grid-row:hd;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/black_belt_stock_photo.jpg);
}
.brand{
grid-row: brand;
display:flex;
justify-content:flex-end;
}
.brand img{
border: 2px rgb(109, 12, 12) solid;
border-radius: 50%;
}
.brand h1{
color:white;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
}
.brand h3{
color:white;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.section1{
grid-row:sc1;
}
.section2{
grid-row:sc2;
}
.footer{
grid-row:ft;
}
This is supposed to be the big header of the page to when people open the page, animations might be added to the headers and image, but first I would like to center vertically while aligning the element to the far right.
I have tried to move around in the css with somethings like:
- position:absolute;
- vertically-align:center;
- justify-content:right; align-content:center;
But none of these worked for me, so please could someone help me?
Thank you.
This might work for you:
.brand{
grid-row: brand;
display:flex;
justify-content:flex-end;
position: absolute;
right: 2rem;
top: 50%;
margin-top: -160px; /* 1/2 image height */
}
I could really use some css help. Is it possible to swap the order of 2 words using css, WITHOUT using :after? (ex "Hello World" should become "World Hello")
The specific reason I cannot use :after which does in fact work, is that the div snapshot utility html2canvas.js does not take :before or :after into account, hence the workaround.
any help is very much appreciated.
Niko
You can stack the sentences with CSS z-index and using keyframes to make an effect of swapping. (see code-snippet).
After that you need to decide how/when to call for the change, through buttonclick or time. For calling you probably need some javascript.
If your are looking for a solution that really replaces the text in the HTML div, then you need solve that through javascript.
.div-1 {
position: absolute;
z-index: 1;
background-color: white;
width: 100px;
height: 20px;
margin: 0px 0px 0px 20px;
}
.div-2 {
position: relative;
z-index: 2;
background-color: white;
width: 100px;
height: 20px;
margin: 0px 0px 0px 20px;
animation-name: swap;
animation-duration: 5s;
animation-delay: 0;
}
#keyframes swap {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="div-1">Hello World</div>
<div class="div-2">World Hello</div>
</div>
</div>
</body>
</html>
Why doesn't the transition property do the reverted animation when I unhover?
I thought that when you cancel a transform it does the reverted animation.
body {
background-color : #333333;
}
.corner {
background-color : rgb(207, 207, 207);
border-bottom-right-radius: 100%;
height : 50px;
left : 0px;
position : fixed;
top : 0px;
width : 50px;
}
.corner:hover {
transform : rotateX(180deg) rotateY(180deg) rotateZ(180deg);
transition: all .5s ease-in-out;
}
#top-right {
left :auto;
right : 0px;
top : 0px;
transform: rotate(90deg);
}
#bottom-left {
bottom :0;
left :0px;
right : auto;
top : auto;
transform: rotate(-90deg);
}
#bottom-right {
bottom :0px;
left :auto;
right : 0px;
top : auto;
transform: rotate(180deg);
}
<!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">
<title>Rentats Royo</title>
<link rel="stylesheet" href="css/styles.css">
<style type="text/css">
</style>
</head>
<body>
<div class="corner"></div>
<div class="corner" id="top-right"></div>
<div class="corner" id="bottom-left"></div>
<div class="corner" id="bottom-right"></div>
</body>
</html>
The problem is that the transition property is defined in the:hover pseudo-class instead of being declared in the normal state of the element.
You can read this post for further detail.
body {
background-color : #333333;
}
.corner {
background-color : rgb(207, 207, 207);
border-bottom-right-radius: 100%;
height : 50px;
left : 0px;
position : fixed;
top : 0px;
width : 50px;
transition : all .5s ease-in-out;
}
.corner:hover {
transform : rotateX(180deg) rotateY(180deg) rotateZ(180deg);
}
#top-right {
left :auto;
right : 0px;
top : 0px;
transform: rotate(90deg);
}
#bottom-left {
bottom :0;
left :0px;
right : auto;
top : auto;
transform: rotate(-90deg);
}
#bottom-right {
bottom :0px;
left :auto;
right : 0px;
top : auto;
transform: rotate(180deg);
}
<!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">
<title>Rentats Royo</title>
<link rel="stylesheet" href="css/styles.css">
<style type="text/css">
</style>
</head>
<body>
<div class="corner"></div>
<div class="corner" id="top-right"></div>
<div class="corner" id="bottom-left"></div>
<div class="corner" id="bottom-right"></div>
</body>
</html>
I checked a lot of answers in SO and the most common solution was to set display for the div as table-cell or inline-block and put vertical-align: middle
So, accordingly the following is my HTML code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/ad.css" />
<title>Ad</title>
</head>
<body>
<div id="initial-div">
Check out our amazing offer
</div>
</body>
</html>
The CSS code is as follows
body {
overflow:hidden;
height:100%;
min-height: 100%;
width: 100%;
color: #ffffff;
background-color:aliceblue;
}
#initial-div{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
color: #000;
display: inline-block;
vertical-align: middle;
text-align: center;
background-color: #ffd800;
}
But, the text just does not seem to be centered vertically. Where am I going wrong here?
This would work:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/ad.css" />
<title>Ad</title>
</head>
<body>
<div id="initial-div">
<div>Check out our amazing offer</div>
</div>
</body>
</html>
body {
overflow:hidden;
height:100%;
min-height: 100%;
width: 100%;
color: #ffffff;
background-color:aliceblue;
}
#initial-div{
position:fixed;
height: 100%;
color: #000;
background-color: #ffd800;
width: 100%;
}
#initial-div div{
text-align: center;
position: relative;
top: 50%;
margin-top: -5px; /* height/2 */
}
http://jsfiddle.net/zpFym/