Formularfelder nebeneinander anordnen

[ddjjmm]

Hallo zusammen

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

        .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]

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]

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]

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]

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]

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

    <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.

 

[piepel]

AW: Formularfelder nebeneinander anordnen

Probier den mal

<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]

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]

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]

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]

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:

 

[ddjjmm]

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

 

[piepel]

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?

 

[ddjjmm]

AW: Formularfelder nebeneinander anordnen

Jap gelöst! Danke nochmal.