Я пытаюсь создать веб-сайт, где есть надпись или пробел над навигационной панелью, и я боролся с этим как три часа. Я использую фреймворк под названием "Фонд". Мне бы очень хотелось узнать, что я делаю неправильно, поэтому любая помощь ценится! Вот мой код:
<!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;
}
ЗАРАНЕЕ СПАСИБО!!!
Не видя рабочего примера, трудно понять, что происходит. Я могу, чтобы ваш navbar был завернут в класс с.top-bar. Вы пробовали просто менять маржу? поэтому он гласит:
.top-bar{
clear:both;
height:70px;
font-family:Verdana,sans-serif;
max-width: 80%;
margin: 20px auto 0 auto;
}
Это должно дать ему максимальный запас 20px.
Вы также должны избегать использования! Важно любой ценой