input-/button-/a-Elemente auf einer Fluchtlinie und gleiche Höhe

[gutenMorgen]

Hallo in die Runde,

seit mehreren Tagen übe ich mich lokal an diesem Problem. Weder finde ich selber die Lösung, noch passende Antworten auf meiner Internetsuche. Es mag ein einfaches Problem sein, jedoch bitte ich um Nachsicht da ich mich leider noch nicht so gut mit CSS auskenne.

Ich habe folgenden HTML-Bereich

  <div class="search-box">
    <form id="search" action="./xyz.php?" method="get">
      <fieldset>
        <input title="Eingabe der gesuchten Wörter" name="keywords" id="keywords" type="search" maxlength="128" size="20" value="" placeholder="input: Sucheingabe …" />
        <button title="Suchbutton" type="submit" title="Suche">
          button: Suche
        </button>
        <a title="Aufruf der erweiterten Suche" href="./xyz.php?">
          link: Erweiterte Suche
        </a>
      </fieldset>
    </form>
  </div>

Die hier aufgeführten input-/button-/a-Elemente sollen alle 2em hoch sein, auf der gleichen Fluchtlinie auf einer Zeile liegen, mit rotem Rahmen versehen sein und der jeweilige Text innerhalb der Rahmen vertikal und horizontal zentriert sein.

Ich bekomme es auf den Browsern IE 8 + Firefox 40 + Opera 12 zum Verrecken nicht hin - die Elemente sind unterschiedlich hoch und liegen an unterschiedlichen Fluchtlinien.

Habt Ihr einen Tipp bzw. Link für mich?

[Matthias Apsel]

Hallo gutenMorgen,

Habt Ihr einen Tipp bzw. Link für mich?

Kannst du ein online-Beispiel zur Verfügung stellen?

Bis demnächst
Matthias

[gutenMorgen]

@Matthias, ich habe es noch nicht online, sondern nur lokal.

[Matthias Apsel]

Hallo gutenMorgen,

ich habe es noch nicht online, sondern nur lokal.

Es gibt da viele Möglichkeiten.

• Spielwiesen
• Webspace-Anbieter wie etwa bplaced.net

Bis demnächst
Matthias

[Auge]

Hallo

@Matthias, ich habe es noch nicht online, sondern nur lokal.

Mit Verlaub; irrelevant!

Um zu sehen/wissen, wie der Code (HTML und CSS) aufgebaut ist, müssen wir den Code kennen. Du musst nicht die ganze unfertige Seite freigeben, ein Dienst (wie z.B. Codepen), auf dem du Beispielcode zeigen kannst, reicht. Es geht ja nur um die Zeile XY mit den fraglichen Elementen und eventuell ein wenig Drumherum.

Tschö, Auge

[gutenMorgen]

Hallo Auge, danke für den Tipp mit Codepen. Näheres bei meiner Antwort unten.

[MrMurphy1]

Hallo

IE 8

Opera 12 (also die alte Engine)

Habt Ihr einen Tipp

Vergiß es. Für die veralteten Browser (und dann wahrscheinlich auch die dazwischenliegenden bis zu den aktuellen) brauchst du jeweils unterschiedliche Anpassungen.

Viele Formularelemente lassen sich zudem nicht pixelgenau anpassen. Mit leichten Abweichungen musst du also leben.

Ich würde das mit Flexbox machen, dauert 5 Minuten. Damit hast du schon mal locker deutlich über 90% der aktuell genutzten Browser abgedeckt.

Die eingesparte Zeit kannst du dann nutzen um für die von dir gewünschten Browser Einzellösungen zu erstellen.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Vergiß es. Für die veralteten Browser (und dann wahrscheinlich auch die dazwischenliegenden bis zu den aktuellen) brauchst du jeweils unterschiedliche Anpassungen.

Das halte ich für ein Gerücht. → Pen

Ich halte es aber auch für unsinnig, verschiedenartige UI-Elemente gleich aussehen lassen zu wollen.

LLAP 🖖

[gutenMorgen]

@LLAP, so unsinnig ist mein Anliegen gar nicht. Ich möchte einfach nur das a-Element vom Aussehen her wie das button-Element aussehen lassen und alle 3 Elemente gleich hoch auf einer Zeile haben. Eigentlich ganz einfach oder?

Aber input + a + button werden unterschiedlich interpretiert (Höhe, Textausrichtung, Abstand ...) - schade. Anstelle einfacher wird alles nur noch komplizierter und genau das will ich nicht. Werde auf Tabellen zurückgreifen, das versteht jeder Browser (noch immer)!

[Gunnar Bittersmann]

@@gutenMorgen

@LLAP,

??

so unsinnig ist mein Anliegen gar nicht. Ich möchte einfach nur das a-Element vom Aussehen her wie das button-Element aussehen lassen

Ach so. Das input-Feld also nicht gleich.

BTW, ein call to action sollte sich visuell deutlisch von anderen möglichen Nutzeraktionen unterscheiden. Der Absendebutton eines Formulars (bspw. „Jetzt kaufen“) wäre ein hervorzuhebender CTA-Button, Dinge wie „Abbrechen“, „Zurück zum Warenkorb“ sind sekundär, sollten visuell also nicht so stark hervortreten.

TL;DR: Oft ist es sinnvoll, dass Buttons und Links nicht gleich aussehen.

und alle 3 Elemente gleich hoch auf einer Zeile haben. Eigentlich ganz einfach oder?

Ja. Ich hatte dir verlinkt, wie’s geht.

LLAP 🖖

[gutenMorgen]

Herzlichen Dank, mit Deiner verlinkten Lösung kann ich leben. Näheres unten.

[gutenMorgen]

@MrMurphy, genau, ich bekomme es pixelgenau nicht hin. Das input-Element ist am höchsten von allen, das button-Element und das gefloatete a-Element niedriger. Je nach Browser ist das button-Element in der Fluchtlinie niedriger usw. Und dann sagen die Gurus, man soll keine Tabellen verwenden!

[MrMurphy1]

Hallo,

Tabellen sind bei deinen Vorstellungen sachlich falsch und führen auch zu keiner pixelgenauen Lösung.

Ich vermute, dass du dich zwar auf den IE8 (und als Absicherung noch auf Opera 12) als "Bösewicht" berufst, aber selbst nicht mal einen zum Testen hast. Die IE8-Emulation im IE11 ist kein IE8, der echte IE8 verhält sich teilweise anders als die Emulation.

Sonst würdest du nämlich im praktischen Versuch feststellen, dass auch die Tabellen zu keiner pixelgenauen Darstellung mit allen deinen Forderungen führen.

Tabellen sind für Tabellendaten, ein Formualar ist keine Tabelle.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Ich vermute, dass du dich zwar auf den IE8 (und als Absicherung noch auf Opera 12) als "Bösewicht" berufst

Die Bösewichter sind längst besiegt. Presto dürfte in freier Wildbahn ausgestorben sein. IE8 steht oben auf der Liste der bedrohten Arten.

Und wie Jeremy Keith (immer wieder) sagt: „Anstatt seine Zeit mit dem Versuch zu verbringen“ (Ich würde sagen: verschwenden) „Webseiten in den verschiedensten Browsern gleich aussehen zu lassen, kann man seine Zeit darin investieren, … in fähigeren Browsern die bestmögliche Nutzungserfahrung zu bieten.“

LLAP 🖖

[Der Martin]

Hallo,

Presto dürfte in freier Wildbahn ausgestorben sein.

das glaube ich nicht. Presto wird mit Opera 12.x ("Classic") immer noch zum Download angeboten und ist auch noch in den Repositories diverser Linux-Distros direkt enthalten. Ich vermute, dass diese Version immer noch treue Fans hat (einen von ihnen kenne ich sehr gut). Nur dass die Fangemeide von Opera schon immer klein war.

IE8 steht oben auf der Liste der bedrohten Arten.

Das klingt, als wolltest du zur Kampagne "Save IE8!" aufrufen. ;-)

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Presto dürfte in freier Wildbahn ausgestorben sein.

das glaube ich nicht. Presto wird mit Opera 12.x ("Classic") immer noch zum Download angeboten und ist auch noch in den Repositories diverser Linux-Distros direkt enthalten. Ich vermute, dass diese Version immer noch treue Fans hat (einen von ihnen kenne ich sehr gut). Nur dass die Fangemeide von Opera schon immer klein war.

Das meinte ich mit „freier Wildbahn“. Die Presto-Fans leben nicht in freier Wildbahn, sondern auf einer einsamen Inseln fernab jeglicher Zivilisation.

IE8 steht oben auf der Liste der bedrohten Arten.

Das klingt, als wolltest du zur Kampagne "Save IE8!" aufrufen. ;-)

Ja, ab in den Zoo mit den letzten noch lebenden Exemplaren!

LLAP 🖖

[Der Martin]

Hi,

Nur dass die Fangemeide von Opera schon immer klein war.

Das meinte ich mit „freier Wildbahn“. Die Presto-Fans leben nicht in freier Wildbahn, sondern auf einer einsamen Inseln fernab jeglicher Zivilisation.

wobei ich mich nicht als Presto-Fan oder -Fürsprecher bezeichnen würde - welche Engine unter der Haube werkelt, ist mir relativ egal. Viel wichtiger ist mir die UX des gesamten Browsers drumherum.
Deswegen war ich auch anfangs nicht gar so beunruhigt, als es hieß, Opera würde Presto aufgeben und stattdessen auf Webkit setzen. Erst als klar wurde, dass der neue Opera eigentlich nur ein Chrome-Fork mit Opera-Zierleisten werden würde, fühlte ich mich im Stich gelassen. Und viele andere Opera-Nutzer vermutlich auch.

IE8 steht oben auf der Liste der bedrohten Arten.

Das klingt, als wolltest du zur Kampagne "Save IE8!" aufrufen. ;-)

Ja, ab in den Zoo mit den letzten noch lebenden Exemplaren!

Okay. Nur die Nachzucht wird vermutlich schwierig.

So long,
 Martin

[gutenMorgen]

Lieben Dank Matthias Apsel und Auge und MrMurphy1 und Gunnar Bittersmann,

der Link von MrMurphy1 bietet mir meine Lösung, obzwar es einen kleinen Höhenunterschied gibt, damit kann ich super leben: http://codepen.io/ZNC/pen/OyjoYO

Tut mit leid wegen dem LLAP und hab einiges durcheinander gebracht, dachte es wäre eine Namens-Abkürzung.

Nochmals lieben Dank, bin um einiges an Erfahrung reicher.

PS: Ich arbeite auf einem alten Hund und muss bekennen, es ist echt keine Emulation sondern wirklich IE8.