CSS в моем заголовке, меню перекрывается логотипом

Question

CSS в моем заголовке, меню перекрывается логотипом

0

моя страница работает на bee-barcelona.herokuapp.com

У меня проблема с тем, что меню запущено в логотип, как только я изменил размер браузера или откройте страницу на планшете. Я хочу очистить его с помощью CSS. Как мне настроить, чтобы элементы не перекрывались?

Это мой текущий CSS для заголовка:

header {
  background-color: #000;
  background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222));
  background: -moz-linear-gradient(top,  #555, #222);
  color: #FFFF00;
  font-weight: bold;
  position: relative;
  padding: 22px 100px;
  #logo {
    margin: 0;
    font-size: 36px;
  }
  a {
    color: #ffc400;
    text-decoration: none;
  }
  ul {
    position: absolute;
    right: 100px;
    top: 18px;
    list-style: none;
    margin: 0;
    li {
      float: left;
      padding: 2px 10px;
      border-right: solid 2px #6F6F6F;
      &.last {
        border-right: none;
      }
    }
  }
}
.language {
    float:right;
    padding-bottom: 10px;
    }

И это HTML для заголовка:

<h1 id='logo'>
  <%= link_to Refinery::Core.site_name, refinery.root_path %>
</h1>
<%= Refinery::Pages::MenuPresenter.new(refinery_menu_pages, self).to_html %>
<div class="language">
<%= link_to image_tag("cat.png"),refinery.url_for(:locale => :ca) %>
<%= link_to image_tag("esp.png"),refinery.url_for(:locale => :es) %>
<%= link_to image_tag("eng.png"),refinery.url_for(:locale => :en) %>
</div>

Jahn Schlosser 11 нояб. 2013, в 13:34

Источник

Теги:

html

css

1 ответ

Ещё вопросы

myajouri · Accepted Answer · 2013-11-11T10-42-00.000Z

Меню перекрывает логотип, потому что он абсолютно позиционируется. Вместо этого попробуйте использовать поплавки:

#logo {
  float: left;
  margin: 0;
  font-size: 36px;
}

header ul {
  float: right;
  list-style: none;
  margin: 10px 0 15px 0;
}

Привет, myarjouri, внешний вид почти такой же, но я все еще могу тянуть текст поверх логотипа. Должен ли я использовать какую-то «чистую» опцию? Спасибо
Вы уже используете clear Navix, вы должны сохранить это. Какой браузер вы используете?
Привет Маяжури! Извините, забыл перекомпилировать ресурсы, мой сервер отреагировал неправильно! Теперь это работает как шарм. Спасибо за этот полезный ответ!