1
Я новичок в кодировании, создавая свой первый веб-сайт для задания в колледже, и кажется, что, когда я увеличиваю масштаб на своем сайте, всевозможные столкновения вместе, любая помощь будет действительно оценена!HTML - Масштабирование, нужна помощь
код я использую:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="w3.css">
\t \t \t \t \t \t <style>
\t \t \t \t \t \t \t div.relative {
\t \t \t \t \t position: relative;
\t \t \t \t \t left: 5px;
\t \t \t \t \t top: 115px;
\t \t \t \t \t \t border: 0px solid #73AD21;
\t \t \t \t \t }
\t \t \t \t \t \t </style>
<style>
a {
color: Black;
}
</style>
\t <title>The Steakhouse</title>
\t \t <style>
\t \t body {
background-image: url("Backgroundlol.jpg");
\t background-size: 100%;
background-repeat: no-repeat;
}
<div>
h1 {
position: center;
left: 640px;
top: 15px;
}
</div>
</style>
<div>
<center>
<DIV style="position: absolute; top:100px; left:800px; width:500px; height:25px"> <center> <font size="7" face="Agency FB"> <b> The Steakhouse! </b> </font> <br> <b> Why don't you up the steaks a little?! </b> </center></DIV>
\t <a href="Homepage.html"><IMG STYLE="position:absolute; TOP:5px; LEFT:2px; WIDTH:280px; HEIGHT:290px" SRC="steakhouse logo.png"></a>
\t <IMG STYLE="position:absolute; TOP:5px; LEFT:400px; WIDTH:250px; HEIGHT:240px" SRC="a_burned.png">
\t <IMG STYLE="position:absolute; TOP:5px; LEFT:1450px; WIDTH:250px; HEIGHT:250px" SRC="NRA1.png">
\t \t \t \t \t \t
\t <a href="http://www.facebook.com/TheSteakHouse"> <IMG STYLE="position:absolute; TOP:675px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="facebook.png"> </a>
\t <a href="http://www.instagram.com/TheSteakHouse"> <IMG STYLE="position:absolute; TOP:775px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="instagram.png">
\t <a href="http://www.twitter.com/TheSteakHouse"> <IMG STYLE="position:absolute; TOP:875px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="twitter.png">
\t
\t <ul>
\t </div>
\t <DIV style="position: absolute; top:300px; left:-380px; width:1000px; height:25px"> <center> <ul>
<font face="Agency FB" size="25" <li>LINKS:</li> </font> <br>
<font face="Agency FB" size="25" <li><a href="About Us.html">About Us</a></li> </font> <br>
<font face="Agency FB" size="25" <li><a href="Contact.html">Contact</a></li> </font> <br>
<font face="Agency FB" size="25" <li><a href="Reservation.html">Reservation</a></li> </font> <br>
<font face="Agency FB" size="25" <li><a href="Awards.html">Awards</a></li> </font> <br>
</ul> </center> </DIV>
<DIV style="position: absolute; top:765px; left:1000px; width:500px; height:25px"><h1> Recent News:</h1></DIV>
<DIV style="position: absolute; top:825px; left:890px; width:500px; height:25px"><H3>WEBSITE NOW OFFICIALLY LAUNCHED!</H3></DIV>
</head>
<body>
</body>
</html>
'
Причина в том, что вы используете значения пикселей. Попробуйте изменить некоторые из них на проценты. Нет причин использовать 'position: absolute;' на все. – www139
Неплохо для первого веб-сайта, но я думаю, что вам нужно будет его переделать, если вы хотите исправить эту проблему. Вот некоторые ссылки для вас https://developer.mozilla.org/en-US/docs/Web/CSS/percentage https://developer.mozilla.org/en-US/docs/Web/CSS/position http: //www.w3schools.com/tags/tag_font.asp – www139