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

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

0 голосов
/ 25 мая 2020

Я создал дизайн в Adobe XD, но мне не удается получить вторую панель навигации в правильном положении. Adobe XD Design

Я поигрался с элементом float, но потом он перекрывает мое фоновое изображение для изображения главного героя.

Вот как он сейчас выглядит: Текущий

Может кто-нибудь направит меня в правильном направлении? Также заметил, что панели навигации не реагируют: (

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;1,500&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    
    
}

a {
    color: black;
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: smaller;

}


.logo {
    width: 12em;
    margin: 2em;
    left: 20px;
}

.top-navbar {
    float: right;
    font-size: smaller;
    
    
}

nav li {
    display: inline-block;
    margin: 1em;
    
}

.hero-image {
    background-image: url("https://www.midlandnetworks.co.uk/wp-content/uploads/2018/08/midland-info-graphic-starter1-01-1900x500.png");
    display: block;
    height: 50vh;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-bottom: 1px;
}

.introduction-section {
    margin: 2em;
    
}

h1 {
    font-size: 28px;
    &::after {
        content: ' ';
        border-bottom: 5px solid #3274B9;
        display: block;
        width: 1.3em;
    }
}

h2{
    font-size: 18px;
    font-weight: 300;
}

p {
    font-weight: 200;
}

.main-navbar{
    font-size: 1em;
    float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Midland Networks | Home</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="main-navigation">
           
                <img src="images/logo.svg" class="logo" alt="logo">
           
        
        <nav class="top-navbar">

            <ul>
                <li>0121 xxx xxx</li>
                <li>Contact Us</li>
                <li>About Us</li>
                <li>Help Centre</li>
                <li>Downloads</li>
                <li>PBX Login</li>
                <li>Billing</li>
            </ul>

        </nav>
        
    </div>

    <div class="main-navbar">
        <nav class="main">

            <ul>
                <li>0121 xxx xxx</li>
                <li>Contact Us</li>
                <li>About Us</li>
                <li>Help Centre</li>
                <li>Downloads</li>
                <li>PBX Login</li>
                <li>Billing</li>
            </ul>
    
        </nav>


    </div>
    
    <div class="hero-image">
       
    </div>

    <div class="introduction-section">
        <h1>Welcome to Midland Networks</h1>
        <h2>Business Telecom Specialists with over 30 years experience </h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p>
    </div>

    <div class="highlighted">


    </div>

    <div class="our-services">



    </div>

    <div class="contact-us">



    </div>

</body>
<footer>


</footer>
</html>

Ответы [ 2 ]

1 голос
/ 25 мая 2020

Я удалил ваши объявления с плавающей запятой и использовал вместо них display: flex;. У вас больше не будет проблем с перекрытием ваших навигационных панелей изображения героя. Чтобы lo go совпадал со второй панелью навигации, вам нужно поместить ее в тот же div.

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

Раскомментируйте свойства фона, чтобы увидеть пространство, занимаемое каждым элементом. 

body {
  background: white;
  color: #323232;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;1,500&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}

a {
  color: black;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: smaller;
}

.main-navigation {
  display: flex;
  justify-content: flex-end;
  
  /*background: lightblue;*/
}

.top-navbar {
  font-size: smaller;
}

nav li {
  display: inline-block;
  margin: 1em;
}

.hero-image {
  background-image: url('https://www.midlandnetworks.co.uk/wp-content/uploads/2018/08/midland-info-graphic-starter1-01-1900x500.png');
  display: block;
  height: 50vh;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-bottom: 1px;
}

.introduction-section {
  margin: 2em;
}

h1 {
  font-size: 28px;
  &::after {
    content: ' ';
    border-bottom: 5px solid #3274B9;
    display: block;
    width: 1.3em;
  }
}

h2 {
  font-size: 18px;
  font-weight: 300;
}

p {
  font-weight: 200;
}

.main-navbar {
  display: flex;
  justify-content: space-between;
  font-size: 1em;
  /*background: pink;*/
}

.logo {
  width: 12em;
  padding: 2em;
  background: lightcoral;
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*background: lightgreen;*/
}

.main ul{
  /*background: tomato;*/
}
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Midland Networks | Home</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
    <div class="main-navigation">
      <nav class="top-navbar">
        <ul>
          <li>0121 xxx xxx</li>
          <li>Contact Us</li>
          <li>About Us</li>
          <li>Help Centre</li>
          <li>Downloads</li>
          <li>PBX Login</li>
          <li>Billing</li>
        </ul>
      </nav>
    </div>

    <div class="main-navbar">
     <img src="images/logo.svg" class="logo" alt="logo" />
      <nav class="main">
        <ul>
          <li>0121 xxx xxx</li>
          <li>Contact Us</li>
          <li>About Us</li>
          <li>Help Centre</li>
          <li>Downloads</li>
          <li>PBX Login</li>
          <li>Billing</li>
        </ul>
      </nav>
    </div>

    <div class="hero-image"></div>

    <div class="introduction-section">
      <h1>Welcome to Midland Networks</h1>
      <h2>Business Telecom Specialists with over 30 years experience</h2>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
        ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
        elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
      </p>
    </div>

    <div class="highlighted"></div>

    <div class="our-services"></div>

    <div class="contact-us"></div>
  </body>
  <footer></footer>
</html>

Чтобы lo go выровнялся с двумя панелями навигации, вам нужно поместить все в один и тот же div. .Main-navigation и .navbars - это гибкие контейнеры. Здесь display: grid; даже лучше флекс. Вам стоит подумать об этом. 

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;1,500&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}

a {
  color: black;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: smaller;
}

.main-navigation {
  display: flex;
  justify-content: space-between;
  /*background: black;*/
}

.top-navbar {
  font-size: smaller;

  display: flex;
  justify-content: flex-end;
  /*background: darkgrey;*/
}

nav li {
  display: inline-block;
  margin: 1em;
}

.hero-image {
  background-image: url('https://www.midlandnetworks.co.uk/wp-content/uploads/2018/08/midland-info-graphic-starter1-01-1900x500.png');
  display: block;
  height: 50vh;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-bottom: 1px;
}

.introduction-section {
  margin: 2em;
}

h1 {
  font-size: 28px;
  &::after {
    content: ' ';
    border-bottom: 5px solid #3274B9;
    display: block;
    width: 1.3em;
  }
}

h2 {
  font-size: 18px;
  font-weight: 300;
}

p {
  font-weight: 200;
}

.navbars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.logo {
  width: 12em;
  padding: 2em;
  background: lightcoral;
}

.main {
  display: flex;
  flex-direction: column;
  font-size: 1em;
  /*background: lightgreen;*/
}

.main ul {
  margin-top: 2em;
  /*background: tomato;*/
}

.main ul li {
  /*background: white;*/
}
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Midland Networks | Home</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
    <div class="main-navigation">
      <img src="images/logo.svg" class="logo" alt="logo" />
      <div class="navbars">
        <nav class="top-navbar">
          <ul>
            <li>0121 xxx xxx</li>
            <li>Contact Us</li>
            <li>About Us</li>
            <li>Help Centre</li>
            <li>Downloads</li>
            <li>PBX Login</li>
            <li>Billing</li>
          </ul>
        </nav>
        <nav class="main">
          <ul>
            <li>0121 xxx xxx</li>
            <li>Contact Us</li>
            <li>About Us</li>
            <li>Help Centre</li>
            <li>Downloads</li>
            <li>PBX Login</li>
            <li>Billing</li>
          </ul>
        </nav>
      </div>
    </div>

    <div class="hero-image"></div>

    <div class="introduction-section">
      <h1>Welcome to Midland Networks</h1>
      <h2>Business Telecom Specialists with over 30 years experience</h2>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
        ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
        elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
      </p>
    </div>

    <div class="highlighted"></div>

    <div class="our-services"></div>

    <div class="contact-us"></div>
  </body>
  <footer></footer>
</html>
0 голосов
/ 25 мая 2020

enter image description here

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;1,500&display=swap');
* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}

