Как сделать панель меню Flat Design?

0

Привет, я пытаюсь создать сайт, но моя панель меню не делает то, что нужно. Вот как это должно выглядеть: http://i.stack.imgur.com/KDvwo.png

Но вместо этого он выглядит так: http://i.stack.imgur.com/Y1Ya8.png

Вот мой код:

HTML

<div class="wrapper">
<header>
<h1>Colve</h1></div>
<nav>
<ul class="menu1">
<li><a class="button" href="#">Home</a></li>
<li><a class="button" href="#about">About</a></li>
<li><a class="button" href="#downloads">Downloads</a>
<li><a class="button" href="invasion.html">INVASION</a></li>    
</li><li><a class="button" href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h1>About-Colve</h1>
<p>Colve is a company that gives you the things you want in one place</p>
<p>Created by Bradley Beeke</p>
</section>
</div>

CSS

html {
font:12pt Lato, sans-serif;
min-height:100%;
background-image:linear-gradient(45deg,#3498db,#2ecc71);
}
body{margin:0px;}

header{
background-color:white;
Color: #FFDF00;
float:left;
padding-left:5px;
display:block;


}
nav {
background-color:white;
float:right;
padding-right:5px;
height:60px;
display:block;
width:100%;
float:right;

}
nav a   {
text-decoration:none;
list-style:none;
color:#FFDF00;
font-size:20px;
padding:8px;

}
nav li:hover, a:hover {color:#998100;}
li{display:inline;}
section { margin-bottom: 1000px; padding-top: 150px; float: left; }

Не могли ли вы помочь мне, пожалуйста!

Теги:
menu
nav

2 ответа

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

Рабочий ДЕМО

<div class="wrapper">
<header>
<h1>Colve</h1> <!-- remove the </div> present here -->
<nav>
<ul class="menu1">
<li><a class="button" href="#">Home</a></li>
<li><a class="button" href="#about">About</a></li>
<li><a class="button" href="#downloads">Downloads</a>
<li><a class="button" href="invasion.html">INVASION</a></li>    
</li><li><a class="button" href="contact.html">Contact</a></li>
</ul>
</nav>

В nav css сделайте ширину автоматической

nav {
background-color:white;
float:right;
padding-right:5px;
height:60px;
display:block;
width:auto;
float:right;
}

Добавить width: 100%; в header {} потому что в настоящее время заголовок неправильно выровнен. HTML не построен хорошо. Удалите лишние и из кода.

  • 0
    HTML здесь все еще плох. Элементы неупорядоченного списка перепутаны.
  • 0
    @DerekCurtis Да, HTML все еще плох. Я смотрел на часть заголовка, чтобы выровнять его правильно. Обновлю ответ сейчас снова
Показать ещё 3 комментария
0

Ну, с самого начала ваш HTML недействителен. Я вижу две проблемы.

Во-первых, закрывающий тег после вашего закрывающего тега H1 не может быть там (похоже, что это был просто случайный случай).

<div class="wrapper">
<header>
<h1>Colve</h1></div>

Во-вторых, закрытие который начинает эту строку, не имеет никакого смысла. Удалите ее.

</li><li><a class="button" href="contact.html">Contact</a></li>

О, я соврал.. там третий.. Там нет закрытия тег для этого элемента.

<li><a class="button" href="#downloads">Downloads</a> 

Помимо этого, ваш HTML выглядит хорошо для меня быстро, но в будущем вы можете захотеть пометить этот сайт:

http://validator.w3.org/#validate_by_input

После устранения этих проблем с вашим HTML обновите свой вопрос, если у вас все еще есть проблемы.

  • 0
    Валидатор избавился от моего HTML5, поэтому я исправил ошибки самостоятельно, но это не помогло мне заставить работать меню
  • 0
    @ DoomFire106 Для nav {} вы указали ширину: 100%; что заставит меню всегда выравниваться ниже заголовка. Поэтому измените ширину, как я уже упоминал в ответе ниже, и бинго будет работать
Показать ещё 1 комментарий

Ещё вопросы

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