Центр текста навигационной панели и выравнивание вправо.Также сохраняйте панель навигации неповрежденной при уменьшении размера страницы. - PullRequest
Новая
       1

Центр текста навигационной панели и выравнивание вправо.Также сохраняйте панель навигации неповрежденной при уменьшении размера страницы.

0 голосов
/ 19 февраля 2019

Итак, мои знания относительно кодирования HTML5 и CSS довольно ограничены.Я пытаюсь разработать веб-сайт для моей компании по охране труда и здоровья.

Я начал с навигационной панели, логотипа и кнопок навигации.Тем не менее, я не могу расположить текст по центру навигационной панели вертикально и заблокировать его по горизонтали.Кроме того, я заметил, что при увеличении и уменьшении размера браузера текст фактически выходит за пределы панели навигации.

Кажется, я не могу разместить свой код здесь. Здесь - ссылка на код: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
  <link rel="stylesheet" href="css/stylesheet.css"/>
<title>CMK Safety Solutions - Home</title>
</head>

<body>
    <div class="navigation-bar">
        <div id="navigation-container">
                <img src="images/logopng.png" height="120px"/>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Services</a></li>
                <li><a href="#">Current Clients/Projects</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </div>
</body>

Вот код CSS 

body {
  margin: 0;
  padding: 0;
}

.logo {
  float: right;
}
/* ~~ Top Navigation Bar ~~ */

#navigation-container {
    margin: 0 auto;
  height: 120px;
}

.navigation-bar {
  background-color: #000000;
  height: 120px;
  width: 100%;
}

.navigation-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: right;
  display:inline-block;
  vertical-align:top;
}

.navigation-bar li {
  list-style-type: none;
  padding: 0px;
  height: 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline-block;
  text-align: right;
}

.navigation-bar li a {
  color: #808080;
  font-size: 16px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  line-height: 70px;
  padding: 5px 15px;
  opacity: 1;
  text-align: right;
}

1 Ответ

0 голосов
/ 19 февраля 2019

Примерно так: https://jsfiddle.net/mulperi/189so4Ln/

Используйте фрагмент кода ниже на контейнере, чтобы он нажимал кнопки навигации вправо и логотип слева.Кроме того, все расположено по центру по вертикали: 

#navigation-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

И это на самом деле о чем подумать.Вы можете использовать media query , чтобы проверить, меньше или больше экран заданной минимальной или максимальной ширины, и применить другой набор стилей для этого сценария.Как колонка навигации, например, как в моей скрипке.Попробуйте уменьшить экран, чтобы увидеть, как навигационные ссылки меняют ориентацию, когда экран меньше 400 пикселей.

@media screen and (min-width: 400px) {
  .navigation-bar li {
    display: inline-block;
  }
}

В качестве примечания попробуйте использовать семантические элементы HTML5 , например <nav> для навигации:)

Надеюсь, это поможет!

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

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

...