HTML 5 + CSS3 navbar не выглядит так, как я хочу

-2

Так что у меня проблемы с навигационной панелью, и я не знаю, как это исправить. Я уже огляделся, но никто не работает.HTML 5 + CSS3 navbar не выглядит так, как я хочу

Хорошо, так что я хочу, чтобы нажать пункты меню справа и логотип слева. Кажется, я не могу работать.

(SOLVED) И наконец, (это больше, если мои первые проблемы решаются), знает ли кто-нибудь, что он вызывается, когда вы изменяете размер страницы, и все, что на сайте, изменяется правильно, чтобы соответствовать размеру экрана? Я пытаюсь получить это на своем веб-сайте. (SOLVED)

Спасибо, ребята! И извините, если это очень нубийский вопрос, я немного занимался веб-дизайном, но на самом деле так и не рискнул. Так что успокойся. :)

LINK: http://jsfiddle.net/u659zbgk/1/

@charset"utf-8"; 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
/*Navigation Start*/ 
 

 
#navbar { 
 
    height: 50px; 
 
    background: #752C8D; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 

 
#logo { 
 
    background: #752C8D; 
 
    padding-left: 35px; 
 
    float: left; 
 
} 
 

 
nav { 
 
    float: right; 
 
    margin-bottom: 10px; 
 
    width: 100%; 
 
    background: #752C8D; 
 
} 
 

 
nav ul {} nav ul li { 
 
    float: left; 
 
    list-style: none; 
 
    font-size: 25px; 
 
    font-family: Gotham; 
 
} 
 

 
a { 
 
    text-shadow: #000; 
 
    float: left; 
 
    color: #FFF; 
 
    font-weight: lighter; 
 
    padding-bottom: 12.5px; 
 
    padding-top: 12.5px; 
 
    padding-right: 12px; 
 
    padding-left: 12px; 
 
    background-color: #752C8D; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    text-shadow: none; 
 
    color: #FFF; 
 
    float: left; 
 
    background: #333; 
 
    text-decoration: none; 
 
    padding-bottom: 12.5px; 
 
    padding-top: 12.5px; 
 
    padding-right: 12px; 
 
    padding-left: 12px; 
 
} 
 

 
a:target { 
 
    color: #F90; 
 
    background: #000 
 
} 
 
/*End Navigation*/ 
 

 
@font-face { 
 
    font-family: Gotham; 
 
    src: url('font/gothambold1.ttf'); 
 
}

<div class="wrapper"> 
 
    <section id="navbar"> 
 
    <header id="logo"> 
 
     <img src="images/header/sidenavbar_01.png" width="111" height="47" alt="RobotEx"> 
 
    </header> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="index.html">Home</a> 
 
     </li> 
 
     <li><a href="#">BEST</a> 
 
     </li> 
 
     <li><a href="#">Company</a> 
 
     </li> 
 
     <li><a href="#">Team</a> 
 
     </li> 
 
     <li><a href="#">Product</a> 
 
     </li> 
 
     <li><a href="#">Community</a> 
 
     </li> 
 
     <li><a href="#">Sponsors</a> 
 
     </li> 
 
     <li><a href="#">Photos</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </section> 
 
    <!---Content for class "wrapper" Goes Here---> 
 
</div> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <section id="navbar"> 
 
     <header id="logo">RobotEx</header> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="index.html">Home</a> 
 
      </li> 
 
      <li><a href="#">BEST</a> 
 
      </li> 
 
      <li><a href="#">Company</a> 
 
      </li> 
 
      <li><a href="#">Team</a> 
 
      </li> 
 
      <li><a href="#">Product</a> 
 
      </li> 
 
      <li><a href="#">Community</a> 
 
      </li> 
 
      <li><a href="#">Sponsors</a> 
 
      </li> 
 
      <li><a href="#">Photos</a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </section> 
 
    <!---Content for class "wrapper" Goes Here---> 
 
    </div>

источник

2014-10-29 zeron824

Добро пожаловать в SO. Было бы очень полезно, если вы можете опубликовать свой код в своем вопросе, а также фрагмент кода или ссылку на ** минимальный пример вашей проблемы **. Мы препятствуем пользователям связываться с внешними сайтами из-за риска гниения ссылки. У вас также слишком много вопросов в одном вопросе - это помогает иметь ** конкретный вопрос/вопрос **. – Terry

В дополнение к тому, что упоминалось в @Terry, вы можете попытаться исправить эту проблему, когда мы будем работать над ней и превратим ее в движущуюся цель. Вопросы предназначены для того, чтобы быть полезными для будущих пользователей этого сайта, которые не будут иметь места, если вы исправите свою проблему. Pease также читает: http: // stackoverflow.com/help/how-to-ask –

Далее, разбив проблему на небольшой пример проблемы, это решение мое настоящее. –

Фикс для меню:

#navbar { 
    height: 55px; 
    background: #752C8D; 
    width: 100%; 
    position: absolute; 
} 

nav { 
    float: right; 
    margin-bottom: 10px; 
    width: 78%; 
    background: #752C8D; 
} 
nav ul {margin-top: 0;}

Вставьте это на заголовке или где-нибудь в HTML-файл. Что это делает, чтобы добавить класс с именем «текущий» на любую ссылку, которая является такой же, как текущий адрес

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script> 
$(function(){ 
    $('a').each(function() { 
    if ($(this).prop('href') == window.location.href) { 
     $(this).addClass('current'); 
    } 
    }); 
}); 
</script>

CSS

a.current { 
    background:black; 
    color:white; 
}

Вы также можете выполнить его с этим другим способом только с HTML, добавив класс к ссылкам:

<ul> 
    <li><a class="home" href="home.html">Home</a></li> 
    <li><a class="best" href="best.html">BEST</a></li> 
    <li><a class="company" href="company.html">Company</a></li> 
    <li><a class="team" href="team.html">Team</a></li> 
</ul>

CSS

.home a.home, 
.best a.best, 
.company a.company, 
.team a.team { 
    background:black; 
    color:white; 
}

источник

2014-10-29 03:27:36

Я отредактировал ваш html немного, он делает то, что вы упомянули в первой точке. Обратите внимание, как я добавил div, который у вас не был раньше, и некоторый стиль.

.divFloatL { 
    float: left; 
} 

<section id="navbar"> 
    <div id="logo" class="divFloatL"> 
     <img src="images/header/sidenavbar_01.png" width="111" height="47" alt="RobotEx"> 
    </div> 
    <div class="divFloatL"> 
     <nav> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="#">BEST</a></li> 
      <li><a href="#">Company</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Product</a></li> 
      <li><a href="#">Community</a></li> 
      <li><a href="#">Sponsors</a></li> 
      <li><a href="#">Photos</a></li> 
     </ul> 
     </nav> 
    </div> 
</section>

Что касается адаптивного дизайна вы ищете, есть несколько способов достичь этого, один я знаком с является Twitter Bootstrap. Я рекомендую вам взглянуть на него. У них также есть компонент, который выделяет вкладку, которую вы выбрали.

http://getbootstrap.com/components/#nav

Если вы изучаете, что он будет заботиться о ваших других 2 вопроса.

источник

2014-10-29 03:32:50 Urielzen

HTML 5 + CSS3 navbar не выглядит так, как я хочу

ответ

Смежные вопросы