Блог

Главная - Вопросы по программированию - В общей таблице стилей возникают проблемы с размерами навигации, которые заметно меняются в разных представлениях, но имеют одинаковый размер в инструментах разработчика (Chrome)

В общей таблице стилей возникают проблемы с размерами навигации, которые заметно меняются в разных представлениях, но имеют одинаковый размер в инструментах разработчика (Chrome)

#html #css #sass

#HTML #css #sass

Вопрос:

Я не слишком уверен, что мой заголовок достаточно хорошо передал сообщение. По сути, я разрабатываю веб-сайт портфолио. Я использую SCSS и имею практически одинаковый html на страницах для навигации и нижнего колонтитула. Проблема в том, что когда я переключаюсь, скажем, с домашнего просмотра на представление «Обо мне», наблюдается заметная разница в размере размера шрифта навигационной ссылки и, по доверенности, в высоте ul. Это также очевидно из-за дополнительного пространства, которое отображается под значком навигации. Однако, когда я смотрю на стили DOM в инструментах разработчика (как указано выше, я в основном использую chrome на начальном этапе проектирования), это показывает, что независимо от вида размеры одинаковы. Я надеюсь, что это имеет смысл, и, пожалуйста, дайте мне знать, если для этого потребуется дополнительная информация.

 nav {
  background: #00334f;
  /* Old browsers */ }
  nav div.page-icon {
    text-align: center; }
  nav div.page-icon img {
    width: 60%;
    height: 60%; }
  nav .nav-header-links {
    list-style: none; }
  nav .nav-header-links li {
    display: inline-block;
    position: relative; }
  nav .nav-header-links li a {
    display: inline-block;
    text-decoration: none;
    padding: 3rem;
    color: white;
    font-weight: bold;
    font-family: "Orbitron", sans-serif; }
  nav .nav-header-links li a:hover {
    background: #b38f00;
    color: black; }
  nav .nav-header-links li div {
    transition: all 1s ease-in; }
  nav .nav-header-links li:hover div {
    display: block; }
  nav .nav-bottom-triangle {
    position: absolute;
    left: 15%;
    border-top: solid 20px #b38f00;
    border-right: solid 20px transparent;
    border-left: solid 20px transparent;
    display: none; }
  nav div.social-icons {
    height: 100%; }
    nav div.social-icons .social-icons-list {
      list-style: none;
      text-align: right;
      padding-right: 2rem; }
    nav div.social-icons .social-icons-list li {
      display: inline-block;
      width: 10%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      text-align: center;
      position: relative; }
    nav div.social-icons .social-icons-list li a {
      display: inline-block;
      vertical-align: middle;
      border-left: solid 2px white;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a img {
      width: 70%;
      height: 70%;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a:hover {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 50%; }
    nav div.social-icons .social-icons-list li a:hover img {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg); }  
 <nav class="row">
        <div class="page-icon col-1">
          <img src="design/images/Placeholder.png" alt="Devoneous Design Icon"/>
        </div>
        <ul class="nav-header-links col-7">
          <li><a href="">Home</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="aboutMe.html">About Me</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="contactMe.html">Contact</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="#">Portfolio</a><div class="nav-bottom-triangle"></div></li>
        </ul>
        <div class="social-icons col-4">
            <ul class="social-icons-list">
              <li><a href="#"><img src="design/images/Social/facebook.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/twitter.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/instagram.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/linkedin.png" /></a></li>
            </ul>
        </div>
      </nav>

Вот обо мне html:

 nav {
  float: none;
  background: #00334f;
  /* Old browsers */
  line-height: 150%; }
  nav div.page-icon {
    text-align: center; }
  nav div.page-icon img {
    width: 53%;
    height: 53%; }
  nav .nav-header-links {
    list-style: none; }
  nav .nav-header-links li {
    display: inline-block;
    position: relative; }
  nav .nav-header-links li a {
    display: inline-block;
    text-decoration: none;
    padding: 2.5em;
    color: white;
    font-weight: bold;
    font-family: "Orbitron", sans-serif; }
  nav .nav-header-links li a:hover {
    background: #b38f00;
    color: black; }
  nav .nav-header-links li div {
    transition: all 1s ease-in; }
  nav .nav-header-links li:hover div {
    display: block; }
  nav .nav-bottom-triangle {
    position: absolute;
    left: 15%;
    border-top: solid 20px #b38f00;
    border-right: solid 20px transparent;
    border-left: solid 20px transparent;
    display: none; }
  nav div.social-icons {
    height: 100%; }
    nav div.social-icons .social-icons-list {
      list-style: none;
      text-align: right;
      padding-right: 2em; }
    nav div.social-icons .social-icons-list li {
      display: inline-block;
      width: 10%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      text-align: center;
      position: relative; }
    nav div.social-icons .social-icons-list li a {
      display: inline-block;
      vertical-align: middle;
      border-left: solid 2px white;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a img {
      width: 70%;
      height: 70%;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a:hover {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 50%; }
    nav div.social-icons .social-icons-list li a:hover img {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg); }  
 <body>
<nav class="row">
        <div class="page-icon col-1">
          <img src="design/images/Placeholder.png" alt="Devoneous Design Icon"/>
        </div>
        <ul class="nav-header-links col-7">
          <li><a href="index.html">Home</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="">About Me</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="contactMe.html">Contact</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="#">Portfolio</a><div class="nav-bottom-triangle"></div></li>
        </ul>
        <div class="social-icons col-4">
            <ul class="social-icons-list">
              <li><a href="#"><img src="design/images/Social/facebook.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/twitter.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/instagram.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/linkedin.png" /></a></li>
            </ul>
        </div>
      </nav>
  </body>

Надеюсь, вы можете сказать, что HTML-код точно такой же, и они оба используют одну и ту же таблицу стилей. Я не могу понять, что это такое. ПОЖАЛУЙСТА, ПОМОГИТЕ!

Комментарии:

1. Первый фрагмент кода, похоже, не подбирает никаких стилей.

2. Это странно. Я это исправлю. Спасибо.

3. Я также понял, что это просто проблема с chrome. Все это поддерживается даже в Firefox и IE.

4. В этих двух примерах отступы вокруг каждого из nav .nav-header-links li a них разные — как разные значения, так и разные единицы измерения. В первом примере для заполнения установлено значение 3rem , во втором — значение 2.5em …

5. Извините, это потому, что я играл с дополнением после того, как опубликовал это. Таким образом, заполнение 3em на самом деле является обновленным числом. Они оба используют одну и ту же таблицу стилей, поэтому для них обоих установлено значение 3. Я не думал об этом, когда делал это последнее редактирование. Будет обновляться.

Ответ №1:

В вашем исходном сообщении, похоже, нет никаких изменений — те несоответствия, которые я назвал, все еще присутствуют. Я просто отредактировал их в своем ответе здесь, чтобы они были нормализованы на 53% ширины / высоты и 3 м отступа, а также отметил дополнительную строку, устанавливающую высоту строки навигации на 150% в вашем первом фрагменте. Я прокомментировал это, и теперь они идентичны.

Честно говоря, я не уверен, почему вы пытаетесь поддерживать два разных набора почти идентичных SCSS для этих страниц, если предполагается, что html должен быть одинаковым — вы могли бы облегчить себе жизнь, используя единую сгенерированную таблицу стилей из sass для всех страниц, которая будет действовать как обработка для всех навигаторов, сохраняяэто распространено по всему сайту.

 nav {
  background: #00334f;
  /* Old browsers */ }
  nav div.page-icon {
    text-align: center; }
  nav div.page-icon img {
    width: 53%;
    height:53%; }
  nav .nav-header-links {
    list-style: none; }
  nav .nav-header-links li {
    display: inline-block;
    position: relative; }
  nav .nav-header-links li a {
    display: inline-block;
    text-decoration: none;
    padding: 3em;
    color: white;
    font-weight: bold;
    font-family: "Orbitron", sans-serif; }
  nav .nav-header-links li a:hover {
    background: #b38f00;
    color: black; }
  nav .nav-header-links li div {
    transition: all 1s ease-in; }
  nav .nav-header-links li:hover div {
    display: block; }
  nav .nav-bottom-triangle {
    position: absolute;
    left: 15%;
    border-top: solid 20px #b38f00;
    border-right: solid 20px transparent;
    border-left: solid 20px transparent;
    display: none; }
  nav div.social-icons {
    height: 100%; }
    nav div.social-icons .social-icons-list {
      list-style: none;
      text-align: right;
      padding-right: 2rem; }
    nav div.social-icons .social-icons-list li {
      display: inline-block;
      width: 10%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      text-align: center;
      position: relative; }
    nav div.social-icons .social-icons-list li a {
      display: inline-block;
      vertical-align: middle;
      border-left: solid 2px white;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a img {
      width: 70%;
      height: 70%;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a:hover {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 50%; }
    nav div.social-icons .social-icons-list li a:hover img {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg); }  
 <nav class="row">
        <div class="page-icon col-1">
          <img src="design/images/Placeholder.png" alt="Devoneous Design Icon"/>
        </div>
        <ul class="nav-header-links col-7">
          <li><a href="">Home</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="aboutMe.html">About Me</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="contactMe.html">Contact</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="#">Portfolio</a><div class="nav-bottom-triangle"></div></li>
        </ul>
        <div class="social-icons col-4">
            <ul class="social-icons-list">
              <li><a href="#"><img src="design/images/Social/facebook.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/twitter.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/instagram.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/linkedin.png" /></a></li>
            </ul>
        </div>
      </nav>  

 nav {
  float: none;
  background: #00334f;
  /* Old browsers */
  /*line-height: 150%;*/ }
  nav div.page-icon {
    text-align: center; }
  nav div.page-icon img {
    width: 53%;
    height: 53%; }
  nav .nav-header-links {
    list-style: none; }
  nav .nav-header-links li {
    display: inline-block;
    position: relative; }
  nav .nav-header-links li a {
    display: inline-block;
    text-decoration: none;
    padding: 3em;
    color: white;
    font-weight: bold;
    font-family: "Orbitron", sans-serif; }
  nav .nav-header-links li a:hover {
    background: #b38f00;
    color: black; }
  nav .nav-header-links li div {
    transition: all 1s ease-in; }
  nav .nav-header-links li:hover div {
    display: block; }
  nav .nav-bottom-triangle {
    position: absolute;
    left: 15%;
    border-top: solid 20px #b38f00;
    border-right: solid 20px transparent;
    border-left: solid 20px transparent;
    display: none; }
  nav div.social-icons {
    height: 100%; }
    nav div.social-icons .social-icons-list {
      list-style: none;
      text-align: right;
      padding-right: 2em; }
    nav div.social-icons .social-icons-list li {
      display: inline-block;
      width: 10%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      text-align: center;
      position: relative; }
    nav div.social-icons .social-icons-list li a {
      display: inline-block;
      vertical-align: middle;
      border-left: solid 2px white;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a img {
      width: 70%;
      height: 70%;
      transition: all 1s ease-in-out; }
    nav div.social-icons .social-icons-list li a:hover {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 50%; }
    nav div.social-icons .social-icons-list li a:hover img {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg); }  
 <body>
<nav class="row">
        <div class="page-icon col-1">
          <img src="design/images/Placeholder.png" alt="Devoneous Design Icon"/>
        </div>
        <ul class="nav-header-links col-7">
          <li><a href="index.html">Home</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="">About Me</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="contactMe.html">Contact</a><div class="nav-bottom-triangle"></div></li>
          <li><a href="#">Portfolio</a><div class="nav-bottom-triangle"></div></li>
        </ul>
        <div class="social-icons col-4">
            <ul class="social-icons-list">
              <li><a href="#"><img src="design/images/Social/facebook.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/twitter.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/instagram.png" /></a></li>
              <li><a href="#"><img src="design/images/Social/linkedin.png" /></a></li>
            </ul>
        </div>
      </nav>
  </body>

Комментарии:

1. Это единая таблица стилей. Я только что опубликовал каждую страницу отдельно, поэтому включил таблицу стилей в каждый фрагмент. Я думаю, я понял это. Проголосуйте за все ответы, которые вы мне дали. Я ценю, что вы нашли время, чтобы разобраться в этом.

2. Нет проблем — что в итоге стало проблемой с вашей стороны? Как только я отредактировал ваши фрагменты, чтобы они соответствовали, я не увидел никаких различий между ними.

3. Я до сих пор не до конца разобрался. Похоже, это проблема с размером изображения. У меня ширина и высота изображения установлены на 53% в таблице стилей, при этом размеры не заданы в html ни на одной странице. Но по какой-то причине в представлении «Обо мне» изображение изменяется с 95,11 X 95,11 на 86,46 X 86,46, а родительский div также уменьшается. Я просто должен продолжать возиться.