Kopf nicht berühren Sie oben im Bildschirm

Ich habe einen header auf meiner Seite an der Spitze des Bildschirms und erstreckt sich über den gesamten Bildschirm. Es wird dargestellt, als eine Schienen teilweise. Wenn es etwas gibt, in den Körper der Seite, der Kopf wird nach unten gezogen und ist nicht mehr zu berühren den oberen Rand der Seite. Ich kann nicht scheinen, um herauszufinden, was die Ursache dieser. Es funktioniert, wenn nichts in den Körper der Seite.

Hier ist der 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;
       }

}

Hier ist die Anwendung von 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>

Hier ist der header 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>

Ich bin sicher, ich bin nur mit Blick auf etwas einfaches, aber seine mich verrückt!

  • zuerst: bringen Sie Ihre Einheiten gerade die Standardisierung auf eine andere Maßeinheit (% / em / px ) und gehen von dort aus
  • sorry, sollte gesehen haben, dass bevor ich es gepostet. Ich bin mit px für alles, ich änderte ein paar Sachen herum und versuchte, es zu beheben, sich von jemand anderem beraten.
InformationsquelleAutor Michael | 2013-04-24
  1. 0

    padding: none; ist kein Gültiger Wert für padding Attribut.

    versuchen padding:0 statt es

    body{
    background-color: #Dee0D5;
    margin:0;
    padding:0;
}
    • Schönen Fang, nicht es aber beheben =/
    • es scheint, dass Sie mit sass statt css. Sie können versuchen, mit *{ margin:0;padding:0}.
    • Dass es behoben! Danke!!!
    InformationsquelleAutor Sachin
  2. 0

    Legen Sie die Polsterung-top -5px? Ich glaube 5px ist die Standard-Marge.

    • Einstellung -5px nicht zurücksetzen Polsterung. es wird die negative Polsterung. warum nicht padding-top:0px ?
    • Dies hat nicht funktioniert =/
    • Hm. Ich weiß, dass mit mir standardmäßig den header habe ich über den gesamten oberen 10% der Seite gehen würde nicht auf den letzten 5px jeder Kante. Es funktionierte für mich.
    InformationsquelleAutor Nash Read
  3. 0

    Ich denke, dass Ihr <ul> - element kann ein Standard-margin und/oder padding, wenn ich mich Recht erinnere - versuchen Sie, es haben margin: 0;
    Auch Ihre <li> CSS-Regel scheint zu sein, verschachtelte innerhalb der <ul> Stil-Regel.

    • Ich bin mit SASS so die verschachtelten li ist nicht ein Problem. diese beiden sind verschachtelte innerhalb von #nav-Klasse. Marge-0 der ul das Problem nicht behoben.
    • Haben Sie versucht, die <ul> margin: 0; ?
    InformationsquelleAutor
Schreibe einen Kommentar