✔ GUI skalieren beim Ändern der Fenstergrösse

Status
Nicht offen für weitere Antworten.
Paranoia

Paranoia

Erfahrenes Mitglied
Guten Tag

Ich möchte ein Formular erstellen, dessen Felder (Labels und Textboxes) sich beim Ändern der Fenstergrösse proportional vergrössern bzw. verkleinern (nur die Breite der Felder).

Ich habe es zuerst mit einem Tabellen-Layout versucht. Doch verwende ich bei einer Textbox das Style width: 100%, wird die Textbox grösser als die Zelle, in der sie sich befindet, dargestellt. Noch schlimmer verhält sich die Textbox, wenn beim Laden der Seite ein langer Text eingegeben wird. Also bin ich zum Entschluss gekommen, dass ich mit Tables nicht zu meinem gewünschten Ergebniss kommen werde.

Als nächstes versuchte ich das Ganze mit Layers zu bewerkstelligen (das Beispiel-Ergebnis ist hier zu sehen). Leider bin ich auch damit nicht zu meinem gewünschten Ergebnis gekommen.

Nun meine Frage: Wie schaffe ich es ohne Javascript (das wäre der letzte Ausweg) mein GUI automatisch zu skalieren, wenn die Fenstergrösse geändert wird? Ist das mit Html/CSS überhaupt möglich?

Ich suche nun schon einige Tage nach einer eleganten Lösung, doch weder Google noch Foren konnten mir eine Antwort liefern. Für ein paar Tipps wäre ich äusserst dankbar.

Grüsse
Paranoia
 
Hi,

vom Grundprinzip her funktioniert doch dein Experiment, denn die Breite der Eingabefelder ist skalierbar und reagiert auf die Änderung der Fenstergröße.

Wenn alle drei Formularelemente nebeneinander angeordnet werden sollen, müsstest du lediglich die Breitenangaben der übergeordneten DIVs korrigieren, damit ihre Summe 100% ergibt. Derzeit sind es nämlich 196%, weshalb die letzten beiden Spalten #colBig1 und #colBig2 in die nächsten Zeilen umgebrochen werden.
 
Hallo

Danke für Deine Antwort.

Ja, vom Grundprinzip her funktioniert es. Dass die letzten beiden Spalten eine neue Zeile beginnen sollen, ist gewollt. Allerdings wäre wohl ein weiteres geschachteltes DIV-Tag angebracht, um eine saubere Trennung zu erhalten.

Es gibt leider einige unschöne Nebeneffekte an meinem Beispiel:

Eine 100 % Breite der "Tabelle" ist nicht möglich, da das letzte Element beim Verändern der Fenstergrösse zwischen der 1. und der 2. Zeile hin und her springt.

Die Textbox der 1. und der 2. Zeile sind rund um 1-2 Pixel unterschiedlich lang bzw. sind nicht rechtsbündig. Das sieht leider etwas unschön aus :(

Möchte ich nur eine Textbox abbilden, aber auch nur 50 % einer Zeile ausfüllen, erhalte ich keinen sauberen Zeilenumbruch und das Label der nächsten Zeile wird fälschlicherweise auf die vorherige Zeile hinaufgezogen.


Da ich bisher meistens mit Tabellen gearbeitet habe bin ich noch etwas unsicher in der Layer-"Programmierung". Ist denn mein Ziel grundsätzlich mit meinem Lösungsansatz zu erreichen oder ist ein anderer Weg anzustreben?
 
Hi,

schau dir mal meinen Versuch an:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <title></title>
        <style type="text/css">
                html,body
                {
                        margin:      0px;
                        padding:     15px;
                        font-family: Verdana;
                        background:  #aaccff
                }

                #col1
                {
                        padding-top: 5px;
                        padding-bottom: 2px;
                        float:    left;
                        width:    13%;
                        font-size: 10px;
                        border-bottom:   solid 1px #AAAAAA;
                }

                #col2
                {
                        float:    left;
                        width:    35%;
                }

                #col3
                {
                        padding-top: 5px;
                        padding-bottom: 2px;
                        float:    left;
                        width:    13%;
                        font-size: 10px;
                        border-bottom:   solid 1px #AAAAAA;
                }

                #col4
                {
                        float:    left;
                        width:    35%;
                }
                #spacer
                {
                        float:    left;
                        width:    2%;
                }

                #colBig1
                {
                        padding-top: 5px;
                        padding-bottom: 2px;
                        float:    left;
                        width:    13%;
                        font-size: 10px;
                        border-bottom:   solid 1px #AAAAAA;
                        clear:both;
                }

                #colBig2
                {
                        float:left;
                        width:85%;
                }

        input
        {
                border:      1px solid #AAAAAA;
                font-size:   10px;
                margin-top:  1px;
                padding-top: 2px;
                height:      13px;
                font-family: Verdana;
        }
        </style>
        <!--[if IE]>
        <style type="text/css">
        #colBig2
        {
                width: 85.5%;
        }
        </style>
        <![endif]-->
</head>
<body>
<form>
                        <div id="col1">Label 1</div>
                        <div id="col2">
                                <input type="text" value="Textbox 1" style="width: 100%" />
                        </div>

                        <div id="spacer">&nbsp;</div>

                        <div id="col3">Label 2</div>
                        <div id="col4">
                                <input type="text" value="Textbox 2" style="width: 100%" />
                        </div>

                        <div id="colBig1">Label 3</div>
                        <div id="colBig2">
                                <input type="text" value="Textbox 3" style="width: 100%" />
                        </div>

                        <div style="clear:both;"></div>
</form>
</body>
</html>
Wenn du in einer Zeile für ein Formularelement nur 50% nutzen und das nächste Element / Label in der nächsten Zeile anordnen möchtest, mußt du für Letzteres die clear-Eigenschaft bestimmen, damit es das vorherige Element mit der float-Eigenschaft nicht umfliesst, sondern in der nächsten Zeile beginnt - in dem Beispiel habe ich diese Regel z.B. für das DIV #colBig1 angewendet.

Vielleicht hilft dir das weiter?
 
Danke für Deine Bemühungen.

Im IE6 sieht das Ganze sehr gut aus. Allerdings passt die Länge im IE7 bereits nicht mehr. Ich habe noch einiges ausprobiert, bin aber bis jetzt zu keinem befriedigenden Ergebnis gekommen. Sehr wahrscheinlich werde ich es nun doch mittels Java-Script realisieren.
 
Hi,

nimm mal den IE7 aus dem "Conditional Comment" heraus, damit das Stylesheet nur für den IE <7 gilt:

Code: 
<!--[if lt IE 7]>
<style type="text/css">
#colBig2
{
width: 85.5%;
}
</style>
<![endif]-->
oder
Code: 
<!--[if lte IE 6]>
<style type="text/css">
#colBig2
{
width: 85.5%;
}
</style>
<![endif]-->
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück