zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie DIVs beliebig recht/links ausrichten?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.08.2014, 21:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2014
Beiträge: 3
NoNameMD befindet sich auf einem aufstrebenden Ast
Standard Wie DIVs beliebig recht/links ausrichten?

Hallo,

für das Shopsystem Magento gibt es eine Erweiterung, mit der Kontaktformulare erstellt werden können. Wenn ich damit ein Formular erstelle, dann kann ich zwar die Reihenfolge der Fehler bestimmen (z.B. erst Name, dann E-Mail, dann Nachricht), mehr aber nicht. Die Formularfelder werden dann einfach alle untereinander aufgelistet. Im Template kann ich zwar beliebig arbeiten (Formularfelder in <div> oder <li> packen), aber ich habe keine Möglichkeit, die Formularelemente im Template anzuordnen, weil für jeder Elementtyp (input, textarea, ...) nur einmal der Code vorhanden ist und dann über PHP foreach repliziert wird.

Nun möchte ich aber die Felder 1-7 links und die Felder 8-12 direkt rechts daneben ausrichten. Jedes Feld hat eine eigene ID (siehe unten), über die ich sie mittels CSS ansteuern kann. Aber wie bekomme ich mit float oder position eine Aurichtung wie gewünscht hin?

Der Code:
HTML-Code:
<div id="field1"><input ...></div>
<div id="field2"><input ...></div>
<div id="field3"><input ...></div>
<div id="field4"><input ...></div>
<div id="field5"><input ...></div>
<div id="field6"><input ...></div>
<div id="field7"><input ...></div>
<div id="field8"><input ...></div>
<div id="field9"><input ...></div>
<div id="field10"><input ...></div>
<div id="field11"><input ...></div>
<div id="field12"><input ...></div>
Das Ziel:


Hat jemand einen Ansatz für mich, wie ich das hinbekomme?

