Center ASP Masterseite

Zunächst lassen Sie mich sagen, das ist mein erstes ASP.NET-Projekt, das ich gemacht habe. Ich habe versucht, die Center-Tags zu verwenden, um alles in einem div einzuschließen und das zu zentrieren, und die Tabellen-Tags mit automatischem Rand, aber nichts funktioniert. Kann mir hier jemand in die richtige Richtung zeigen?Center ASP Masterseite

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Server.SiteMaster" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head runat="server"> 
     <title></title> 
     <link 
      href="~/Styles/Site.css" 
      rel="stylesheet" 
      type="text/css" 
     /> 
     <asp:ContentPlaceHolder 
      ID="HeadContent" 
      runat="server"> 
     </asp:ContentPlaceHolder> 
    </head> 

<body> 
    <table style="margin-right: auto; margin-left: auto;"> 
     <form id ="form1" runat ="server"> 
      <div class="page" 
       style="background-color: #000000; position: absolute; top: 10px; left: 160px; width: 1000px; height: 100px;"> 

        <asp:Image ID="Image1" runat="server" ImageUrl="~/Resources/image.png" 
         style="z-index: 1; left: 9px; top: 7px; position: absolute; height: 76px; width: 204px" /> 

        <asp:Button ID="Button4" runat="server" BackColor="#333333" ForeColor="White" Height="23px" onclick="Button4_Click" 
         style="z-index: 1; left: 931px; top: 65px; position: absolute" Text="Login" Width="60px" /> 

        <asp:Label ID="Label1" runat="server" Font-Underline="True" ForeColor="White" 
         style="z-index: 1; left: 727px; top: 67px; position: absolute; width: 193px; text-align: right"> 
        </asp:Label> 
      </div> 

      <div 
       style="z-index: 1; left: 192px; top: 165px; position: absolute; height: 445px; width: 938px; color: #000000; background-color: #FFFFFF;"> 

        <asp:ContentPlaceHolder 
         ID="MainContent" 
         runat="server"> 
        </asp:ContentPlaceHolder> 
      </div> 

      <asp:Panel ID="Panel1" runat="server" BackColor="#003366" 
       style="z-index: 1; left: 160px; top: 128px; position: absolute; height: 36px; width: 1002px"> 

       <asp:Button ID="Button5" runat="server" BackColor="#336699" BorderStyle="None" Height="23px" onclick="Button5_Click" 
        style="z-index: 1; left: 220px; top: 7px; position: absolute; height: 23px; width: 60px;" Text="Users" Width="60px" /> 

       <asp:Button ID="Button1" runat="server" BackColor="#336699" 
        style="z-index: 1; left: 10px; top: 7px; position: absolute; height: 23px; width: 60px;" Text="Home" BorderStyle="None" onclick="Button1_Click"/> 

       <asp:Button ID="Button2" runat="server" BackColor="#336699" 
        style="z-index: 1; left: 80px; top: 7px; position: absolute; height: 23px; width: 60px" Text="About" BorderStyle="None" onclick="Button2_Click" /> 

       <asp:Button ID="Button3" runat="server" BackColor="#336699" BorderStyle="None" 
        style="z-index: 1; left: 150px; top: 7px; position: absolute" Text="Profile" Height="23px" onclick="Button3_Click" Width="60px" /> 

       <asp:Button ID="Button6" runat="server" BackColor="#336699" BorderStyle="None" 
        style="z-index: 1; left: 290px; top: 7px; position: absolute" Text="Servers" Height="23px" onclick="Button6_Click" Width="60px" /> 
      </asp:Panel> 
     </form> 
     <div style="z-index: 1; left: 160px; top: 165px; position: absolute; height: 445px; width: 32px; background-color: #FFFFFF;"> 
     </div> 

     <div style="z-index: 1; left: 1130px; top: 165px; position: absolute; height: 445px; width: 32px; background-color: #FFFFFF;"> 
     </div> 
    </table> 
</body> 
</html>

Zur Zeit habe ich die <table style="margin-right: auto; margin-left: auto;"> aber es scheint nicht zu funktionieren.

Quelle

2012-04-14 Axis

Ist der Inhalt sicher linksbündig? Oder füllt es nur die gesamte Breite des Bildschirms aus? – McGarnagle

Nun, es bewegt sich nicht. Wie wenn Sie diese Stackoverflow-Seite nehmen und über Ihren Monitor strecken, bleibt sie in der Mitte des Browsers. Meine Seite bleibt auf der linken Seite des Browsers. – Axis

Sehr schlechter Code. Befreien Sie sich von allen diesen Inline-Styles. Dann wird es einfacher zu lesen sein und Sie werden das Problem eher finden. Und benutzen Sie NIEMALS Tabellen für Webdesign !!! Das hat nichts mit C# zu tun, noch mit asp.net! Dies ist nur CSS und HTML. – walther

Zuerst haben Sie die absolute Positionierung auf div mit dem class="page" Attribut festgelegt. Entferne dies, da es dein Div bei top:10px; left:160px immer positionieren wird;

In der Tat haben Sie eine Menge absolute Positionierung - Sie brauchen es nicht wirklich und sollten es loswerden. Haben Sie Visual Studio oder ähnliches verwendet, um diese Seite zu gestalten? Einige Tools sind schuldig, dieses zusätzliche CSS von Zeit zu Zeit hinzuzufügen.

Wenn ich die Zentrierung erreichen möchte, verwende ich normalerweise ein DIV mit einer definierten Breite; Ich kann dann das linke Attribut und einen Rand verwenden, um mittig ausgerichteten Inhalt zu simulieren. Dies funktioniert auch bei einer Vielzahl von Browsern, insbesondere bei älteren Versionen von Internet Explorer.

, wenn Sie einen div erklären:

<div id="PageContainer"> 


</div>

und dann den folgenden CSS:

#PageContainer{ 
    position:    absolute; 
    float:     left; 
    left:     50%; 
    top:     20x; 
    width:     500px; 
    margin:     0px 0px 0px -250px; /* half of the width */ 
    background-color:  red; 
}

Dann wird es, jeden Inhalt Zentrum innerhalb des div. Definieren Sie die Breite und legen Sie dann den Rand auf die halbe Breite fest, wenn Sie diese Technik verwenden.

See a live example here.

Stack-Überlauf eine modernere Ansatz verwenden - es ist diejenige, die Sie versucht haben, aber der Schlüssel ist, dass Sie eine Breite müssen definiert werden. Durch die Prüfung der CSS für Stackoverflow (mit dem IE Developer Toolbar oder Firebug oder ähnliches), wenn wir an der CSS sucht den Header div Tag sehen wir:

#header{ 
    width: 960px; 
    height: 120px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
}

dh eine width Einstellung und dann Einstellung margin-left und margin-right bis auto sollte genug sein.

Quelle

2012-04-14 21:16:35 dash

Super! Es klappt. Vielen Dank. – Axis

Keine Probleme; jsfiddle ist auch eine tolle Seite, um einfach Dinge auszuprobieren - wenn Sie etwas einfaches HTML erstellen können, das das tut, was Sie tun möchten, dann sind Sie fast die ganze Zeit dort. Außer es ist IE6 ;-) – dash

Center ASP Masterseite

Antwort

Verwandte Themen