jemand2: <p> abstand zum linken rand

Guten Tag,

Ich möchte gerne einem <p>-Absatz einen Abstand nach links verpassen. Diese Stelle im Code befindet sich in einem <DIV>, welches wiederum das Child von einem anderen <DIV> ist.

Ich habe es so gemacht:

<p style="margin:0;border-left:10px solid;">

Aber es geht nicht. Wenn ich das margin:0 weglasse, dann macht er mir zusätzlich einen Abstand nach oben hin, den ich nicht will. Über diesem Absatz befindet sich eine Tabelle. Den Abstand nach oben kann ich festlegen, aber nicht den nach links.

Vielleicht liegt es daran, dass ich in diesem Absatz auch eine Tabelle habe, die width=100% hat. Aber selbst wenn ich das ändere in width=50%, dann wird die Tabelle zwar kleiner, aber den Rand kann ich immernoch nicht definieren.

Weiß einer, wie es gehen könnte?

Ich habe schon alles mit padding/border/margin ausprobiert, es geht nicht...

MfG
jemand2

  1. Weiß einer, wie es gehen könnte?

    aussenabstand nach links wird mit der aussenabstand-eigenschaft (margin) auf er linken seite (left) bewirkt (entspricht: "margin-left")

    alle andere informationen  in deine post ergeben ohne ein quelltextbeispiel für mich nicht sonderlich viel sinn

  2. Hi,

    Ich möchte gerne einem <p>-Absatz einen Abstand nach links verpassen.
    Ich habe es so gemacht:
    <p style="margin:0;border-left:10px solid;">

    für Abstände benutze margin oder padding, border hat andere Aufgaben.

    Aber es geht nicht.

    "Geht nicht" geht nicht. Fehlerbeschreibung, bitte.

    Wenn ich das margin:0 weglasse, dann macht er mir zusätzlich einen Abstand nach oben hin, den ich nicht will.

    Dann willst Du offenbar den margin-top (bzw. in anderen Browsern evtl. margin-bottom) setzen. Kein Grund, margin-left nicht mit anderen Werten zu bestücken.

    Vielleicht liegt es daran, dass ich in diesem Absatz auch eine Tabelle habe,

    Hast Du nicht - da gehe ich jede Wette ein. <table> ist nämlich kein erlaubtes Kind von <p>.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi!

      Hast Du nicht - da gehe ich jede Wette ein. <table> ist nämlich kein erlaubtes Kind von <p>.

      Was aber ja aus dem table in <p><table></table></p> immer noch kein anderes Element macht. Du laesst nach. Hast wohl keine Lust/Zeit gehabt, an einer besseren Formulierung zu arbeiten, was?

      --
      Trau Dich!
       
      1. Was aber ja aus dem table in <p><table></table></p> immer noch kein anderes Element macht. Du laesst nach. Hast wohl keine Lust/Zeit gehabt, an einer besseren Formulierung zu arbeiten, was?

        Wieso? In dem Fall ist - bei HTML - p zu Ende, sobald die Tabelle auftaucht, also sofort. Korinthenkackenderweise kann ich anführen, dass im Ausgangsbeitrag "<DIV>" aufgetaucht ist, XHTML nur "<div>" (aber nicht "<DIV>") kennt und somit auch HTML gemeint sein muss.

        --
        Reden ist Silber, Schweigen ist Gold, meine Ausführungen sind Platin.
        Self-Code: sh:( ch:? rl:( br:> n4:( ie:{ mo:) va:) de:> zu:} fl:| ss:| ls:~ js:|
        1. Was aber ja aus dem table in <p><table></table></p> immer noch kein anderes Element macht. Du laesst nach. Hast wohl keine Lust/Zeit gehabt, an einer besseren Formulierung zu arbeiten, was?
          Wieso? In dem Fall ist - bei HTML - p zu Ende, sobald die Tabelle auftaucht, also sofort. Korinthenkackenderweise kann ich anführen, dass im Ausgangsbeitrag "<DIV>" aufgetaucht ist, XHTML nur "<div>" (aber nicht "<DIV>") kennt und somit auch HTML gemeint sein muss.

          Ihr seid echt Korinthenkacker. :) Ich weiss es jetzt nur fuer den IE ziemlich genau, dass er es zumindest so darstellt. Und ich gehe davon aus, dass die meisten (alle?) Browser das so handhaben. Eure Ausfuehrungen sind alle sehr theoretisch.

          Weiter oben hab ich schon erwaehnt, dass die Browser Fehler auch als solche (nicht) darstellen sollten.

          p { background: #FFFF00; }

          <p style='background:#00FF00;'>
           Ein
           <table style='background:#FF0000;'><tr><td>Tabelle</td></tr></table>
           Absatz!
          </p>

          Wird nunmal als gruener Absatz mit einer roten Tabelle drin angezeigt. Also ist es egal, was theoretisch nicht moeglich ist.

          Reden wir doch einfach mal weiter, wenn ein (oder einige) Browser daraus einen gruenen Absatz mit dem Inhalt 'Ein', gefolgt von einer roten Tabelle mit 'Tabelle', gefolgt von einem gelben Absatz mit dem Inhalt 'Absatz!' darstellt, oder meinetewegen gar nichts oder einen grunen Absatz ohne Tabelle, ...

          solange <p><table></table></p> auch genauso interpretiert wird, ist es doch muessig auf Unmoeglichkeiten hinzuweisen, die ja nur theoretisch unmoeglich sind.

          Es kann natuerlich sein, dass mittlerweile einige Browser tatsaechlich richtig reagieren. Das waere mir allerdings neu und das hier auch noch niemand dargelegt. Solange ist das fuer mich einfach nur falsch, aber nicht unmoeglich.

          --
          Trau Dich!
           
          1. @@Steel:

            Ich weiss es jetzt nur fuer den IE ziemlich genau, dass er es zumindest so darstellt.

            Dann macht er mal wieder was falsch. Er rät eine Intention eines unbedarften Webautors, anstatt den Quelltext gemäß der HTML-Spezifikation zu rendern.

            Und ich gehe davon aus, dass die meisten (alle?) Browser das so handhaben.

            Nein! Es ist nicht davon auszugehen, dass die meisten (alle?) Browser die Fehler des IE kopieren.

            <p style='background:#00FF00;'>
            Ein

            Hier ist der Absatz zu Ende, denn 'table' darf nicht in 'p' vorkommen. Das End-Tag ist für 'p'-Elemente in HTML optional. Folglich beendet das <table>-Start-Tag das vorige 'p'-Element.

            <table style='background:#FF0000;'><tr><td>Tabelle</td></tr></table>
            Absatz!
            </p>

            Das </p>-End-Tag ist ein HTML-Fehler, da es kein geöffnetes 'p'-Element gibt.

            Wird nunmal als gruener Absatz mit einer roten Tabelle drin angezeigt.

            Im IE. Du hättest mal in Browsern[tm] testen sollen.

            Reden wir doch einfach mal weiter, wenn ein (oder einige) Browser daraus einen gruenen Absatz mit dem Inhalt 'Ein', gefolgt von einer roten Tabelle mit 'Tabelle', […]

            Genauso sieht es aus.

            […] gefolgt von einem gelben Absatz mit dem Inhalt 'Absatz!' darstellt

            Das sollte kein Browser tun, weil sich 'Absatz!' ja nicht in einem 'p'-Element befindet.

            Live long and prosper,
            Gunnar

            --
            Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
            1. Hi!

              Wir haben mittlerweile ja schon festgestellt, dass der IE nicht der einzige Browser ist, der das 'wie geschrieben' darstellt. Auch FF2 ist nicht besser. Die Browser fangen wohl grad erst an, solchen fehlerhaften Code korrekt zu interpretieren. (Was mir ja noch absolut neu war)

              --
              Trau Dich!
               
              1. @@Steel:

                Wir haben mittlerweile ja schon festgestellt, dass der IE nicht der einzige Browser ist, der das 'wie geschrieben' darstellt. Auch FF2 ist nicht besser.

                In seinem Quirks-Modus, ja. Hatte nach Abschicken meines Postings auch noch festgestellt. Wer aber käme auf die Idee, ein HTML-Dokument nicht mit DOCTYPE-Angabe zu versehen? ;-)

                IE hingegen macht selbst in seinem „Standard“-Modus Quirks.

                Live long and prosper,
                Gunnar

                --
                Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
  3. Hi!

    Ich habe schon alles mit padding/border/margin ausprobiert, es geht nicht...

    Dann hast Du was nicht richtig probiert. Border ist dafuer nur bedingt nuetzlich, weil es einen Rahmen macht, geht aber auch.

    Margin waere aber wohl dein Kandidat:

    http://de.selfhtml.org/css/eigenschaften/randabstand.htm

    Wobei ich sagen muss deine ganzen Divs mit Tabelle klingen danach dein HTML mal aufzuraeumen. Es ist gut moeglich, dass irgendwelche CSS Definitionen, die Du gemacht hast, dein Vorhaben verhindern.

    --
    Trau Dich!
     
  4. Vielleicht liegt es daran, dass ich in diesem Absatz auch eine Tabelle habe, die width=100% hat.

    Es ist in HTML nicht möglich, dass ein Tabellenelement in einem <p> Element steht.
    Das hindert aber nicht, dass man sich mit falschem Code diesbezüglich selbst betrügt.

    mfg Beat

    --
    Woran ich arbeite:
    X-Torah
    ><o(((°>       ><o(((°>
       <°)))o><                      ><o(((°>o
    1. Vielleicht liegt es daran, dass ich in diesem Absatz auch eine Tabelle habe, die width=100% hat.

      Es ist in HTML nicht möglich, dass ein Tabellenelement in einem <p> Element steht.
      Das hindert aber nicht, dass man sich mit falschem Code diesbezüglich selbst betrügt.

      Moment. Ist es auch nicht moeglich, bei Rot ueber die Ampel zu gehen, weil es nicht erlaubt ist? Da Du schon der 2. mit dieser Argumentation bist, denke ich bald, ich hab was verpasst. Was ist denn ein <table> in einem <p>? (ausser fehlerhafter Code, Unsinn, ...) es ist doch immer noch ein <table> und wird von jedem mir bekannten Browser auch so gehandhabt.

      Solange die Browserhersteller nicht dazu uebergehen invaliden Code auch
      entsprechend (nicht) darzustellen, wird sowas weiterhin moeglich aber falsch sein.

      --
      Trau Dich!
       
      1. Moment. Ist es auch nicht moeglich, bei Rot ueber die Ampel zu gehen, weil es nicht erlaubt ist? Da Du schon der 2. mit dieser Argumentation bist, denke ich bald, ich hab was verpasst. Was ist denn ein <table> in einem <p>? (ausser fehlerhafter Code, Unsinn, ...) es ist doch immer noch ein <table> und wird von jedem mir bekannten Browser auch so gehandhabt.

        Halten wir fest: Du kennst weder Firefox (3.0.1) noch Safari (3.1.1) noch Opera (9.52). Bei der Konstruktion <p><table></table></p> ist nämlich im generierten DOM-Baum in allen drei Browsern keine Tabelle im Absatz.

        Der IE 6 macht's natürlich, aber was will ich auch erwarten?

        --
        Reden ist Silber, Schweigen ist Gold, meine Ausführungen sind Platin.
        Self-Code: sh:( ch:? rl:( br:> n4:( ie:{ mo:) va:) de:> zu:} fl:| ss:| ls:~ js:|
        1. Hallo,

          ein schneller Test mit folgendem HTML-Code:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
                    "http://www.w3.org/TR/html4/loose.dtd">  
          <html>  
          <head>  
              <title>Test</title>  
              <style type="text/css">  
                  div, p, table {  
                      margin: 0;  
                      padding: 0;  
                  }  
                  table {  
                      border-collapse: collapse;  
                  }  
                  td, th {  
                      border: 1px solid green;  
                      padding: 2px;  
                  }  
              </style>  
          </head>  
          <body>  
              <h1>table-Element "in" p-Element</h1>  
              <div style="border: 2px solid blue;">  
              <p style="border: 2px solid black; margin-left: 20px;">  
              Testcase  
              <table style="border: 2px solid red; width: 100%;">  
                  <tr>  
                      <th rowspan="2">Browser</th>  
                      <th colspan="2">Anzeige</th>  
                  </tr>  
                  <tr>  
                      <th>ohne Doctype-Angabe</th>  
                      <th>mit Doctype-Angabe</th>  
                  </tr>  
                  <tr>  
                      <td>Firefox 3</td>  
                      <td>  
                          table wird als Kind des p-Elementes dargestellt.  
                          margin-left wirkt sich somit auch auf die Tabelle aus.  
                      </td>  
                      <td>  
                          p-Element wird vor table geschlossen, table Kind des div-Element.  
                          margin-left wirkt sich daher nicht mehr auf die Tabelle aus.  
                      </td>  
                  </tr>  
                  <tr>  
                      <td>IE 7</td>  
                      <td colspan="2">  
                          table wird in beiden Fällen als Kind des p-Elementes dargestellt.  
                          margin-left sorgt in beiden Fällen für 20 Pixel Abstand zum Rand  
                          des div-Elementes.  
                      </td>  
                  </tr>  
              </table>  
              Opera und Safari sind auf dem Rechner, vor dem ich gerade sitze,  
              nicht installiert.  
              </p>  
              </div>  
          </body>  
          </html>  
          
          

          Halten wir fest: Du kennst weder Firefox (3.0.1) noch Safari (3.1.1) noch Opera (9.52). Bei der Konstruktion <p><table></table></p> ist nämlich im generierten DOM-Baum in allen drei Browsern keine Tabelle im Absatz.

          Firefox 3.0.1 unterscheidet aufgrund der Doctype-Angabe, wie die Darstellung aussieht. Ohne Doctype befindet sich die Tabelle im p-Element.

          Zum Nachvollziehen:
          Mit Doctype-Angabe: http://vinzenzmai.vi.funpic.de/tmp/test/table_in_p_mit_doctype.html
          Ohne Doctype-Angabe: http://vinzenzmai.vi.funpic.de/tmp/test/table_in_p_ohne_doctype.html

          Freundliche Grüße

          Vinzenz

          1. Hi!

            Danke!

            --
            Trau Dich!
             
            1. Hallo,

              Danke!

              Bitte, gerne. Hier noch vier Screenshots dazu:




              Freundliche Grüße

              Vinzenz

              1. Hey!

                Sehr cool. Ich kenne halt nur die unteren Versionen. Das oberste ist mir neu.

                --
                Trau Dich!
                 
          2. [latex]Mae  govannen![/latex]

            ein schneller Test mit folgendem HTML-Code:

            Dito, nur als Bild, der Quelltext wurde nicht angepasst:

            Cü,

            Kai

            --
            Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
            selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?
          3. ein schneller Test mit folgendem HTML-Code:

            Warum soviel Code? Kürzeres Beispiel

            Firefox 3.0.1 unterscheidet aufgrund der Doctype-Angabe, wie die Darstellung aussieht. Ohne Doctype befindet sich die Tabelle im p-Element.

            Ich bin natürlich von einer Seite mit Doctype (wenn auch logischerweise mit Fehlern) ausgegangen.

            Zum Nachvollziehen:
            Opera 9.52
            Firefox 3.0.1
            Safari 3.1.1
            Internet Explorer 6

            --
            Reden ist Silber, Schweigen ist Gold, meine Ausführungen sind Platin.
            Self-Code: sh:( ch:? rl:( br:> n4:( ie:{ mo:) va:) de:> zu:} fl:| ss:| ls:~ js:|
        2. Hi!

          Halten wir fest: Du kennst weder Firefox (3.0.1) noch Safari (3.1.1) noch Opera (9.52). Bei der Konstruktion <p><table></table></p> ist nämlich im generierten DOM-Baum in allen drei Browsern keine Tabelle im Absatz.

          Ah. Und hier ist die Antwort auf meine eben gestellte Frage. Du hast Recht: Keinen dieser Browser kenne ich. Bei mir werkelt der FF2 und beruflich bin ich an den IE6 gebunden.

          Wie wuerden denn diese 3 ein <p><table></table></p> darstellen?

          --
          Trau Dich!