Menu
I have been making my own personal site with Animate.css and noticed there was a blank spot to the right and couldn't figure out why
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
.hudson {
color: white;
position: relative;
font-size: 60px;
left: 400px;
top: 110px;
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}
.threeD {
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.p1 {
position: relative;
top: 75px;
left: 100px;
-webkit-animation-delay: 1s;
}
.p2 {
position: relative;
top: 85px;
left: 100px;
-webkit-animation-delay: 1s;
}
.p3{
position: relative;
top: 95px;
left: 95px;
-webkit-animation-delay: 1s;
}
.coding {
position: relative;
top: -325px;
left: 535px;
}
.paracolor {
color: skyblue;
font-size: 25px;
font-family: Tahoma, Geneva, sans-serif;
}
.img1 {
position: relative;
top: 250px;
left: 20;
}
body {
background-image: url(PICTURES1/mountains4.jpeg);
background-size: 102%;
background-repeat: no-repeat;
}
</style>
</head>
<link rel=stylesheet href="CSS3/animate(1).css">
<body>
<h2 class="hudson threeD animated fadeInDown">Hudson Reamer</h2>
<p class="paracolor p1 animated fadeInRightBig">I am a young technology and coding enthusiast. I am currently studying HTML,CSS, and C++.</p>
<p class="paracolor p2 animated fadeInLeftBig">I hope to one day go to MIT or Stanford to study computor science of computor engineering.</p>
<p class="paracolor p3 animated fadeInRightBig">I will build people custom computors for an 100 dollar building fee and the price of the PC parts</p>
<img class="coding animated fadeInDown" src="PICTURES1/coding.png" style="width:150px;height:150px;">
</body>
Thank you for the help and responses!
303
HTML. Approach 2: We can also eliminate the extra space using the margin-top property. The margin-top property sets the top margin of an element. When we use margin-top we have to apply it on the tag, such that we have to eliminate extra space above it.
Whitespace (also called negative space) is the area between the elements on a web page (or physical page). These elements typically are images, typography, and icons. It is often used to balance elements on a page by creating a natural flow for the user to navigate through the content.
The large area of whitespace on the right of your page is caused by relative positioning.
You are applying position: relative to all your elements. Then you're shifting all of them to the right with left: 400px and left: 535px and left: 100px, etc. The left property defines how far to push the element from the left edge.
Also, when an element is relatively positioned, its original space is reserved. So while the elements are shifting rightward, they are also keeping their original spaces (even though they're not there anymore), and the document is being lengthened horizontally.
Remove all the left properties and see the difference. Everything shifts left and the horizontal scrollbar disappears. DEMO
I'm not sure what your layout objective is but, simply for contrast, here's an alternative to consider: Instead of relative try absolute positioning, which removes the elements from the document flow, so their original space is eliminated.
Here's a good reference from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/position
97
All your paragraph tags have are positioned left with 'x' amount of pixels
example
p1 from left position is 100px
p2 from left position is 100px
p3 from left position is 95px
Take the above out of your css and everything should be fine
snippet below
<style>
.hudson {
color: white;
position: relative;
font-size: 60px;
left: 400px;
top: 110px;
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}
.threeD {
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.p1 {
position: relative;
top: 75px;
-webkit-animation-delay: 1s;
}
.p2 {
position: relative;
top: 85px;
-webkit-animation-delay: 1s;
}
.p3{
position: relative;
top: 95px;
-webkit-animation-delay: 1s;
}
.coding {
position: relative;
top: -325px;
left: 535px;
}
.paracolor {
color: skyblue;
font-size: 25px;
font-family: Tahoma, Geneva, sans-serif;
}
.img1 {
position: relative;
top: 250px;
}
body {
background-image: url(PICTURES1/mountains4.jpeg);
background-size: 102%;
background-repeat: no-repeat;
}
</style>
</head>
<link rel=stylesheet href="CSS3/animate(1).css">
<body>
<h2 class="hudson threeD animated fadeInDown">Hudson Reamer</h2>
<p class="paracolor p1 animated fadeInRightBig">I am a young technology and coding enthusiast. I am currently studying HTML,CSS, and C++.</p>
<p class="paracolor p2 animated fadeInLeftBig">I hope to one day go to MIT or Stanford to study computor science of computor engineering.</p>
<p class="paracolor p3 animated fadeInRightBig">I will build people custom computors for an 100 dollar building fee and the price of the PC parts</p>
<img class="coding animated fadeInDown" src="PICTURES1/coding.png" style="width:150px;height:150px;">
</body>its your hudson, p1, p2 ,p3 absolute left is making all the way to the right. you could replace "left:" in these styles with text-align: center;
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
