I'm very new to css and html. I'm setting up a text version of the oregon trail, and on my main menu screen one of my divs is appearing over some text that I have fading in and out. I've searched quite a bit and couldn't get any of the solutions I found to solve it.
CSS and HTML
body {
background-color: black;
}
#title {
color: white;
text-align: center;
}
div.menu {
position: relative;
vertical-align: middle;
}
p {
position: relative;
color: burlywood;
text-align: center;
}
#keyframes fadeIn {
from {
opacity: 0;
}
}
h7 {
position: relative;
top: 100px;
animation: fadeIn 2s linear infinite alternate;
}
<div id="title">
<h1>The Oregon Trail</h1>
<h2>Main Menu</h2>
<h7>Press Key to Select Option</h7>
</div>
<div class="menu">
<p>1. Travel the Trail</p>
<p>2. Learn about the Trail</p>
<p>3. See the Oregon Top Ten</p>
<p>4. Turn Sound Off</p>
</div>
Any tips as to why this is occurring?
You need to change your <h7> styling in the CSS from position: relative;to position: initial;. That should fix the problems of it being overlapped!
This here is your issue:
h7 {
position: relative;
top: 100px;
animation: fadeIn 2s linear infinite alternate;
}
top will move the element, but elements around it will treat it as if it was not moved. You'll probably want to use margin-top or padding-top to move it into the position you want instead of top.
Here is a link to an MDN page that explains it:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Relative
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements;
Related
I'm maybe 2 weeks into coding so apologies if I don't format correctly (code and question itself).I am trying to set a delay for the time it takes the buttons to switch text. Thank you for the help!
I've tried googling this and youtube with no luck.
I have tried adding
transition
transition-delay
body{
background-color: black;
}
.column{
position: fixed;
left:0;
bottom:0;
top:55px;
width:72px;
z-index: 200;
padding-top: 20px;
}
.about,
.skills {
font-size:72px;
width: 10em;
text-align: left;
border:none;
background-color: black;
color:red;
}
.about:hover span {
display: none;
}
.about:hover:after {
transition-delay: 3s;
content: "ABOUT";
}
.skills:hover span {
display: none
}
.skills:hover:after {
content: "SKILLS"
}
<h1>
<div class="column">
<button class="about" data-hover="ABOUT">
<span>
I
</span>
</button>
<button class="skills">
<span>
AM
</span>
</button>
</div>
</h1>
First of all, I would look into the html semantics a bit. Having div tags inside an h1 doesn't make much sense. So consider changing the h1 to a div. Also, the 3s delay is enormous. Think of something a bit faster, like 300ms.
The real issue is that display states and transition don't really work together since it swaps between states like block and none. But there are other solutions to this. You could use position: relative; on a parent div and give the children position: absolute. This way, you could make the transitions with opacity instead.
I have made an example for you so you can get the idea. I have commented on the CSS so you can follow up on what is happening.
/* Lets give our spans some styling: */
span{
font-size: 30px;
font-weight: 600;
font-family: sans-serif;
margin-bottom: 2rem;
max-width: 60ch;
}
/* Lets make the "container" position relative,
this way the absolute children will stay inside the container */
.hover-effect{
position: relative;
}
/* Let's give both of the children position absolute */
.hover-effect span{
position: absolute;
color: black;
opacity: 100%;
transition: 300ms ease-in 300ms; /* Delay: 300ms*/
}
/* Let’s override the previous.
This actually happens when we remove the hover, so we want to
trigger this animation first, hence the delay of 0ms*/
.hover-effect span.on-hover{
opacity: 0%;
transition: 300ms ease-in 0ms;
}
/* When we hover the container, let's change both spans */
.hover-effect:hover span{
color: red;
opacity: 0%;
transition-delay: 0ms;
}
/* Let’s override the previous.
When we hover on the container, the span with the class "on-hover"
becomes visible, and we wait 300ms before it happens so that the
"disappearing" animation gets its time to trigger. */
.hover-effect:hover span.on-hover{
opacity: 100%;
transition-delay: 300ms;
}
<div class="hover-effect">
<span>Try and hover over me</span>
<span class="on-hover">Try and remove the hover</span>
</div>
Site URL: www.awarecanada.com
Passcode to site is: Woods
The first scroll down arrow on the page is fixed in its position but the second one on the "new releases" section moves (despite using the same coding) depending on screen size, why is this happening and how do I get it to stay just above the bottom of the image?
Try putting the arrows inside the element that they need to be relative too rather than in the BODY. It'll be a thousand times easier to align them exactly then!
current xpath -> /html/body/div[2]
Suggested xpath -> /html/body/div[2]/main/article/section[2]/div[3]
then, using your existing CSS with a few changes
.scroll-down2 {
position: absolute;
left: 50%;
bottom: 20px;
z-index: 999;
display: block;
text-align: center;
font-size: 20px;
text-decoration: none;
width: 13px;
height: 13px;
border-bottom: 3px solid white;
border-right: 3px solid white;
transform: translate(-50%, 0%) rotate(45deg);
animation: fade_move_down 4s ease-in-out infinite;
}
demo with resizing
Well your website 2nd arrow is moving because of this animation : fade_move_down 4s ease-in-out infinite and just change its top property value to 1450px for desktop view
I am just starting HTML and some basic CSS, Im here trying to make a Rocketship push up another image with some simple tags,
Ive tried everything.
I have right now,
<div align="center" >
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="images.png">
<img class="ImageTwo" src="falcon9-render.png">
</div>
</marquee>
I have tried some CSS which is in my stylesheet.css right now, and here is that code.
image {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
z-index: 0;
}
.imageTwo {
z-index: 1;
}
and at this point, i dont even know if im using z-index in the right context. If its hard to see my vision, Im bascially trying to push and image up with another image under it. or create that kind of visual, i dont know if i have to edit the pixel and align them up. The rocket seems to be being in the center but the src="images.png" is on the side but its under the tag...
Sorry if this is dumb and simple but I couldnt find anything.
As Requested in comments; https://jsfiddle.net/7ohrpk42/
Updated Solution:
img {
margin-left: auto;
margin-right: auto;
display: block;
}
<DOCTYPE HTML!>
<html>
<body bgcolor=“#add8e6”>
<title>The Most Best Worst Websites</title>
<div align="center">
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="https://i.postimg.cc/g2ZJTkHk/images.png">
<img class="ImageTwo" src="https://i.postimg.cc/mD5W47bx/falcon9-render.png">
</marquee>
</div>
</body>
</html>
Your questions a little unclear without a jsFiddle, but I think you are trying to do something like this:
img {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
margin: none;
}
.imageTwo {
margin: none;
}
<div align="center">
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="https://place-hold.it/20x30">
<br>
<img class="ImageTwo" src="https://place-hold.it/20x30">
</marquee>
</div>
What you're trying to achieve can be done by setting the "f&*k you" image as the background of the marquee and background size to 'cover'. Like this:
marquee{
background: url('https://i.postimg.cc/g2ZJTkHk/images.png') no-repeat;
background-size: cover;
}
I updated your fiddle https://jsfiddle.net/0vd79j2h/
<marquee> is Deprecated
It is strongly recommended that <marquee> be avoided -- it's deprecated and on its way to becoming obsolete. We can still customize HTML elements to behave and appear as a <marquee> with CSS animation (or even with JavaScript/jQuery although it wouldn't be as efficient as CSS). The following demo uses CSS animation only, and the only images are actually fonts (like emoticons)
Demo
.marquee {
width: 30%;
height: 50vh;
/* Required on Parent */
overflow: hidden;
font: 400 15vh/1.5 Consolas;
background: rgba(0, 0, 0, 1);
padding-left: 15px;
margin: 20px auto;
}
.marquee b,
.marquee i {
/* Required on Child*/
white-space: nowrap;
display: table-cell;
vertical-align: baseline;
/* Infinite Loops */
animation: climb 2s linear infinite;
animation-fill-mode: forwards;
/* Set to 0s in order to have a point of reference */
animation-delay: 0s;
}
.marquee i {
animation: fall 2s linear infinite;
}
/* Required for complex CSS animation */
/* Bottom to top / Left to right */
#keyframes climb {
0% {
transform: translate(-200%, 300%);
}
100% {
transform: translate(300%, -300%);
}
}
/* Top to bottom / Right to left */
#keyframes fall {
0% {
transform: translate(200%, -20%);
}
100% {
transform: translate(-300%, 300%);
}
}
<header class='marquee fall'>
<i>🌠</i><em>✨</em>
</header>
<header class='marquee climb'>
<b>🚀</b><em>🌌</em>
</header>
My HTML code is
<div class="container1">
<div id="container-table"></div>
<div id="container-tablec"></div>
<div id="container-tableq"></div>
<div id="container-table"></div>
<div id="container-table"></div>
</div>
Now, each of these DIVs generates a widget (similar to the one in stock markets). I want to add all of these in a marquee effect which runs endlessly and there is no gap between the last div and the div of the next loop.
I'm a newbie to web development. I've tried using tag but, there is a gap between the ending of the last div and the beginning of the next loop. Also, MDN suggests that I should not use it as it is an obsolete feature.
I want to give it a look similar to the one in stock markets where the entire loop id endless and runs infinitely.
Can anyone suggest me how I can achieve this using CSS3.
Any help would be appreciated. Thanks in advance.
This will help you
/* Sets up our marquee, and inner content */
.marquee {
overflow: hidden;
position: relative;
padding-left: 100%;
/* Some browsers may require -webkit-animation */
animation: reduce 20s linear infinite;
}
.marquee__inner {
white-space: nowrap;
display: inline-block;
/* Some browsers may require -webkit-animation */
animation: scroll 20s linear infinite;
}
/* Creates two white-to-transparent gradients at the ends of the marquee */
.marquee::before,
.marquee::after {
z-index: 1;
top: 0;
left: 0;
position: absolute;
width: 50px;
height: 100%;
content: "";
display: block;
}
.marquee::after {
left: auto;
right: 0;
transform: rotate(180deg);
}
#keyframes reduce {
to {
padding-left: 0;
}
}
#keyframes scroll {
to {
transform: translateX( -100%);
}
}
<div class="marquee">
<span class="marquee__inner">some text .</span>
</div>
Fiddle Example
I'm trying make an animation as if I was typing. To achieve this I'm using CSS animation 'steps'.
The animation itself works just fine. However, if I want to animate multiple lines of text, they all start playing at the same time. Which isn't giving me the desired effect. (Tried using <br> in a single <h1>, which cut off the text, but again started the animations simultaneously.)
To counter this, I put the next line of text in an <h2> and set an animation-delay for every line of text. Which works, but the text is visible before the animation starts.
I want the text to be hidden until the animation starts playing, to really get that 'live typing' effect.
Anyone got any ideas on how I can achieve this?
HTML
<div class="content">
<h1>Hi there! My name is Jeff.</h1>
<h2>And I create cool stuff.</h2>
</div>
CSS
.content h1 {
background:white;
opacity:0.7;
white-space:nowrap;
overflow:hidden;
border-right: 3px solid black;
-webkit-animation: typing 2s steps(26, end),
blink-caret 1s step-end 2s;
}
.content h2 {
background:white;
opacity:0.7;
white-space:nowrap;
overflow:hidden;
border-right: 3px solid black;
-webkit-animation: typing 2s steps(26, end),
blink-caret 1s step-end infinite;
-webkit-animation-delay:3s;
}
#-webkit-keyframes typing {
from { width: 0; }
to { width:400px; }
}
#-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
jsFiddle
The simplest solution is to add:
animation-fill-mode:both;
to your h2 (with the necessary prefixes). That way, you aren't setting it to a zero width outside of your animation, so browsers that don't support this CSS will display the heading (which I guess is what you're after). See this fiddle.
The animation-fill-mode:
specifies how a CSS animation should apply styles to its target before
and after it is executing
Setting it to both in this instance means that your h2 will have a width of 0 before it starts executing, and a width of 400px after.
As the comments already include a solution, perhaps this might be another way of doing it - by using timeouts and setting visibility: hidden at the beginning (For simplification I just used jQuery to set the visiblitiy).
Include the following CSS rule:
.content {
visibility: hidden;
}
As JavaScript you would have:
window.setTimeout(function() {
$('#contentdiv h1').css('visibility', 'visible');
}, 100);
window.setTimeout(function() {
$('#contentdiv h2').css('visibility', 'visible');
}, 3100);
See the jsFiddle
p
{
font:500 22px consolas;
width:20ch;
white-space:nowrap;
overflow:hidden;
animation:type 5s steps(20) infinite;
}
#keyframes type
{
0%{ width:0; }
}
<p>Text Type Animation</p>
Not quite the OP's question, but in case someone else finds this useful:
I wanted to be able to typing-animate a pararaph of text, a single <p> tag which might contain text that would wrap, and produce an unknown number of actual lines. Applying a simple linear animation to the p tag itself wouldn't work, so instead, I took the approach of having several "hider" elements that would cover the paragraph of text, each one line high, and then I would animate each of those so they would shrink away, reveal characters from the line of text beneath them.
The HTML looks like this:
<div class="container">
<!-- container div is required to set absolute positions within it, so that .typing and .hiders exactly overlap -->
<p class="typing">
This paragraph of text will be animated
with a "typewriter" style effect, and it
will continue to work even if it splits across
multiple lines. Well, in this case, up to a
maximum of 5 lines, but you get the picture.
</p>
<div class="hiders">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
You need a container, and position the .typing element and the .hiders using absolute so that they're on top of each other:
.container {
position: relative;
font-family: Consolas, monospace;
}
.typing {
position: absolute;
top: 0;
margin: 0;
z-index: -1;
}
.hiders {
margin: 0;
position: absolute;
top: 0;
width: 100%;
}
And the animation gets applied to each p inside the .hiders:
.hiders p {
position: relative;
clear: both;
margin: 0;
float: right; /* makes animation go left-to-right */
width:0; /* graceful degradation: if animation doesn't work, these are invisible by default */
background: white; /* same as page background */
animation: typing 2s steps(30, end);
animation-fill-mode: both; /* load first keyframe on page load, leave on last frame at end */
}
.hiders p:nth-child(2) {
animation-delay: 2s;
}
.hiders p:nth-child(3) {
animation-delay: 4s;
/* etc */
Here's the final fiddle:
https://jsfiddle.net/hjwp/514cLzxn/
Original credit for inspiration: Lea Verou