在Visual Basic中對齊導航菜單

以下是我的完整代碼。我沒有修改我的默認CSS代碼。有誰知道如何將導航欄與徽標旁邊的右側對齊？請注意我目前正在學習可視化基礎Web應用程序構建，而且我的知識在這方面非常有限。在Visual Basic中對齊導航菜單

感謝

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="default.aspx.vb" Inherits="Wiltshire_mobile._default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
     .style1 
     { 
      font-size: large; 
     } 
     .style2 
     { 
      text-align: right; 
     } 
     .style3 
     { 
      width: 162px; 
      height: 83px; 
      border-width: 0px; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div class="style2"> 
     <asp:Button ID="mysiteloginbutton1" runat="server" Text="My Site Login" BackColor="#FF9900" 
      ForeColor="White" Style="text-align: right" /> &nbsp;<span class="style1"><strong 
      style="text-align: left"><a 
      href="#">Sign up</a> | <a href="#">Help</a> |<asp:DropDownList 
      ID="DropDownList1" runat="server" AutoPostBack="True"> 
      <asp:ListItem>English</asp:ListItem> 
      <asp:ListItem>Bangla</asp:ListItem> 
     </asp:DropDownList> 

     </div> 
     <div> 
      <a href="http://www.wiltshire-mobile.com"> 
      <img alt="Wiltshire mobile website logo" class="style3" src="Images/logo.PNG" /></a> <span class="style1"><strong 
      style="text-align: left"> 
      <asp:Menu ID="Menu1" runat="server" StaticSubMenuIndent="16px"> 
       <Items> 
        <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem> 
        <asp:MenuItem Text="Features" Value="Features"></asp:MenuItem> 
        <asp:MenuItem Text="Tour" Value="Tour"></asp:MenuItem> 
        <asp:MenuItem Text="Plans" Value="Plans"></asp:MenuItem> 
        <asp:MenuItem Text="Blog" Value="Blog"></asp:MenuItem> 
       </Items> 
      </asp:Menu> 
      </strong></span> 
      <br /> 
      <br /> 
      Mobile image 
      <br /> 
    </div> 
    </form> 
</body> 
</html>

來源

2014-02-18 Laamash

所有的定位都將在你的css文件中完成。讓我看看我能做些什麼來爲你打破這一切。您想要內容右側的菜單和菜單上方的徽標？ – James

我相信這是你要完成的任務：

<body> 
    <table style="width: 100%"> 
     <tr valign="middle"> 
      <td colspan="2"> 
       <span style="font-size: 16pt; font-family: Verdana"> 
        <a href="http://www.wiltshire-mobile.com"> 
         <img alt="Wiltshire mobile website logo" class="style3" src="Images/logo.PNG" /></a> <span class="style1"><strong style="text-align: left"> 
       </span> 
      </td> 
      <td style="width: 80%"> 

      </td> 
     </tr> 
     <tr valign="top"> 
      <td style="width: 20%"> 
       <asp:Button ID="mysiteloginbutton1" runat="server" Text="My Site Login" BackColor="#FF9900" ForeColor="White" Style="text-align: right" /> &nbsp;<span class="style1"><strong style="text-align: left"><a href="#">Sign up</a> | <a href="#">Help</a> |<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"> 
       <asp:ListItem>English</asp:ListItem> 
       <asp:ListItem>Bangla</asp:ListItem> 
       </asp:DropDownList> 
      </td> 
      <td style="width: 80%"> 
       <asp:Menu ID="Menu1" runat="server" StaticSubMenuIndent="16px"> 
        <Items> 
         <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem> 
         <asp:MenuItem Text="Features" Value="Features"></asp:MenuItem> 
         <asp:MenuItem Text="Tour" Value="Tour"></asp:MenuItem> 
         <asp:MenuItem Text="Plans" Value="Plans"></asp:MenuItem> 
         <asp:MenuItem Text="Blog" Value="Blog"></asp:MenuItem> 
        </Items> 
       </asp:Menu> 
      <br /> 
      <br /> 
      @RenderBody 
      <br /> 
      </td> 
     </tr> 
    </table> 
</body>

現在，我加入 '@RenderBody'，因爲這要作爲你的「_LayoutPage」和那麼每個頁面都會調用這個來顯示它應該如何設計。

基本概念是將網站設計爲表格，然後將每個元素分隔爲表格的行和列，就像我在這裏所做的那樣。 <td>和<tr>用於分開這些項目。

如果您想進一步瞭解事物的外觀，您應該將此頁面指向您的site.css文件。 CSS文件應該包含一切，因爲它被認爲是定位文本，顏色，特定項目（如表格）的佈局等。希望這有助於。

來源

2014-02-19 00:09:43 James

謝謝。剛剛好。 – Laamash

在Visual Basic中對齊導航菜單

回答

相關問題