Получение навигационной панели по центру - PullRequest
Новая
       3

Получение навигационной панели по центру

0 голосов
/ 06 марта 2020

Я работаю над сайтом для себя, но я понятия не имею, как мне расположить панель навигации по центру сайта.

Я подумал, что, возможно, у кого-то есть идея :) вся панель навигации немного влево, и я не знаю, как это исправить .. Надеюсь, что вы, ребята, можете это сделать :) Я новичок в программировании, и мне нужно еще многое узнать ...

скриншот страницы

lo go

спасибо за помощь:)

Html: 

<!DOCTYPE html>
<html>

    <head>
        <title>Meine Seite!</title>
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <header>
            <nav>
                <ul>
                <li><a href="sets.html">Sets</a></li>
                <li><a href="about.html">About</a></li>
                <li class="logo"><a href="index.html">SueZ Logo</a></li>
                <li><a href="gigs.html">Gigs</a></li>
                <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>
        <section class="features">
            <figure>
                <img src="" alt="trololololol">
                <figcaption>Fresh Baked Techno</figcaption>
            </figure>
            <figure>
                <img src="" alt="lalala">
                <figcaption>?</figcaption>
            </figure>
            <figure>
                <img src="" alt="Bla bli blub">
                <figcaption>?</figcaption>
            </figure>
        </section>
        <footer>Copyright &copy; 2020 SueZ</footer>
    </body>

</html>

CSS: 

body {
    background: rgb(58, 58, 58);
    color: rgb(174, 62, 50);
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
  }

  header {
    background-color: black;
    background-image: url("Fotos/background-warehouse.jpg");
    background-size: 100%;
    background-position: center;
    height: 150px;
    padding: 20px;
    text-align: center;
  }

  header a {
    color: rgb(174, 62, 50);
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 60px;
    text
  }

  header .logo a {
    background-image: url(Fotos/SueZ_Logo_Red_BG_Transparent.PNG);
    background-size: 100px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 190px;
    position: relative;
    text-indent: -9999999px;
    top: -40px;
    width: 200px;;
    margin-left: 20%;
  }

  nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  nav li {
    display: inline-block;
    margin-right: 20px;
  }

  .features {
    background: white;
    color: gray;
    padding: 20px;
    display: flex;
    flex-direction: row;
  }

  .features figure {
    margin: auto;
    text-align: center;
    text-transform: uppercase;
    width: 200px;
  }

  .features figure img {
    border: 1px solid white;
    border-radius: 50%;
    box-shadow: gray 0 0 10px;
    width: 200px;
  }

  footer {
    background: black;
    color: gray;
    font-size: 12px;
    padding: 20px 20px;
    text-align: center;
  }

1 Ответ

0 голосов
/ 06 марта 2020

Здесь я сделал фрагмент для решения вашей проблемы. Проверь это. Надеюсь, поможет.

Обновлено CSS помечено /*----------*/

............................. ..................................................

СОВЕТ для вас

Не используйте height. 

body {
    background: rgb(58, 58, 58);
    color: rgb(174, 62, 50);
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
/*------------------------*/
  header {
    background-color: black;
    background-image: url("Fotos/background-warehouse.jpg");
    background-size: 100%;
    background-position: center;
    /*height: 150px;*/
    padding: 40px;
    text-align: center;
    position:relative;
  }
  
    .logo{width:100px;position:absolute; left:0; right:0; margin: 0 auto; top:0; z-index:10;}
    .logo img{width:100%;}
    
 /*------------------------*/
  header a {
    color: rgb(174, 62, 50);
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 60px;
    
  }

  

  nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  nav li {
    display: inline-block;
    margin-right: 20px;
  }
  /*------------------------*/
  nav li:last-child{margin-right:0}
  nav li:nth-child(2){margin-right:120px}
  
  /*------------------------*/

  .features {
    background: white;
    color: gray;
    padding: 20px;
    display: flex;
    flex-direction: row;
  }

  .features figure {
    margin: auto;
    text-align: center;
    text-transform: uppercase;
    width: 200px;
  }

  .features figure img {
    border: 1px solid white;
    border-radius: 50%;
    box-shadow: gray 0 0 10px;
    width: 200px;
  }

  footer {
    background: black;
    color: gray;
    font-size: 12px;
    padding: 20px 20px;
    text-align: center;
  }
<!DOCTYPE html>
<html>

<head>
    <title>Meine Seite!</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <div class="logo">
          <a href="#!"><img src="https://i.stack.imgur.com/yfW19.png" alt="logo"></a>
        </div>
        <nav>
          <ul>
            <li><a href="sets.html">Sets</a></li>
            <li><a href="about.html">About</a></li>
            
            <li><a href="gigs.html">Gigs</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </header>
      <section class="features">
        <figure>
            <img src="" alt="trololololol">
            <figcaption>Fresh Baked Techno</figcaption>
          </figure>
          <figure>
              <img src="" alt="lalala">
              <figcaption>?</figcaption>
            </figure>
            <figure>
                <img src="" alt="Bla bli blub">
                <figcaption>?</figcaption>
              </figure>
      </section>

      <footer>
        Copyright &copy; 2020 SueZ
      </footer>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...