Добавьте пробел / заголовок над навигацией.

0

Я пытаюсь создать веб-сайт, где есть надпись или пробел над навигационной панелью, и я боролся с этим как три часа. Я использую фреймворк под названием "Фонд". Мне бы очень хотелось узнать, что я делаю неправильно, поэтому любая помощь ценится! Вот мой код:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles/foundation.css">
    <link rel="stylesheet" href="styles/foundation-overwrite.css">
    <title>Svale Rejser</title>
</head>
<body>


<div class="header">
</div>
<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <img src="pictures/logo_temp.png">
    </li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="#">Home</a></li>
      <li><a href="#">Excursions</a></li>
      <li><a href="#">Booking</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

    <!-- Left Nav Section -->

  </section>
</nav>


    <!--Scripts Here-->
    <script src="scripts/jquery-1.10.2.js.js"></script>
    <script src="scripts/foundation.js"></script>
    <script src="scripts/foundation.topbar.js"></script>

</body>

и здесь CSS:

/*NAVIGATION STYLING*/

.header{
    margin:auto !important;
    max-width:80% !important;
    max-height:30% !important;

}
.top-bar{
    clear:both !important;
    height:70px !important;
    font-family:Verdana,sans-serif !important;
    max-width: 80% !important;
    margin: auto !important;


}

.right{
    padding-right:50px !important;

}

.name{
    padding-left:50px !important;

}

.top-bar-section ul{


}

.top-bar-section li a:not(.button){
    padding: 12px 15px !important;
}

.top-bar-section ul li > a {
    display: block;
    width: 100%;
    color: white;
    padding: 12px 0 12px 0 !important;
    padding-left: 15px;
    font-family: Verdana, sans-serif !important;
    font-size: 20px !important;
    font-weight: normal;
    background: #333333; 
}

 .top-bar .name {
    height: 45px;
    margin-top:12px !important;
    font-size: 20px !important; 

 }

ЗАРАНЕЕ СПАСИБО!!!

  • 0
    Что вы пробовали? Где именно вы хотите белую полосу? Насколько велик? Нам нужно больше деталей ...
Теги:

1 ответ

0
Лучший ответ

Не видя рабочего примера, трудно понять, что происходит. Я могу, чтобы ваш navbar был завернут в класс с.top-bar. Вы пробовали просто менять маржу? поэтому он гласит:

.top-bar{
clear:both;
height:70px;
font-family:Verdana,sans-serif;
max-width: 80%;
margin: 20px auto 0 auto;
}

Это должно дать ему максимальный запас 20px.

Вы также должны избегать использования! Важно любой ценой

  • 0
    спасибо человек, это сработало! но почему я должен избегать важного? Я использую базовый фреймворк, и у меня есть свой собственный файл css, который находится в основном файле css, и он по-прежнему не перезаписывает текущие правила, поэтому единственный способ - написать! Важно для меня ... какой-нибудь совет?
  • 0
    Использование! Важное может привести к неприятностям в дальнейшем, вы не можете перезаписать важное. Если вам нужно его использовать, то ваш CSS не достаточно конкретен. Если вы используете фреймворк, и у него есть правило для 'ul.list li a', тогда вы должны сопоставить это правило и переписать их стили таким образом
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню