0

body {
  background: orange;
  margin: 0;
  margin-top: -140px;
  width: 100%;
  height: 1109px;
}

#container {
  /*padding-top: 50px;*/
  background: orange;
  width: 1460px;
  min-width: 1460px;
  height: 100%;
  margin: 0 auto;
}


/* tbody */

#tbody {
  background: brown;
  width: 900px;
  /*height: 500px;*/
  min-height: 500px;
  /*height: auto;*/
  left: 19%;
  top: -50%;
  z-index: 2;
  position: relative;
  border-radius: 30px;
}


/* green top */

#block1 {
  background: green;
  /*height: 250px;*/
  min-height: 250px;
  height: auto;
  width: 450px;
  z-index: 1;
  position: relative;
  left: 700px;
  top: 180px;
  border-radius: 30px;
}


/* red top */

#block2 {
  background: red;
  height: 300px;
  /*min-height: 300px;*/
  width: 250px;
  z-index: 3;
  position: relative;
  left: 400%;
  top: 5%;
  border-radius: 30px;
  vertical-align: middle;
  display: table-cell;
  /*overflow-y: scroll;*/
}


/* yellow top */

#block3 {
  background: yellow;
  /*height: 50px;*/
  min-height: 50px;
  height: auto;
  width: 700px;
  z-index: 5;
  position: relative;
  left: 19%;
  top: -22%;
  border-radius: 50px;
}


/* pink top */

#block4 {
  background: pink;
  /*height: 170px;*/
  min-height: 170px;
  height: auto;
  width: 700px;
  z-index: 4;
  position: relative;
  left: 15%;
  top: -44%;
  border-radius: 50px;
}


/* purple down */

#block5 {
  background: purple;
  /*height: 270px;*/
  min-height: 270px;
  height: auto;
  width: 200px;
  z-index: 5;
  position: relative;
  left: 15%;
  top: -65%;
  border-radius: 30px;
}


/* yellow down */

#block6 {
  background: yellow;
  /*height: 50px;*/
  min-height: 50px;
  height: auto;
  width: 900px;
  z-index: 4;
  position: relative;
  left: 20%;
  top: -75%;
  border-radius: 30px;
}


/* pink down */

#block7 {
  background: pink;
  /*height: 200px;*/
  min-height: 200px;
  height: auto;
  width: 500px;
  z-index: 3;
  position: relative;
  left: 50%;
  top: -90%;
  border-radius: 30px;
}


/* red dot */

#block8 {
  background: red;
  /*height: 100px;*/
  min-height: 100px;
  height: auto;
  width: 100px;
  z-index: 7;
  position: relative;
  border-radius: 70px;
  left: 60%;
  top: -62%;
}

td {
  font-size: 28px;
  vertical-align: middle;
  text-align: center;
  transform: rotate(-45deg);
}

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

h3 {
  text-align: left;
  font-size: 34px;
}

h2 {
  text-align: center;
  font-size: 38px;
}

h1 {
  text-align: center;
  font-size: 68px;
}

p {
  text-align: center;
  font-size: 28px;
}
<!DOCTYPE html>
<html>

<head>
  <title> 123 </title>
  <link rel="stylesheet" type="text/css" href="Style(1).css">
</head>

<body>

  <div id="container">

    <div id="block1">
    </div>

    <div id="block2">
      <h3 style="color: white">
        >home <br> >photos <br> >links <br> >other <br> >other <br>
      </h3>
    </div>

    <div id="block3">
      <p> Text Text Text Text Text Text Text Text Text Text
      </p>
    </div>

    <div id="block4">
      <h1 style="color: white"> Variant 10 </h1>
    </div>

    <div id="block8">
      <table>
        <tr>
          <td style="color: purple">
            <p></p>
            NEW 2.0
          </td>
        </tr>
      </table>
      <!-- <h5> 
            NEW <br>
            2.0
        </h5> -->
    </div>

    <div id="tbody">
      <h2>Text Text Text Text Text <br> Text Text Text Text</h2>
      <h3 style="color: red"> 1. Text Text Text Text Text </h3>
      <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
        Text Text Text Text Text Text Text Text Text Text Text Text
        <p>
          <!-- <h3 style="color: red"> 2. Text Text Text Text Text  </h3>
        <p>Text Text Text Text Text Text Text Text Text Text </p> -->
    </div>

    <div id="block5">
      <p style="color: white">Text 01!</p>
      <p>Text 02!</p>
    </div>

    <div id="block6">
      <p>Text Text Text Text Text Text Text Text Text Text </p>
    </div>

    <div id="block7">
    </div>

  </div>

  <!-- </div> -->

</body>

</html>

Есть вот такой код. В чем собственно проблема? Если помещать текст(имеется ввиду очень много текста) в любой из блоков(кроме того, что в середине), то происходит что-то очень страшное = все расползается :) Пробовал все, что только смог вообраить и прогуглил много всего, но понять как это пофиксить так и не понял. Как это исправить? (Не меняя position у блоков)

3
  • 1
    Сверстать все заново)) 10 ноя 2019 в 17:58
  • покажите що в итоге должно получится
    – Swartex
    11 ноя 2019 в 9:10
  • Для начала почитать о том, что такое адаптивность. А то вы говорите что сайт адаптивный, при этом он даже не влезает в сниппет..
    – De.Minov
    11 ноя 2019 в 10:24

1 ответ 1

-1

Для текстовых блоков попробуйте следующие css-свойства:

overflow:hidden; 
white-space:nowrap; 
text-overflow:ellipsis;

Они должны добавить возможность переноса текста, который вылазит за пределы текстового блока.

2
  • вы предлагаете человеку использовать вместо в тегов h3 / p textarea ?
    – Swartex
    11 ноя 2019 в 9:08
  • Согласен, не прав. Исправил
    – Wolframm
    11 ноя 2019 в 9:13

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.