Почему мой раздел не идет ниже заголовка в HTML и CSS? - PullRequest
Новая
       4

Почему мой раздел не идет ниже заголовка в HTML и CSS?

1 голос
/ 03 мая 2020

Здравствуйте, я новичок в HTML и CSS.

У меня быстрый вопрос по поводу моего кода.

Цель:

Я стремлюсь создать следующий макет для моей страницы. 

Navigation bar,

Title (h1),

Title (h2),

Button,

Section (About me)

Код: 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html,
body {
  background-color: #fff;
  font-family: 'Lato', 'Arial', 'sans-serif';
  font-weight: 300;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}


.row {
  max-width: 1140px;
  margin: 0 auto;
}

section {
  padding: 80px 0;
}


.title-text-box {
  position: absolute;
  width: 100%;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  letter-spacing: 2px;
  color: white;
}

.title-text-box h1, .title-text-box h2{
  text-shadow: 0px 0px 6px rgba(50,25,55,0.5);
}


.header-img {
  background-image: linear-gradient(to right,#ff7e5f, #feb47b);
  padding: 40px;
}


.title-text-box h1 {
  font-size: 280%;
  margin-bottom: 10px;
}

.main-nav {
  float: right;
  list-style: none;
  margin-top: 60px;
}

.main-nav li {
  display: inline-block;
  margin-left: 40px;
}

.main-nav li:last-child {
  margin-right: 20px;
}


.main-nav li a:link,
.main-nav li a:visited {
  padding: 7px 0;
  color: #5b86e5;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 100%;
}

.main-nav li a:after {
  display:block;
  content: '';
  border-bottom: solid 3px #ff5e62;
  border-radius: 25px;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

.main-nav li a:hover:after {
  transform: scaleX(1);
}


.btn:link,
.btn:visited {
  display: inline-block;
  padding: 20px 30px;
  margin-top: 90px;
  text-decoration: none;
  background-color: #fff;
  border-radius: 10px;
  color: #ff5e62;
  transition: all .2s;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <link rel="stylesheet" href="style/style.css">
  <body>

  <header>
    <nav>
      <div class="row">
      <ul class="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About me</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      </div>
    </nav>
    <div class="title-text-box header-img">
      <h1>Header1</h1>
      <h2>Header2.</h2>
      <a class="btn" href="#">Discover</a>
    </div>
  </header>

<section class="section-about-me">
  <div class="row">
    <h3>About me</h2>
  </div>

</section>

  </body>
</html>

Вопрос относительно моего текущего кода:

Я действительно растерян, почему раздел about me находится ниже nav-bar и выше header? Тогда как на html он находится ниже заголовка?

Также фрагмент кода работает только на весь экран. Как я могу установить его на образец экрана ниже?

Спасибо

Ответы [ 2 ]

0 голосов
/ 03 мая 2020

Вот 3 изменения, необходимые для работы заголовка, раздела nav и about-me согласно ожиданиям:

  1. В файле HTML переместите заголовок в отдельная строка после nav.

  2. В CSS установите элемент nav для выравнивания по правому краю и займет всю ширину страницы.

  3. В CSS, чтобы элемент Header занимал всю ширину страницы, а также имел верхнее поле, чтобы он не перекрывался с nav.

Вот рабочая Например:

index. html file 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <link rel="stylesheet" href="style/style.css">
  <body>

  <header>
    <nav>
      <div class="row">
          <ul class="main-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About me</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
      </div>
    </nav>
  </header>

  <div class="row">
    <div class="title-text-box header-img">
      <h1>Header1</h1>
      <h2>Header2.</h2>
      <a class="btn" href="#">Discover</a>
    </div>
  </div>

<section class="section-about-me">
  <div class="row">
    <h3>About me</h2>
  </div>

</section>

  </body>
</html>

CSS file (style / style. css): 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html,
body {
  background-color: #fff;
  font-family: 'Lato', 'Arial', 'sans-serif';
  font-weight: 300;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}


.row {
  width: 100%;
}

section {
  padding: 80px 0;
}


.title-text-box {
  margin-top: 100px;
  width: 100%;
  text-align: center;
  letter-spacing: 2px;
  color: white;
}

.title-text-box h1, .title-text-box h2{
  text-shadow: 0px 0px 6px rgba(50,25,55,0.5);
}


.header-img {
  background-image: linear-gradient(to right,#ff7e5f, #feb47b);
  padding: 40px;
}


.title-text-box h1 {
  font-size: 280%;
  margin-bottom: 10px;
}

.main-nav {
  float: right;
  list-style: none;
  margin-top: 60px;

  margin-left: auto;
  margin-right: 0px;
}

.main-nav li {
  display: inline-block;
  margin-left: 40px;
}

.main-nav li:last-child {
  margin-right: 20px;
}


.main-nav li a:link,
.main-nav li a:visited {
  padding: 7px 0;
  color: #5b86e5;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 100%;
}

.main-nav li a:after {
  display:block;
  content: '';
  border-bottom: solid 3px #ff5e62;
  border-radius: 25px;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

.main-nav li a:hover:after {
  transform: scaleX(1);
}


.btn:link,
.btn:visited {
  display: inline-block;
  padding: 20px 30px;
  margin-top: 90px;
  text-decoration: none;
  background-color: #fff;
  border-radius: 10px;
  color: #ff5e62;
  transition: all .2s;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
0 голосов
/ 03 мая 2020

Раздел обо мне находится ниже навигационной панели и заголовка, потому что вы использовали абсолютное позиционирование в заголовке: 

.title-text-box {
  position: absolute;
  width: 100%;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  letter-spacing: 2px;
  color: white;
}

Следовательно, .title-text-box будет на 40% сверху и на 50% слева. Независимо от того, где находятся другие (относительные) элементы в этом контейнере.

На ваш второй вопрос, я бы посоветовал углубиться в адаптивный дизайн макета. Есть много полезных шаблонов и фреймворков, из которых вы можете поучиться.

Я бы предложил HTML макетирование и гибкое макетирование с CSS или любой из существующие CSS библиотеки, например Bootstrap.

Великолепные существующие шаблоны для изучения шаблонов и макетов, на мой взгляд, start bootstrap. Но это всего лишь личное предпочтение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...