Das Menü drückt den Inhalt zum Ende der Seite

Ich benutze ein Menü auf meiner ASP.Net-Seite mit der Ausrichtung auf horizontal ohne Unterebenen. Es schiebt meinen Inhalt den ganzen Weg bis zum Ende der Seite. Ich habe viele der Antworten für ähnliche Probleme ausprobiert, die ich auf SO gefunden habe, aber nichts funktioniert. Jeder sagt, um die Position zu verwenden: absolut, aber das funktioniert nicht. Ich habe jede Position ausprobiert und in ein anderes Div gesetzt, aber ohne Erfolg.Das Menü drückt den Inhalt zum Ende der Seite

<body> 
<form id="form1" runat="server"> 
<div id="wrapper" > 
     <div id="Main"> 
      <div id="MainHeader"> 

      </div> 
      <div id="MainMenu"> 

      </div> 
      <div id="MainContent"> 
       <asp:Menu ID="nav" runat="server" Orientation="Horizontal"> 
        <Items> 
         <asp:MenuItem NavigateUrl="~/Projects.aspx" Text="Search" Value="Search"></asp:MenuItem> 
         <asp:MenuItem NavigateUrl="~/ProjectGeneral.aspx" Text="General Info" Value="General Info"></asp:MenuItem> 
         <asp:MenuItem NavigateUrl="~/ProjectSchedule.aspx" Text="Schedule" Value="Schedule"></asp:MenuItem> 
         <asp:MenuItem NavigateUrl="~/ProjectNotes.aspx" Text="Notes" Value="Notes"></asp:MenuItem> 
        </Items> 
       </asp:Menu> 

       Project: General Information 
       <asp:Panel ID="Panel1" runat="server" BackColor="#EADD96"> 
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
       </asp:Panel> 
      </div> 
     </div> 
     <div id="map" > 

    </div> 
    </div> 
</form>

CSS:

#wrapper { 
outline-style:solid; 
outline-color: Black; 
outline-width:thin; 
} 
#Main { 
width: 50%; 
height: 870px; 
/*background: blue;*/ 
float: left; 
} 
#MainHeader { 
width: 100%; 
height: 70px; 
background: #D8D8D8 ; 
} 
#MainMenu { 
width: 20%; 
height: 800px; 
background-color:darkgray; 
float: left; 
} 
#MainContent { 
background-color:beige; 
height: 800px; 
margin-left: 20%; 
font-family: 'MoolBoran'; 
font-size:22px; 
padding-left: 10px; 
padding-right: 10px; 
margin-top:0px; 
} 
#map { 
margin-left: 0%; 
height: 870px; 
background-color: White; 
} 
#nav { 
position:absolute; 
top: 10px; 
}

Quelle

2016-04-08 KFP

gelöst: Durch maincontent mit Position aufweist: relative und die Schaffung eines div außerhalb das Menü mit der Position: absolut und das Menü mit der Position: Relativ drückt es nicht mehr den Inhalt nach unten.

<div id="MainContent"> 
    <div id="NavDiv"> 
      <asp:Menu ID="nav" runat="server" Orientation="Horizontal"> 
       <Items> 
        <asp:MenuItem NavigateUrl="~/Projects.aspx" Text="Search" Value="Search"></asp:MenuItem> 
        <asp:MenuItem NavigateUrl="~/ProjectGeneral.aspx" Text="General Info" Value="General Info"></asp:MenuItem> 
        <asp:MenuItem NavigateUrl="~/ProjectSchedule.aspx" Text="Schedule" Value="Schedule"></asp:MenuItem> 
        <asp:MenuItem NavigateUrl="~/ProjectNotes.aspx" Text="Notes" Value="Notes"></asp:MenuItem> 
       </Items> 
      </asp:Menu> 

      Project: General Information 
      <asp:Panel ID="Panel1" runat="server" BackColor="#EADD96"> 
       <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
      </asp:Panel> 
     </div> 
    </div>

Quelle

2016-04-08 14:40:48 KFP

#MainContent { 
    position: relative; 
} 
#nav { 
    position: absolute; 
    top: 10px; 
}

Lassen Sie mich wissen, wenn der obige Code funktioniert

Quelle

2016-04-08 13:15:09

Ich habe meinen gesamten Code nicht in meinen Beitrag aufgenommen, den ich gerade hinzugefügt habe. Ich habe eine Testseite mit nur MainContent, Menü, Panel und Label erstellt und Ihr Vorschlag funktioniert, aber mit meiner Seite nicht. – KFP

Das Menü drückt den Inhalt zum Ende der Seite

Antwort

Verwandte Themen