Блог

Мне трудно практиковаться, и я не могу разобраться в этом, чтобы спасти свою жизнь. 7 часов безуспешных попыток найти решения! Ничего не сдвинется с места.

Я просто хочу, чтобы текст был посередине, как этот сайт или ссылка на этот сайт. Вместо всего белого я хочу непрозрачное черное поле с текстом над ним. Мой текст просто повсюду. И логотип слева, и панель навигации / меню справа от него. https://imgur.com/a/1oCKaco Ссылка на код. https://codepen.io/admitdefeat/pen/BEyMzK

HTML

 <div class="post-body">
  <p>Do you need something done to your home or around your home? Do you feel as if your home doesn't have the same appeal as when you got it? Call our team of professionals and we can do what is needed to your home, yard and business that will improve
      its look and how you feel when you see it!</p>
</div>
  

CSS

 post-body{    
  padding-top: 3rem;
  position: relative;
  box-sizing: inherit;
}
div {
  display: block;
}
  

Спасибо.

Я смотрел видео о том, как позиционировать, разделять, контейнеры и пытался объединить информацию.Однако есть кое-что, чего я не понимаю.

Я хочу, чтобы страница была выровнена и позиционирована.

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

 `#menu{
    position: fixed;
    right: 5px; /* or the amount you want */
    top: 5px; /* or the amount you want */
}`
  

примените ту же логику к логотипу и, наконец, добавьте text-align: center; , чтобы ваш текст располагался по центру страницы, и вуаля!

В вашем .post-body классе удалите padding-top: 3rem и position: relative , поскольку они портят ваше форматирование. Затем добавьте, text-align: center чтобы расположить текст по центру страницы, и добавьте, margin: 100px 20% чтобы ограничить расположение текста. Вы можете изменить оба этих значения на любые, какие пожелаете, в зависимости от того, к какому расположению вы стремитесь. Первое значение (100 пикселей) — это то, как далеко от верха вы хотите, чтобы текст начинался (ось y), а второе значение (20%) — это то, как далеко от левого и правого краев вы хотите, чтобы текст располагался (ось x).

Обратите внимание, что использование значения% для второго значения приведет к динамическому изменению размера текста для вас в зависимости от размера экрана. В этом случае размер экрана всегда будет составлять 20% от левого и правого края любого используемого вами устройства.

   body {
  font-family: "Basier";
  font-size: 20px;
}

html {
  background: url(summer.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

.post-body {
  box-sizing: inherit;
  text-align: center;
  margin: 100px 20%;
}

div {
  display: block;
}

@font-face {
  font-family: "Basier";
  src: url("basiersquare-regular-webfont.ttf");
}

.logo {
  width: 150px;
  height: 140 px;
}


/*Strip the ul of padding and list styling*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
}


/*Create a horizontal list with spacing*/

li {
  display: inline-block;
  float: left;
  margin-right: 0 px;
}


/*Style for menu links*/

li a {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Basier";
  color: #fff;
  background: #2f3036;
  text-decoration: none;
}


/*Hover state for top level links*/

li:hover a {
  background: #F4D03F;
}


/*Style for dropdown links*/

li:hover ul a {
  background: #F4D03F;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}


/*Hover state for dropdown links*/

li:hover ul a:hover {
  background: f1c40f;
  color: #fff;
}


/*Hide dropdown links until they are needed*/

li ul {
  display: none;
}


/*Make dropdown links vertical*/

li ul li {
  display: block;
  float: none;
}


/*Prevent text wrapping*/

li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}


/*Display the dropdown on hover*/

ul li a:hover .hidden,
.hidden:hover {
  display: block;
}


/*Style 'show menu' label button and hide it by default*/

.show-menu {
  font-family: "Basier";
  text-decoration: none;
  color: #F4D03F;
  background: #F4D03F;
  text-align: center;
  padding: 10px 0;
  display: none;
}


/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}


/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked~#menu {
  display: block;
}

@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/
  ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  ul li,
  li a {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }  

 <!DOCTYPE html>
<html lang="en">

<head>
  <title>CLT Designs</title>
  <link href="hoise.ico" rel="shortcut icon" type="image/x-icon">
  <meta charset="utf-8">
  <link href="designs.css" rel="stylesheet">
</head>

<body>

  <img class="logo" src="clt.png" alt="logoclt">

  <h2> RENOVATION PROJECT</h2>
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li><a href="thahomepage.html">Home</a></li>
    <li><a href="ABOUT.html">About</a></li>
    <li>
      <a href="Services.html">Services</a>
      <ul class="hidden">
        <li><a href="#">What is Design   Build?</a></li>
        <li><a href="#">Our Process</a></li>
      </ul>
    </li>
    <li><a href="Portfolio.html">Portfolio</a></li>
    <li><a href="Contact.html">Contact</a></li>
  </ul>

  <div class="post-body">
    <p>Do you need something done to your home or around your home? Do you feel as if your home doesn't have the same appeal as when you got it? Call our team of professionals and we can do what is needed to your home, yard and business that will improve
      its look and how you feel when you see it!</p>

  </div>

</body>

</html>  

Я пытался сделать это с абсолютным и относительным позиционированием, надеюсь, это решит ваш вопрос. я лишь немного изменил ваш код.

Проверьте этот codepen https://codepen.io/jls314/pen/oOgVGz

Вы хотели, чтобы логотип располагался слева, а панель навигации — справа, поэтому я объединил их в тег заголовка и расположил их.

 <header>
    <img class="logo" src="clt.png" alt="logoclt">
    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
    <li><a href="thahomepage.html">Home</a></li>
    <li><a href="ABOUT.html">About</a></li>
    <li>
    <a href="Services.html">Services</a>
  <ul class="hidden">
    <li><a href="#">What is Design   Build?</a></li>
    <li><a href="#">Our Process</a></li>
  </ul>
    </li>
    <li><a href="Portfolio.html">Portfolio</a></li>
    <li><a href="Contact.html">Contact</a></li>
  </ul>
</header>
  

это CSS:

 header {
    position: relative;
}

.logo {
    position: absolute;
    left: 10px;
    width: 150px;
    height: 140px;
    float: left;
}
#menu {
    position: absolute;
    right: 10px;
}

.post-body{    
    position: relative;
    top: 200px;
    box-sizing: inherit;
    width: 50%;
    margin: 0px auto;
    background: rgba(0,0,0,.7);
    color: white;
}