0

ページの画面の一番上にヘッダーがあり、画面全体に広がっています。Rails パーシャルとしてレンダリングされます。ページの本文に何かがあるときはいつでも、ヘッダーが引き下げられ、ページの上部に接触しなくなります。何が原因なのかわかりません。ページの本文に何もない場合は正常に機能します。

ここにCSSがあります

html{
  padding: 0;
  margin: 0;
}

body{
    background-color: #Dee0D5;
  margin:0;
  padding: 0;
}
#navwrap{
 width: 800px;
  margin: 0 auto;
  padding: 0; 
}
#nav {
    width: 100%;
  height:50px;
    float: left;
    padding: none;
    background-color: #859797;
  margin: 0 0 10px 0;
    box-shadow: 0 0 5px #999999;


    ul{
       list-style: none;

       li{
        display:inline;
        float:left;
        padding: 10px;
        font-family: sans-serif;
       }
    }
}


#wrapper {

    width: 700px;
    margin: 0 auto;
    text-align: left;
    height:auto;
}

#footer{
    width: 100%;
    float: left;
    padding: 0;
    margin: 0 0 0 1em;
    border-top: 1px solid #999999;
       li{
        display:inline;
        list-style-type:none;
        float:left;
        padding: 10px;
        font-family: sans-serif;
       }

}

アプリケーションのhtmlは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <title>Blog</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>

</head>
<body>
<%= render 'layouts/header' %>
<div id='wrapper'>

<%= yield %>

<%= render 'layouts/footer' %>
</div>
</body>
</html>

ヘッダーhtmlは次のとおりです。

<div id="nav">
    <div id='navwrap'>
    <ul id='nav-list'>
    <li><%= link_to 'Home', root_path %></li>
    <li><%= link_to 'About', '#' %></li>
    <li><%= link_to 'Projects', '#' %></li>
    <li><%= link_to 'Blog', '#' %></li>
</ul>
</div>
</div>

私は単純なものを見落としているだけだと確信していますが、それは私を夢中にさせます!

4

3 に答える 3

0

padding: none;padding属性の有効な値ではありません。

padding:0代わりにやってみる

body{
    background-color: #Dee0D5;
    margin:0;
    padding:0;
}
于 2013-04-24T23:43:21.670 に答える
0

padding-top を -5px に設定しますか? デフォルトの余白は 5px だと思います。

于 2013-04-24T23:49:51.327 に答える
0

私の記憶が正しければ、あなたの<ul>要素にはデフォルトのマージンやパディングが設定されている可能性があると思います - margin: 0; を設定してみてください。また、 CSS ルールがスタイル ルール<li>内にネストされているようです。<ul>

于 2013-04-24T23:55:29.453 に答える