CSS Дизайн меню - Контент под меню - PullRequest
Новая
       5

CSS Дизайн меню - Контент под меню

0 голосов
/ 30 января 2020

Я все еще новичок в этом и у меня есть некоторые проблемы. У меня проблема с моим меню и телом. То, что я хочу, это иметь изображение с содержанием прямо под меню. Проблема в моем случае заключается в том, что класс раздела в теле идет под содержимым из тега nav, что также приводит к исчезновению текста h1 в меню.

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">

<link href="https://fonts.googleapis.com/css?family=Arvo&display=swap" rel="stylesheet">

<title>Portfolio Page</title>
</head>

<body>

<header>
        <class class="logo">Logo Name</class>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Portfolio</a>
        <a href="#">Contacts</a>

    </nav>
</header>

<section class="intro">
    <h1>Hello, this is the Page Intro!</h1>
    <p>This is some smaller Text!</p>
</section>

<section class="information">
    <p>Here will be some Infos</p>
</section>

</body>

<footer>
<p>Copyright @2020</p>
</footer>

</html>

А вот это CSS

*{
margin: 0;
padding: 0;
}

html, body {
 height: 100%;
}

body{ 
 font-family: 'Arvo', serif;
}

header{
 background-color: #222;
 width: 100%;
 height: 8vh;
 display: flex;
 position: fixed;
}

nav{
 flex: 1;
 align-self: center;
}

nav a{
 color: rgb(197, 197, 14);
 text-decoration: none;
 list-style: none;
 color: black;
 margin-left: 5vh;
 font-weight: 600;
 font-size: 24px;
 letter-spacing: 3px;
}


.logo{
 color: rgb(197, 197, 14);
 flex:1;
 align-self: center;
 margin-left: 5vh;
 letter-spacing: 3px;
}

.intro{
 text-align: center;
 background-image: url(img/flat2.jpg);
 background-repeat: no-repeat;
 background-position: center; 
 width: 100%;
 height: 60vh;

}

h1{
 padding-top: 25px;
 }

.information{
  background-color: #222;
  text-align: center;
  min-height: 60vh;
  color: rgb(197, 197, 14);
}


footer{
 background-color: whitesmoke;
 text-align: center;
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 4vh;

 }

footer p{
 font-weight: bold;
 font-size: 12px;
 margin-top: 8px;
}

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

Спасибо за помощь в любом случае!

Ответы [ 3 ]

0 голосов
/ 30 января 2020

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

h1 {
    padding-top: 150px;
}

Цвет ссылок не появился, потому что он был определен как черный после. Так что это было переписано. В следующем блоке удалите color: black, и цвет, определенный ранее, будет применяться. 

nav a{
 color: rgb(197, 197, 14);
 text-decoration: none;
 list-style: none;
 color: black;
 margin-left: 5vh;
 font-weight: 600;
 font-size: 24px;
 letter-spacing: 3px;
}
0 голосов
/ 30 января 2020
  1. Добавьте верхний отступ в intro классе
  2. Удален color: black; в вашем nav a
  3. Элемент нижнего колонтитула должен быть внутри вашего тега body

https://jsfiddle.net/oLu2tn58/

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Arvo', serif;
}

header {
  background-color: #222;
  width: 100%;
  height: 8vh;
  display: flex;
  position: fixed;
}

nav {
  flex: 1;
  align-self: center;
}

nav a {
  color: rgb(197, 197, 14);
  text-decoration: none;
  list-style: none;
  margin-left: 5vh;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 3px;
}

.logo {
  color: rgb(197, 197, 14);
  flex: 1;
  align-self: center;
  margin-left: 5vh;
  letter-spacing: 3px;
}

.intro {
  text-align: center;
  background-image: url(img/flat2.jpg);
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 60vh;
  padding-top: 8vh;
}

h1 {
  padding-top: 25px;
}

.information {
  background-color: #222;
  text-align: center;
  min-height: 60vh;
  color: rgb(197, 197, 14);
}

footer {
  background-color: whitesmoke;
  text-align: center;
  position: static;
  width: 100%;
  height: 4vh;
}

footer p {
  font-weight: bold;
  font-size: 12px;
  margin-top: 8px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">

  <link href="https://fonts.googleapis.com/css?family=Arvo&display=swap" rel="stylesheet">

  <title>Portfolio Page</title>
</head>

<body>

  <header>
    <class class="logo">Logo Name</class>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Portfolio</a>
      <a href="#">Contacts</a>

    </nav>
  </header>

  <section class="intro">
    <h1>Hello, this is the Page Intro!</h1>
    <p>This is some smaller Text!</p>
  </section>

  <section class="information">
    <p>Here will be some Infos</p>
  </section>

  <footer>
    <p>Copyright @2020</p>
  </footer>

</body>

</html>
0 голосов
/ 30 января 2020

1-й) для ссылок цвета у вас есть 2 цвета, просто удалите цвет: черный; 2) позиция: фиксированная в заголовке аналогична позиции: абсолютная; как в том смысле, что он не перемещает содержимое вокруг него, а наоборот, так что вам просто нужно добавить padding-top или margin-top к заголовку, чтобы просто убрать его с верха.

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

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

...