@glimixx

Не работает код HTML И CSS,что делать?

Здравствуйте,у меня такая проблема:
Я начал знакомится с этими языками и учить их самостоятельно.По урокам на ютуб у человека получалось сделать блоки (Header,footer,main,aside)
При создании блока Main и редактирования в CSS,он будто бы привязывается к footer и я не знаю что делать.
Код HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
<title>Главная Страница</title>
<link rel="stylesheet" href="css/index.css">
  </head>
    <body>
      <div id="header">Шапка<div>
      <div id="main">Главное<div>
      <div id="aside">Боковая<div>
      <div id="footer">Футер<div>
    </body>
</html>

Код CSS:
*{
  margin: 0;
  padding: 0;
}

#main{
  width:50%;
  background: #fafafa;
  border: 1px solid silver;
  line-height: 100px;
}


#header{
  width: 100%;
  height: 100px;
  text-align: center;
  border-bottom: 4px solid silver;
  background-color: #333;
  color: #fff;
  line-height: 100px;
  margin-bottom: 100px;
}

#footer{
  width: 100%;
  height: 100px;
  text-align: center;
  border-top: 4px solid silver;
  background-color: #333;
  color: #fff;
  line-height: 100px;
  margin-bottom: 0px;
  margin-top: 243px;
  border-bottom:0;
}

616a1569b82af246558117.png
616a158cefb5e459475998.png
  • Вопрос задан
  • 98 просмотров
Решения вопроса 1
veryoriginalnickname
@veryoriginalnickname
у вас в body div'ы не закрыты
есть:
<div id="header">Шапка<div>
надо:
<div id="header">Шапка</div>

в общем, мой вариант такой:
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Главная Страница</title>
</head>

<body>
  <div class="container">
    <div id="header">Шапка</div>
    <div class="content">
      <div id="aside">Боковая</div>
      <div id="main">Главное</div>
    </div>
    <div id="footer">Футер</div>
  </div>
</body>

<style>
  html, body {
    margin: 0;
    padding: 0;
  }

  .container {
    height: 100vh;
    display: grid;
    grid-template-rows: max-content 1fr max-content;
  }

  #header {
    border-bottom: 4px solid silver;
  }

  #header,
  #footer {
    width: 100%;
    height: 100px;
    text-align: center;
    background-color: #333;
    color: #fff;
    line-height: 100px;
  }

  .content {
    display: flex;
  }

  #aside {
    width: 120px;
    background-color: #fafafa;
  }

  #main {
    width: 100%;
    background: #fafafa;
    border: 1px solid silver;
    line-height: 100px;
  }
</style>
</html>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
artzolin
@artzolin
php, WordPress разработка сайтов zolin.digital
Так семантически правильнее:

<header id="header" role="banner">Шапка</header>
<main id="main" role="main">Главное</main>
<aside id="aside" role="complementary">Боковая</aside>
<footer id="footer" role="contentinfo">Футер</footer>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы