Раздел в HTML & CSS - PullRequest
Новая
       0

Раздел в HTML & CSS

0 голосов
/ 23 марта 2020

После создания моего Header я бы хотел добавить Section с абзацем, но проблема в том, что я не вижу свой абзац на своей странице.

Вот пример: 

<section>
    <p>test</p>
</section>

enter image description here

Почему мой раздел скрыт? Я забыл шаг? Я могу решить мою проблему с помощью свойства: margin-top, но я думаю, что это не рекомендуется.

Спасибо за вашу помощь, я новичок.

Вот мой код ниже 

body{
    	margin: 0px;
    	padding: 0px;
    }

    header{
    	font-size: 11px;
    	font-weight: 700;
    	color: #777;
    	line-height: 20px;
    }


    .banner {
      height: 550px; 
      width: 1366px; 
      position: absolute;

    }

    .transparent{
        position: relative;
        background-color: black;
        opacity: 0.5;
        height: 100px;
        width: 1366px;
        padding-top: 8px;
     
    }

    .page-left{
    	top: 1px;
    	color:white;
    	position: absolute;
    	display: inline-block;
    	left: 430px;
    }

    .page-left-languages{
    	top: 1px;
    	color:white;
    	position: absolute;
    	display: inline-block;
    	left: 515px;
    }

    .page-right{
    	top: 1px;
    	color:white;
    	position: absolute;
    	display: inline-block;
    	float: right;
    	right: 134px;
    }

    .page-right-login{
    	top: 1px;
    	color:white;
    	position: absolute;
    	display: inline-block;
    	float: right;
    	right: 80px;
    }

    nav{
    	position: absolute;
    	top: 44px;
    	float: right;
    	right: 92px;
    }

    nav ul{
    	list-style: none;
    }

    nav ul li{
    	display: inline-block;
    	font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 14px;
    	font-weight: bold;
    	text-transform: uppercase;
        line-height: 27px;
    }

    nav ul li a{
    	padding: 8px 16px;
    	text-decoration: none;
        color: #FFF;
    	text-decoration: center;
    	border-radius: 3px
    }

    nav ul li a:hover{
    	background-color: #FFF;
    	color: black;
    }

    .active{
    	background-color: #cd2122;
    	color: #FFF;
    	padding: 8px 16px;
    	border-radius: 3px;
    }

    .background-color-one{
    	position: absolute;
    	color: #fff;
        font-size: 28px;
        line-height: 1.3;
        border-left: 5px solid #fff;
        background-color: #000;
        left: 20px;
        bottom: 290px;
        padding: 0px 15px 0px 15px;
    }

    .background-color-two{
    	position: absolute;
    	color: #fff;
        font-size: 30px;
        line-height: 1.3;
        background-color: #000;
        left: 20px;
        bottom: 215px;
        padding: 10px 10px 10px 10px;
    }

    .background-color-three{
    	position: absolute;
    	color: #fff;
    	font-size: 16px;
    	line-height: 1.3;
        background-color: black;
        opacity: 0.5;
        left: 20px;
        bottom: 180px;
    }
<body>
      <header>
        <img class="banner" src="https://zupimages.net/up/20/13/5or2.jpg"/>
         <div class="transparent">    </div> 
            <div class="page-left">Portfolio</div>
            <div class="page-left-languages">Languages</div>
            <div class="page-right">Support</div>
            <div class="page-right-login">Login</div>  
          <nav>
            <ul>
              <li><a class="active"><href="#">Home</a></li>
              <li><a href="#"> Plan</a></li>
              <li><a href="#">Commission</a></li>
              <li><a href="#">About us</a></li>
              <li><a href="#">Features</a></li>
              <li><a href="#">Register</a></li>
              <li><a href="#">Pages</a></li>
              <li><a href="#">Contact us</a></li>
            </ul>
          </nav>
             <div class="background-color-one">7.6%-18% daily for 16 days</div>
             <div class="background-color-two">Min deposit $10-Max deposit $50,000</div>
             <div class="background-color-three">We accept Perfectmoney,Payeer and Bitcoin</div>
      </header>

      <section>
        <p>test</p>

      </section>
     


     </body>

Ответы [ 2 ]

1 голос
/ 24 марта 2020

Проще дать вашему телу фоновое изображение. Используйте flex-box для навигации. Все упрощается. 

html {
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
  min-height: 100%;
  background: #000 url('https://zupimages.net/up/20/13/5or2.jpg') no-repeat center center scroll;
  background-size: cover;
}

header {
  font-size: 11px;
  font-weight: 700;
  color: #777;
  padding: 1rem;
  margin: 0 0 2rem;
  background-color: rgba(0, 0, 0, 0.5);
}

#nav-secondary {
  display: flex;
  justify-content: space-between;
}

nav ul {
  list-style: none;
  margin: 0.5rem;
  padding: 0;
}

nav ul li {
  display: inline-block;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

nav ul li a {
  padding: 8px 16px;
  text-decoration: none;
  color: #FFF;
  text-decoration: center;
  border-radius: 3px;
  display: inline-block;
}

nav ul li a:hover {
  background-color: #FFF;
  color: black;
}

.active {
  background-color: #cd2122;
  color: #FFF;
  padding: 8px 16px;
  border-radius: 3px;
}

main {
  padding: 1rem;
}

.background-color-one {
  color: #fff;
  font-size: 28px;
  line-height: 1.3;
  border-left: 5px solid #fff;
  background-color: #000;
  padding: 0px 15px 0px 15px;
  margin-bottom: 30px;
}

.background-color-two {
  color: #fff;
  font-size: 30px;
  line-height: 1.3;
  background-color: #000;
  padding: 10px 10px 10px 10px;
  margin-bottom: 30px;
}

.background-color-three {
  color: #fff;
  font-size: 16px;
  line-height: 1.3;
  background-color: #000;
  padding: 10px 10px 10px 10px;
  opacity: 0.5;
}
<body>
  <header>
    <nav id="nav-secondary">
      <ul class="nav-secondary-left-list">
        <li><a class="active" href="#">Portfolio</a></li>
        <li><a href="#">Languages</a></li>
      </ul>
      <ul class="nav-secondary-right-list">
        <li><a href="#">Support</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </nav>

    <nav id="nav-primary">
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#"> Plan</a></li>
        <li><a href="#">Commission</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Register</a></li>
        <li><a href="#">Pages</a></li>
        <li><a href="#">Contact us</a></li>
      </ul>
    </nav>
  </header>

  <main>

    <section>
      <div class="background-color-one">7.6%-18% daily for 16 days</div>
      <div class="background-color-two">Min deposit $10-Max deposit $50,000</div>
      <div class="background-color-three">We accept Perfectmoney,Payeer and Bitcoin</div>
    </section>

    <section>
      <p>test</p>
    </section>

  </main>

</body>
1 голос
/ 23 марта 2020

Ваше изображение расположено абсолютно и "перед" вашим разделом. Есть более элегантные способы использовать изображение в качестве фона, например, использовать CSS -background-image на вашем теле. Но, используя ваш код, было бы быстро исправить отрицательный z-индекс изображения, чтобы он шел позади вашего раздела: 

body{
    	margin: 0px;
    	padding: 0px;
    }

    header{
    	font-size: 11px;
    	font-weight: 700;
    	color: #777;
    	line-height: 20px;
    }


    .banner {
      height: 550px; 
      width: 1366px; 
      position: absolute;
      z-index: -1; /* added */
    }

    .transparent{
        position: relative;
        background-color: black;
        opacity: 0.5;
        height: 100px;
        width: 1366px;
        padding-top: 8px;
     
    }

    .page-left{
    	top: 1px;
    	color:white;
    	position: absolute;
    	display: inline-block;
    	left: 430px;
    }

    .page-left-languages{
    	top: 1px;
    	color:white;
    	position: absolute;
    	display: inline-block;
    	left: 515px;
    }

    .page-right{
    	top: 1px;
    	color:white;
    	position: absolute;
    	display: inline-block;
    	float: right;
    	right: 134px;
    }

    .page-right-login{
    	top: 1px;
    	color:white;
    	position: absolute;
    	display: inline-block;
    	float: right;
    	right: 80px;
    }

    nav{
    	position: absolute;
    	top: 44px;
    	float: right;
    	right: 92px;
    }

    nav ul{
    	list-style: none;
    }

    nav ul li{
    	display: inline-block;
    	font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 14px;
    	font-weight: bold;
    	text-transform: uppercase;
        line-height: 27px;
    }

    nav ul li a{
    	padding: 8px 16px;
    	text-decoration: none;
        color: #FFF;
    	text-decoration: center;
    	border-radius: 3px
    }

    nav ul li a:hover{
    	background-color: #FFF;
    	color: black;
    }

    .active{
    	background-color: #cd2122;
    	color: #FFF;
    	padding: 8px 16px;
    	border-radius: 3px;
    }

    .background-color-one{
    	position: absolute;
    	color: #fff;
        font-size: 28px;
        line-height: 1.3;
        border-left: 5px solid #fff;
        background-color: #000;
        left: 20px;
        bottom: 290px;
        padding: 0px 15px 0px 15px;
    }

    .background-color-two{
    	position: absolute;
    	color: #fff;
        font-size: 30px;
        line-height: 1.3;
        background-color: #000;
        left: 20px;
        bottom: 215px;
        padding: 10px 10px 10px 10px;
    }

    .background-color-three{
    	position: absolute;
    	color: #fff;
    	font-size: 16px;
    	line-height: 1.3;
        background-color: black;
        opacity: 0.5;
        left: 20px;
        bottom: 180px;
    }
<body>
      <header>
        <img class="banner" src="https://zupimages.net/up/20/13/5or2.jpg"/>
         <div class="transparent">    </div> 
            <div class="page-left">Portfolio</div>
            <div class="page-left-languages">Languages</div>
            <div class="page-right">Support</div>
            <div class="page-right-login">Login</div>  
          <nav>
            <ul>
              <li><a class="active"><href="#">Home</a></li>
              <li><a href="#"> Plan</a></li>
              <li><a href="#">Commission</a></li>
              <li><a href="#">About us</a></li>
              <li><a href="#">Features</a></li>
              <li><a href="#">Register</a></li>
              <li><a href="#">Pages</a></li>
              <li><a href="#">Contact us</a></li>
            </ul>
          </nav>
             <div class="background-color-one">7.6%-18% daily for 16 days</div>
             <div class="background-color-two">Min deposit $10-Max deposit $50,000</div>
             <div class="background-color-three">We accept Perfectmoney,Payeer and Bitcoin</div>
      </header>

      <section>
        <p>test</p>

      </section>
     


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

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

...