Okay so I have been trying everything I can think of to get this div to stay where it is on any browser and I thought I would turn to you wonderful people to try to help me (I am sure its an easy fix that I have overlooked)
No matter what I do it seems to mess things up elsewhere.
I have tried to put all divs (and the body) into fixed position (and this seems to have worked to an extent)
I have also tried to make the whole page flex in the hope that if I allow flex to work then it will flex around the offending items.
I have literally spent 2 days bashing my head against a wall with this and I could really use another set of eyes on my code to show me where I am going wrong.
Thankyou so much for your responses
I have updated my code to now run without images and with colours instead. I have managed to sort some of the issues out I was having but now when I move the page from bottom up the blue door shrinks
#opening {
background-color: red;
min-width: 100%;
max-width: 100%;
max-height: 100%;
min-height: 100%;
margin-left: 0;
margin-right: 0;
background-attachment: fixed;
}
.wrap {
background-color: purple;
background-position: fixed;
min-height: 140px;
max-height: 140px;
max-width: 360px;
min-width: 360px;
color: #fff;
position: fixed;
margin: 20vh;
margin-left: 42%;
padding: 30% 2% 0% 0%;
}
div.left {
background-color: blue;
text-align: center;
max-width: 34vh;
max-height: 62vh;
min-width: 34vh;
min-height: 62vh;
/* background-image:url("door.png") ; */
background-position: fixed;
background-repeat: no-repeat;
margin-left: 42.1%;
margin-top: 12.5%;
animation-name: open-left;
animation-duration: 10s;
animation-easing-function: cubic-bezier(.06, .63, 0, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: 10s;
position: fixed;
top: 0;
left: 0;
}
#-webkit-keyframes open-left {
from {
-webkit-transform: perspective(500) rotateY(0deg);
-webkit-transform-origin: 0% 20%;
}
to {
-webkit-transform: perspective(500) rotateY(89deg);
-webkit-transform-origin: 0% 20%;
}
}
button {
background-color: #000000;
max-width: 70%;
max-height: 20;
border: white;
border-style: double;
color: white;
text-align: center;
text-overflow: unset;
font-size: 20px;
margin-left: 1%;
}
<body id="opening">
<div class="wrap">
<span class="animated rubberBand infinite">
<div>
<div>
<button onclick="location.href = 'https://www.google.com';"class="button"> And the Gunslinger followed </button>
</div>
</div>
</span>
<div class="left">
</div>
</div>
</body>
this gives me an output of this on a full screen
Full size page, no shrink
and this is the output when I shrink the screen to the left
Div position moves
Is this what you are after?
html,
body {
display: flex;
background: #000 url('https://keiraj87.github.io/website/backg.png') top center no-repeat;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#door-wrap {
height: 295px;
width: 175px;
margin: 150px auto 0 auto;
perspective: 420px;
transform-style: preserve-3d;
}
#door {
height: 100%;
width: 100%;
background: url('https://keiraj87.github.io/website/door.png') top center no-repeat;
background-size: 175px;
animation: open-left 10s cubic-bezier(.06, .63, 0, 1) 0s 1 forwards;
margin-left: -88px;
}
#keyframes open-left {
from {
transform: rotateY(0deg) translateX(88px);
}
to {
transform: rotateY(-85deg) translateX(88px);
}
}
<div id="door-wrap">
<div id="door">
</div>
</div>
Related
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 1 year ago.
So, I was trying to add a border animation to my webpage but it was not working. After lot of testing, I discovered that a specific class wrapper was responsible for removing my animation and omitting it solves the problem?
But I am unable to understand the reason behind as it looks unsuspecting. By the way, I am new to HTMl, CSS.
.wrapper {
position: relative;
width: 100%;
max-width: 1366px;
margin: 0 auto;
background: #ffffff;
}
#box {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 200px;
color: white;
font-family: 'Raleway';
font-size: 2.5rem;
}
.gradient-border {
--borderWidth: 3px;
background: #1D1F20;
position: relative;
border-radius: var(--borderWidth);
}
.gradient-border:after {
content: '';
position: absolute;
top: calc(-2 * var(--borderWidth));
left: calc(-2 * var(--borderWidth));
height: calc(100% + var(--borderWidth) * 4);
width: calc(100% + var(--borderWidth) * 4);
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
border-radius: calc(2 * var(--borderWidth));
z-index: -1;
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
}
#keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<div class="wrapper">
<div class="gradient-border" id="box">This is my box</div>
</div>
The problem is because the wrapper is actually extending out to the right and is over the top of your border. If you set your wrapper background to 'red' you will see what is happening.
And because you have the z-index of the border set to -1, the wrapper is sitting on top of the border. Easiest fix is to just set the wrapper z-index to -2 so it's behind the border.
.wrapper {
position: relative;
width: 100%;
max-width: 1366px;
margin: 0 auto;
background: #ffffff;
z-index: -2;
}
#box {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 200px;
color: white;
font-family: 'Raleway';
font-size: 2.5rem;
}
.gradient-border {
--borderWidth: 3px;
background: #1D1F20;
position: relative;
border-radius: var(--borderWidth);
}
.gradient-border:after {
content: '';
position: absolute;
top: calc(-2 * var(--borderWidth));
left: calc(-2 * var(--borderWidth));
height: calc(100% + var(--borderWidth) * 4);
width: calc(100% + var(--borderWidth) * 4);
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
border-radius: calc(2 * var(--borderWidth));
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
z-index: -2;
}
#keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<div class="wrapper">
<div class="gradient-border" id="box">This is my box</div>
</div>
I am attempting to develop a website to better my web development understanding and have run into an issue implementing a website. I am struggling figuring out how to neatly center my slideshow I have implemented for the home screen so i can develop my header, footer and nav bar around it. Any help on this end would be greatly appreciated. the HTML code used looks like this.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0px;
}
slider {
display: block;
width: 1280px;
height: 50%;
background-color: #1f1f1f;
overflow: hidden;
position: absolute;
margin: 0px auto;
}
slider>* {
position: absolute;
display: block;
width: 50%;
height: 50%;
background: #1f1f1f;
animation: slide 12s infinite;
overflow: hidden;
margin: 0px auto;
}
slide:nth-child(1) {
left: 0%;
animation-delay: -1s;
background-image: url(1.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(2) {
animation-delay: 2s;
background-image: url(2.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(3) {
animation-delay: 5s;
background-image: url(3.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(4) {
left: 0%;
animation-delay: 8s;
background-image: url(4.jpg);
background-size: cover;
background-position: center;
}
slide p {
font-family: Comfortaa;
font-size: 70px;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: #fff;
}
#keyframes slide {
0% {
left: 100%;
width: 100%;
}
5% {
left: 0%;
}
25% {
left: 0%;
}
30% {
left: 0%;
}
30.0001% {
left: -100%;
width: 0%;
}
100% {
left: 100%;
width: 0%;
}
}
<slider>
<slide>
<p>Slide 1</p>
</slide>
<slide>
<p>Slide 2</p>
</slide>
<slide>
<p>Slide 3</p>
</slide>
<slide>
<p>Slide 4</p>
</slide>
</slider>
As far as I understand, you want to center the slider in the body. If so, you need to change absolute by relative of position of slider.
slider {
display: block;
width: 1280px;
height: 50%;
background-color: #1f1f1f;
overflow: hidden;
position: relative;
margin: 0px auto;
}
You can center-align the slider by many ways. Like using the center tag although it is not recommended.
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
You can change your css code to this:
slider {
display: block;
margin-left: auto;
margin-right: auto;
// margin: 0 auto;
}
Or you can enclose slider in a div and add text-align: center to the div (aka wrapper or container) and add display: inline-block to slider
If you want to keep your position: absolute, then you can write your css like this.
slider {
position: absolute;
left: 50%;
margin-left: 640px; //half of the width
// you can also use:
// transform: translate(-50%, 0px);
// instead of margin-left
}
Also see these two for more ways and explanation:
https://www.w3schools.com/css/css_align.asp
https://www.freecodecamp.org/news/how-to-center-things-with-style-in-css-dc87b7542689/
I have a problem: I made a slidebar that shows the pictures. Now I want to continue underneath by putting text and other things on the page, but if I try to just insert a text below, for example, the text will not be written under the slideshow but under the slideshow.
Here is the code I hope you can help me.
div.slider {
display: flex;
width: 92%;
height: 750px;
margin-bottom: 20px;
margin-left: 4%;
margin-right: 4%;
margin-top: 20px;
background-color: #1f1f1f;
overflow: hidden;
position: absolute;
}
div.slider > * {
position: absolute;
display: flex;
widows: 100%;
height: 100%;
background: #1f1f1f;
animation: slide 12s infinite;
overflow: hidden;
}
div.slide:nth-child(1) {
left: 0%;
animation-delay: -1s;
background-image: url(https://wowslider.com/sliders/demo-7/data/images/amsterdam.jpg);
background-size: cover;
background-position: center;
}
div.slide:nth-child(2) {
left: 100%;
animation-delay: 2s;
background-image: url(https://wowslider.com/sliders/demo-7/data/images/barpark.jpg);
background-size: cover;
background-position: center;
}
div.slide:nth-child(3) {
left: 100%;
animation-delay: 5s;
background-image: url(https://wowslider.com/sliders/demo-7/data/images/florence.jpg);
background-size: cover;
background-position: center;
}
div.slide:nth-child(4) {
left: 100%;
animation-delay: 8s;
background-image: url(https://wowslider.com/sliders/demo-7/data/images/gate.jpg);
background-size: cover;
background-position: center;
}
div.slide p {
font-size: 70px;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: #fff
}
#keyframes slide {
0% { left: 100%; width: 100%;}
5% { left: 0%;}
25% { left: 0%;}
30% { left: -100%; width: 100%;}
30.0001% { left: -100%; width: 0%;}
100% { left: 100%; width: 0%;}
}
<html>
<body>
<div class="slider">
<div class="slide"><p>Slide1</p></div>
<div class="slide"><p>Slide2</p></div>
<div class="slide"><p>Slide3</p></div>
<div class="slide"><p>Slide4</p></div>
</div>
<div>
<p>Text that should appear under the slideshow.</p>
</div>
</body>
</html>
Change position of div.slider to relative
I am trying to make a sort of Venn-Diagram that is going to be used for navigation later.
I have three intersecting ellipsoids created with CSS shapes. Each ellipsoid, as well as their two intersections, will be distinct links later on. Also, when you hover over them they should pop out as per transform: scale(1.3).
My issue is that I'm using ellipsoids which are partially transparent with :after to create the intersections, which creates a problem when hovering over them because the :hover condition gets triggered when hovering anywhere on the partially transparent ellipsoid and not just the :after part. This means that the nonintersecting areas are not hoverable because they are obstructed by the other invisible ellipsoid.
I think the example will make this clearer.
Here is the code:
CSS:
.venn-container{position: relative; left: 0;}
.cat_one{
width: 400px;
height: 200px;
background: red;
border-radius: 200px / 100px;
position: absolute;
float: left;
opacity: 0.5;
}
.cat_two{
width: 400px;
height: 200px;
background: green;
border-radius: 200px / 100px;
position: absolute;
float: left;
left: 240px;
opacity: 0.5;
}
.cat_three{
width: 400px;
height: 200px;
background: blue;
border-radius: 200px / 100px;
position: absolute;
float: left;
left: 480px;
opacity: 0.5;
}
.int1{
background: transparent;
width: 400px;
height: 200px;
border-radius: 200px / 100px;
position: relative;
opacity: 0.5;
overflow: hidden;
float: left;
}
.int1:after{
background: black;
position: absolute;
content: '';
border-radius: 200px / 100px;
width: 400px;
height: 200px;
left: 240px;
}
.int1:hover{
transform: scale(1.3);
left: -35px;
}
.int2{
background: transparent;
width: 400px;
height: 200px;
border-radius: 200px / 100px;
position: relative;
opacity: 0.5;
overflow: hidden;
float: left;
left: 80px;
}
.int2:after{
background: black;
position: absolute;
content: '';
border-radius: 200px / 100px;
width: 400px;
height: 200px;
left: -240px;
}
.int2:hover{
transform: scale(1.3);
left: 115px;
}
HTML:
<div class="venn-container">
<div class="cat_one"></div>
<div class="cat_two"></div>
<div class="cat_three"></div>
<div class="int1"></div>
<div class="int2"></div>
</div>
And here is a fiddle: https://jsfiddle.net/y3Lvmuqg/2/
I would like the :hover to only get triggered in the intersections, and later make cat_one and cat_two hoverable outside the intersections.
I don't know if there is a way I'm doing this is the best and I'm open to suggestions.
Thanks for getting back to me #ge0rg I spent about an hour fiddling with CSS and HTML and came up with this code using just divs with background colors, hover events and border radius's (along with a few z-index and positioning techniques).
Hope you enjoy your reworked venn diagram...
You may have to mess around with the size, and definetly will have to mess with the positioning (however they're all inside a div and so it makes it so that you can just position the div and the rest will happen magically) I added a background color to the div just to show that nothing was transparent, and I also added a always on top function for viewing a section, and I hope you enjoy!
.Venn {
background: linear-gradient(to bottom right, blue, lightblue);
}
.d1:hover, .d2:hover, .d3:hover {
color: #565656;
animation: top 2s steps(2, end) forwards;
-webkit-animation: top 2s steps(2, end) forwards;
box-shadow: 0px 0px 20px white;
}
.d1, .d2, .d3 {
overflow-wrap: break-word;
}
.d1 center, .d3 center {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.d1 {
padding: 10px;
width: 100px;
height: inherit;
z-index: 1;
position: absolute;
border-radius: 100%;
top: 0px;
}
.d3 {
padding: 10px;
width: 100px;
height: inherit;
z-index: 2;
position: absolute;
border-radius: 100%;
top: 0px;
left: 81px;
}
.d1:hover, .d3:hover {
transform: scale(1.05);
}
.d2 {
border-radius: 100% 0;
height: 90px;
width: 87.5px;
transform: rotate(-45deg) scale(.7);
position: absolute;
top: 15px;
left: 55.35px;
z-index: 3;
border: 1px solid black;
}
.d2b {
transform: rotate(45deg);
padding: 0;
margin: 0;
}
.d2b center {
position: relative;
left: 20px;
}
.d2:hover {
transform: rotate(-45deg);
}
.Venn {
height: 100px;
}
-webkit #keyframes top {
99% {
z-index: previous;
background-image: none;
}
100% {
z-index: 7;
}
}
#keyframes top {
99% {
z-index: previous;
background-image: none;
}
100% {
z-index: 7;
}
}
<div class="Venn" style="position: relative; left: 50px; width: 300px; height: 100px;">
<div class="d1" style=" background-color: grey;">
<center> 1 </center>
</div>
<div class="d2" style=" background-color: #AAAAAA;">
<div class="d2b" style="max-width: inherit;">
<center> 2 </center>
</div>
</div>
<div class="d3" style=" background-color: lightgrey;">
<center> 3 </center>
</div>
</div>
For those of you who would prefer a JSfiddle/ CodePen here you go a Codepen.
Hellow Guys,
I'm creating a loading animation with HTML and CSS. As I'm not really skilled in responsive front-end, I'm really struggling with making the text and the circle responsive.
What I really want is to attach the div with the background image and the text to the bar and make them responsive in order not to move and remain at the same position.
This is what I want to achieve:
Here's the code of what I have at the moment. I've tried attachment fixed and stuff like that, but the main problem is that the image keeps scaling when I use a max height/width and the text moves to the right depending on the width of the website.
Hope you can help me, thanks in advise.
body {
background: #111 url("");
background-size: 25vmin;
background-repeat: no-repeat;
background-position: center 40%;
height: 100vh;
margin: 0;
}
.logo {
background: url("https://openclipart.org/download/256338/whitecircle.svg");
background-size: 25vmin;
background-repeat: no-repeat;
position: absolute;
left: 28%;
bottom: 10vh;
height: 25vh;
width: 100px;
max-width: 150px;
}
h1 {
color: #fff;
position: absolute;
bottom: 20vh;
left: 35%;
}
.progress {
width: 400px;
max-width: 85vw;
height: 8px;
position: absolute;
bottom: 20vh;
left: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
overflow: hidden;
}
.progress:after {
content: '';
display: block;
width: 100%;
height: 8px;
background: #fff;
animation: load 5s linear;
}
#-moz-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-webkit-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-o-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="logo"> </div>
<h1 class="title"> Loading </h1>
<div class="progress"> </div>
What I normally do to make an item responsive and many parts need to work closely together is, create a container which holds all items that are related. Then within the container I align item using % so they scale nicely. The main container (in my example called loader) I use width and height using the vh and vw units.
Here's one way you can solve this. I've also replaced the SVG with a circle made using css. This way you don't need to load the image. It will make your page less resource heavy. Let me know if you specifically want to use the SVG and I can update the example.
NOTE: I added a light border to the loader div so you can see how it resized when you resize the window. Remove it when you copy it to your page.
body {
height: 100vh;
margin: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
position: relative;
height: 30vh;
width: 50vw;
min-width: 200px;
min-height: 100px;
border: 1px solid #444; // added to see the responsiveness
}
.circle {
width: 55px;
height: 55px;
bottom: calc(40% - 27.5px);
left: -2px;
position: absolute;
border: 5px solid white;
border-radius: 50%;
}
h1 {
color: #fff;
position: absolute;
left: 75px;
bottom: 32%;
}
.progress {
position: absolute;
width: calc(100% - 60px);
height: 8px;
bottom: 40%;
left: 60px;
background: rgba(255, 255, 255, 0.5);
overflow: hidden;
}
.progress:after {
content: '';
display: block;
width: 100%;
height: 8px;
background: #fff;
animation: load 5s linear;
}
#-moz-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-webkit-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-o-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="loader">
<!--<div class="logo"> </div>-->
<!--<img class="img-logo" src="https://openclipart.org/download/256338/whitecircle.svg">-->
<div class="circle"></div>
<h1 class="title">Loading</h1>
<div class="progress"></div>
</div>