Блог

Главная - Вопросы по программированию - Макет сайта ломается, когда я уменьшаю размер программы

Макет сайта ломается, когда я уменьшаю размер программы

#html #css #layout

#HTML #css #макет

Вопрос:

Я новичок в html / css, и завтра я начну изучать js. Я не слишком хорошо знаю английский, но я постараюсь быть максимально понятным: когда я помещаю вкладку «Интернет» на половину экрана и прокручиваю вправо, чтобы увидеть остальную часть сайта, макет разрушается пополам.

Полноэкранная страница

Половина страницы

Половина страницы прокрутка вправо

Это мой код:

 * {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

button {
  border: 10px;
  background: wheat;
}

.MainTitleDiv {
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./Immagini/Logo Canale Centrato.png');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #1f648b;
  background-position-y: -60px;
  height: 750px;
  background-repeat: no-repeat;
}

body {
  width: auto;
  max-width: 1310px;
  margin: 0 auto;
  background-color: #284069;
}

.MenuDiv {
  background-color: black;
  height: 50px;
}

.MainTitle {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: 70px;
  position: relative;
  top: 20%;
  color: #8ba5d2;
}

.MainText {
  font-size: 25px;
  text-align: center;
  position: relative;
  top: 25%;
  color: white;
}

.MerchTitle {
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  color: white;
  position: relative;
  text-align: center;
}

.Maglietta1 {
  font-size: 30px;
  font-family: 'Roboto', sans-serif;
  color: white;
}

.Maglietta1D {
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  color: white;
}

.BottoneM1 {
  color: #0099CC;
  /* Text color */
  background-color: transparent;
  /* Remove background color */
  border: 2px solid #0099CC;
  /* Border thickness, line style, and color */
  border-radius: 5px;
  /* Adds curve to border corners */
  width: 100px;
  height: 50px;
}

.BottoneM2 {
  color: #0099CC;
  /* Text color */
  background-color: transparent;
  /* Remove background color */
  border: 2px solid #0099CC;
  /* Border thickness, line style, and color */
  border-radius: 5px;
  /* Adds curve to border corners */
  width: 100px;
  height: 50px;
}

.BottoneDL {
  color: #0099CC;
  /* Text color */
  background-color: transparent;
  /* Remove background color */
  border: 2px solid #0099CC;
  /* Border thickness, line style, and color */
  border-radius: 5px;
  /* Adds curve to border corners */
  width: 100px;
  height: 50px;
  /* Centrare Il bottone */
  margin: 0;
  position: relative;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.BottoneYT {
  color: #0099CC;
  /* Text color */
  background-color: transparent;
  /* Remove background color */
  border: 2px solid #0099CC;
  /* Border thickness, line style, and color */
  border-radius: 5px;
  /* Adds curve to border corners */
  width: 100px;
  height: 50px;
  margin: 0;
  position: relative;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.Maglietta2 {
  font-size: 30px;
  font-family: 'Roboto', sans-serif;
  color: white;
}

.Maglietta2D {
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  color: white;
}

.DivDL {
  background-color: white;
}

.TitleDL {
  font-size: 40px;
  font-family: 'Roboto', sans-serif;
  color: black;
  text-align: center;
}

.DescDL {
  font-size: 20px;
  text-align: center;
}

.TitleYT {
  text-align: center;
  font-size: 40px;
  font-family: 'Roboto', sans-serif;
}

.DescYT {
  text-align: center;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
}

.DivYT {
  background-color: #8ba5d2;
}

.DivMerch {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  /* ipotizzando che sia centrato all'interno della pagina */
  padding: 0;
  position: relative;
  width: 1000px;
  height: 750px;
}

.DivMerchS {
  width: 450px;
  position: absolute;
  top: 0;
  left: 0;
}

.DivMerchD {
  width: 350px;
  position: absolute;
  top: 0;
  left: 550px;
  /* che è la larghezza del primo elemento */
}

.DivMerchTutto {
  background-color: #1f648b;
}  
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>LoryKiller</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Robotoamp;display=swap" rel="stylesheet">
<div class="MainTitleDiv">
  <h1 class="MainTitle">LoryKiller<br>Official Site</h1>
  <p class="MainText">Ti do il benvenuto nel sito ufficiale di LoryKiller.<br>Qui puoi trovare il mio merchandising ufficiale ed i link per eventuali download trovati nei video.</p>
</div>
<div class="DivMerchTutto">
  <h2 class="MerchTitle">Il mio merchandising!</h2>
  <div class="DivMerch">
    <div class="DivMerchS"><br><br><br>
      <a href="https://teezily.com/lorykillerscritta" draggable="false"><img src="./Immagini/5c84aafa-2e1b-44b9-a7e9-59f22c4bd6ad.png" width="366" height="366" draggable="false"></a><br>
      <h3 class="Maglietta1">Maglietta LoryKiller Logo Ufficiale</h3><br>
      <p class="Maglietta1D">Questa maglietta riserva per te il Logo Ufficiale Di LoryKiller. Ordinala ora!</p><br>
      <a href="https://teezily.com/lorykillerscritta" draggable="false"><button class=BottoneM1><p>Vai sul sito!</p></button></a>
    </div>
    <!--Div Merch S-->
    <div class="DivMerchD"><br><br><br>
      <a href="https://teezily.com/lorylunghe" draggable="false"><img src="./Immagini/6d36e0f8-0fe1-4f38-86c4-010ec9e98f23.png" width="366" height="366" draggable="false"></a><br>
      <h3 class="Maglietta2">Maglietta LoryKiller Logo Ufficiale</h3><br>
      <p class="Maglietta2D">Questa maglietta riserva per te il Logo Ufficiale Di LoryKiller. Ordinala ora!</p><br><a href="https://teezily.com/lorylunghe" draggable="false"><button class="BottoneM2">Vai sul sito!</button></a><br><br><br></div>
    <!-- Div Merch D -->
  </div>
  <!-- Div Merch -->
</div>
<!-- Div Merch Tutto -->
<div class="DivDL"><br><br>
  <h2 class="TitleDL">I Download</h2><br><br>
  <p class="DescDL">Premi qua sotto per poter vedere tutti i download per programmi ed altro!</p><br><br><br>
  <a href="download.html" draggable="false"><button class="BottoneDL">Vai ai download</button></a><br><br><br></div>
<div class="DivYT"><br><br>
  <h2 class="TitleYT">Chi sono io?</h2><br><br>
  <p class="DescYT">Sono uno youtuber che porta video tutorial, videogiochi e molto altro!</p><br><br><br>
  <a href="<!-- Link -->" draggable="false"><button class="BottoneYT">Seguimi su youtube!</button></a><br><br><br></div>

Комментарии:

1. Добро пожаловать в StackOverflow. Можете ли вы создать демонстрационную версию codepen вместо добавления большого кода.

2. @RayeesAC stacksnippet лучше, если нет странных фреймворков

3. Я бы посоветовал вам изучить запросы @media. — w3schools.com/css/css_rwd_mediaqueries.asp Это довольно легко понять и реализовать в вашем текущем проекте.

4. codepen.io/LoryKiller/pen/yLOQMbX Вот мой codepen

5. Привет @LoryKiller вашему коду нужны медиа-запросы, я изменил ваш css, чтобы сделать его отзывчивым, но, возможно, вы не хотите ничего удалять из вашего css, пожалуйста, проверьте мой ответ

Ответ №1:

у вас много фиксированной ширины, высоты и абсолютной позиции, я изменил ваш код и использовал flex в DivMerch

 .DivMerch {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

button {
  border: 10px;
  background: wheat;
}

.MainTitleDiv {
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./Immagini/Logo Canale Centrato.png');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #1f648b;
  background-position-y: -60px;
  height: 750px;
  background-repeat: no-repeat;
}

body {
  width: 100%;
  
  margin: 0 auto;
  background-color: #284069;
}

.MenuDiv {
  background-color: black;
  height: 50px;
}

.MainTitle {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: 70px;
  position: relative;
  top: 20%;
  color: #8ba5d2;
}

.MainText {
  font-size: 25px;
  text-align: center;
  position: relative;
  top: 25%;
  color: white;
}

.MerchTitle {
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  color: white;
  position: relative;
  text-align: center;
}

.Maglietta1 {
  font-size: 30px;
  font-family: 'Roboto', sans-serif;
  color: white;
}

.Maglietta1D {
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  color: white;
}

.BottoneM1 {
  color: #0099CC;
  /* Text color */
  background-color: transparent;
  /* Remove background color */
  border: 2px solid #0099CC;
  /* Border thickness, line style, and color */
  border-radius: 5px;
  /* Adds curve to border corners */
  width: 100px;
  height: 50px;
}

.BottoneM2 {
  color: #0099CC;
  /* Text color */
  background-color: transparent;
  /* Remove background color */
  border: 2px solid #0099CC;
  /* Border thickness, line style, and color */
  border-radius: 5px;
  /* Adds curve to border corners */
  width: 100px;
  height: 50px;
}

.BottoneDL {
  color: #0099CC;
  /* Text color */
  background-color: transparent;
  /* Remove background color */
  border: 2px solid #0099CC;
  /* Border thickness, line style, and color */
  border-radius: 5px;
  /* Adds curve to border corners */
  width: 100px;
  height: 50px;
  /* Centrare Il bottone */
  margin: 0;
  position: relative;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.BottoneYT {
  color: #0099CC;
  /* Text color */
  background-color: transparent;
  /* Remove background color */
  border: 2px solid #0099CC;
  /* Border thickness, line style, and color */
  border-radius: 5px;
  /* Adds curve to border corners */
  width: 100px;
  height: 50px;
  margin: 0;
  position: relative;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.Maglietta2 {
  font-size: 30px;
  font-family: 'Roboto', sans-serif;
  color: white;
}

.Maglietta2D {
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  color: white;
}

.DivDL {
  background-color: white;
}

.TitleDL {
  font-size: 40px;
  font-family: 'Roboto', sans-serif;
  color: black;
  text-align: center;
}

.DescDL {
  font-size: 20px;
  text-align: center;
}

.TitleYT {
  text-align: center;
  font-size: 40px;
  font-family: 'Roboto', sans-serif;
}

.DescYT {
  text-align: center;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
}

.DivYT {
  background-color: #8ba5d2;
}

.DivMerch {
  
}

.DivMerchS {
 
}

.DivMerchD {
 
}

.DivMerchTutto {
  background-color: #1f648b;
}  
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>LoryKiller</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Robotoamp;display=swap" rel="stylesheet">
<div class="MainTitleDiv">
  <h1 class="MainTitle">LoryKiller<br>Official Site</h1>
  <p class="MainText">Ti do il benvenuto nel sito ufficiale di LoryKiller.<br>Qui puoi trovare il mio merchandising ufficiale ed i link per eventuali download trovati nei video.</p>
</div>
<div class="DivMerchTutto">
  <h2 class="MerchTitle">Il mio merchandising!</h2>
  <div class="DivMerch">
    <div class="DivMerchS"><br><br><br>
      <a href="https://teezily.com/lorykillerscritta" draggable="false"><img src="./Immagini/5c84aafa-2e1b-44b9-a7e9-59f22c4bd6ad.png" width="366" height="366" draggable="false"></a><br>
      <h3 class="Maglietta1">Maglietta LoryKiller Logo Ufficiale</h3><br>
      <p class="Maglietta1D">Questa maglietta riserva per te il Logo Ufficiale Di LoryKiller. Ordinala ora!</p><br>
      <a href="https://teezily.com/lorykillerscritta" draggable="false"><button class=BottoneM1><p>Vai sul sito!</p></button></a>
    </div>
    <!--Div Merch S-->
    <div class="DivMerchD"><br><br><br>
      <a href="https://teezily.com/lorylunghe" draggable="false"><img src="./Immagini/6d36e0f8-0fe1-4f38-86c4-010ec9e98f23.png" width="366" height="366" draggable="false"></a><br>
      <h3 class="Maglietta2">Maglietta LoryKiller Logo Ufficiale</h3><br>
      <p class="Maglietta2D">Questa maglietta riserva per te il Logo Ufficiale Di LoryKiller. Ordinala ora!</p><br><a href="https://teezily.com/lorylunghe" draggable="false"><button class="BottoneM2">Vai sul sito!</button></a><br><br><br></div>
    <!-- Div Merch D -->
  </div>
  <!-- Div Merch -->
</div>
<!-- Div Merch Tutto -->
<div class="DivDL"><br><br>
  <h2 class="TitleDL">I Download</h2><br><br>
  <p class="DescDL">Premi qua sotto per poter vedere tutti i download per programmi ed altro!</p><br><br><br>
  <a href="download.html" draggable="false"><button class="BottoneDL">Vai ai download</button></a><br><br><br></div>
<div class="DivYT"><br><br>
  <h2 class="TitleYT">Chi sono io?</h2><br><br>
  <p class="DescYT">Sono uno youtuber che porta video tutorial, videogiochi e molto altro!</p><br><br><br>
  <a href="<!-- Link -->" draggable="false"><button class="BottoneYT">Seguimi su youtube!</button></a><br><br><br></div>

Комментарии:

1. Большое вам спасибо, я не знал о существовании Display: flex. Проблема решена.

2. Последний вопрос: изображения расположены слишком близко к краю, есть ли какой-нибудь способ поместить их немного больше в центр?

3. вы можете использовать justify-content:center;

4. @LoryKiller да, теперь вам выбирать, вам просто нужно изменить выравнивание содержимого, например, по центру, по кругу, равномерно по пространству.

5. Спасибо! Равномерно распределенное пространство идеально!