I've been searching this question on Stack Overflow. I've tried but my text align doesn't work, it's just null. tried to use display: block, width: 100% and whatever I could find, but I unfortunately got no luck. I got no error messages whatsoever. as of right now, I have no clue on what is causing it
#import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
/*bg*/
img.bg {
min-height: 100%;
min-width: 104px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
h1{
font-family: 'Source Sans Pro', sans-serif;
color: white;
text-shadow: 0px 0px 40px #690000;
font-size: 112px;
padding-bottom: 20px;
text-align: center;
display: block;
width:100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>e</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="script.js"></script>
</body>
</html>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}
#keyframes example {
from {background-color: red;}
to {background-color: orange;}
}
</style>
</head>
<body>
<h1 class="center">Denied</h1>
<div></div>
</body>
</html>
So, if you are learning web development then it's ok to make mistakes.
The thing you were doing wrong is just the whole format of the code
body,html,head
These are just used 1 time and you just used them as divs
What you should have done was like this -
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>e</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
body {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}
#keyframes example {
from {
background-color: red;
}
to {
background-color: orange;
}
}
</style>
</head>
<body>
<div>
<h1 class="center">Denied</h1>
</div>
</body>
<script src="script.js"></script>
</html>
CSS
#import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap");
/*bg*/
img.bg {
min-height: 100%;
min-width: 104px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
h1 {
font-family: "Source Sans Pro", sans-serif;
color: white;
text-shadow: 0px 0px 40px #690000;
font-size: 112px;
padding-bottom: 20px;
text-align: center;
display: block;
width: 100vw;
}
Your syntax of writing the code was very wrong
and I think you would have wanted the heading h1 inside the div like this-
<div>
<h1 class="center">Denied</h1>
</div>
and not leaving the div empty for no reason at all
After all this the main thing due to which you were not able to center it through text-align: center; was, you just had to take width as 100vw and not 100%
`width: 100vw;`
means you are taking the width of the element in respect of the screen means-
if you are viewing your website through a desktop whose width = 600px then your <h1 class="center">Denied</h1> width will be equal to the width of the screen which is 600px
At Last I would suggest you see the syntax of the html and css properly
A Quick Tip - if you are using VSCode for writing code you can just write ! on an empty HTML file and it will automatically write the HTML template with `head, body,HTML and all that stuff.
You have pasted your html code twice in your answer and this is making a mess to understand your code. Although your question is quite simple and I have answered in as simplest way as I can.
You should set text-align property to a parent div or span instead of direct HTML tag.
And while giving animation please don't give it a width if you want you items to be at center, for clarity see the attached snippet
.denied{
width:100%;
text-align: center;
}
body {
background-color: red;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}
#keyframes example {
from {
background-color: red;
}
to {
background-color: orange;
}
}
<div class="denied">
<h1>Denied</h1>
</div>
Related
I'm trying to animate slowly appearing text in css and I can't make it fluid... It consists of 3 words and will smoothly do the first word, but the next 2 words just pop into existence.
This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Not really my first website</title>
</head>
<body>
<h1 class="header">Marginalized Speeding Tickets</h1>
<div class="newclass"></div>
</body>
</html>
.header{
width: 100%;
top: 50%;
position: top;
left: 40%;
border-bottom: 5px solid greenyellow;
overflow: hidden;
animation: animate 2s linear forwards;
}
.header h1 {
color: green;
}
#keyframes animate {
0% {
width: 0px;
height: 0px;
}
20% {
width: 50px;
height: 0px;
}
50% {
width: 50px;
height: 80px;
}
}```
No need for height in the keyframe, the problem is that the h1 is a block element and it breaks the words because of width 0px, but if you put in a white-space: nowrap; it should be fine, also position: top; is not valid, not sure what your trying there.
PS i you want he h1 to be green, first the element then the class selector h1.header {color: green;}
.header {
white-space: nowrap;
overflow: hidden;
border-bottom: 5px solid greenyellow;
animation: animate 2s linear forwards;
}
h1.header {
color: green;
}
#keyframes animate {
0% {
width: 0px;
}
100% {
width: 100%;
}
}
<h1 class="header">Marginalized Speeding Tickets</h1>
<div class="newclass"></div>
If I get your means correctly It's because you have use 50px width in your key frame and it can only appear first word you can change that
that's my first post here. I'm working on a project and one thing block me so i'm trying to ask you if is a solution for this.
I have 3 images with display:flex and justify-content:center. (parrent div)
Then i wanna make them on hover to transform(translate) to same position.
Like, when i hover first image to go left: 200px; and top: 200px; (ex) and same for the rest of two without modify the originaly position from display flex.
Is a easy way of doing that?
Thank you!
Also i wanna make them in JS later but first i wanna make this working fine
That's what i wanna do:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 100px;
height: 100px;
}
.container {
background-color: red;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
}
.img-test1:hover {
transition: 3s;
transform: translate(200px, 200px);
}
.img-test2:hover {
transition: 3s;
transform: translate(200px, 200px);
}
.img-test3:hover {
transition: 3s;
transform: translate(200px, 200px);
}
<!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">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<img class ="img-test1" src="./Asset_1.svg" alt="">
<img class ="img-test2" src="./Asset_2.svg" alt="">
<img class ="img-test3" src="./Asset_3.svg" alt="">
</div>
</body>
</html>
for simplest answer, use CSS variables with a calc() function.
one time all the elements!! easy and fast
I commented on the code if you want...
the first element has a --i var with 0, so it will be 0 position x
the second element has a --i var with 1, so it will be -100 position x
the third element has a --i var with 2, so it will be -200 position x
the amazing part about this, is if you want to add more images, it will be easy for you, because the formula is calculated by CSS (not you)
here the fixed code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* here the trick */
--end-position: calc(-100px * var(--i));
}
img {
width: 100px;
height: 100px;
}
.container {
background-color: red;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
}
/* use the DRY method (Dont Repeat Yourself) */
.container img:hover {
transition: 3s;
/* one time for all, that's easy! and fast*/
transform: translate(var(--end-position), 200px);
}
<div class="container">
<img style="--i: 0;" class="img-test1" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
<img style="--i: 1;" class="img-test2" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
<img style="--i: 2;" class="img-test3" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</div>
To replicate the positioning given in the picture you need to move the first element by 0 in the x direction, the second by -100px, the third by -200px to get them all to translate to under the first one.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 100px;
height: 100px;
}
.container {
background-color: red;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
}
.img-test1:hover {
transition: 3s;
transform: translate(0, 200px);
}
.img-test2:hover {
transition: 3s;
transform: translate(-100px, 200px);
}
.img-test3:hover {
transition: 3s;
transform: translate(-200px, 200px);
}
<!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">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<img class ="img-test1" src="./Asset_1.svg" alt="">
<img class ="img-test2" src="./Asset_2.svg" alt="">
<img class ="img-test3" src="./Asset_3.svg" alt="">
</div>
</body>
</html>
I'm trying to animate a sign up / log in page where if you click on the right side, the right div will move to the left and the left div will move to the right. same in reverse. I'm having trouble playing 2 animations at once, also I haven't really animated in css before.
Image of my site:
My Css:
* {
margin: 0px;
border: 0px;
padding: 0px;
}
#keyframes example {
100% {
left: 0vw;
}
}
#keyframes example2 {
100% {
right: 40vw;
}
}
#right {
height: 100vh;
width: 40vw;
background-color: #363e47;
left: 60vw;
display: block;
position: absolute;
animation: example 0.5s linear forwards;
}
#left {
height: 100vh;
width: 60vw;
background-color: rgb(47, 52, 58);
display: block;
position: absolute;
animation: example2 0.5s linear forwards;
}
My Html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<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>
</head>
<body>
<div id="right"></div>
<div id="left"></div>
</body>
</html>
I have a simple webpage I'm working on, and I wanted to add a search bar to the page. However, when I added the search bar, it wouldn't let me click/type in the bar. I eventually found out that I was able to click/type into it after removing this div:
<div class="imagediv">
<img src="src/smallpaw.png">
</div>
This is used to put a logo on the header of my page, and I haven't been able to figure out why this breaks the search input. Obviously I want to keep this logo on my header, but any help would be appreciated.
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<style>
body {
#background: url("src/header.png") no-repeat;
}
</style>
<link
href="https://fonts.googleapis.com/css?family=Roboto:300"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="src/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
input[type="text"] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url("searchicon.png");
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 10px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type="text"]:focus {
width: 100%;
}
input[type="text"]::placeholder {
/* Firefox, Chrome, Opera */
text-align: left;
}
input[type="text"]::-ms-input-placeholder {
/* Microsoft Edge */
text-align: left;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="imagediv">
<img src="src/smallpaw.png">
</div>
<h1>  Student Information</h1>
<br />
<form>
<input type="text" name="search" placeholder="Search" />
</form>
</body>
</html>
and here is my styles.css:
h1 {
font-family: "Roboto", "Arial";
}
.header {
overflow: hidden;
background-color: #522e81;
position: relative;
z-index: 1;
height: 77px;
}
.imagediv {
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
max-width: 10%;
max-height: 10%;
}
input[type="text"] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* When the input field gets focus, change its width to 100% */
input[type="text"]:focus {
width: 30%;
}
Your imageDiv should be placed inside header div. That's the reason it's overlapping with input box and you are not able to type. Hope it helps man!
I've set up a landing page for practice, where an h1 + a paragraph slide in, and a "Read More" button slowly appears. I've also set it up so that when you hover over the "Read More" button, it rotates 180 degrees on the y axis. However, my problem is that the left border vanishes when I hover over. Here's what it looks like when this happens:
The text is flipped because I rotated it on the Y axis, but the left (well, actually right because it's flipped) border vanishes. Any ideas on why?Here's my code:
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #12475f;
color: white;
line-height: 1.6;
text-align: center;
}
.container {
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase {
height: 300px;
}
#showcase h1 {
font-size: 50px;
line-height: 1.3;
position: relative;
animation-name: heading;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes heading {
0% {top: -50px;}
100% {top: 200px}
}
#content {
position: relative;
animation-name: content;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes content {
0% {right: 100%;}
100% {right: 0;}
}
.btn {
display: inline-block;
text-decoration: none;
padding: 1rem 2rem;
border: white 1px solid;
margin-top: 40px;
color: white;
opacity: 0;
animation-name: btn;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
transition-property: transform;
transition-duration: 1s;
}
.btn:hover {
transform: rotateY(180deg);
}
#keyframes btn {
0% {opacity: 0;}
100% {opacity: 1;}
}
<!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">
<link rel="stylesheet" type="text/css" href="landing.css">
<title>Landing Page</title>
</head>
<body>
<header id="showcase">
<h1>Welcome To My Site</h1>
</header>
<div id="content" class="container">
<p>(pause) You thought wrong, dude. (He shoots and Marty falls to the ground.) (Tannen laughs and walks over to where Marty lays motionless on the ground. Doc watches Tannen then looks down at Marty in disbelief.) Ahh, thank ya. (Tannen stops just in front of Marty. He points his gun down at Marty meaning to finish him off. Suddenly Marty kicks the gun out of Tannen's hand. He stands up to face Tannen. Tannen throws a punch and nearly breaks his hand. Marty lifts his poncho to reveal the stove door that he put on as a bullet-proof vest. He saw the same thing in the Clint Eastwood movie that Biff was watching in the other 1985 time line.</p>
</div>
Read More
</body>
</html>
I'm new to web design, so the solution is probably obvious. However, I just can't figure out why this is happening. Please Help!
Thanks,
Lyfe
I think the problem that occurs when "hovering" is the css line at the class btn:
.btn {
padding: 1rem 2rem;
}
I also noticed that It seems okay with your code snippet until I tested it in https://codepen.io. The border-left you are referring to be the problem seems to be border-bottom to us.
I made some changes prior to your code:
You can visit this pen and play over the code.
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #12475f;
color: white;
line-height: 1.6;
text-align: center;
}
.container {
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase {
height: 300px;
}
#showcase h1 {
font-size: 50px;
line-height: 1.3;
position: relative;
animation-name: heading;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes heading {
0% {top: -50px;}
100% {top: 200px}
}
#content {
position: relative;
animation-name: content;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes content {
0% {right: 100%;}
100% {right: 0;}
}
span {
padding: 1rem 2rem;
}
.btn {
width: auto;
height: 60px;
line-height: 60px;
display: inline-block;
text-decoration: none;
/* padding: 1rem 2rem; */
border: white 1px solid;
margin-top: 40px;
color: white;
opacity: 0;
animation-name: btn;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
transition-property: transform;
transition-duration: 1s;
}
.btn:hover {
transform: rotateY(180deg);
}
#keyframes btn {
0% {opacity: 0;}
100% {opacity: 1;}
}
<!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">
<link rel="stylesheet" type="text/css" href="landing.css">
<title>Landing Page</title>
</head>
<body>
<header id="showcase">
<h1>Welcome To My Site</h1>
</header>
<div id="content" class="container">
<p>(pause) You thought wrong, dude. (He shoots and Marty falls to the ground.) (Tannen laughs and walks over to where Marty lays motionless on the ground. Doc watches Tannen then looks down at Marty in disbelief.) Ahh, thank ya. (Tannen stops just in front of Marty. He points his gun down at Marty meaning to finish him off. Suddenly Marty kicks the gun out of Tannen's hand. He stands up to face Tannen. Tannen throws a punch and nearly breaks his hand. Marty lifts his poncho to reveal the stove door that he put on as a bullet-proof vest. He saw the same thing in the Clint Eastwood movie that Biff was watching in the other 1985 time line.</p>
</div>
<a href="#" class="btn">
<span>Read More</span>
</a>
</body>
</html>
The below code stops the border from disappearing:
.btn {
width: 150px;
}