Linksbündige Aufzählung innerhalb einer Tabelle

  • Hallo Comunity
    Sicher Peanuts für Euch, aber ich hab auch nach langem googlen keine Lösung für folgendes Problem gefunden.
    Also, ich habe eine einzeilige, zweispaltige Tabelle ohne Rahmen, in der in der linken Zelle ein Text mit Aufzählungszeichen rein soll.
    Das Aufzählungszeichen soll jedoch linksbündig sein. Hier das Beispiel: http://www.hellsehen-tv.ch/Shop/tabid/67/Default.aspx
    Was mach ich da falsch? Hab bereits jene Tipps probiert... :cry:
    Hier noch der Quellcode der Seite:
    <h2 class="contentheading"><span style="font-size: 25pt;">Brandneu im Zeichen der neuen Erde</span></h2>
    <table width="100%">
    <tbody>
    <tr>
    <td width="70%">
    <ul style="list-style:decimal outside;">
    <li><a style="font-size:22px;"</a>
    Energie Karten Set</li> </ul>
    </td>

    <td><a style="font-size:22px;"</a>
    inkl. Porto Fr. 50.00
    </td>
    </tr>
    </tbody>
    </table>

    Danke für jeden Tipp & Gruss,
    Freddie

  • margin-left: 0;
    und es steht an der normalen Stelle (mit etwas Abstand zum linken Rand)
    Wenn du es direkt am Rand haben möchtest kannst wie alxy gesagt hat margin-left einem Minuswert geben ..

  • Im IE 9 und dem aktuellen Chrome ist das Aufzählungszeichen nicht linksbündig (siehe Bild), also nicht auf der gleichen Vertikalen wie das B von Brandneu.
    OK, ich versuche mal den margin-left Befehl. Wo genau soll ich diesen platzieren? Etwa so?

    <ul style="list-style:decimal outside;"margin-left: -40px;>

    Vielen Dank für den Tipp,
    Freddie

  • Bitte mal selber genau hinsehen!! Da erkennt man dann, dass ein " falsch plaziert ist, oder?

  • Vielen Dank, ich bin nun einen Schritt weiter.
    Was noch nicht perfekt ist; nun ist das Aufzählungszeichen zu weit links, dafür der Textanfang bündig. Ziel sollte sein, dass das Aufzählungszeichen mit dem "B" des Textes oben linksbündig wird.

    Habe es mit -40px bis -1px versucht, ohne einen Unterschied.

    Komisch ist auch, dass die ganze Zeile
    <ul margin-left: -40px;"></ul>
    weg ist, sobald ich wieder in den Quellcode reingehe (DNN).

    Eingabe:
    <h2 class="contentheading"><span style="font-size: 25pt;">Brandneu im Zeichen der neuen Erde</span></h2>
    <table width="100%">
    <tbody>
    <tr>
    <td width="70%">

    <ul margin-left: -40px;"></ul>

    <li><a style="font-size:22px;"</a>
    Energie Karten Set</li> </ul>
    </td>
    <td><a style="font-size:22px;"</a>
    inkl. Porto Fr. 50.00
    </td>
    </tr>
    </tbody>
    </table>

    Nach dem Speichern:
    <h2 class="contentheading"><span style="font-size: 25pt;">Brandneu im Zeichen der neuen Erde</span></h2>
    <table width="100%">
    <tbody>
    <tr>
    <td width="70%">
    <ul>
    <li><a style="font-size:22px;" a=""> Energie Karten Set</a></li>
    </ul>
    </td>
    <td><a style="font-size:22px;" a=""> inkl. Porto Fr. 50.00 </a></td>
    </tr>
    </tbody>
    </table>

    Danke für Eure Geduld mit mir...

  • Du hast die Liste in einer Tabelle drin ..
    Dann setze td auch noch einen Style zu.
    Damit du beides genau gleich hast könntest du auch über der Liste eine Tabellenzeile einfügen und die Überschrift in die Linke Spalte einfügen.
    Warum margin gelöscht wird weiß ich nicht ..

    Ich würde dir, genau wie alxy raten eine externe Stylesheetdatei zu nutzen.
    Zum Bearbeiten einer solchen lege ich dir Notepad++ ans Herz.
    http://www.css4you.de
    Einfach mal durchschauen und dann schaffst du sowas ganz fix :)

  • Ja, hast ja recht. Bin auch dabei, doch dieses Projektchen muss ich nunmal schnell realisieren.
    Deine Webseite ist toll, die werde ich mal durchgehen (auch SelfHTML)...
    Na dann werde ich mal weiter schauen.
    Thanls anyway!!

  • Bleistift

    "Damit du beides genau gleich hast könntest du auch über der Liste eine Tabellenzeile einfügen und die Überschrift in die Linke Spalte einfügen."
    Hab ich gemacht, aber auch hier bringe ich das "B" und das Aufzählungszeichen nicht linksbündig.
    Kannst Du mir nochmals einen Tipp geben? Verzweifle fast...

  • Entweder setze der Spalte oder der Überschrift, wo die Überschrift drin ist ein Style-Attribut hinzu und erhöhe den Abstand nach Links :

    Oder verändere nocheinmal den margin-left-Wert der Liste ^^
    margin-left: -10px; o. margin-left: -15px; ...

    Alternativ lass die Liste weg und halte es in den Tabellenspalten.
    Mir als User wäres schnuppe ob da nun ne Liste ist oder nicht.


    Wenn nichts davon klappt und dir die Liste so wichtig ist, versuche die Überschrift mit Leerzeichen zu platzieren

    HTML
    &nbsp;

    2 Mal editiert, zuletzt von Bleistift (2. Juni 2012 um 18:49)

  • Wer Tabellen als Layout-Mittel vergewaltigt, sollte besser die Finger von HTML-Seiten lassen.

  • Z.B. so

  • Hey Bandit, danke Dir.
    Mit diesem Ansatz kann ich weitermachen.
    Allerdings:
    - die beiden Zeilen sind auch hiermit nicht linksbündig (see pic)
    - wenn ich die Grösse auf z.B. 28px ändere, passiert nichts (<ul style="padding-left:28px">)

    Trotzdem danke, ich werd mich halt noch mehr mit CSS befassen (auf selfhtml hab ich leider schon mal keinen Lösungsansatz gefunden...:-().

    Greez

  • Du kannst doch nicht einfach den HTML-Code bei dir reinkopieren! Du wolltest wissen, wie ich das ohne Tabellen machen würde und das habe ich dir damit gezeigt. In deinem Tabellengewühle kann man das nicht einfach einsetzen! Die komplette Seite ist zumindest von der technischen Seite her einfach nur grausam.

  • Nicht nur von der technischen Seite, auch vom Inhalt...

    Also wenn ich sogar zu doof bin, Deinen Code zu benutzen, dann wird's wohl nix.

    In diesem Sinne danke und Gruss