Html Разделы или Div не связаны друг с другом в столбцах? - PullRequest
Новая
       0

Html Разделы или Div не связаны друг с другом в столбцах?

0 голосов
/ 18 февраля 2020

Я занимаюсь разработкой веб-сайта stati c с использованием HTML и CSS. Сайт одностраничный, и я использую разделы, чтобы различать весь контент или части, если это правильное слово. Но я сталкиваюсь с проблемой перехода в третью часть. Первые две части выглядят как показано ниже. Пожалуйста, смотрите изображение.

enter image description here

Я сталкиваюсь с проблемой, когда пытаюсь создать другой раздел или третью часть после этих двух. Я пытаюсь сделать что-то вроде этого

enter image description here

, но каждый раз, когда я пытаюсь что-то, я продолжаю получать что-то подобное. Я не хочу использовать много css для этого, чтобы взять его в нужном месте. Вот изображение того, что я получаю.

enter image description here

Мой Код, который я пытаюсь сделать с CSS и HTML, приведен ниже. .

Указатель. html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./style/style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!-- Section1 -->
    <section class="">
      <div class="headerPosition">
        <img src="./assets/HeaderImage2.jpg" class="headerImage1" />
        <div class="ehrlich-top-left" style="color: white">Example</div>
        <!-- <img class="headerOnImage" src="./assets/rectangle1.jpg"> -->
        <div class="opacityClass"></div>

        <div class="opacityClass1"></div>
        <div class="ehrlich-Center">
          Example
        </div>
        <div class="centered">
          WIR MACHEN &nbsp;ARBEITGEBER
        </div>
      </div>
    </section>

    <!-- Section2 -->
    <section class="">
      <div class="col-background">
        <hr
          style="background-color:black; width: 5%; float: left; top:8%; position: absolute;"
        />
        <h1 class="content_app_vertical">ÜBER UNS</h1>
        <h1 class="content_app">
          Was machen wir?
          <hr style="background-color:black; width: 20%" align="left" />
        </h1>
        <p class="container_content_app">
          Lorem Lorem Lorem Ipsum Ipsum Ipsum Lorem Lorem Lorem Ipsum Ipsum
          Ipsum Lorem Lorem Lorem Ipsum Ipsum Ipsum Lorem Lorem Lorem Ipsum
          Ipsum Ipsum Lorem Lorem Lorem Ipsum Ipsum Ipsum Lorem Lorem Lorem
          Ipsum Ipsum Ipsum Lorem Lorem Lorem Ipsum Ipsum Ipsum Lorem Lorem
          Lorem Ipsum Ipsum Ipsum Lorem Lorem Lorem Ipsum Ipsum Ipsum v vLorem
          Lorem Lorem Ipsum Ipsum IpsumLorem Lorem Lorem Ipsum Ipsum IpsumLorem
          Lorem Lorem Ipsum Ipsum Ipsumv
        </p>

        <img class="content_pic" src="./assets/wasmachen.jpg" />
      </div>
    </section>

    <!-- Section3 -->
    <section>
      <div class="big_box"></div>
    </section>
  </body>
</html>

Стиль. css

.rectangle1 {
  opacity: 0.75;
}

.headerPosition {
  position: relative;
  left: 0;
  top: 0;
}

.headerImage1 {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.headerOnImage {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.75;
  width: 50%;
  height: 100%;
}

@media (max-width: 1600px) {
  .ehrlich-Center {
    top: 30% !important;
  }
}

.ehrlich-Center {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: White;
  width: 413px;
  height: 30px;
  font-family: "PT Sans";
  font-size: 100px;
  font-weight: 100px;
}
.centered {
  position: absolute;
  top: 50%;
  left: 51%;
  transform: translate(-50%, -50%);
  color: white;
  width: 413px;
  height: 30px;
  font-family: "PT Sans";
  font-size: 30px;
}

.ehrlich-top-left {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 35px;
}

.col-background {
  background-color: rgba(112, 112, 112, 0.15);
  width: 100%;
  height: 100%;
  position: absolute;
}
.col-background-2 {
  background-color: white;
  width: 100%;
  height: 100%;
  position: absolute;
}
.content_app {
  left: 20%;
  top: 10%;
  position: absolute;
  font-family: "PT Sans" !important;
  font-weight: 800;
  font-size: 3.5rem !important;
}

.opacityClass {
  background-color: rgba(255, 0, 0, 0.75);
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.75;
  width: 50%;
  height: 100%;
}

.opacityClass1 {
  background-color: rgba(255, 0, 0, 0);
  position: absolute;
  top: 155px;
  left: 80px;
  width: 85%;
  height: 50%;
  transform: rotate(180deg);
  border: solid white;
}

.opacityClass2 {
  background-color: rgba(255, 0, 0, 0);
  position: absolute;
  top: 211%;
  left: 130px;
  width: 85%;
  height: 50%;
  transform: rotate(-360deg);
  border: solid red;
}

.container_content_app {
  width: 452px;
  height: 277px;
  left: 20%;
  top: 25%;
  font-family: "PT Sans" !important;
  position: absolute;
  font-size: 14px;
}

.content_app_vertical {
  transform: rotate(-90deg);
  position: absolute;
  top: 20%;
  float: left;
  left: -50px;
  margin: 0;
}

.content_pic {
  top: 20%;
  left: 60%;
  position: relative;
  width: 446px;
  height: 356px;
}

@media (max-width: 1500px) {
  .container_content_app {
    top: 35% !important;
  }
  .content_app_vertical {
    top: 35% !important;
  }
  .content_pic {
    width: 355px;
    height: 250px;
  }
}

.big_box {
  width: 1316px;
  border: 2px solid red;
  height: 356px;
  position: absolute;
  /* left: 10%;
  top: 190%; */
}
.box {
  display: block;
  border: 2px solid white;
  text-align: center;
  width: 100%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...