Hindukusch: P-Element: Automatische Breite, zentriert

SELF-Forum

P-Element: Automatische Breite, zentriert

Hindukusch
– Informationen zu den Bewertungsregeln

Hallo,

ich scheitere eigenartiger Weise an einer doch eigentlich simplen Aufgabe...

Gegeben ist z.B. folgende HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="de">
<head>
  <meta http-equiv="content-type" content="text/html; ISO-8859-1" />
  <title>Die Buche</title>
</head>
<body>
<p>
Erste Zeile.<br />
Zweite Zeile.<br />
Ein langer langer langer langer langer Text.<br />
Letzte Zeile.
</p>
</body>
</html>

Dieses einzelnen P-Element soll jetzt folgende Eigenschaften haben:

  • Es soll zentriert sein. (?)
  • Sein Inhalt soll zentriert sein. "text-align: center"
  • Es soll einen Rahmen haben "border: 1px solid black"
  • Seine Größe der Box soll sich nach dem Inhalt richten. (?)

Welche CSS-Eigenschaften sind dazu nötig, dass es sowohl im Firefox, als auch im Internet-Explorer korrekt dargestellt wird?

Ich freue mich über jede Antwort ;)

mfg Hindukusch

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. P-Element: Automatische Breite, zentriert

    schwarze Piste
    – Informationen zu den Bewertungsregeln

    Tachchen!

    • Seine Größe der Box soll sich nach dem Inhalt richten. (?)

    _Das_ ist das eigentliche Problem.
    Da mindestens ein Hinweis noch fehlt in deiner Auszählung, fallen mir
    spontan folgende Lösungsansätze ein (alternativ, nicht kumulativ):

    p { width: ??em; }

    p { display: inline; }

    Das anschließend zu zentrieren, dürfte dir problemlos gelingen.

    Gruß

    Die schwarze Piste

    --
    ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
    Smartbytes Webdesign in Oberhausen
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. P-Element: Automatische Breite, zentriert

      Hindukusch
      – Informationen zu den Bewertungsregeln

      p { width: ??em; }

      Soll es so später genau so als Styleanweisung stehen bleiben oder meintest du, dass ich eine feste Größe für die ?? einsetzen muss?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. P-Element: Automatische Breite, zentriert

        schwarze Piste
        – Informationen zu den Bewertungsregeln

        Tachchen!

        Soll es so später genau so als Styleanweisung stehen bleiben

        *hüstel* Erlaubte Werte für width: http://www.w3.org/TR/css3-box/#width

        Gruß

        Die schwarze Piste

        --
        ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
        Smartbytes Webdesign in Oberhausen
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. P-Element: Automatische Breite, zentriert

    D.R. Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    ich scheitere eigenartiger Weise an einer doch eigentlich simplen Aufgabe...

    So simpel ist die gar nicht…

    Dieses einzelnen P-Element soll jetzt folgende Eigenschaften haben:

    • Es soll zentriert sein. (?)

    Das wäre mit „margin: 0em auto“ kein Problem wenn…

    • Seine Größe der Box soll sich nach dem Inhalt richten. (?)

    …du hiermit nur die Höhe (nicht die Breite) meinst. Um ein Element so breit zu machen, wie es sein Inhalt erfordert, gibt es folgende Möglichkeiten:
    display:inline;
    float: …;
    oder position:absolute;

    Falls keine weiteren Elemente hinzukommen, könntest du den Absatz also <http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte@title=mit absoluter Positionierung zentrieren>.

    mfg. Daniel

    --
    Experten raten von der Verwendung des Internet Explorers ab!
    Mein SELF-stylesheet | Darum Firefox!
    Selfcode: ie:{ fl:( br:> va:) ls:& fo:) rl:( n4:# ss:) de:> js:) mo:} zu:}
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. P-Element: Automatische Breite, zentriert

      Hindukusch
      – Informationen zu den Bewertungsregeln
      • Seine Größe der Box soll sich nach dem Inhalt richten. (?)

      …du hiermit nur die Höhe (nicht die Breite) meinst. Um ein Element so breit zu machen, wie es sein Inhalt erfordert, gibt es folgende Möglichkeiten:

      display:inline;

      Immerhin, dann klappt das zentrieren auch.
      Allerdings kann man bei display:inline leider keinen Rahmen mehr verwenden.

      float: …;
      oder position:absolute;

      Damit passt sich die Box endlich dem Inhalt an. Denn ich möchte ja keine feste Breite und Höhe, sondern eine, die sich automatisch nach dem Platzbedarfs des Inhalts richtet (Entschuldigung, habe in meinem ersten Post ein paar Fehler gemacht. Ich hätte mir es vor dem Absenden nocheinmal durchlesen müssen).
      Aber dann lässt sich die Box wieder nichtzentrieren.

      :/

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. P-Element: Automatische Breite, zentriert

        D.R. Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo,

        oder position:absolute;
        Damit passt sich die Box endlich dem Inhalt an. Denn ich möchte ja keine feste Breite und Höhe, sondern eine, die sich automatisch nach dem Platzbedarfs des Inhalts richtet
        Aber dann lässt sich die Box wieder nichtzentrieren.

        Stimmt; dazu braucht man auch wieder eine feste Breite :-(

        Vielleicht wäre es das Beste, wenn du einfach eine Breite in em angibst - die passt sich wenigstens der Skalierung an.

        mfg. Daniel

        --
        Experten raten von der Verwendung des Internet Explorers ab!
        Mein SELF-stylesheet | Darum Firefox!
        Selfcode: ie:{ fl:( br:> va:) ls:& fo:) rl:( n4:# ss:) de:> js:) mo:} zu:}
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  3. P-Element: Automatische Breite, zentriert

    Detlef G.
    – Informationen zu den Bewertungsregeln

    Hallo Hindukusch

    Gegeben ist z.B. folgende HTML

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html lang="de">
    <head>
      <meta http-equiv="content-type" content="text/html; ISO-8859-1" />
      <title>Die Buche</title>
    </head>
    <body>
    <p>
    Erste Zeile.<br />

    ^
    Doctype ist bei dir doch HTML und nicht XHTML.

    Zweite Zeile.<br />
    Ein langer langer langer langer langer Text.<br />
    Letzte Zeile.
    </p>

    Ich frage mich, ob das wirklich _ein_ Textabsatz ist, oder vielleicht doch eher ein Bereich, in dem sich mehrere Absätze, eventuell auch Überschriften oder andere Elemente befinden sollten.

    </body>
    </html>

    Welche CSS-Eigenschaften sind dazu nötig, dass es sowohl im Firefox,

    Für Firefox dürfte folgendes reichen:

    body {  
 display:table;  
 margin:auto;  
}  
p {  
 display:table-cell;  
 border:2px solid black;  
 text-align:center;  
}

    als auch im Internet-Explorer korrekt dargestellt wird?

    Ja der versteht das nicht, er braucht noch ein zusätzliches Element um das p herum.

    <div>  
  <p>  
   ....  
  </p>  
</div>

    Dann dürfte es mit wildem herumgeschiebe machbar sein:

    div {  
 float:left;  
 position:relative;  
 left:50%;  
}  
p {  
 position:relative;  
 right:50%;  
}

    Auch mit positon:absolute wäre es machbar, was aber dazu führen würde, dass Teile des Inhalts unerreichbar nach links verschwinden würden, wenn das Browserfenster zu klein für den Inhalt ist.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln