Мой логотип не помещается в навигационную панель - PullRequest
Новая
       36

Мой логотип не помещается в навигационную панель

0 голосов
/ 03 мая 2018

Вся эта бутстрапная штука убивает меня. Я так потерян в этом вопросе, если есть кто-нибудь, кто может помочь мне в этом, я буду очень благодарен.

Извините, что моя таблица стилей не может подключиться к этому сайту.

Моя навигационная панель выглядит так это но это должно выглядеть это

Я искренне надеюсь, что вы поможете мне выбраться из этого беспорядка! 

* {
  font-family: 'Oxygen', sans-serif;
  background-color: maroon;
}


/** Header **/

#header-nav {
  background-color: #f6b319;
  border-radius: 0;
  border: 0;
}

#logo-img {
  background: url('../images/flying-cat.png') no-repeat;
  width: 150px;
  height: 150px;
  left: 15px;
  background-size: contain;
  margin: 10px 10px 10px 10px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="navbar-brand">
            <div id="logo-img"></div>
          </a>
        </div>
      </div>
    </nav>
    </div>
    </div>
    </nav>
  </header>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

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

Так

Вам нужно будет установить свой заголовок на фиксированную высоту, а затем установить div с фоном на высоту в пределах высоты заголовка для логотипа, это должно быть проблематично в долгосрочной перспективе, в случае, если веб-сайт отзывчивый.

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

* {
  font-family: 'Oxygen', sans-serif;
  margin:0;padding:0;
}

header{
  height: 100px;
}
#header-nav {
  background-color: #f6b319;
  border-radius: 0;
}
#header-nav,.container,.navbar-header,.navbar-brand{height: 100%;}

#logo-img {
  background: url('4.png') no-repeat;
  display:inline-block;
  width:80px;
  border:1px solid;
  height: 80px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="navbar-brand">
            <div id="logo-img"></div>
          </a>
        </div>
      </div>
    </nav>
    </div>
    </div>
    </nav>
  </header>
</body>
</html>
0 голосов
/ 03 мая 2018

Изображение не подходит, потому что вы установили его в абсолютном размере, который больше, чем панель навигации. Ваш CSS-класс logo-img содержит height: 150px, что заставляет его выходить из навигационной панели. Установите свойство более низкой высоты, чтобы оно соответствовало панели навигации.

Вы также использовали div внутри этого div-бренда navbar, который не является необходимым и вызывает проблемы, даже в бутстраповых котельных плитах изображение бренда navbar является элементом изображения в этом div. Поместите тег изображения внутри этого div панели navbar-brand, укажите ширину и задайте высоту auto, чтобы она масштабировалась в пределах своих границ.

Вот как это делается в примерах Bootstrap, однако вам необходимо настроить его при использовании собственного источника изображения.

Отредактируйте HTML-заголовок navbar так, чтобы он выглядел так 

<div class="navbar-header">
      <a href="index.html" class="navbar-brand">
        <img src="https://placeholdit.co//i/555x150"></a>
</div>

Добавьте следующее правило в ваш CSS: 

.navbar-brand {
    padding: 10px;
}
...