a {
  color: black;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: smaller;
}

.logo {
  width: 12em;
  margin: 2em;
  left: 20px;
}

.top-navbar {
  font-size: smaller;
  width: 100%;
}

nav li {
  display: inline-block;
  margin: 1em;
}

.hero-image {
  background-image: url("https://www.midlandnetworks.co.uk/wp-content/uploads/2018/08/midland-info-graphic-starter1-01-1900x500.png");
  display: block;
  height: 50vh;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-bottom: 1px;
}

.introduction-section {
  margin: 2em;
}

h1 {
  font-size: 28px;
  &::after {
    content: ' ';
    border-bottom: 5px solid #3274B9;
    display: block;
    width: 1.3em;
  }
}

h2 {
  font-size: 18px;
  font-weight: 300;
}

p {
  font-weight: 200;
}

.main-navbar {
  font-size: 1em;
  width: 100%;
  margin-top: 28px;
}

.div-container {
  width: 100%;
  height: 150px;
}

.logodiv {
  float: left;
  width: 19%;
  height: 200px;
}

.main-navigation {
  float: right;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Midland Networks | Home</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">

  <body>

    <div class="div-container">

      <div class="logodiv" style="   ">
        <img src="https://dynamic.brandcrowd.com/asset/logo/4bcc41b8-a669-4722-bf04-57fe2cd8dc7f/logo?v=4" class="logo" alt="logo">
      </div>
      <div class="main-navigation">


        <nav class="top-navbar">

          <ul>
            <li>0121 xxx xxx</li>
            <li>Contact Us</li>
            <li>About Us</li>
            <li>Help Centre</li>
            <li>Downloads</li>
            <li>PBX Login</li>
            <li>Billing</li>
          </ul>

        </nav>
        <div class="main-navbar">
          <nav class="main">

            <ul>
              <li>0121 xxx xxx</li>
              <li>Contact Us</li>
              <li>About Us</li>
              <li>Help Centre</li>
              <li>Downloads</li>
              <li>PBX Login</li>
              <li>Billing</li>
            </ul>

          </nav>


        </div>

      </div>

    </div>
    <div class="hero-image">

    </div>

    <div class="introduction-section">
      <h1>Welcome to Midland Networks</h1>
      <h2>Business Telecom Specialists with over 30 years experience </h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p>
    </div>

    <div class="highlighted">


    </div>

    <div class="our-services">



    </div>

    <div class="contact-us">



    </div>

  </body>
  <footer>


  </footer>

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

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

...