Geändert von NoNameMD (08.08.2014 um 21:03 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.08.2014, 23:08
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,

Zitat:
Hat jemand einen Ansatz für mich, wie ich das hinbekomme?
Ja, mit "position: absolute;".

Ich habe mal zwei Lösungen erstellt. Die erste mit p-Elementen, weil die zum grundsätzlichen Testen am geeignetsten sind. Bei der zweiten Lösung habe ich dann einfach deinen geposteten Quelltext eingefügt.

Für die Breitenangaben habe ich als Einheit % gewählt, um eine Flexibilität zur Fenster-/Bildschirmbreite herzustellen.

Für die Höhenangaben sind bei der Lösung feste Einheiten Pflicht. Ich habe das aktuelle rem genommen, du kannst natürlich auch px nutzen. Die Angaben wirst du sowieso an deine Seite anpassen müssen. em und % gehen bei den Höhenangaben meiner Lösung gar nicht, da sonst bei einer Änderung der Fenster-/Bildschirmbreite das Layout zerschossen wird.

Weiterhin habe ich auch gleich mal für Fensterbreiten unter 800px ein wenig Responisve Design hinzugefügt.

Nebenbei wird auch beim Zoomen das Layout nicht zerschossen.

Beispiel 1:

HTML5: NoNameMD - Layoutproblem

Beispiel 2:

HTML5: NoNameMD - Layoutproblem

Gruss

MrMurphy

Geändert von MrMurphy (09.08.2014 um 01:11 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.08.2014, 00:03
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Das geht viel einfacher, flexibler, stabiler, …
Die erste sechs Elementen floaten und werden aus dem Elternelement per negativen Margin über seinen seitlichen Border gezogen. Statt Border kann beim Elternelement auch Padding oder Margin genommen werden. Die restliche sechs Elemente brauchen erst mal keine Formatierung – die rutschen hoch, da die Floatenden aus dem Dokumentenfluss raus sind und deren Platz jetzt frei ist.

Nachtrag:
Hier auf die Schnelle ein Testcase:
HTML-Code:
<!doctype html>
<meta charset="UTF-8">
<title>NoNameMD :: xhtmlforum.de</title>
<style>
html { background-color: #666; }
body { width: 5em; margin: auto; border-left: 5em solid #eed; background-color: #edd; }
body:after { clear: left; content: "."; display: block; height: 0; visibility: hidden; }
#field1,
#field2,
#field3,
#field4,
#field5,
#field6,
#field7 { clear: left; float: left; width: 100%; margin-left: -100%; }
</style>
<div id="field1">1</div>
<div id="field2">2</div>
<div id="field3">3</div>
<div id="field4">4</div>
<div id="field5">5</div>
<div id="field6">6</div>
<div id="field7">7</div>
<div id="field8">8</div>
<div id="field9">9</div>
<div id="field10">10</div>
<div id="field11">11</div>
<div id="field12">12</div>
Nachtrag 2:
Sehe gerade, dass die ersten sieben (nicht sechs) Elemente floaten müssen und die letzte fünf dann eben nicht. Habe es im Testcase geändert.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (09.08.2014 um 00:33 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 09.08.2014, 00:57
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

Zitat:
Das geht viel einfacher, flexibler, stabiler, …
Wieso mag ich das bereits beim Anblick deines Beispielcodes nicht glauben?

Zunächst mal sieht deine Seite ja noch nach einer möglichen Lösung aus:

Beispiel 3:

HTML5: NoNameMD - Layoutproblem

Da die DIVs input-Felder enthalten ist eine Breite von 5em unrealistisch schmal, ich habe sie deshalb mal auf realistische 25em vergrößert. Außerdem sollen links 7 DIVs und rechts 5 DIVs sein. Das sieht mit deiner Lösung und NoNameMDs html-Quelltext dann so aus:

Beispiel 4:

HTML5: NoNameMD - Layoutproblem

Wenn ich die Fensterbreite verringere oder den Zoomfaktor erhöhe ist von Flexibilität nichts zu finden - so sehr ich auch suche. Von Responsive Design für Smartphones und Tablets natürlich erst recht nichts.

Und wenn du deine Lösung schon so sehr über den Klee lobst: Wo ist deine Lösung stabiler als meine?

Gruss

MrMurphy

Geändert von MrMurphy (09.08.2014 um 01:10 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 09.08.2014, 01:20
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Mein Test-Case soll das Prinzip anschaulich machen und nicht die Arbeit des OP abnehmen. Und es funktioniert. Beachte auch die nachträgliche Änderungen.
Warum Dein Beispiel nicht funktioniert, kann ich Dir zwar sagen, aber ich denke, dass Du das auch selbst raus findest. Aber erst mal ausschlafen.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #6 (permalink)  
Alt 09.08.2014, 02:08
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 bin hellwach und biete im Gegensatz zu dir funktionierende Lösungen an.

Dein geändertes Beispiel sieht so aus

Beispiel 6:

HTML5: NoNameMD - Layoutproblem

und mit NoNameMDs Quelltext so

Beispiel 7:

HTML5: NoNameMD - Layoutproblem

Eine funktionierende Lösung kann ich nicht erkennen. Mit float und clear habe ich es auch versucht, aber keine adäquate praxisgerechte Lösung gefunden. Und im Gegensatz zu dir biete ich keine halbfertigen ungetesteten Lösungen an.

Gruss

MrMurphy
Mit Zitat antworten
  #7 (permalink)  
Alt 09.08.2014, 02:22
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Du, jetzt bitte nicht böse sein, aber den Unsinn hier kann (und will) ich nicht weiter aufblasen.
Gute Nacht.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #8 (permalink)  
Alt 09.08.2014, 03:09
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 bin dir überhaupt nicht böse. Im Gegenteil finde sich solche Diskussionen lustig, da das Ende von vornherein feststeht:

Zitat:
... aber den Unsinn hier kann (und will) ich nicht weiter aufblasen.
Gute Nacht.
Auch weil ich wusste, das du auf dem richtigen Weg bist. Die Lösung mit float ist viel einfacher für den Webseitenersteller zu händeln und damit praxisgerechter. Die Besucher werden hingegen zwischen beiden Lösungen keinen Unterschied bemerken:

Beispiel 5:

HTML5: NoNameMD - Layoutproblem

Gruss

MrMurphy

Geändert von MrMurphy (09.08.2014 um 04:47 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 09.08.2014, 03:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2014
Beiträge: 3
NoNameMD befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Ich habe mal zwei Lösungen erstellt.
Wow, vielen vielen Dank! Auf die Idee, die einfach aus der linken Spalte rauszuziehen, sodass die übrigen der linken Spalte dann "aufrücken", bin ich mal überhaupt nicht gekommen.

Die Lösung ist super: Ergebnis

Hab noch ein paar kleinere Probleme, weil Dropdowns in den Feldern nicht mehr ansprechbar sind und ich die Felder auch nicht auf die gewünschte Breite bekomme (da scheinen andere CSS-Anweisungen zwischen zu funken), aber das bekomme ich noch in den Griff.

Nochmals danke!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.08.2014, 03:31
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,

du solltest dir auch mal mein Beispiel 5 ansehen. Das ist für Webseitenersteller viel einfacher zu handhaben, da die DIV mit "position: absolute;" wegfallen und entsprechend auch keine festen Positionen vergeben werden müssen.

Du darfst nur nicht vergessen dem umgebenden form-Element ein clearfix mit auf den Weg zu geben nach dem Motto: Wer floatet muss auch clearen.

Edith:

Ich habe grade gesehen, das sich im form-Element insgesamt 14 DIV befinden, von denen das 14te (der Button) nicht mitspielen soll. Deshalb habe ich mein 5. Beispiel daraufhin angepasst.

Zur Lösung mit float sollten eigentlich folgende CSS-Anweisungen vollkommen ausreichen, die du so wie sie sind einfach kopieren kannst:

Code:
/* clearfix */
form:before,
form:after {
   content: "";
   display: table;
}
form:after {
   clear: both;
}
/* Ende clearfix */

form>div:nth-child(-n+8) {
   float: left;
   clear: both;
   width: 48%;
   margin-bottom: 1rem;
}
form>div:nth-child(n+9):nth-last-child(n+2) {
   width: 48%;
   margin-left: 50%;
   margin-bottom: 1rem;
}
und für das responsive Design in die entsprechenden MediaQuerys:

Code:
form>div:nth-child(n+1):nth-last-child(n+2) {
   float: none;
   width: 100%;
}
Die IDs werden dabei überhaupt nicht benötigt.

Gruss

MrMurphy

Geändert von MrMurphy (09.08.2014 um 05:01 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

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
Elemente in Divs ausrichten biene87 CSS 2 05.06.2010 15:33
Auf-/Zuklappen mit JS crimi Javascript & Ajax 7 23.09.2008 17:27
In einem div, 2 divs mittig ausrichten heohni CSS 1 20.07.2007 15:51
div bereich nach anderen divs ausrichten pixel CSS 0 04.02.2007 00:49
divs aneinander in der höhe ausrichten - wie ? MS Master CSS 1 24.02.2005 17:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:48 Uhr.