Как сделать масштаб навигации с изменением размеров окна? - PullRequest
Новая
       5

Как сделать масштаб навигации с изменением размеров окна?

1 голос
/ 13 июля 2020

Когда я разверну окно вправо, приветственное сообщение, а также фоновое изображение также переместятся вправо; однако навигация под ним не перемещается. Что мне сделать, чтобы они все двигались вместе? 

#flower-background-1 {
  background-image: url("https://www.fiftyflowers.com/blog/wp-content/uploads/iStock-659171982-1170x449.jpg");
  height: 300px;
  width: 900px;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
}

#welcome {
  font-family: 'Great Vibes', cursive;
  font-size: 50px;
  border: 2px solid white;
  color: white;
  width: auto;
  text-align: center;
  position: relative;
  bottom: 150px;
  background-color: indigo;
}

nav {
  display: inline-block;
  padding: 100px;
  position: relative;
  bottom: 170px;
  left: 80px;
}
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="Test.css">
    <title>My Flower Shop</title>
</head>
<div id="flower-background-1"></div>
<div id="welcome">Welcome to My Flower Shop</div>

<body>
    <header>
        <div class="navigation">
            <nav id="Home">HOME</nav>
            <nav id="About Us">ABOUT US</nav>
            <nav id="Contact Us">CONTACT US</nav>
        </div>

1 Ответ

0 голосов
/ 14 июля 2020

Это то, что вы хотите? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
            width: 95%;
            margin: 0 auto;
        }
        #flower-background-1 {
            background-image: url("https://www.fiftyflowers.com/blog/wp-content/uploads/iStock-659171982-1170x449.jpg");
            background-repeat: no-repeat;
            background-position: center;
            max-height: 300px;
            height: 300px;
            margin-left: auto;
            margin-right: auto;
        }

        #welcome {
            font-family: 'Great Vibes', cursive;
            font-size: 50px;
            border: 2px solid white;
            color: white;
            width: auto;
            text-align: center;
            position: relative;
            bottom: 150px;
            background-color: indigo;
        }
        nav {
            padding: 100px;
            background-color: black;
            color: white;
        }
        nav a {
            padding: 20px;
        }
    </style>
</head>
<body>

<div id="container">
    <div id="flower-background-1"></div>
    <div id="welcome">Welcome to My Flower Shop</div>
    <header>
        <nav class="navigation">
            <a id="Home">HOME</a>
            <a id="About Us">ABOUT US</a>
            <a id="Contact Us">CONTACT US</a>
        </nav>
    </header>
</div>

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

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

...