İçeriği sayfanın altına iten menü

ASP.Net sayfamda, alt düzeysiz yatay olarak ayarlanmış bir menü kullanıyorum. İçeriğimi sayfanın sonuna kadar iter. SO üzerinde bulduğum benzer sorunlar için birçok yanıtı denedim, ancak hiçbir şey işe yaramıyor. Herkes pozisyon kullanacak: mutlak, ama bu işe yaramıyor. Her pozisyonu denedim ve başka bir divun içine yerleştirdim, ama boşuna.İçeriği sayfanın altına iten menü

<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; 
}

kaynak

2016-04-08 KFP

Çözüldü: göreli ve dışında bir div oluşturma: pozisyonuyla mainContent sahip olarak Gömülü menü: mutlak ve pozisyona sahip menü: göreceli olarak artık içeriği aşağı itmez.

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

kaynak

2016-04-08 14:40:48 KFP

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

Yukarıdaki kod çalışır bana bildirin

kaynak

2016-04-08 13:15:09

Tüm kodumu eklemiş olduğum gönderiye eklemedim. Sadece MainContent, menü, panel ve etiket ve öneri çalışmalarınızı içeren bir test sayfası oluşturdum ancak sayfamla birlikte değil. – KFP

İçeriği sayfanın altına iten menü

cevap

İlgili konular