Jean Pascal: Proportionalität und Schriftgröße in %

Hallo liebe Mitglieder,

mir brennen mal wieder 3 wichtige Fragen unter den Nägeln, die wie folgt lauten:

1. Ist es möglich z.B. ein DIV so zu deklarieren, dass es eine prozentuale Breite mit einem festen Höhenverhältnis hat, d.h. dass sich bei Verringerung der Browserbreite auch automatisch die Höhe des Elementes proportional (zu dessen Breite) anpasst?

2. Ist es möglich die Höhe eines Elementes prozentual zu definieren? In meinem FF nimmt das DIV dann immer die Höhe seines Contents an...

3. Kann man eine Schrift prozentual zu einem DIV mit z.B. width: 50% definieren, so dass sich bei Skalierung des Browsers und damit des DIVs auch die Schriftgröße verändert?

Für (wie immer) professionelle Beratung wäre ich sehr sehr dankbar.

Jean Pascal

  1. Hallo.

    Hallo liebe Mitglieder,

    Eigentlich nicht. Ich antworte trotzdem.

    1. Ist es möglich z.B. ein DIV so zu deklarieren, dass es eine prozentuale Breite mit einem festen Höhenverhältnis hat, d.h. dass sich bei Verringerung der Browserbreite auch automatisch die Höhe des Elementes proportional (zu dessen Breite) anpasst?

    Nein, im Gegenteil. Wenn die Breite nicht ausreicht, gewinnt ein Element im Allgemeinen an Höhe.

    1. Ist es möglich die Höhe eines Elementes prozentual zu definieren? In meinem FF nimmt das DIV dann immer die Höhe seines Contents an...

    Befasse dich mit der display-Eigenschaft und ihren Auswirkungen.

    1. Kann man eine Schrift prozentual zu einem DIV mit z.B. width: 50% definieren, so dass sich bei Skalierung des Browsers und damit des DIVs auch die Schriftgröße verändert?

    Nein. Diesen Anforderungen werden vektor-orientierte Formate wie Flash oder SVG gerecht, nicht jedoch CSS.
    MfG, at

  2. Hi,

    1. Ist es möglich z.B. ein DIV so zu deklarieren, dass es eine prozentuale Breite mit einem festen Höhenverhältnis hat, d.h. dass sich bei Verringerung der Browserbreite auch automatisch die Höhe des Elementes proportional (zu dessen Breite) anpasst?

    Das ist in CSS nicht vorgesehen. Allerdings könnte man da (ziemlich unschön) tricken:
    In das DIV ein transparentes IMG mit width:100% stecken und den Text dann hierin absolut positionieren. Das IMG skaliert dann proportional auch die Höhe, allerdings benötigt, wie at schon anmerkte, der Text dann vermutlich mehr Höhe, so daß er aus dem DIV herausragen könnte.

    1. Ist es möglich die Höhe eines Elementes prozentual zu definieren? In meinem FF nimmt das DIV dann immer die Höhe seines Contents an...

    Natürlich. Ich weiß allerdings nicht, wieso at Dich auf die display-Eigenschaft verweist; ich gebe Dir den hier oft genannten Tip, die Höhe aller Vorfahrenelemente bis hinauf zu HTML zu berücksichtigen, wenn die Seite im standardkompatiblen Modus dargestellt wird.

    1. Kann man eine Schrift prozentual zu einem DIV mit z.B. width: 50% definieren, so dass sich bei Skalierung des Browsers und damit des DIVs auch die Schriftgröße verändert?

    Nein, nicht mit CSS. Aber selbst wenn das möglich wäre vergißt Du, daß dann die Schrift für den Besucher schnell zu klein werden könnte und er en Schiftgrad in seinem Browser heraufsetzt - was Dein Layout dann sprengen würde.

    Du solltest auf eine andere Art der Flxibilität setzen: Dimenionsangaben in % nur für größere Bereichsaufteilung, ansonsten - wenn Text im Spiel ist - verwende einheitlich und zueinander passend em.
    Und lass' evtl. auch mal zu, daß sich floatende Elemente in zu schmalen Festern untereinander setzen und so der zur Verfügung stehende Raum optimaler genutzt werden kann.

    freundliche Grüße
    Ingo

    1. Hallo Ingo,

      erstmal danke für dein hochwertiges Feedback.

      Allerdings könnte man da (ziemlich unschön) tricken:

      Offen gesagt: ich habe das inzwischen wieder verworfen. Meine Idee (und daher auch die gleichzeitige Frage nach prozentualer Schriftgröße) war eine Art "Zoom-Webseite" zu entwickeln, die sich ständig proportional zum Browser verändert. Ich dachte das wäre vielleicht die "_ultimative_ Lösung" (vergl. MI 4 ;-) ein fixes Design zu haben und gleichzeitig völlige Flexibilität zu gewährleisten. Wenn dabei z.B. jemand sein Browserfenster verkleinert hätte (obwohl er mehr Platz hätte) und ihm dann die Schrift zu klein gewesen wäre, hätte er wiederum trotzdem im kleinen Fenster alle Elemente von Hand vergrößern können (per Browsereinstellung). Aber da ja die von mir erfragte Funktionalität von CSS nicht zur Verfügung gestellt wird, hat sich die ganze Überlegung erstmal erübrigt. Ich behalte sie aber im Hinterkopf.

      Tip, die Höhe aller Vorfahrenelemente bis hinauf zu HTML zu berücksichtigen

      Falls du damit meinst ich sollte html und body mit height: 100% definieren: Das habe ich bereits ohne Erfolg versucht.

      daß sich floatende Elemente in zu schmalen Festern untereinander setzen

      Mir gefällt deine Einstellung (wie oben) auch mal unschöne Lösungsansätze zu bieten und nicht nur dogmatisch auf irgendwelche Standards zuverweisen. Aber die grundsätzliche float-Idee (die rein technisch gesehen natürlich _nicht_ unschön ist) kann mich nicht  überzeugen (Außer bei Bild/Text). Dafür ist mir mein Layout dann doch zu wichtig. Aber ich bin immer auf der Suche nach einem gesunden Zwischenweg.

      Gruß Jean

      1. Hi,

        Tip, die Höhe aller Vorfahrenelemente bis hinauf zu HTML zu berücksichtigen
        Falls du damit meinst ich sollte html und body mit height: 100% definieren: Das habe ich bereits ohne Erfolg versucht.

        Dann hast Du etwas falsch gemacht. Probier mal

        html,body,div {height:100%; margin:0; padding:0; background:white;}  
        div {background:red;}
        

        bei einem einzigen DIV in der Seite.

        Aber die grundsätzliche float-Idee (die rein technisch gesehen natürlich _nicht_ unschön ist) kann mich nicht  überzeugen (Außer bei Bild/Text). Dafür ist mir mein Layout dann doch zu wichtig.

        float ist derzeit die sinnvollste Möglichkeit zum Layouten, allein deshalb, weil über clear der Elementenfluß wiederhergestellt werden kann und das Layout nicht wie bei Tabellen im HTML festgelegt wird.

        freundliche Grüße
        Ingo

        1. Du hast Recht, ich hatte einen Vertipper drin.

          Jean