CODEWITHSUNDEEP
htmlcss
WasteD
WasteD

Reputation: 778

HTML div cuts other div off

Hello I have a little web page and my problem is that 1 div cuts out a part of my second div:

enter image description here

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>

Upvotes: 1

Views: 2461

Answers (4)

Subash Matheswaran
Subash Matheswaran

Reputation: 215

Change this part of the CSS

overflow: visible;

* {
    cursor: none !important;
    overflow: visible;
}

Upvotes: 0

Wolf van Veen
Wolf van Veen

Reputation: 1

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;}

Upvotes: 0

Rahul
Rahul

Reputation: 842

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>

Upvotes: 1

user992731
user992731

Reputation: 3530

Your missing a closing tag on your h1, it should be.

<div class="number">
    <h1>3</h1>
</div>

Upvotes: 0

Related Questions