zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Positionierung (in Prozent)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.06.2014, 12:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2006
Beiträge: 22
JetGumX befindet sich auf einem aufstrebenden Ast
Standard Positionierung (in Prozent)

Hallo zusammen,

ich habe eine etwas knifflige Aufgabe gerade, bei der ich irgendwie nicht so recht auf einen grünen Zweig komme
Bitte daher euch einmal um Hilfe - wäre super, wenn ihr mir hier einen Tipp geben könntet.

Ich habe eine Art HTML-Generator übernommen, das bedeutet vereinfacht gesagt, dass auf Basis eines Bildschirms in einer Software dynamisch ein HTML generiert werden soll.

Ein solcher Bilschirm besteht dabei aus Zeilen und Spalten.
Die Elemente (Labels, Inputfelder und Buttons) sind dabei immer genau einer Zeile zugeordnet, können aber in unterschiedlichen Spalten beginnen. Außerdem haben die Elemente eine gegebene Länge (bzw. Anzahl Spalten).

Beispiel für einen solchen Bildschirm:
Bildschirm mit max. 3 Zeilen und 20 Spalten

Zeile 1:
  • Label (startend in Spalte 1, Länge bis Spalte 10
  • Input-Feld (startend in Spalte 11, Länge bis Spalte 14 )
  • Label (startend in Spalte 15, Länge bis Spalte 20 )

Zeile 2:
  • Label (startend in Spalte 5, Länge bis Spalte 12
  • Input-Feld (startend in Spalte 13, Länge bis Spalte 18 )

Zeile 3:
  • Label (startend in Spalte 1, Länge bis Spalte 5
  • Button (startend in Spalte 15, Länge bis Spalte 20 )

Der Grundaufbau des HTML-Codes sieht dabei wie folgt aus:

HTML-Code:
<body>
<div id="Screen">

<div id="Row"> </div>
<div id="Row"> </div>
<div id="Row"> </div>
<div id="Row"> </div>
<div id="Row"> </div>

</div>
</body>
Grundsätzlich wird also für den Bildschirm ein übergreifender DIV-Container angelegt und auch für jede einzelne Zeile ein einzelner DIV-Container.

Nun überlege ich gerade, wie ich generisch es hinbekomme, dass die o.g. Elemente im HTML (je Zeile) positioniert werden könnten.
Da es ja ggf. unterschiedliche Bildschirmauflösungen geben kann, habe ich überlegt hier mit einer prozentualen Positionierung zu arbeiten.

Ich kenne die Anzahl der Spalten, kann somit also 100% durch diese Anzahl dividieren und erhalte damit die Anzahl der Prozente, was eine Spalte in Anspruch nimmt.
Im oben genannten Beispiel also 100%/20 Spalten = 5,00 % (je Spalte)

Damit kann ich auch die Breite der Elemente nun berechnen, in dem ich die Anzahl der Spalten, die das Element einnimmt (Start-Spalte bis End-Spalte) mit dem Wert von 5,00% multipliziere.

Soweit alles gut.... Nur überlege ich nun:
Wie zum Teufel bekomme ich es hin, dass die Positionierung ebenfalls davon abhängig berechnet werden kann.

Am liebsten wäre mir die Positionierung der Elemente je einzelner Zeile (ID: Row).

Nun würde ich ggf. gerne immer vom Beginn der Zeile absolut positionieren, aber das funktioniert nicht im Zusammenhang mit Prozent und dem Bezug jeweils auf dem DIV-Container mit der ID Row (als Eltern-Container), oder?
Nun habe ich es mit relativer Positionierung versucht, aber irgendwie werde ich da auch nicht ganz so glücklich bzw. ich bin einfach zu doof und bekomme es nicht hin

Hier habe ich einmal etwas rumprobiert:
Edit fiddle - JSFiddle

HTML-Code:
<div id="Screen">
Bla
  <div id="Row">
  <input style="position:relative;left:0%;width:30%">
  <span style="position:relative;left:70%;width:30%;white-space: nowrap">Dies ist ein Label - 1</span>
  </div>
  
  <div id="Row">
  <input style="position:relative;left:0%;width:30%">  
  <span style="position:relative;left:10%;width:30%;white-space: nowrap">Dies ist ein Label - 2</span>
  <input style="position:relative;left:10%;width:20%">      
  </div>

  <div id="Row">
  <input style="position:absolute;left:0%;width:30%">
  <span style="position:absolute;left:0%;width:30%;white-space: nowrap">Dies ist ein Label - 35555</span>
  </div>

</div>
So wie ich es mir vorstelle ist es jedoch leider nicht

Bin wirklich für jeden noch so kleinen Tipp dankbar!!
DANKE!!

Viele Grüße

Geändert von JetGumX (13.06.2014 um 13:01 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.06.2014, 16:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

ich habe dein Problem so verstanden:

Du möchtest ein variables Formular erstellen.

Dann wird gar nichts positioniert. Du erstellst den HTML-Quelltext und vergibst ein paar CSS-Anweisungen bezüglich Abständen und Breiten in Prozent. Dann noch etwas Responsive Design. Fertig.

Allerdings solltest du nicht auf den Fehler zurückfallen die CSS-Anweisungen im HTML-Quelltext im body-Bereich unterzubringen. Sowas anzubieten ist voll daneben. Das ist seit 14 Jahren sachlich schlicht falsch.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.06.2014, 17:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2006
Beiträge: 22
JetGumX befindet sich auf einem aufstrebenden Ast
Standard

Hey,

ja, letztlich ist es eine Art generisches Formular.
Nein, ich habe auch nicht vor nun im BODY direkt die CSS-Eigenschaften zu pflegen, dies hab ich nun nur beispielhaft gemacht, um ein wenig rumzuprobieren.

Mein Grund-Problem ist ein anderes:
Wie genau positioniere ich denn (generisch) meine Objekte auf einen Bildschirm mit der Breite 100% (eben Zeile für Zeile in einem DIV-Container)
Da bin ich eben am Knobeln, ob und wie ich hier positionieren kann/soll/muss, zum Beispiel eben absolut oder relativ und wie sich die Prozentwerte dazu verhalten.

Vermutlich schwer zu beschreiben meine Problemstellung, sorry
Das oben war wie gesagt auch nur ein Beispiel für einen Aufbau, die Bildschirme können selbstverständlich völlig anders aussehen - ich sollte jedoch irgendwie hinbekommen, dass diese im HTML möglichst identisch aussehen (und eben die Elemente analog angeordnet sind)

Danke & Grüße
Jens
Mit Zitat antworten
  #4 (permalink)  
Alt 13.06.2014, 19:13
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Du kannst mit Klassen regeln. Zum Beispiel so:

HTML-Code:
<form>
    <label for "vorname" class="left">Vorname</label>
    <input type="text" id="vorname" class="left">
    <label for "nachname" class="right">Nachname</label>
    <input type="text" id="nachname" class="right">
</form>
Im CSS kannst du dann die klassen left und right entsprechnd setzen:

Code:
        form label.left {
            margin-left: 10%;
            width: 20%;
        }
        form label.right {
            margin-left: 20%;
            width: 20%;
        }
        
        label.left{
            float: left;
        }
        label, input {
            display: block;
        }
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.06.2014, 19:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo Jens,

vergiß endlich die Positionierung und die Divitis. Das braucht kein Mensch und die Browser schon gar nicht. Außerdem wird der HTML-Quelltext deutlich übersichtlicher.

Die Abstände werden durch Breiten, Höhen und Abstände hergestellt. Die Positionierung übernimmt dann der Browser.

Durch deinen Wunsch mit der Positionierung ist die Seite unflexibel und macht bei Änderungen / Erweitungen nur Stress.

Deinen Angaben ist leider so gut wie gar nichts zu entnehmen, es werden ja nicht mal alle Texte angezeigt:

HTML5: JetGumX - Formular

Mein Lösungsvorschlag sieht folgendermaßen aus:

HTML5: JetGumX - Formular

Gruss

MrMurphy
Mit Zitat antworten
  #6 (permalink)  
Alt 14.06.2014, 11:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2006
Beiträge: 22
JetGumX befindet sich auf einem aufstrebenden Ast
Standard

Hallo MrMurphy,

Ja, mein HTML-Code oben ist quatsch, da habe ich auch nur ein wenig rumprobiert (eben mit der Positionierung).
Mein Problem bei dem ganzen ist eben, dass es sich um ein generisches Layout handelt, dass ich eben automatisiert erzeugen muss.

Ein konkretes Beispiel für einen solchen Bildschirm habe ich einmal angehängt.

Für diesen Bildschirm soll nun HTML erzeugt werden, welches das Layout möglichst identisch abbildet (ist bewusst etwas "verschoben" und unschön angeordnet).
Konkret wird dabei bereits jetzt je Zeile im Bildschirm ein DIV angelegt. Nun geht es um die Positionierung der Elemente innerhalb dieser Zeile.

Was man optisch nun nicht direkt sieht: Dieser Bildschirm hat auch eine gegebene Anzahl von Spalten und alle Elementen sind quasi in den Spalten angeordnet (bzgl. Breite und Position).

Und nun suche ich einen Weg, um die Elemente in diesem Zeilen-DIV anzuordnen. Aufgrund der Generik werde ich ggf. auch mit Inline-Attributen arbeiten (müssen).

Damit die Größe eben mitskaliert war eben meine Überlegung mit Prozent zu arbeiten.
Daher auch die im Eingangspost aufgezeigte Berechnung der prozentualen Verteilung einer Spalte bezogen auf 100%.
Damit könnte ich die Breite der Elemente (und eben falls notwendig) auch die Position (vom linken Rand gesehen) berechnen.

Mein Problem ist eben nun, dass ich nicht genau weiss, wie ich diese Objekte prozentual in die gleiche Position bringen kann.
Vielleicht geht es auch ohne die absolute/relative Positionierung, aber ich weiss eben noch nicht wie im Detail.

Ich bin euch in jedem Fall sehr sehr dankbar für Eure Hilfe DANKE!!
Sorry, dass ich mich ggf. anfangs etwas undeutlich ausgedrückt habe, was meine Anforderung angeht - hoffe es ist jetzt ein wenig klarer?!

Danke & Grüße
Jens
Angehängte Grafiken
Dateityp: jpg Bild01.jpg (8,9 KB, 7x aufgerufen)
Mit Zitat antworten
  #7 (permalink)  
Alt 14.06.2014, 14:31
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Ich habe das mal nach deinen Vorgaben umgesetzt.
5% Grid-System
Mindestbreite 500px
maximale Breite 1000px
dynamisch, nach Fontgroesse anpassbar
Zeilen über DIV, absolut positioniert pro Zeile, ansprechbar über Zeilennummer in der ID
Label und input innerhalb des Div absolut positioniert mit %-Angaben, basierend auf 5% Abstände.

HTML-Code:
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        
        <style type="text/css">
        html, body {height: 100%;}
        /* allgemeine Einstellungen */
        form#bestellung {
            width: 90%;
            min-width: 500px;
            max-width: 1000px;
            height: 500px;
            position: relative;
            background-color: rgb(240,240,240);
            font-size: 16px;
        }
        #bestellung div {
            height: 1.5em;
            width: 96%;
            margin: 0;
            position: absolute;
            left: 2%;
        }
        #bestellung label, #bestellung input {
            display: block;
            position: absolute;
            border: 1px solid grey;
            height: 1.5em;
        }
        #bestellung label {
            top: 0;
            left: 0;
            height: calc( 1.5em - 2px );
        }
        #bestellung input {
            border: 2px inset grey;
            width: 35%;
            font-size: calc( 1em - 4px );
        }
        
        /* individuelle Einstellungen je Zeile */
        #bestellung > #zeile1 {
            top: 0em;                                               
        }
        #bestellung > #zeile1 > label {
            width: 20%;
        }
        #bestellung > #zeile1 > input {
            left: 20%;
        }
        #bestellung > #zeile2 {
            top: 1.5em; 
        }
        #bestellung > #zeile2 > label {
            width: 20%;
        }
        #bestellung > #zeile2 > input {
            left: 20%;
            width: 20%;
        }
        #bestellung > #zeile3 {
            top: 3em; 
        }
        #bestellung > #zeile3 > label {
            width: 20%;
        }
        #bestellung > #zeile3 > input {
            left: 35%;
            width: 10%;
            background-color: transparent;
        }
        #bestellung > #zeile4 {
            top: 4.5em; 
        }
        #bestellung > #zeile4 > label {
            width: 20%;
        }
        #bestellung > #zeile4 > input {
            left: 25%;
            width: 15%;
            background-color: transparent;
            border: 1px solid;
            font-size: calc( 1em - 2px );
        }
        </style>
    </head>
    <body>
        <h1>Artikelverwaltung</h1>   
        <form name="bestellung" id="bestellung" action="sendmail.php" method="post" enctype="multipart/form-data">
            
            <div id="zeile3">
                <label>Artikelart</label><input type="text" size="5" name="artikelart" value="">
            </div>
            
            <div id="zeile1">
                <label>Artikel</label><input type="text" size="50" name="artikel" value="">
            </div>
            
            <div id="zeile2">
                <label>Geändert von</label><input type="text" size="20" name="geaendert" value="">
            </div>
            
            <div id="zeile4">
                <label>Warengruppe</label><input type="text" size="5" name="warengruppe" value="">
            </div>
            <!-- weitere Formelemente -->
            
        </form>
    </body>
</html>    

Das lässt sich jetzt alles wunderbar per Javascript oder PHP erstellen oder ändern.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #8 (permalink)  
Alt 14.06.2014, 16:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2006
Beiträge: 22
JetGumX befindet sich auf einem aufstrebenden Ast
Standard

Danke!
Werde damit mal etwas rumprobieren - das geht in jedem Fall in die richtige Richtung!
Mit Zitat antworten
Antwort

Stichwörter
css, positionierung, prozent

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Positionierung in Windows Mobile 5 JetGumX (X)HTML 2 15.03.2013 13:01
Firefox 4 und Positionierung ChOpSueY! CSS 2 09.05.2011 23:04
Positionierung z-index und IE Blub CSS 4 09.12.2007 16:51
komplexe Positionierung new user CSS 1 19.09.2007 12:51
Barrierefreiheit - Absolute Positionierung dbub Barrierefreiheit 19 13.06.2007 17:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:11 Uhr.