I just started to learn web programming and faced the problem described in the title of the topic. Here is my code:

<html> <head> <title>ПредиСЛОВие</title> <style> html { height:100%; } body { height:100%; background:url(Image/pr.png); background-size:100%100%; background-attachment:fixed; } .logo { position:fixed; right:39%; } .logo1 { position:fixed; bottom:30%; left:10%; } .logo2 { position:fixed; bottom:31%; left:41%; } .logo3 { position:fixed; bottom:31%; right:10%; } .logo4 { position:fixed; bottom:23%; left:10%; } </style> </head> <body> <div class="logo"> <a href="prdsl.html"> <img src="Image/pr1.png"> </a> </div> <div class="logo1"> <a href="News.html"> <img src="Image/pr2.png"> </a> </div> <div class="logo2"> <a href="Video.html"> <img src="Image/pr3.png"> </a> </div> <div class="logo3"> <a href="cntk.html"> <img src="Image/pr4.png"> </a> </div> <div class="logo4"> <font size="10" color="white" face="Politica">О ПРОЕКТЕ</font> </div> </body> </html>

And a few more screenshots to illustrate the problem. Screenshots illustrate the state of the page before increasing and decreasing and after such changes!

Screenshots:

alt text

alt text

alt text

Corrected code:

  <html> <head> <title>Slovo - Одесса</title> <style> html { height:100%; } body { margin:0; height:100%; background:url(Image/pr.png); background-size:100%100%; } .wrapper { position: relative; display: block; min-width: 960px; min-height: 700px; } .logo { position:absolute; top:5px; right:990px; } .logo1 { position:absolute; top:645px; right:2000px; } .logo2 { position:absolute; top:655px; right:1050px; } .logo3 { position:absolute; top:634px; right:200px; } .logo4 { position:absolute; top:1000px; right:2100px; } </style> </head> <body> <div class="wrapper"> <div class="logo"> <a href="prdsl.html"> <img src="Image/pr1.png"> </a> </div> <div class="logo1"> <a href="News.html"> <img src="Image/pr2.png"> </a> </div> <div class="logo2"> <a href="Video.html"> <img src="Image/pr3.png"> </a> </div> <div class="logo3"> <a href="cntk.html"> <img src="Image/pr4.png"> </a> </div> <div class="logo4"> <font size="10" color="white" face="Politica">О ПРОЕКТЕ</font> </div> </div> </body> </html>
  • @ AlekseyED, If you are given an exhaustive answer, mark it as correct (click on the check mark next to the selected answer). - Vitalina

1 answer 1

When using position: fixed; You will NOT avoid such a problem. A couple of tips:

1) Specify a so-called "limiter" with a minimum height and width

  .wrapper { position: relative; display: block; min-width: 960px; min-height: 700px; }

2) Position the elements "absolutely": position: absolute;

  • I corrected everything as you said. In addition, I replaced the percentages on the pixel. The fact is that now the buttons on the site are now shifted only to the right side when zooming out, and to the left side when zooming in. The problem is that they are somehow too radically shifted to the right and left. With a high magnification, the new button disappears altogether. Can't figure out how to fix it all. How to ensure a positive page display with any change of the page scale, as, for example, on this site. - АлексейED