[gelöst] form wrapper background bei 3 imput fields floated left
am 08.01.2015 - 11:34 Uhr in
Hallo zusammen,
ich habe 3 input Felder der class text, mit css float left im form user edit ausgerichtet.
Jetzt möchte ich ein background-image dahinter legen, was ich bei einzelnen fields über die id oder form wrapper gemacht habe.
Jetzt kann ich aber nicht den gesamten background ansprechen, was kann man da machen?
Anzeige ist im node user/edit
Dankeschön ... auch fürs lesen ;o)
- Anmelden oder Registrieren um Kommentare zu schreiben

Die drei Felder haben ja
am 09.01.2015 - 10:24 Uhr
Die drei Felder haben ja sicherlich einen umschließenden Container.
Kannst Du nicht da das Hintergrundbild rein legen und den Hintergrund der 3 inputfelder auf transparent setzen?
unterschiedlicher Container
am 10.01.2015 - 15:01 Uhr
danke für deine Antwort.
ganz genau und ich glaube dass gerade die unterschiedlichen Container dazu geführt haben, das der Hintergrund bei allen Feldern einzeln in Feldbreite angezeigt wurde.
Du meinst einem Container das Hintergrundbild einfügen und alle Felder
auf transparent setzen?
kannst du das bitte noch einmal etwas genauer erklären.
Ja, genau. Ich gehe davon
am 10.01.2015 - 17:45 Uhr
Ja, genau. Ich gehe davon aus, daß der übergeordnete Container das Hintergrund bekommt und sich darin die drei Felder mit den Inputs befinden und die sollen alle transparent sein.
Wenn ich den Quelltext sehen würde, könnte ich es noch genauer erklären.
Ob das Ganze dann optisch Sinn macht, kann ich nicht beurteilen, ohne die Inputfelder und das Hintergrundbild zu kennen.
Du mußt halt bedenken, daß die auf float:left gesetzten Input-Felder evt. umbrechen, wenn der Platz zu gering wird und das Hintergrundbild dann abgeschnitten wird.
(An schmale Ausgabemedien denken!)
Aber evt. arbeitest Du ja mit fixen Breiten.
fixe breiten
am 11.01.2015 - 10:16 Uhr
Das Umbrechen oder abschneiden ist auch noch so ein Problem gerade bei schmalen Geräten wie Handy.
Die Breiten der Bilder skaliere ich in % was die Felder natürlich nicht von einem Umbruch abhält.
Drei input Felder habe ich eigentlich nur genommen, wei ich mit views eine suche anbiete und die Eingabe und Filter besser bestimmten kann.
Wie beim Auto Kennzeichen zum Beispiel, 1 Feld max. 3 Buchstaben, 2 Feld max 3. Zahlen und 3 Feld ma. 4 Zahlen.
Jedes Feld ist ein Filter und muss oder kann für das Ergebnis relevant sein.
Mal sehen was ich da mache, fixe Breite geht nicht auch für das gesamte views?
Also Hintergrund und Felder in % zur Anzeige?
Du kannst natürlich für jeden
am 11.01.2015 - 13:25 Uhr
Du kannst natürlich für jeden Container eine feste Breite angeben, auch vür die gesamte View.
Ob die Mischung aus fixem View-Container und flexiblen Inputfeldern Sinn macht, kann ich aus der Ferne nicht sagen.
Meinst Du das Skalieren der Bilder mit background-size?
Dann bleibt natürlich noch das Problem, daß die Proportionen sich verschieben, wenn es zu Umbrüchen kommt.
Eigentlich müßtest Du mit Mediaqueries arbeiten und Breakpoints definieren, wo die Bilder und Breiten gewechselt werden.
Aber das ist ja sehr mühsam und Du wirst immer Fälle haben, wo es doof aussieht.
Nicht umsonst ist Flat-Design heute Mode, wo auf Bilder verzichtet wird und Akzente mit Background-Farben und -Verläufen (CSS3) geschaffen werden.
Gerade wenn viele und komplexe Inhalte vermittelt werden, ist das zum Lesen wesentlich angenehmer und natürlich laden die Seiten auch viel schneller, was bei mobilen Geräten u.U. ein Vorteil ist.
Das danken vor allem die User, die für Transfer-Volumen zahlen.
Einfach mal drüber nachdenken, ob Du Dir und den Besuchern das Leben nicht einfach machen kannst. ;-)
Ich möchte mich bei dir
am 11.01.2015 - 16:21 Uhr
Ich möchte mich bei dir bedanken und obwohl ich noch nicht sicher bin wie ich das in den Griff bekomme werde ich deine Tipp mit einbeziehen.
Background Image
am 27.01.2015 - 17:23 Uhr
Wollte das Thema nur kurz offiziell schließen ,o)
Für alle die eventuell ein ähnliches Problem haben möchte kurz sagen, dass ich keine 100% Lösung gefunden habe.
Gerade für Mobile Geräte ist das Seitenverhältnis nicht in den Griff zu bekommen und ich habe mich für eine Lösung mit fester Breite, Background-Color mit etwas css entschieden.
Sie auch gut aus, ist schnell und sparsam für den Betrachter.