I'm struggling to understand why my H1 does not show up. It is covered by a div. The weird part is that the H1's parent div is visible if I change background color to something else than transparent.
Input tag inside the same div is always visible as well. Only H1 is problematic.
Here is the link to the code: H1 does not show up
And code HTML:
<!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>
</head>
<body>
<div class="outerContainer">
<div class="imageSlider">
<div class="overlayShadow"></div>
<div class="content">
<h1> Test </h1>
<input>
</div>
</div>
</div>
</body>
</html>
SCSS:
.outerContainer {
z-index: 1;
overflow: hidden;
height: 80vh;
.imageSlider {
z-index: -1;
height: 80vh;
position: relative;
margin-bottom: 20px;
background-position: center;
background-size: cover;
overflow: hidden;
background-image: url('https://tinypng.com/images/social/website.jpg');
animation: mymove 7s cubic-bezier(0,1,0,.5)infinite;
transform: scale(1.5,1.5);
.overlayShadow {
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
background-color: #000;
animation: darken 7s cubic-bezier(0,1,1,.8) infinite;
}
}
}
#-webkit-keyframes mymove {
0% {
top: 0px;
}
100% {
top: -70px;
}
}
#keyframes mymove {
0% {
top: 0px;
}
100% {
top: -70px;
}
}
#-webkit-keyframes darken {
0% {
opacity: 1;
}
26% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes darken {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.content {
z-index: 1 !important;
position: absolute !important;
height: 300px !important;
top: 50% !important;
width: 100% !important;
margin: 0 auto !important;
h1 {
font-size: 24px !important;
display: inline-block !important;
z-index: 999 !important;
font-size: 14px !important;
line-height: 1.43 !important;
color: #484848 !important;
}
}
Can anyone help me to understand why this is happening? Much appreciate it.
It's because .outerContainer .imageSlider is more bigger than it's parent (.outerContainer). So it is outside of outerContainer and parent has overflow: hidden .
You can overcome this by add transform-origin for .outerContainer .imageSlider .
Like this
.outerContainer .imageSlider {
transform-origin: left center;
}
Here is the working Snippet
.outerContainer {
z-index: 1;
overflow: hidden;
height: 80vh;
}
.imageSlider {
z-index: -1;
height: 80vh;
position: relative;
margin-bottom: 20px;
background-position: center;
background-size: cover;
overflow: hidden;
background-image: url('https://tinypng.com/images/social/website.jpg');
animation: mymove 7s cubic-bezier(0, 1, 0, .5)infinite;
transform: scale(1.5, 1.5);
transform-origin: left center;
}
.overlayShadow {
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
background-color: #000;
animation: darken 7s cubic-bezier(0, 1, 1, .8) infinite;
}
#-webkit-keyframes mymove {
0% {
top: 0px;
}
100% {
top: -70px;
}
}
#keyframes mymove {
0% {
top: 0px;
}
100% {
top: -70px;
}
}
#-webkit-keyframes darken {
0% {
opacity: 1;
}
26% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes darken {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.content {
z-index: 1 !important;
position: absolute !important;
height: 300px !important;
top: 50% !important;
width: 100% !important;
margin: 0 auto !important;
}
h1 {
font-size: 24px !important;
display: inline-block !important;
z-index: 999 !important;
font-size: 14px !important;
line-height: 1.43 !important;
color: #484848 !important;
}
<div class="outerContainer">
<div class="imageSlider">
<div class="overlayShadow"></div>
<div class="content">
<h1> Test </h1>
<input>
</div>
</div>
</div>
The issue is the transform: scale on .imageslider, the content is exceeding the width of its parent. Then also having overflow: hidden; is trimming anything outside the element.
Try this.
.outerContainer {
z-index: 1;
overflow: hidden;
height: 80vh;
}
.imageSlider {
z-index: -1;
height: 80vh;
position: relative;
margin-bottom: 20px;
background-position: center;
background-size: cover;
overflow: hidden;
background-image: url('https://tinypng.com/images/social/website.jpg');
animation: mymove 7s cubic-bezier(0,1,0,.5)infinite;
transform: scale(1.5,1.5);
}
.overlayShadow {
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
background-color: #000;
animation: darken 7s cubic-bezier(0,1,1,.8) infinite;
}
}
}
#-webkit-keyframes mymove {
0% {
top: 0px;
}
100% {
top: -70px;
}
}
#keyframes mymove {
0% {
top: 0px;
}
100% {
top: -70px;
}
}
#-webkit-keyframes darken {
0% {
opacity: 1;
}
26% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes darken {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.content {
z-index: 9999 !important;
position: absolute !important;
height: 300px !important;
top: 50%;
width: 100% !important;
margin: 0 auto !important;
left: 50%;
right: 50%;
}
h1 {
font-size: 24px !important;
display: inline-block !important;
z-index: 999 !important;
font-size: 14px !important;
line-height: 1.43 !important;
color: #484848 !important;
}
}
<!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>
</head>
<body>
<div class="outerContainer">
<div class="imageSlider">
<div class="overlayShadow"></div>
<div class="content">
<h1>
Test
</h1>
<input>
</div>
</div>
</div>
</body>
</html>
Related
I'm trying to make an animation for a webpage I'm tinkering with at the moment. I want the animation of a ball to start from the bottom of the screen, go to the middle, then expand to the whole page. I'm having a problem when it comes to the expanding part. When it expands since I'm using transform: scale it expands beyond the width and height of the viewport causing me to scroll. How is it possible to make it fit into the viewport and not having to scroll. I tried putting it in a container and putting overflow:hidden but it doesn't seem to work. Here is my code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ballcopy.css">
<meta name="veiwport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<div class="ball"></div>
</main>
</body>
</html>
*, *::after, *::before {box-sizing: inherit;}
html{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
}
.ball{
background-color: #eb8c28;
width: 100px;
height: 100px;
border-radius: 0%;
position: absolute;
bottom: 0%;
left: 50%;
animation: rise;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes rise{
0%{
border-radius: 50%;
}
50%{
border-radius: 50%;
transform:translateY(-400px);
}
75%{
border-radius: 40%;
}
80%{
border-radius: 30%;
}
90%{
border-radius:20%;
}
100%{
transform: scale(20,20);
}
}
```
body{
height: 100vh;
width: 100vw;
overflow: hidden;
}
this fixes it so that your animation doesn't overflow and make you scroll.
For overflow: hidden to work on main you need to set position: relative and a height:
*,
*::after,
*::before {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
main {
position: relative;
height: 100vh;
overflow: hidden;
}
.ball {
background-color: #eb8c28;
width: 100px;
height: 100px;
border-radius: 0%;
position: absolute;
bottom: 0%;
left: 50%;
animation: rise;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes rise {
0% {
border-radius: 50%;
}
50% {
border-radius: 50%;
transform: translateY(-100%);
}
75% {
border-radius: 40%;
}
80% {
border-radius: 30%;
}
90% {
border-radius: 20%;
}
100% {
transform: scale(20, 20);
}
}
<main>
<div class="ball"></div>
</main>
Or you could set overflow: hidden on the body:
*,
*::after,
*::before {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.ball {
background-color: #eb8c28;
width: 100px;
height: 100px;
border-radius: 0%;
position: absolute;
bottom: 0%;
left: 50%;
animation: rise;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes rise {
0% {
border-radius: 50%;
}
50% {
border-radius: 50%;
transform: translateY(-100%);
}
75% {
border-radius: 40%;
}
80% {
border-radius: 30%;
}
90% {
border-radius: 20%;
}
100% {
transform: scale(20, 20);
}
}
<main>
<div class="ball"></div>
</main>
Also, it's a good idea to set transform: translateY to a relative value so it's scalable to different screen-sizes as well, i.e. transform: translateY(-100%)
So I'm using three different texts and the first class .item-1 seems to be positioned properly but the second one goes slightly lower and the third one is way off at the bottom. I used the "margin-top" to get it centered but I feel like this isn't the best practice.
What are some ways to get them centered no matter what?
.divider3 {
background-image: url("images/people.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #b6b6b6;
height: 300px;
margin: 0 auto;
}
.divider3 p {
color: #FFFFFF;
font-size: 20px;
text-align: center;
line-height: 25px;
letter-spacing: 1px;
padding-top: 8%;
}
.item-1, .item-2, .item-3 {
position: relative;
display: inline-block;
width: 50%;
font-size: 6em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1 {
animation-name: anim-1;
margin-top: -1%;
}
.item-2 {
animation-name: anim-2;
margin-top: -12%;
}
.item-3 {
animation-name: anim-3;
margin-top: -13%;
}
#keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 25%; opacity: 1; }
33.33%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 25%; opacity: 1; }
66.66%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
<div class="divider3">
<p class="item-1">"Super fast service and clean environment!" <br /> - John Anderson, GA</p>
<p class="item-2">"Plans have changed and I had to have a conference room within an hour and ThanksOffice was perfect for it!" <br /> - Ashley Green, CA</p>
<p class="item-3">"Very professional and satisfies every need." <br /> - Sam Smith, NJ</p>
</div>
You can use position:absolute on the p elements and use a vertical centering solution which involves using top:50% and transform:translateY(-50%). This means you don't have to add a unique margin-top to every p element.
I also added position:relative to the .divider3 element so the p tags are positioned relative to that container.
NOTE: I noticed in another answer you said you don't want to use position:absolute. You will have to use position:absolute to take the element out of the natural document flow. Otherwise using position:relative the p tags will stack on top of each other and you will be constantly battling with CSS to adjust their vertical positioning. The more p tags you add it will get progressively harder to compensate for their vertical positioning, because they will get pushed further and further down the page.
.divider3 {
background-image: url("images/people.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #b6b6b6;
height: 300px;
margin: 0 auto;
position:relative;
overflow:hidden;
}
.divider3 p {
color: #FFFFFF;
font-size: 20px;
text-align: center;
line-height: 25px;
letter-spacing: 1px;
top:50%;
transform:translateY(-50%);
margin:0;
}
.item-1, .item-2, .item-3 {
position: absolute;
display: inline-block;
width: 50%;
font-size: 6em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1 {
animation-name: anim-1;
}
.item-2 {
animation-name: anim-2;
}
.item-3 {
animation-name: anim-3;
}
#keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 25%; opacity: 1; }
33.33%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 25%; opacity: 1; }
66.66%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
<div class="divider3">
<p class="item-1">"Super fast service and clean environment!" <br /> - John Anderson, GA</p>
<p class="item-2">"Plans have changed and I had to have a conference room within an hour and ThanksOffice was perfect for it!" <br /> - Ashley Green, CA</p>
<p class="item-3">"Very professional and satisfies every need." <br /> - Sam Smith, NJ</p>
</div>
These all are paragraphs, so they're appearing just below the preceding one.
You can change their position to be absolute.
I don't know why margin-top isn't working, so I removed them.
The code in action is this:
.divider3 {
background-image: url("images/people.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #b6b6b6;
height: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.divider3 p {
color: #FFFFFF;
font-size: 20px;
text-align: center;
line-height: 25px;
letter-spacing: 1px;
padding-top: 8%;
}
.item-1, .item-2, .item-3 {
position: absolute;
display: inline-block;
width: 50%;
font-size: 6em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1 {
animation-name: anim-1;
}
.item-2 {
animation-name: anim-2;
}
.item-3 {
animation-name: anim-3;
}
#keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 25%; opacity: 1; }
33.33%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 25%; opacity: 1; }
66.66%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
<div class="divider3">
<p class="item-1">"Super fast service and clean environment!" <br /> - John Anderson, GA</p>
<p class="item-2">"Plans have changed and I had to have a conference room within an hour and ThanksOffice was perfect for it!" <br /> - Ashley Green, CA</p>
<p class="item-3">"Very professional and satisfies every need." <br /> - Sam Smith, NJ</p>
</div>
.divider3 {
background-image: url("images/people.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #b6b6b6;
height: 300px;
margin: 0 auto;
}
.divider3 p {
color: #FFFFFF;
font-size: 20px;
text-align: center;
line-height: 25px;
letter-spacing: 1px;
padding-top: 8%;
position: absolute;
top: 5em;
}
.item-1, .item-2, .item-3 {
position: relative;
display: inline-block;
width: 50%;
font-size: 6em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1 {
animation-name: anim-1;
}
.item-2 {
animation-name: anim-2;
}
.item-3 {
animation-name: anim-3;
}
#keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 25%; opacity: 1; }
33.33%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 25%; opacity: 1; }
66.66%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
I have the following HTML/CSS code and I have an issue to center the content inside a flex container. The result is :
In my mind, I would like to center the ring inside the flex container AND center the text (temperature) and the CSS animation (arrow) just after the temperature inside the ring animation.
How to do this?
body {
background-color: #0d74ff;
}
.container {
padding: 20px;
}
.flexwrap {
display: flex;
flex-wrap: wrap;
}
.cell {
position: relative;
height: 200px;
width: 200px;
border: 1px solid rgba(0, 0, 0, 0.25);
}
.loader-ring {
width: 150px;
height: 150px;
}
.loader-ring-light {
width: 150px;
height: 150px;
border-radius: 150px;
box-shadow: 0 4px 0 #ffffff inset;
animation: rotate-360 6s linear infinite;
}
.loader-text {
font-weight: bold;
font-size: 2em;
}
.scroll-down {
border: 2px solid #fff;
border-radius: 100px;
width: 30px;
height: 30px;
}
.scroll-down i {
display: block;
border-radius: 100px;
transition: all 0.4s ease;
width: 100%;
height: 100%;
background-size: 0 auto;
animation: pulse 1.5s 0s infinite normal ease forwards;
background-image: url("https://jamesmuspratt.com/codepen/img/arrow-down.svg");
background-repeat: no-repeat;
}
#keyframes rotate-360 {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#keyframes pulse {
0% {
opacity: 0;
background-position: center top;
background-size: 0 auto;
}
10% {
opacity: 0;
}
50% {
opacity: 1;
background-size: 75% auto;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
background-position: center bottom;
background-size: 0 auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="container">
<div class="flexwrap">
<div class="cell">
<div class='loader-ring'>
<div class='loader-ring-light'></div>
<div class='loader-ring-track'>
<div class='loader-text'>26.6°</div>
<div class="scroll-down"><i></i></div>
</div>
</div>
</div>
</div>
</div>
You don't need so many blocks here. You need absolute positioning because elements will need to stack on each other. Also for centering absolutely positioned elements you need this styles
.loader-ring,
.loader-ring-track {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Demo:
body {
background-color: #0d74ff;
}
.container {
padding: 20px;
}
.cell {
position: relative;
height: 200px;
width: 200px;
border: 1px solid rgba(0, 0, 0, 0.25);
}
/* center absolutely positioned items */
/* both vertically and horizontally */
.loader-ring,
.loader-ring-track {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loader-ring-track {
display: flex; /* new */
}
.loader-ring {
width: 150px;
height: 150px;
}
.loader-ring-light {
width: 150px;
height: 150px;
border-radius: 150px;
box-shadow: 0 4px 0 #ffffff inset;
animation: rotate-360 6s linear infinite;
}
.loader-text {
font-weight: bold;
font-size: 2em;
}
.scroll-down {
border: 2px solid #fff;
border-radius: 100px;
width: 30px;
height: 30px;
}
.scroll-down i {
display: block;
border-radius: 100px;
transition: all 0.4s ease;
width: 100%;
height: 100%;
background-size: 0 auto;
animation: pulse 1.5s 0s infinite normal ease forwards;
background-image: url("https://jamesmuspratt.com/codepen/img/arrow-down.svg");
background-repeat: no-repeat;
}
#keyframes rotate-360 {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#keyframes pulse {
0% {
opacity: 0;
background-position: center top;
background-size: 0 auto;
}
10% {
opacity: 0;
}
50% {
opacity: 1;
background-size: 75% auto;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
background-position: center bottom;
background-size: 0 auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="cell">
<div class='loader-ring'>
<div class='loader-ring-light'></div>
<div class='loader-ring-track'>
<div class='loader-text'>26.6°</div>
<div class="scroll-down"><i></i></div>
</div>
</div>
</div>
So I have just started to learn HTML/CSS and I am trying to create a website for a magazine I'm putting together. However, when I try adding two links to two different pieces of text, one is only partially clickable and the one below is not.
I am thinking it has something to do with my wrapper or the photos I have right beside the text because when I align them more right, they're now clickable. Seems to be like something is blocking part of the word (link) to be clicked on.
I have tried making a sidebar instead but I still get the same result. I tried moving my code around for different results, but still cannot figure it out.
#wrapper {
margin: 0 auto;
width: 1140px;
}
.slider {
max-width: 457px;
height: 451px;
margin: 0 auto;
position: relative;
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(TPWeb.jpg)no-repeat center;
background-size: cover;
animation: fade 80s infinite;
-webkit-animation: fade 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide2 {
background: url(DS.jpg)no-repeat center;
background-size: cover;
animation: fade2 80s infinite;
-webkit-animation: fade2 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide3 {
background: url(IT95Web.jpg)no-repeat center;
background-size: cover;
animation: fade3 80s infinite;
-webkit-animation: fade3 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
#font-face {
font-family:
}
#keyframes fade1 {
0% {
opacity: 1
}
33.333% {
opacity: 0
}
66.666% {
opacity: 0
}
100% {
opacity: 1
}
}
#keyframes fade2 {
0% {
opacity: 0
}
33.333% {
opacity: 1
}
66.666% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes fade3 {
0% {
opacity: 0
}
33.333% {
opacity: 0
}
66.666% {
opacity: 1
}
100% {
opacity: 0
}
}
}
.TPWeb {
margin-top: 80px;
margin-left: 50px;
}
.DFBase1 {
margin-top: 45px;
margin-left: 183px;
width: 448px;
height: 127px;
}
.ATA {
margin-right: 305px;
margin-top: -475px;
font-family:
}
.B {
margin-right: 370px;
font-family:
}
.about {
color: #000;
text-decoration: none;
}
.blog {
color: #000;
text-decoration: none;
}
<div id="wrapper">
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
<img src="DFBase1.png" alt="DFBase" class=DFBase1>
<div align="right" class=ATA>
<font size="5"><em><b>about the author</b></em></font>
</div>
<div align="right" class=B>
<font size="5"><em><b>blog</b></em></font>
</div>
</div>
.slider is overlapping the links since you're using a negative margin to move the links back up on the page.
A simple fix is to give the links a z-index by assigning position: relative
.ATA, .B {
position: relative;
}
#wrapper {
margin: 0 auto;
width: 1140px;
}
.slider {
max-width: 457px;
height: 451px;
margin: 0 auto;
position: relative;
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(TPWeb.jpg)no-repeat center;
background-size: cover;
animation: fade 80s infinite;
-webkit-animation: fade 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide2 {
background: url(DS.jpg)no-repeat center;
background-size: cover;
animation: fade2 80s infinite;
-webkit-animation: fade2 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide3 {
background: url(IT95Web.jpg)no-repeat center;
background-size: cover;
animation: fade3 80s infinite;
-webkit-animation: fade3 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
#font-face {
font-family:
}
#keyframes fade1 {
0% {
opacity: 1
}
33.333% {
opacity: 0
}
66.666% {
opacity: 0
}
100% {
opacity: 1
}
}
#keyframes fade2 {
0% {
opacity: 0
}
33.333% {
opacity: 1
}
66.666% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes fade3 {
0% {
opacity: 0
}
33.333% {
opacity: 0
}
66.666% {
opacity: 1
}
100% {
opacity: 0
}
}
}
.TPWeb {
margin-top: 80px;
margin-left: 50px;
}
.DFBase1 {
margin-top: 45px;
margin-left: 183px;
width: 448px;
height: 127px;
}
.ATA {
margin-right: 305px;
margin-top: -475px;
font-family:
}
.B {
margin-right: 370px;
font-family:
}
.about {
color: #000;
text-decoration: none;
}
.blog {
color: #000;
text-decoration: none;
}
<div id="wrapper">
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
<img src="DFBase1.png" alt="DFBase" class=DFBase1>
<div align="right" class=ATA>
<font size="5"><em><b>about the author</b></em></font>
</div>
<div align="right" class=B>
<font size="5"><em><b>blog</b></em></font>
</div>
</div>
Hello I have a little web page and my problem is that 1 div cuts out a part of my second div:
As you can see the 3 gets cut I think its a CSS Problem but I don't know where...
HTML(just the part with the 2 divs):
* {
cursor: none !important;
overflow: hidden;
}
.number {
height: 60%;
width: 100%;
z-index: 2;
margin: 0;
padding: 0;
text-align: center;
}
h1 {
font-size: 500pt;
margin: 0;
padding:0 background-color: transparent;
}
p {
font-size: 70pt;
margin: 0;
padding: 0;
}
.names {
position: relative;
bottom: 0;
left: 0;
z-index: -1;
margin: 0;
padding: 0;
background-color: rgba(255,255,255,0);
width: 400px;
height: 40%;
text-align: center;
}
body {
background-color: black;
color: white;
font-family: arial;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.lauftext {
height: 100%;
font-size: 70pt;
}
#keyframes marquee {
0% {
text-indent: 100%
}
100% {
text-indent: -100%
}
}
#-webkit-keyframes marquee {
0% {
text-indent: 100%
}
100% {
text-indent: -100%
}
}
.lauftextdiv {
height: 100%;
}
.lauftext {
height: 200pt;
position: absolute;
font-size: 200pt;
top: 50%;
width: 100%;
margin: auto;
padding: 2px;
overflow: hidden;
white-space: nowrap;
animation: marquee 7s linear infinite;
webkit-animation: marquee 7s linear infinite;
}
#keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
#-o-keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
#-moz-keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
#-webkit-keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
.number_full {
text-align: center;
animation: rotate 7s linear infinite;
-webkit-animation: rotate 7s linear infinite;
-o-animation: rotate 7s linear infinite;
-moz-animation: rotate 7s linear infinite;
}
.number_full h1 {
text-shadow: 0 0 100px #777;
transform: rotateX(20deg);
padding: 100px;
font-size: 600pt;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width" , inital-scale=1.0>
<link rel="stylesheet" href="../layouts/style.css">
<script src="../reload.js"></script>
<title>3</title>
</head>
<body>
<div class="number">
<h1>3</h1>
</div>
<div class="names"> Marc
...
</div>
</body>
</html>
I guess you should add a position property to the .number too. And try to remove the height property, or set it to 100%.
.number {
position: relative;
z-index: 2;
height: 60%;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
* {
cursor: none !important;
overflow: hidden;
}
.number {
width: 100%;
z-index: 2;
margin: 0;
padding: 0;
text-align: center;
}
h1 {
font-size: 300pt;
margin:0;
padding:0
background-color: transparent;
}
p {
font-size: 70pt;
margin: 0;
padding: 0;
}
.names {
position: relative;
bottom: 0;
left: 0;
z-index: -1;
margin: 0;
padding: 0;
background-color: rgba(255,255,255,0);
width: 400px;
height: 40%;
text-align: center;
}
body {
background-color: black;
color: white;
font-family: arial;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.lauftext {
height: 100%;
font-size: 70pt;
}
#keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: -100% }
}
#-webkit-keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: -100% }
}
.lauftextdiv {
height: 100%;
}
.lauftext {
height: 200pt;
position: absolute;
font-size: 200pt;
top: 50%;
width: 100%;
margin: auto;
padding: 2px;
overflow: hidden;
white-space: nowrap;
animation: marquee 7s linear infinite;
webkit-animation: marquee 7s linear infinite;
}
#keyframes rotate {
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}
#-o-keyframes rotate {
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}
#-moz-keyframes rotate {
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}
#-webkit-keyframes rotate {
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}
.number_full {
text-align: center;
animation: rotate 7s linear infinite;
-webkit-animation: rotate 7s linear infinite;
-o-animation: rotate 7s linear infinite;
-moz-animation: rotate 7s linear infinite;
}
.number_full h1 {
text-shadow: 0 0 100px #777;
transform: rotateX(20deg);
padding: 100px;
font-size: 600pt;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width" , inital-scale=1.0>
<link rel="stylesheet" href="../layouts/style.css">
<script src="../reload.js"></script>
<title>3</title>
</head>
<body>
<div class="number">
<h1>3</h1>
</div>
<div class="names">
Marc
...
</div>
</body>
</html>
Your missing a closing tag on your h1, it should be.
<div class="number">
<h1>3</h1>
</div>
The number is not cut off by the other div, it is cut off by:
.number {height: 60%;}
Change this to:
.number {height: 100%;}
This will fix it. If you need to have the height at 60%, you have to make the overflow visible with:
.number {height: 60%; overflow:visible;}
Change this part of the CSS
overflow: visible;
* {
cursor: none !important;
overflow: visible;
}