Блог

Главная - Вопросы по программированию - Способ удаления пространства между навигационной панелью и выпадающим меню

Способ удаления пространства между навигационной панелью и выпадающим меню

#html #css

Вопрос:

Я очень новичок в кодировании и работаю над вымышленным сайтом для ресторана. Кажется, я не могу понять, как удалить пробел между моим выпадающим меню и верхней панелью навигации в разделе меню. В идеале я бы хотел, чтобы розовое выпадающее окно находилось прямо под черной навигационной панелью. Есть какие-нибудь предложения по поводу того, что я сделал не так? Я повсюду играл с полями и отступами. Даже сделал отступ 0 и отступ 0 в начале моей страницы CSS, чтобы посмотреть, окажет ли это влияние, но этого не произошло.

Прилагается мой код для HMTL и CSS

 body {
background-color: #41393d;
}

/* Header */

.header {

width: 100%;
height: 50px;
display: block;
background-color: black;
}

.header_content {

width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: black;
}

.logo_container {

height: 100%;
display: table;
float: left;
}

.logo {

height: 100%;
display: table-cell;
vertical-align: middle;
} /* Navigation */

.navigation {

float: right;
height: 100%;
} .navigation li {

float: left;
height: 100%;
display: table-cell;
padding: 0px 20px;
position: relative;
}

a:hover {

color: #8a8c8f !important;
} .navigation li a {

display: inline-block;
vertical-align: middle;
height: 100%;
color:#BE1E2D;
font-family: athelas, 
serif; font-style:normal;
text-decoration: none;
} .sub_menu1 {

display: none;
}

.navigation li:hover .sub_menu1 {

display: block;
position: absolute;
background: #d4a18d;
} .navigation li:hover .sub_menu1 ul {

display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}

.navigation li:hover .sub_menu1 ul li {

padding: 5px;

} 
 <!DOCTYPE html>
TOWN_Restaurant` <header>
            <div class="header">
                    <div class="header_content">
                            <div class="logo_container">
                                    <img alt="TOWN logo" id="image" class="logo" src="images/town_logo.png">
                            </div>`
             <ul class="navigation">
                                <li><a href="index.html">Home</a></li>
                                <li><a href="our_story.html">Our Story</a></li>
                                <li><a href="#">Menu</a>
                                        <div class="sub_menu1">
                                                <ul>
                                                        <li><a href="menu.html">Cuisine</a></li>
                                                        <li><a href="menu_2.html">Beverages</a></li>
                                                </ul>

                                        </div>
                                </li>
                                <li><a href="contact.html">Contact</a></li>
                                <li><a href="reservations.html">Reservations</a></li>

                        </ul>
                </div>

        </div>

</header>

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

1. добавьте html-код верхней панели навигации

2. Привет, часть вашего html-кода отсутствует, нам это нужно, чтобы помочь вам с вашим вопросом

3. Так странно! Это видно с моей стороны. Я не могу понять, как добавить его в исходный пост, но вот недостающая часть:<заголовок> <заголовок><класс div=»заголовок»> <класс div=»заголовок»><класс div=»заголовок»> <класс div=»заголовок»><класс div=»логоконтейнер»> <класс div=»логоконтейнер»><img alt=»Логотип ГОРОДА» id=»изображение» класс=»логотип» src=»изображения/town_logo.png»> <img alt=»Логотип ГОРОДА» id=»изображение» класс=»логотип» src=»изображения/town_logo.png»></div>

Ответ №1:

Проблема в том, что ваша навигационная <ul> система имеет запас 16 пикселей для верха и низа, в то время как высота составляет 100% от высоты родителя, которая составляет 50 пикселей, поэтому общая высота <ul> :

50 пикселей (высота родителя) 16 пикселей (верхнее поле) 16 пикселей (нижнее поле) = 82 пикселей

и это позволяет ему выбраться из заголовка, который имеет фиксированную высоту 50 пикселей. Чтобы это исправить, вам нужно

1-й: установите для поля навигации <ul> значение 0 и вместо этого используйте заполнение сверху на <li> s, а для их размера в рамке установите значение в поле границы, чтобы заполнение не влияло на высоту s. <li>

2-й: установите верхнюю часть своего «подменю1» на 100% (что в данном случае составляет 50 пикселей на дюйм [высота родителя]), и это приведет к выпадающему меню прямо под вашей навигацией.

и вот это работает:

 body {
  background-color: #41393d;
}


/* Header */

.header {
  width: 100%;
  height: 50px;
  display: block;
  background-color: black;
}

.header_content {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: black;
}

.logo_container {
  height: 100%;
  display: table;
  float: left;
}

.logo {
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}


/* Navigation */

.navigation {
  float: right;
  height: 100%;
  margin: 0;
}

.navigation li {
  float: left;
  height: 100%;
  display: table-cell;
  padding: 15px 20px;
  position: relative;
  box-sizing: border-box;
}

a:hover {
  color: #8a8c8f !important;
}

.navigation li a {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  color: #BE1E2D;
  font-family: athelas, serif;
  font-style: normal;
  text-decoration: none;
}

.sub_menu1 {
  display: none;
}

.navigation li:hover .sub_menu1 {
  display: block;
  position: absolute;
  background: #d4a18d;
  top: 100%;
}

.navigation li:hover .sub_menu1 ul {
  display: inline-block;
  margin: 0%;
  padding: 0%;
  text-align: center;
}

.navigation li:hover .sub_menu1 ul li {
  padding: 5px;
} 
 TOWN_Restaurant`
<header>
  <div class="header">
    <div class="header_content">
      <div class="logo_container">
        <img alt="TOWN logo" id="image" class="logo" src="images/town_logo.png">
      </div>`
      <ul class="navigation">
        <li><a href="index.html">Home</a></li>
        <li><a href="our_story.html">Our Story</a></li>
        <li><a href="#">Menu</a>
          <div class="sub_menu1">
            <ul>
              <li><a href="menu.html">Cuisine</a></li>
              <li><a href="menu_2.html">Beverages</a></li>
            </ul>

          </div>
        </li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="reservations.html">Reservations</a></li>

      </ul>
    </div>

  </div>

</header>

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

1. Ух ты! Большое спасибо. Я бы никогда не узнал, что моя маржа <ul> была установлена на 16 пикселей. Это произошло автоматически, потому что я не ввел это в свой код. Смогли ли вы выяснить это путем проверки?

2. Да, <ul> по умолчанию принимает значение 1em. это означает, что в 1 раз больше вашего размера шрифта, а поскольку размер шрифта по умолчанию равен 16 пикселей, поэтому <ul>получает поле 16 пикселей. И да, мне пришлось проверить вашу навигацию, чтобы выяснить, в чем проблема, и оказалось, что вы забыли сбросить <ul>. Обычно, когда мы используем <ul>, мы сбрасываем его заполнение, поля и стиль списка.

3. Попался! Вы случайно не знаете, почему мой веб-сайт отображается по-разному в разных браузерах? Например, в Chrome и Firefox настроенный CSS отображается именно так, как я хочу, но в Safari все еще есть пробел.

Метки: