Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Formularfelder nebeneinander anordnen“

ddjjmm

Nicht mehr ganz neu hier

Hallo zusammen :)

habe ein kleines CSS-Problem, bei dem ich nicht so richtig weiterkomme:

PHP:
        .landingpage-box-content {padding: 10px 0px 0px 0px; margin: 10px 0px 0px 0px;}
        .landingpage-box-title {margin: 0px 0px 5px 0px; font-weight: bold; float: left;}
        .landingpage-box-dev-note {font-style: italic; float: right; margin-right: 10px;}
        .landingpage-box-field {margin: 0px 0px 5px 0px; width: 99%;}
        .landingpage-box-field:hover {background: #F9F9F9;}
        .landingpage-box-field:focus {background: #F9F9F9;}
        .landingpage-box-details {margin: 0px 0px 10px 0px;}

    <div class="landingpage-box-content">
        <div class="landingpage-box-title">Titelzeile oben</div><div class="landingpage-box-dev-note">dev: "landingpage_title_top"</div>
        <input type="text" class="landingpage-box-field" style="width: 85%;" name="landingpage_title_top" id="landingpage_title_top" value="<?php echo $landingpage_title_top; ?>" />
        <input type="text" style="width: 5%;" name="landingpage_title_top_size" id="landingpage_title_top_size" value="12" />
        <input type="text" style="width: 10%;" name="landingpage_title_top_color" id="landingpage_title_top_color" value="#A3A3A3" />
        <div class="landingpage-box-details">Using the "<i>Add an Image</i>" button, upload a 125x125 thumbnail image and paste the URL here.</div>
    </div>
Die 3 Eingabefelder sollen nebeneinander in der Zeile stehen aber das tun sie nicht :(

Fehlerbild:


Korrekte Anzeige (ohne Erweiterung):


Hoffe jemand hat eine Idee. Vielen Dank im Voraus!
 

Paric

von allem ein bisschen

AW: Formularfelder nebeneinander anordnen

als erstes ist mir aufgefallen das du eine ID mehrmals vergeben hast. Das geht nicht. Dann besser mit class arbeiten :)

Dann zu Deinem Problem. Entweder Du lässt alle Felder mit float: left nebeneinander stehen, oder du machst sie zu inline-elementen mit display: inline;

Gruß,
Paric
 

ddjjmm

Nicht mehr ganz neu hier

AW: Formularfelder nebeneinander anordnen

Hallo Paric,

ich verwende doch eigentlich nur Klassen? Oder meinst die input ids? Kann da gerade keine Doppelverwendung finden?

Ja gerne via float gelößt, allerdings will das nicht so wirklich siehe Screenshot.
 

LaFaSiLuc

pauschalschuldig

AW: Formularfelder nebeneinander anordnen

Bei einem normalen 3Spalten layout haben die beiden "linken" Elemente float left und das rechte float:right;
Aber ist die Weite des einen Feldes nicht viel zu groß? Vlt reicht der Platz einfach nicht?
Und ich glaube, du musst erst das linke element, dann das rechte Element und dann erst das in der Mitte angeben (im CSS) Näheres hier: http://www.neuroticweb.com/recursos/3-columns-layout/
 

piepel

LocalDurst

AW: Formularfelder nebeneinander anordnen

Dein Fehlerbild und deine Korrekte Anzeige sind aber doch zwei verschiedene Sachen.
Soll das "#A3A3A3" einfach nur neben "Titelleiste Landingpage" und die "12"? Oder?
 

ddjjmm

Nicht mehr ganz neu hier

AW: Formularfelder nebeneinander anordnen

Das sind nicht zwei verschiedene Anzeigen sondern ich wollte nur demonstrieren wie es vor meinem Workaround aussah, damit man weiss wo die Texte und Formularfelder eigentlich stehen sollten.

Ja genau: Neben "Titelleiste Landingpage"-Formularfeld soll einmal die 12 und das #A3A3A3 stehen.

Update: Aktueller Stand

PHP:
    <div class="landingpage-box-content">
        <div class="landingpage-box-title">Titelzeile oben</div><div class="landingpage-box-dev-note">dev: "landingpage_title_top"</div>
        <input type="text" class="landingpage-box-field" style="clear: both; float: left; width: 86%;" name="landingpage_title_top" id="landingpage_title_top" value="<?php echo $landingpage_title_top; ?>" />
        <input type="text" style="width: 9%; float: right;" name="landingpage_title_top_color" id="landingpage_title_top_color" value="#A3A3A3" />
        <input type="text" style="width: 4%; float: left;" name="landingpage_title_top_size" id="landingpage_title_top_size" value="12" />
        <div class="landingpage-box-details" style="clear: both;">Using the "<i>Add an Image</i>" button, upload a 125x125 thumbnail image and paste the URL here.</div>
    </div>
Sie sitzen zwar nebeneinander aber irgendwas stimmt da nicht, denn die zwei hinteren Kästchen sind nicht auf derselben Höhe wie das vordere input field.
 
Zuletzt bearbeitet:

piepel

LocalDurst

AW: Formularfelder nebeneinander anordnen

Probier den mal
HTML:
<div class="landingpage-box-content">
        <div class="landingpage-box-title">Titelzeile oben</div><div class="landingpage-box-dev-note">dev: "landingpage_title_top"</div>
        <input type="text" class="landingpage-box-field" style="clear: both; float: left; width: 86%;" name="landingpage_title_top" id="landingpage_title_top" value="<?php echo $landingpage_title_top; ?>" />
        <input type="text" style="width: 4%; float: left;" name="landingpage_title_top_size" id="landingpage_title_top_size" value="12" />
        <input type="text" style="width: 8%; float: left;" name="landingpage_title_top_color" id="landingpage_title_top_color" value="#A3A3A3" />
        <div class="landingpage-box-details" style="clear: both;">Using the "<i>Add an Image</i>" button, upload a 125x125 thumbnail image and paste the URL here.</div>
    </div>
Mir erschließt sich nicht die prozentuale Verteilung. Wozu brauchst du die?
 

ddjjmm

Nicht mehr ganz neu hier

AW: Formularfelder nebeneinander anordnen

Mit deinem Code stehen sie zwar besser nebeneinander aber immernoch horizontal verschoben :(

Zum Thema Prozentuale Verteilung:
Im Grunde will ich lediglich dem Color field 80px und dem Size field 30px width geben. Die restliche Breite soll dass "top" field komplett einnehmen (daher kam ich auf prozente).
 

piepel

LocalDurst

AW: Formularfelder nebeneinander anordnen

Was meinst du mit horizontal verschoben? Bei mir stehen die schön wie ein Lineal.
Meinst du vielleicht, dass das Farbfeld runterspringt, wenn du den Browser zusammenschiebst?
Was für einen Browser nimmst du?
 

ddjjmm

Nicht mehr ganz neu hier

AW: Formularfelder nebeneinander anordnen

Ach Schmarn ich meine natürlich vertikal verschoben ;)

Habe mal den Screenshot vergrößert und das Problem mit Hilfslinien hervorgehoben:

Getestet mif Firefox, Opera, Chrome & IE
 

piepel

LocalDurst

AW: Formularfelder nebeneinander anordnen

Hab zu Firefox, Opera, Chrome & IE noch Safari und k-Meleon hinzu gefügt und kann die Verschiebung nicht reproduzieren.
Screenshot:
horizontalexjat.jpg
 

ddjjmm

Nicht mehr ganz neu hier

AW: Formularfelder nebeneinander anordnen

Danke für deine Rückmeldung.

Habe rausgefunden, dass sich fälschlicherweise eine weitere Style Definition mit margin-top: 1px eingeschlichen hat :p
 

piepel

LocalDurst

AW: Formularfelder nebeneinander anordnen

Ich kenn dein weiteres Stylesheet zwar jetzt nicht, aber weil du schreibst "eingeschlichen": Den Überblick über die Kaskade verliert man schnell, insbesondere wenn du im head-Bereich einen Block definierst und dann nochmal styles in den tags benutzt und dann vielleicht noch ein externes Stylesheet einbindest ist schnell die Fehlersuche sehr zeitaufwändig. Ich würde das mit den tags weglassen (höchstens mal zum Ausprobieren). Schneller geht es meiner Meinung nach, einen zweiten Editor für CSS zu öffnen und darin nur das Stylesheet zu bearbeiten.

Ist dein Problem soweit gelöst?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.858
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben