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>
4

1 に答える 1

1

メニューは絶対位置にあるため、ロゴと重なっています。代わりにフロートを使用してみてください:

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

header ul {
  float: right;
  list-style: none;
  margin: 10px 0 15px 0;
}
于 2013-11-11T12:08:27.250 に答える