Was verursacht, und wie werde ich diese seltsame weiße Linie auf meiner Webseite loswerden?

Ich habe Probleme, diesen weißen Bereich auf einer Webseite loszuwerden, die ich baue. Es tritt zwischen meinen Header- und Navbar-Divs auf. Ich machte eine andere ASP.NET-Website und hatte genau das gleiche passiert. Bitte sagen Sie mir, was diesen weißen Bereich verursacht und wie ich ihn entfernen kann.Was verursacht, und wie werde ich diese seltsame weiße Linie auf meiner Webseite loswerden?

Danke!

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MainSite.Master.cs" Inherits="EndophthalmitisDatabase.Site1" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Endophthalmitis Database</title> 
    <asp:ContentPlaceHolder ID="head" runat="server"> 

    </asp:ContentPlaceHolder> 
    <style> 
     html,body { 
      margin: 0px; 
      padding: 0px; 
     } 

     div#header { 
      background: #e00; 
      height: 50px; 
      width: auto; 
      border-bottom: solid; 
      border-bottom-color: #b00; 
      font-family: Arial; 
      font-size: 50px; 
      color: #eee; 
      padding: 25px; 
      overflow: auto; 
      margin: 0px; 
     } 

     div#navBar { 
      background: #ddd; 
      height: 35px; 
      width: auto; 
      border-bottom: solid; 
      border-bottom-color: #ccc; 
      font-family: Arial; 
      font-size: 16px; 
      margin: 0px; 
     } 

     div#navBar ul { 
      list-style: none; 
      list-style-type: none; 
      background-color: #ddd; 
     } 

     div#navBar ul li { 
      display:inline; 
     } 

     div#navBar ul li a { 
      padding:.3em; 
      text-decoration: none; 
      color: #900; 
     } 

     div#navBar ul li a:hover{ 
      background-color: #e00; 
      color: #fff; 
     } 

     div#contentDiv { 
      overflow:auto; 
      width: 1000px; 
      height: auto; 
      background-color: #eee; 
      border-left: 2px; 
      border-left-color: #000; 
      border-right: 2px; 
      border-right-color: #000; 
      border-bottom: 2px; 
      border-bottom-color: #000; 
     } 
    </style> 
</head> 
<body> 
    <div id="header"> 
     Endophthalmitis Database 
    </div> 
    <div id ="navBar"> 
     <ul> 
      <li><a href ="Default.aspx">Home</a></li> 
      <li><a href ="DataEntry.aspx">Enter Data</a></li> 
      <li><a href ="Reports.aspx">Reports</a></li> 
      <li><a href ="Contact.aspx">Contact</a></li> 
     </ul> 
    </div> 
    <div id ="contentDiv"> 
     <form id="form1" runat="server"> 
     <div> 
      <asp:ContentPlaceHolder ID="mainContent" runat="server"> 

      </asp:ContentPlaceHolder> 
     </div> 
     </form> 
    </div> 
</body> 
</html>

Image:

Quelle

2016-07-15 Darokrithia

Ihr ul Element wird eine Marge nach oben hinzufügen.

ul {margin-top:-10px }

(oder was auch immer Menge von dem ul ziehen ...

Quelle

2016-07-15 23:10:10

Sie benötigen die Polsterung und die Marge auf dem UL zu entfernen. Diese Einstellungen werden vom Browser hinzufügen und wenn Sie nicht unter Verwendung eines beliebigen CSS-Reset, müssen Sie sie manuell entfernen.

In Ihrem CSS habe ich

margin: 0; 
padding: 0;

zum div#navBar ul Regel

Dies wird andere kleinere Probleme mit Ihrem Layout verursachen, die Sie leicht beheben können, aber das beantwortet Ihre genaue Frage.

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head runat="server"> 
 
    <title>Endophthalmitis Database</title> 
 
    <asp:ContentPlaceHolder ID="head" runat="server"> 
 

 
    </asp:ContentPlaceHolder> 
 
    <style> 
 
     html,body { 
 
      margin: 0px; 
 
      padding: 0px; 
 
     } 
 

 
     div#header { 
 
      background: #e00; 
 
      height: 50px; 
 
      width: auto; 
 
      border-bottom: solid; 
 
      border-bottom-color: #b00; 
 
      font-family: Arial; 
 
      font-size: 50px; 
 
      color: #eee; 
 
      padding: 25px; 
 
      overflow: auto; 
 
      margin: 0px; 
 
     } 
 

 
     div#navBar { 
 
      background: #ddd; 
 
      height: 35px; 
 
      width: auto; 
 
      border-bottom: solid; 
 
      border-bottom-color: #ccc; 
 
      font-family: Arial; 
 
      font-size: 16px; 
 
      margin: 0px; 
 
     } 
 

 
     div#navBar ul { 
 
      margin: 0; 
 
      padding:0; 
 
      list-style: none; 
 
      list-style-type: none; 
 
      background-color: #ddd; 
 
     } 
 

 
     div#navBar ul li { 
 
      display:inline; 
 
     } 
 

 
     div#navBar ul li a { 
 
      padding:.3em; 
 
      text-decoration: none; 
 
      color: #900; 
 
     } 
 

 
     div#navBar ul li a:hover{ 
 
      background-color: #e00; 
 
      color: #fff; 
 
     } 
 

 
     div#contentDiv { 
 
      overflow:auto; 
 
      width: 1000px; 
 
      height: auto; 
 
      background-color: #eee; 
 
      border-left: 2px; 
 
      border-left-color: #000; 
 
      border-right: 2px; 
 
      border-right-color: #000; 
 
      border-bottom: 2px; 
 
      border-bottom-color: #000; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div id="header"> 
 
     Endophthalmitis Database 
 
    </div> 
 
    <div id ="navBar"> 
 
     <ul> 
 
      <li><a href ="Default.aspx">Home</a></li> 
 
      <li><a href ="DataEntry.aspx">Enter Data</a></li> 
 
      <li><a href ="Reports.aspx">Reports</a></li> 
 
      <li><a href ="Contact.aspx">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id ="contentDiv"> 
 
     <form id="form1" runat="server"> 
 
     <div> 
 
      <asp:ContentPlaceHolder ID="mainContent" runat="server"> 
 

 
      </asp:ContentPlaceHolder> 
 
     </div> 
 
     </form> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2016-07-15 23:10:19 Red2678

Wenn irgendwelche CSS-Resets nicht verwendet werden, wäre es nicht eine bessere Lösung sein, die 'html, body' Auswahl oben zu ändern, um' * '? – vkopio

würde ich nein sagen. Es könnte viele Stellen geben, an denen ich den Standard-Padding/Rand für Elemente erwarten möchte. Das ist der Grund, warum die meisten Zurücksetzungen diese Werte explizit auf das bestimmte Element (ul, li usw.) setzen und nicht das * (das die Stile auf alle Elemente anwendet, für diejenigen, die es nicht wissen). – Red2678

Was verursacht, und wie werde ich diese seltsame weiße Linie auf meiner Webseite loswerden?

Antwort

Verwandte Themen