|
|||
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> Hat jemand einen Ansatz für mich, wie ich das hinbekomme? Geändert von NoNameMD (08.08.2014 um 21:03 Uhr) |
Sponsored Links |
|
|||
Hallo,
Zitat:
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) |
Sponsored Links |
|
|||
Hallo
Zitat:
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) |
|
||||
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. |
|
|||
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 |
|
|||
Hallo,
ich bin dir überhaupt nicht böse. Im Gegenteil finde sich solche Diskussionen lustig, da das Ende von vornherein feststeht: Zitat:
Beispiel 5: HTML5: NoNameMD - Layoutproblem Gruss MrMurphy Geändert von MrMurphy (09.08.2014 um 04:47 Uhr) |
|
|||
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! |
Sponsored Links |
|
|||
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; } Code:
form>div:nth-child(n+1):nth-last-child(n+2) { float: none; width: 100%; } Gruss MrMurphy Geändert von MrMurphy (09.08.2014 um 05:01 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |