Conny: Prozentuales Positionieren, Höhe wird nicht korrekt dargestellt

Hallo ihr,

die Angaben für die Ebene: margin:10% 20% 10% 20%; In der Breite zieht er die Ebene korrekt auf 60%, aber in der Höhe passt er sich dem Inhalt an, statt die eigentlich errechenbaren 80% des Browserfensters auszunutzen. Egal ob ich den Wert noch zusätzlich mit height:80%; angebe oder nicht.

Wenn ich einen festen Wert setze, hat der IE unten keinen Abstand mehr zum Rand, wenn der Inhalt mal größer ist und gescrollt werden muss. Und Firefox lässt die Grenzen der Ebene fest bestehen und schiebt den Inhalt raus, noch schlimmer also.

Was muss ich denn tun, um eine im Verhältnis zum Browserfenster feste Ebenengröße zu erhalten, die gleichzeitig flexibel auf größere Textmengen reagiert?

Gruß,
Conny

  1. Hi Conny,

    ich habe zur Zeit ähnliche Probleme, aber das liegt bei den unterschiedlichen Interpretationen der Browser.
    Der Firefox zieht das Layout (je nach dem) nur so weit auf wie der Text ist. Der IE hingegen bezieht die 100% auf den body, und schneidet den Text ab, wenn er über die 100% hinausgeht.

    Kommt auch teilweise drauf an ob man html ode xhtml programmiert.

    Am besten versuchst dus mal mit html{height:100%} im css <style> tag.

    Im Moment probiere ich damit auch noch etwas rum.

    viele Gruesse

    Mathias

    1. Hallo Mathias

      Der Firefox zieht das Layout (je nach dem) nur so weit auf wie der Text ist. Der IE hingegen bezieht die 100% auf den body, und schneidet den Text ab, wenn er über die 100% hinausgeht.

      Das kommt auf die verschiedenen Werte an, die du an den einzelnen Stellen setzt. Und auf den Doctype natürlich.

      Am besten versuchst dus mal mit html{height:100%} im css <style> tag.

      Bei <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> mit html UND body height:80%; und min-height:100%; für die Ebene ist das einzige Problem noch der IE, der bei weniger Text die Höhe nicht erfüllt. Ansonsten werden aber Abstände eingehalten und der Kasten bei mehr Text entsprechend aufgebläht.

      Wie bekommt man jetzt den IE dazu, dass er auch noch mitspielt?

      Grübelnde Grüße,
      Conny

      1. Hi

        Ja das ist ein Problem alle Browser aufeinander abzustimmen.
        So ganz weiß ich das auch net aber ich kann dir sagen, dass der schei-- IE min-height nicht anerkennt. Man kann im body (zumindest im IE) auch nicht die Höhe unter height:100% angeben.

        mfg
        Mathias

        1. Hallo Mathias.

          Man kann im body (zumindest im IE) auch nicht die Höhe unter height:100% angeben.

          Man _kann_ schon, nur muss man dementsprechend alle restlichen Elemente auf der Seite berücksichtigen und anpassen.

          Gruß, Ashura

          --
          Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|
          Try it: Become an Opera Lover in 30 days
  2. Hallo ihr,

    die Angaben für die Ebene: margin:10% 20% 10% 20%; In der Breite zieht er die Ebene korrekt auf 60%, aber in der Höhe passt er sich dem Inhalt an, statt die eigentlich errechenbaren 80% des Browserfensters auszunutzen. Egal ob ich den Wert noch zusätzlich mit height:80%; angebe oder nicht.

    Ja da hast du wohl recht, aber wie ich das sehe kommt es ebenso darauf an ob du html oder xhtml verwendest?!?
    Nach meiner erkenntnis ist für dein Vorhaben html eher geeignet.

    Wenn ich einen festen Wert setze, hat der IE unten keinen Abstand mehr zum Rand, wenn der Inhalt mal größer ist und gescrollt werden muss. Und Firefox lässt die Grenzen der Ebene fest bestehen und schiebt den Inhalt raus, noch schlimmer also.

    Schlimmer? naja würde ich nicht sagen, denke, dass der IE es einfach schlecht interpretiert. Und der Firefox es so macht wie du es verfasst hast. Aber ohne Quelltext kann ich dir auch net mehr sagen?! Zumindest ohne kleine Ausschnitte

    Was muss ich denn tun, um eine im Verhältnis zum Browserfenster feste Ebenengröße zu erhalten, die gleichzeitig flexibel auf größere Textmengen reagiert?

    Naja du könntest eine sehr dreckige Art versuchen Divs und Table mischen (beides bezogen aufs Layout) das heißt du ziehst einen tabel auf die gewünschte Größe auf, und legst darein deinen relativen Div. Dann kannst in dem div der in dem Tabel liegt, deine anderen Divs absolut positionieren.

    Aber eine sehr schlechte variante!!!

    Naja bis denn

    Chriss

    1. Moin Chris,

      Aber ohne Quelltext kann ich dir auch net mehr sagen?! Zumindest ohne kleine Ausschnitte

      Es ist nicht viel:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
      <html><head><title>Unbenannt</title>
      <style type="text/css">
      <!--
      body, html { margin:0px; padding:0px; background-color:#f90; height:80%; border:0px; }
      .rahmen { border:8px #000 double; padding:10px; margin:10% 20% 10% 20%; min-height:100%; }
      -->
      </style></head>

      <body>
      <div class="rahmen">&nbsp;</div>
      </body></html>

      Irgendetwas Unsinniges bzw. Fehlendes zu erkennen?

      Naja du könntest eine sehr dreckige Art versuchen [...]

      Pfui, bah! :-)

      Conny

      1. Hallo!

        |Irgendetwas Unsinniges bzw. Fehlendes zu erkennen?#
        Ja. In der Style von body und html. html gehört da überhaupt nicht rein. desweiteren kannst du dir Eigenschaften mit dem Wert 0 sparen. Und die Höhe von body ist immer der ganze Bildschirm. Das heißt du kannst nicht schreiben height:80%. Und das min-height bei .rahmen verstehe ich auch nicht. Warum nimmst du da nicht einfach blos height?

        Nico

        1. Hi,

          |Irgendetwas Unsinniges bzw. Fehlendes zu erkennen?#
          Ja. In der Style von body und html. html gehört da überhaupt nicht rein.

          Wie kommst Du darauf? Selbstverständlich kann auch das html-Element formatiert werden.

          desweiteren kannst du dir Eigenschaften mit dem Wert 0 sparen.

          Nein. Erstens ist 0 nicht bei allen Elementen der default-Wert, zweitens dient das dazu, um ggf. Werte aus anderen Quellen (z.B. browser-internes Stylesheet) zu überschreiben.

          Und die Höhe von body ist immer der ganze Bildschirm.

          Falsch.

          Das heißt du kannst nicht schreiben height:80%.

          Doch, selbstverständlich kann man.

          Und das min-height bei .rahmen verstehe ich auch nicht.

          Das ist nicht das einzige, was Du nicht verstehst.

          Warum nimmst du da nicht einfach blos height?

          Weil min-height eine andere Wirkung hat als height.

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          Schreinerei Waechter
          Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
          1. [...]

            Das ist nicht das einzige, was Du nicht verstehst.

            [...]

            Hast du die Bewertung abgegeben? :-)

            Conny

          2. Hallo!

            Tschuldigung für meine Unwissenheit. Aber ich hab mal wieder was gelernt.

            Nico

            1. Hi Nico,

              Tschuldigung für meine Unwissenheit. Aber ich hab mal wieder was gelernt.

              Dein Beitrag hatte mich ganz stark an mich erinnert, von vor einem halben Jahr oder so. Da hätte ich das, was du mir schriebst auf jeden Fall auch gedacht.

              Ich finde aber genau das immer wieder interessant, dass es noch so viel Neues zu entdecken gibt.

              Einen schönen Abend wünsche ich,
              Conny

              1. Dir und auch den anderen auch nen schönen Abend.

                Nico

        2. »»desweiteren kannst du dir Eigenschaften mit dem Wert 0 sparen.

          Hi

          So ein schmarn!!!

          Des ist sogar wichtig, da manche Browser einen Standardmargin und der Opera einen Standardpadding haben und so verhindert man, dass man sich wegen so einer Lapalie den Kopf zerbricht weil man sich später fragt was man blos falsch gemacht hat, aber auf so was einfaches dann nicht kommt.

          Viele Gruesse

          Mathias

  3. Hi,

    die Angaben für die Ebene: margin:10% 20% 10% 20%; In der Breite zieht er die Ebene korrekt auf 60%, aber in der Höhe passt er sich dem Inhalt an,

    Die margins haben ja auch nichts mit der Höhe der Box zu tun.
    Die Prozentwerte bei Margin beziehen sich auf die Breite des containing blocks - auch bei margin-top und margin-bottom! *)

    Egal ob ich den Wert noch zusätzlich mit height:80%; angebe oder nicht.

    Das bezieht sich auf die Höhe des Elternelements. Welche Höhe hat dieses?

    Wenn ich einen festen Wert setze, hat der IE unten keinen Abstand mehr zum Rand, wenn der Inhalt mal größer ist und gescrollt werden muss.

    Es ist ein bekannter Fehler des IE, daß dieser overflow:visible nicht beherrscht und stattdessen die box vergrößert.

    Und Firefox lässt die Grenzen der Ebene fest bestehen und schiebt den Inhalt raus, noch schlimmer also.

    Wieso schlimmer? Weil er sich an den Standard hält?
    Oder hast Du bei overflow den default-Wert überschrieben, ohne es hier zu erwähnen?

    Was muss ich denn tun, um eine im Verhältnis zum Browserfenster feste Ebenengröße zu erhalten, die gleichzeitig flexibel auf größere Textmengen reagiert?

    Wenn die Größe fest sein soll, bleibt nur noch ein geeigneter Wert für overflow.

    *) Ausnahme: page-context.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Moin Andreas,

      Die margins haben ja auch nichts mit der Höhe der Box zu tun.
      Die Prozentwerte bei Margin beziehen sich auf die Breite des containing blocks - auch bei margin-top und margin-bottom! *)

      Die Überlegung war halt, dass die Ebene, wenn rundherum x% Platz wegfällt, den Rest als Fläche behält. Was sie in der Breite ja auch macht, nur halt nicht in der Höhe.

      Ok, wenn es der Ebene so erst einmal reicht, mag das ja ok sein. Nur wie bewege ich nun den IE dazu, dass er sich doch noch anpasst?

      Firefox macht nämlich inzwischen was ich will, der IE hält brav die Abstände ein, wenn mehr Text zusammenkommt und die Box aufgebläht wird.

      Egal ob ich den Wert noch zusätzlich mit height:80%; angebe oder nicht.

      Das bezieht sich auf die Höhe des Elternelements. Welche Höhe hat dieses?

      Elternelement ist body. Den und html habe ich inzwischen auf 80% gesetzt. (Bei 100% macht er Scrollbalken.) Die Ebene auf 100%, mit den gleichen margins wie zuvor.

      Es ist ein bekannter Fehler des IE, daß dieser overflow:visible nicht beherrscht und stattdessen die box vergrößert.

      Rein optisch gesehen ein schöner Fehler. :-)

      Und Firefox lässt die Grenzen der Ebene fest bestehen und schiebt den Inhalt raus, noch schlimmer also.

      Wieso schlimmer? Weil er sich an den Standard hält?

      Nee, nee, ich meinte das rein optisch.

      Oder hast Du bei overflow den default-Wert überschrieben, ohne es hier zu erwähnen?

      Welche Möglichkeiten hätte ich denn? Die Alternative ist doch nur ein Abschnippeln des Textes, oder?

      Wenn die Größe fest sein soll, bleibt nur noch ein geeigneter Wert für overflow.

      Da habe ich doch nur vier Möglichkeiten, einzig visible scheint mir sinnvoll und daran hält sich Firefox nicht.

      Conny

      1. Hi,

        Egal ob ich den Wert noch zusätzlich mit height:80%; angebe oder nicht.
        Das bezieht sich auf die Höhe des Elternelements. Welche Höhe hat dieses?
        Elternelement ist body. Den und html habe ich inzwischen auf 80% gesetzt.

        Also html hat 80%. body hat 80%. Und Dein div hat auch 80%.

        Damit hat das div eine Höhe von 51,2% des viewports (html hat eine Höhe von 80% des viewports, bei body sind es 64%).

        Oder hast Du bei overflow den default-Wert überschrieben, ohne es hier zu erwähnen?
        Welche Möglichkeiten hätte ich denn? Die Alternative ist doch nur ein Abschnippeln des Textes, oder?

        Nein.

        Wenn die Größe fest sein soll, bleibt nur noch ein geeigneter Wert für overflow.
        Da habe ich doch nur vier Möglichkeiten, einzig visible scheint mir sinnvoll und daran hält sich Firefox nicht.

        Doch, daran hält er sich sehr wohl.
        visible bedeutet aber nicht, daß sich die box vergrößert. Wenn Du das willst, könntest Du die Mindesthöhe festlegen.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.