none
Zelleninhalt (Link mit Bild) rechtsbündig darstellen

    Allgemeine Diskussion

  • Hallo,

    ich bin noch recht neu in der ASP.NET Programmierung und arbeite an einem kleinen Projekt für meine Hochschule. Jetzt bin ich auf folgendes Problem gestoßen:

    Ich habe eine asp:Table angelegt mit mehreren Zeilen und zwei Spalten. In den Zellen der  linken Spalte steht etwas Text, in der rechten jeweils ein dazugehöriger Link mit Bild. Der Text in den Zellen der linken Seite soll linksbündig dargestellt werden (was funktioniert), der Link mit Bild rechtbündig in der jeweils rechten Zelle, was leider nicht funktioniert.

    Ich habe mittlerweile schon alle mir bekannten Eigenschaften umgestellt:

    • HorizontalAlign der asp:TableCell auf "Right"
    • style=text-align auf right des Links (a href)
    • ImageAlign des asp:Images auf "Right"

    Der Spaß an der Sache ist, jede einzelne Einstellung funktioniert in der Entwurfsansicht einwandfrei und das Bild ist rechtsbündig. Sobald ich jedoch compiliere und mir das ganze "live" anschaue, steht das Bild wieder auf linksbündig.

    Kann mir jemanden einen Hinweis geben, woran das liegen könnte? Es ist zwar nicht sonderlich tragisch, aber es sieht einfach besser aus, wenn das Bild rechtsbündig ist und irgendwelche Workarounds, bei denen ich bspw. die Breite der einzelnen Zellen ändere würde ich nur ungern verwenden.

    Gruß, Steve.

    Freitag, 23. November 2012 11:51

Alle Antworten

  • Hallo Steve,

    um dir da helfen zu können, bräuchten wir entweder ein Livebeispiel oder zumindest den HTML Code und ggfs. auch externe Stylesheets, die das verursachen könnten.

    Am einfachsten wäre es, wenn Du die betreffende seite (eine reicht, nur die CSS Dateien und Bilder müssten dabei sein) online stellst, dann kann man sich das anschauen.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    Freitag, 23. November 2012 13:38
  • Hallo,

    also ich versuche das jetzt mal klar darzustellen. CSS verwende ich für dieses kleine Projekt gar nicht (zumindest nicht bewusst), sondern alles rein HTML und C# für den Code-Behind. Ich habe eine Masterpage für das generelle Layout (Header, Background, Navigation usw.) und soweit funktioniert auch alles nach meinen Wünschen, nur dieses kleine Beispiel nicht. Hier mal den betreffenden Code-Ausschnitt (mit Umstellung der aller Eigenschaften, die ich schon im ersten Beitrag genannt habe).

    <div style="; margin-right: x; width: 500px">
     <asp:Table ID="tabSystemintegration" runat="server">
     <asp:TableRow Width="500px" Height="100px">
       <asp:TableCell HorizontalAlign="Left">
             Autodesk GmbH, München
       </asp:TableCell>
       <asp:TableCell HorizontalAlign="Right">
          <a href="http://www.autodesk.de/" 
             style="text-align:
             right;" target="_blank">
           <asp:Image ID="Image1" 
             ImageUrl="~/Images/logo-autodesk.png"
             runat="server" BorderStyle="None"   
             ImageAlign="Right" />
          </a>
       </asp:TableCell>
     </asp:TableRow>
     </asp:Table>
    </div>

    Darum befindet sich natürlich noch anderer Code sowie ein weiteres div als Wrapper sowie die Masterpage. Sollte es damit zusammenhängen, kann ich auch den Code dafür noch posten.

    Im Entwurf sieht das dann so aus:

    Wie man sehen kann, befindet sich die Schrift in der linken Zelle linksbündig und das Bild mit Link in der rechten Zelle rechtsbündig. Genau so soll es sein (und so sieht im Entwurf auch mit allen anderen Tabellen für diese Seite aus, ich habe hier jetzt nur den Quelltext für eine Zeile quasi gepostet).

    Sobald ich die Website allerdings kompiliere sieht im Browser (IE9 und FF gleichermaßen) so aus:

    Der Text in der linken Zelle ist linksbündig, das Bild mit Link in der rechten Zelle allerdings auch. Warum? Im Entwurf ist es doch richtig, also rechtsbündig. Das ist genau mein Problem zu dem ich keine Lösung finde.

    Freitag, 23. November 2012 14:28
  • Hallo Steve,

    wichtig ist der HTML Code, der im Browser ankommt, nicht das, was im Editor zu sehen ist.

    Speicher die Seite doch mal inkl. allem aus dem Browser heraus und stell das dann online zur Verfügung.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    Freitag, 23. November 2012 15:04
  • Ok - hier ist die betroffene Seite:

    http://ul.to/94phau53

    Die Zelle entsprechend dem Code, den ich oben gepostet habe, befindet sich in den Zeilen 110-117. Soweit ich das beurteilen kann, kommt dort alles richtig an. Vielleicht sieht ja aber jemand mehr als ich.

    Gruß, Steve.

    PS: Bitte veruteilt mich nicht dafür, aber ich weiß, dass der Code total unsauber ist und man es an vielen Stellen hätte besser machen können - darum geht es mir aber nicht, sondern nur um eine einigermaßen funktionierende, gut aussehende Website für eine Belegarbeit :)

    Freitag, 23. November 2012 15:30
  • Wups - da sollte natürlich der ganze Ordner mit hoch - sorry.

    http://ul.to/co93gmi9

    Das ist jetzt einfach mal die komplette Seite, das Problem, dass ich habe ensteht auf der Seite Unternehmen > Partnernetzwerke.

    Weiter funktionierende Seiten sind Kontakt, Impressum, Unternehmen > Wir über uns, falls das von Belangen sein sollte. Beim Rest hängt einfach nur ein Dummy dahinter.

    Freitag, 23. November 2012 15:46
  • Hallo,

    ich habe das Problem versucht, nachzuvollziehen und dazu Folgendes auf eine leere Seite gebracht und im Internetexplorer getestet. Die Anzeige erfolgt korrekt im IE9.

    <asp:Table ID="Table1" runat="server" Width="450px" GridLines="Both">

    </asp:TableCell>

    <asp:TableRow runat="server">

    <asp:TableCell runat="server" HorizontalAlign="Left">abcdefg

    <asp:TableCell runat="server" HorizontalAlign="Right">

    <a href="http://www.autodesk.de/" target="_blank">

    <asp:Image runat="server" ImageUrl="~/pupil.gif" />

    </a>

    </asp:TableCell>

    </asp:TableRow>

    <asp:TableRow runat="server">

    <asp:TableCell runat="server" HorizontalAlign="Left">xyz

    </asp:TableCell>

    <asp:TableCell runat="server" HorizontalAlign="Right">

    <a href="http://www.autodesk.de/" target="_blank">

    <asp:Image ID="Image1" runat="server" ImageUrl="~/pupil.gif" />

    </a>

    </asp:TableCell>

    </asp:TableRow>

    </asp:Table>

    Donnerstag, 7. Februar 2013 09:06