Как разместить текст в центре, а логотип - слева от панели навигации в CSS? - PullRequest
Новая
       39

Как разместить текст в центре, а логотип - слева от панели навигации в CSS?

1 голос
/ 02 апреля 2019

Мне трудно тренироваться, и я не могу понять это, чтобы спасти мою жизнь. 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;
}

Спасибо.

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

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

Ответы [ 3 ]

0 голосов
/ 02 апреля 2019

В вашем классе .post-body удалите padding-top: 3rem и position: relative, так как они портят ваше форматирование. Затем добавьте text-align: center, чтобы центрировать текст на странице, и добавьте margin: 100px 20%, чтобы ограничить расположение текста. Вы можете изменить оба этих значения на любое другое, в зависимости от того, к какому положению вы стремитесь. Первое значение (100px) - это то, как далеко от вершины вы хотите, чтобы текст начинался (ось 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>
0 голосов
/ 02 апреля 2019

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

Проверьте эту кодовую ручку 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;
}
0 голосов
/ 02 апреля 2019

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

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

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

...