Панель навигации не будет перемещаться вверх, чтобы быть даже с img вверху, используя CSS dreamweaver - PullRequest
Новая
       23

Панель навигации не будет перемещаться вверх, чтобы быть даже с img вверху, используя CSS dreamweaver

0 голосов
/ 10 января 2019

У меня есть изображение логотипа в верхней левой части сайта, и я хочу, чтобы моя навигация отображалась в верхней правой части сайта. Навигация отображается в правой части страницы, но вместо того, чтобы быть параллельной логотипу, она находится под ней, даже если логотип находится на левой стороне. Любая идея о том, что мне не хватает в приведенном ниже коде, препятствует продвижению навигации. 

   @charset 'UTF-8';

   html,
   html * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }

   body {
     font-family: arial, sans-serif;
     <!-- font-size: 1vw;>
     background: white;
   }

   img { 
       width: 100%;
       max-width: 100%;
       height: auto;
       vertical-align: middle;
       -webkit-transform: translate3d(0,0,0);
       transform: translate3d(0,0,0);
   }

   a, a:visited {
       color: inherit;
   }

   header {
     position: fixed;
     padding: 1.5em;
     top: 0;
     left: 0;
     width: 100%;
    z-index: 1000;
   }

   .site-logo {
       width: 30%;
       max-width: 30%;
       position: relative;
       display: block;
   }

   .site-logo img {
     width: 22em;
   }

   .logo {
     opacity: 1;
   }

   .site-nav {
     position: relative;
     float: right;
     z-index: 400;
     top: 0;
     left: 0;
     display: block !important;
     width: 68%;
     padding: .75em 1em 0 0;
     opacity: .95;
     background: none;
   }

   .site-nav ul {
     list-style-type: none;
     margin: 0;
     text-align: right;
   }

   .site-nav ul li {
     display: inline-block;
     margin-bottom: 0;
     margin-left: 1.5em;
   }

   .site-nav ul li a {
     font-size: .85em;
     padding-bottom: .5em;
     text-decoration: none;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: #000000;
     -webkit-transition: color .3s;
     transition: color .3s;
   }

   .site-nav ul li a:hover {
     outline: none;
     border-bottom: 1px solid black;
   }

HTML 

    <header>
    <!-- Logo -->
        <a class="site-logo">
            <img class="logo" src="images/SBI Logo.png" alt=""/>
        </a>

    <!-- Navigation Menu -->    
          <nav class="site-nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Rooms</a></li>
                <li><a href="#">Gift Certificates</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Things To Do</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Blog</a></li>

            </ul>
          </nav>
    </header>

введите описание изображения здесь

1 Ответ

0 голосов
/ 11 января 2019

Вы увязли в таблице стилей и тоже используете EM, вам будет гораздо проще использовать PIXELS вместо EM для позиционирования ваших элементов. 

<style>
    .mysitelogo
    {
      margin-top: 16px;
      width: 458px;
      height: 114px;
    }
    .mysitenav
    {
      float: right;
      padding: 8px;
      opacity: .95;
    }
  </style>


  <header>
    <!-- Logo -->
    <img class="mysitelogo" src="logo.gif" alt="" />
    <!-- Navigation Menu -->
    <nav class="mysitenav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Rooms</a></li>
        <li><a href="#">Gift Certificates</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Things To Do</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </nav>
  </header>

Используя приведенный выше код, вы можете получить макет, который вы хотите, ТОГДА точно настроить свой макет в таблице стилей.

Иногда бывает проще разбить большую проблему на основные части.

Прочтите эту страницу, чтобы лучше понять использование EM относительно размера шрифта. https://www.w3schools.com/CSSref/css_units.asp

...