Ошибка в HTML текст не стоит в своем блоке - PullRequest
Новая
       0

Ошибка в HTML текст не стоит в своем блоке

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

Я только начал изучать HTML и CSS. И у меня проблема. Возможно, она не заслуживает внимания, но все же прошу помощи. Проблема заключается в том, что слово «Привет» упорно не хочет отображаться в блоке. И я не знаю, как убрать пробел над заголовком. И извините за плохую архитектуру кода.

HTML: 

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title></title>
</head>
<body>
<header>
<div class="header">

</div>
</header>   
<div class="body">
<div class="all">
                    <div class="cat">
                        <h1 acolor>Hi</h1> 
                    </div>
                <div class="categ"> 

                <div class="mycat">
                        <div class="com">
                            <p class="color"><h3></h3></p>
                        </div>
                        <div class="com">
                            <p class="color"><h3></h3></p>
                        </div>
                    <div class="come">
                            <p class="color">
                                <h4></h4>
                            </p>
                        </div>
                        <div class="com">
                            <p class="color">

                            </p>
                        </div>
                </div>  

    </div>
    </div>
</div>
<main>


</main>
</div>

<footer>
    <div class="footer"></div>
</footer>
</body>
</html>

CSS: 

.header{

    width: 1922px; 
    height: 109px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
    background-color: #3f4246;

}

.footer{
    width: 1928px;
    height: 534px;
    background-color: #202326;

}

.body{
    width: 1920px;
    height: 3240px;
    background-color: #ffffff;
}

.all{
    width: 1170px;
    height: 700px;

}

.categ{
    width: 273px;
    height: 514px;
}

.cat{
    width: 273px;
    height: 50px;
    background-color: #86b817;
    margin-left: 391px;
    padding-top: 50px;
}

.mycat{
    width: 274px;
    height: 473px;
    background-color: ;
    margin-left: 391px;
}

.com{
    width: 269px;
    height: 45px;
    border: 2px solid black;
    margin: 0px;
}

.color{
    color: #000000;
}

.acolor{
    color: black;
    text-align: right ;
    font-weight: 900;
}

h1 .acolor{
    color: red;
}

.come{
    width: 269px;
    height: 65px;
    border: 2px solid black;
    margin: 0px;
}

Ответы [ 2 ]

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

Я немного почистил ваш код и требует пристального внимания, не нужно использовать p в тегах h2: 

body {
  margin: 0;
}

.header {
  width: 1922px;
  height: 109px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  background-color: #3f4246;
}

.footer {
  width: 1928px;
  height: 534px;
  background-color: #202326;
}

.body {
  width: 1920px;
  height: 3240px;
  background-color: #ffffff;
}

.all {
  width: 1170px;
  height: 700px;
}

.categ {
  width: 273px;
  height: 514px;
}

.cat {
  width: 273px;
  height: 50px;
  background-color: #86b817;
  margin-left: 391px;
  font-weight: 900;
  text-align: center;
  font-size: 40px;
  vertical-align: center;
}

.mycat {
  width: 274px;
  height: 473px;
  background-color: ;
  margin-left: 391px;
}

.com {
  width: 269px;
  height: 45px;
  border: 2px solid black;
  margin: 0px;
}

.color {
  color: #000000;
}

h1 .acolor {
  color: red;
}

.come {
  width: 269px;
  height: 65px;
  border: 2px solid black;
  margin: 0px;
}
<body>
  <header>
    <div class="header">

    </div>
  </header>
  <div class="body">
    <div class="all">
      <div class="cat">
        Hi
      </div>
      <div class="categ">

        <div class="mycat">
          <div class="com">
            <p class="color"></p>

          </div>
          <div class="com">
            <p class="color"></p>
          </div>
          <div class="come">
            <p class="color">
            </p>
          </div>
          <div class="com">
            <p class="color">

            </p>
          </div>
        </div>

      </div>

    </div>

    <main>


    </main>


    <footer>
      <div class="footer"></div>
    </footer>
1 голос
/ 05 мая 2020

Вы можете удалить высоту для класса .cat и удалить поле для тега h1 как 

 .cat{
    width: 273px;
    /*height: 50px;*/
    background-color: #86b817;
    margin-left: 391px;
    padding-top: 50px;
 }
 .cat h1{
    margin: 0;
 }


.header{

    width: 1922px; 
    height: 109px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
    background-color: #3f4246;

}

.footer{
    width: 1928px;
    height: 534px;
    background-color: #202326;

}

.body{
    width: 1920px;
    height: 3240px;
    background-color: #ffffff;
}

.all{
    width: 1170px;
    height: 700px;

}

.categ{
    width: 273px;
    height: 514px;
}

.cat{
    width: 273px;
    /*height: 50px;*/
    background-color: #86b817;
    margin-left: 391px;
    padding-top: 50px;
}

.mycat{
    width: 274px;
    height: 473px;
    background-color: ;
    margin-left: 391px;
}

.com{
    width: 269px;
    height: 45px;
    border: 2px solid black;
    margin: 0px;
}

.color{
    color: #000000;
}

.acolor{
    color: black;
    text-align: right ;
    font-weight: 900;
}

h1 .acolor{
    color: red;
}

.come{
    width: 269px;
    height: 65px;
    border: 2px solid black;
    margin: 0px;
}

.cat h1{
margin: 0;
}
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title></title>
</head>
<body>
<header>
<div class="header">

</div>
</header>   
<div class="body">
<div class="all">
                    <div class="cat">
                        <h1 acolor>Hi</h1> 
                    </div>
                <div class="categ"> 

                <div class="mycat">
                        <div class="com">
                            <p class="color"><h3></h3></p>
                        </div>
                        <div class="com">
                            <p class="color"><h3></h3></p>
                        </div>
                    <div class="come">
                            <p class="color">
                                <h4></h4>
                            </p>
                        </div>
                        <div class="com">
                            <p class="color">

                            </p>
                        </div>
                </div>  

    </div>
    </div>
</div>
<main>


</main>
</div>

<footer>
    <div class="footer"></div>
</footer>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...