All geek questions in one place

Why is there a space to the right of my site?

I made my own site with Animate.css and noticed that there was an empty space on the right, and could not understand 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>

Thanks for the help and answers!

+5
source share
3 answers

The large area of ​​spaces to the right of your page is due to relative positioning.

You apply position: relative to all of your elements. Then you move them all to the right with left: 400px and left: 535px and left: 100px , etc. The left property determines how far to click an element from the left edge.

In addition, when an element is located relatively, its original space is reserved. Therefore, when the elements are shifted to the right, they also retain their original spaces (although they no longer exist), and the document is extended horizontally.

Remove all left properties and see the difference. Everything shifts to the left, and the horizontal scrollbar disappears. Demo

I'm not sure what the purpose of your layout is, but just for comparison, here's an alternative to considering: Instead of relative try to position absolute , which removes elements from the document stream, so their original space is eliminated.

Here's a nice link from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/position

+3
source

All tags in your paragraph are located on the left with a size of "x" pixels

Example

p1 from the left position - 100 pixels p2 from the left position - 100 pixels p3 from the left position - 95px

Take the above from your css and everything should be fine

fragment 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>
+2
source

his full hudson, p1, p2, p3 is an absolute left step all the way. you can replace "left:" in these styles text-align: center;

+1
source

Source: https://habr.com/ru/post/1240396/

More articles:


All Articles