Label-Text soll direkt über Textfeld erscheinen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Label-Text soll direkt über Textfeld erscheinen

    Hallo!
    Ich habe hier mal was für die CSS-Gurus unter euch. Ich habe hier ein Formular erstellt, bei dem an manchen Stellen der Text über dem input-Feld an der falschen Stelle steht. Zum Beispiel das Wort "Vorname" müsste weiter nach rechts gerückt werden. Ich könnte natürlich dem label einfach einen margin-Wert verpassen, aber dann müsste ich das auch für den Ort und die Schule machen. Gibt es dafür auch eine allgemeine Lösung?

  • #2
    Hallo,

    du könntest die label-Elemente zu Blockelementen machen, links floaten und den Text in ein span-Element packen welches ebenfalls als Blockelement gestylt wird. Dann sollte das klappen.

    Poste aber vorsichtshalber mal einen HTML-Code-Ausschnitt, denn ich kann ja nur raten, wie du das aufgebaut hast.

    Gruß,

    Amica
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar


    • #3
      Zitat von AmicaNoctis Beitrag anzeigen
      Poste aber vorsichtshalber mal einen HTML-Code-Ausschnitt, denn ich kann ja nur raten, wie du das aufgebaut hast.
      „Quelltext anzeigen“ in deinem Browser defekt?

      Zitat von darton
      Zum Beispiel das Wort "Vorname" müsste weiter nach rechts gerückt werden.
      Ich würde das Inputfeld einfach ins Label packen* – und dann die Labels floaten, und mit einer Breitenangabe für die Inputfelder dafür sorgen, dass sie auf die nächste Zeile unter den Text rutschen.

      * dann kann man sich die for-Attribute übrigens auch sparen.
      I don't believe in rebirth. Actually, I never did in my whole lives.

      Kommentar


      • #4
        Zitat von wahsaga Beitrag anzeigen
        „Quelltext anzeigen“ in deinem Browser defekt?
        Bin auf die Seite gegangen, hab Funpic gelesen und gedacht, dass es nur ein Bild ist, die Werbung weggeklickt, das zweite Werbefenster geschlossen, still geflucht, dass die mich so nerven und die Seite schnellstmöglich wieder geschlossen. Und nein, in meinem Browser ist nichts defekt, höchstens in meinem Kopf.
        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
        Super, danke!
        [/COLOR]

        Kommentar


        • #5
          Zitat von wahsaga Beitrag anzeigen
          „Quelltext anzeigen“ in deinem Browser defekt?


          Ich würde das Inputfeld einfach ins Label packen* – und dann die Labels floaten, und mit einer Breitenangabe für die Inputfelder dafür sorgen, dass sie auf die nächste Zeile unter den Text rutschen.

          * dann kann man sich die for-Attribute übrigens auch sparen.
          Naja, sieht auch nicht viel besser aus. Ich möchte ja nicht, dass die input-Felder noch breiter werden. Außerdem stehen so ja zwei Textfelder nicht nebeneinander. Link

          Kommentar


          • #6
            @darton

            Könntest du mal eine kleine Skizze oder so erstellen, wie das am Ende aussehen soll? Aus deinem Ausgangspost gepaart mit dem verlinkten Form werde ich nicht ganz schlau, was du eigentlich als Endergebnis haben willst

            Ihr habt ein Torturial durchgearbeitet, das auf den mysql_-Funktionen aufbaut?
            Schön - etwas Geschichte kann ja nicht schaden.
            Aber jetzt seht euch bitte php.net/pdo oder php.net/mysqli bevor ihr beginnt!

            Kommentar


            • #7
              So soll es später aussehen. Also, ich möchte, wie es im Titel steht, dass der Text direkt über den Eingabefeldern steht. Das tut er aber nur, wenn ich spezifisch für jedes Label den Abstand zum linken Element festlege. Ich möchte es aber gerne allgemein halten, da ich mehrere solcher Formular habe. Zur Not lasse ich das eben so, wenn ihr keine Lösung habt.

              Kommentar


              • #8
                Zitat von darton Beitrag anzeigen
                Naja, sieht auch nicht viel besser aus.
                Nee, natürlich nicht – wenn du es nicht sinnvoll umsetzt …
                Ich möchte ja nicht, dass die input-Felder noch breiter werden.
                Deshalb gibst du natürlich den Labels auch eine entsprechende Breite.
                Außerdem stehen so ja zwei Textfelder nicht nebeneinander.
                Dafür floatest du wie gesagt die Labels, neben denen noch ein weiteres stehen soll.
                I don't believe in rebirth. Actually, I never did in my whole lives.

                Kommentar


                • #9
                  Puh, das ist ja gar nicht so einfach.
                  Habs zwar etwas besser hinbekommen (siehe Link), aber weiter weiß ich nicht.

                  Kommentar


                  • #10
                    Jetzt hast du das „Original“, an dem man halbwegs erkennen konnte, wie die Anordnung der Felder sein sollte, mit deinem Gebastel überschrieben
                    Das solltest du wenigstens unverändert bestehen lassen, und deine weiteren Versuche in neuen Dateien machen.

                    Für die Boxen, die du nicht neben einer anderen gefloateten haben willst, vergibst du ein clear:left.
                    Und die Inputfelder können auch einfach display:block bekommen, damit sie unter den Text des Labels rutschen.
                    Und die Absätze schmeiß’ raus, die ergeben layouttechnisch weniger Sinn, wenn du ihre Inhalte dann sowieso floatest.
                    I don't believe in rebirth. Actually, I never did in my whole lives.

                    Kommentar


                    • #11
                      Ah, das sieht gut aus. Danke für die Hilfe. Hoffe ich hab alles richtig gemacht. Ort und Schule stehen jetzt zwar ein bisschen Abseits, aber das kann man wohl nicht ändern.

                      Kommentar


                      • #12
                        Zitat von darton Beitrag anzeigen
                        Ort und Schule stehen jetzt zwar ein bisschen Abseits, aber das kann man wohl nicht ändern.
                        Doch, natürlich kann man auch das …

                        Entweder gibst du den Labels von PLZ und Klasse einfach eine geringere Breite … oder du verzichtest komplett auf eine Breitenangabe für die Labels, so dass sie sich jeweils nach der Breite der darin enthaltenen Inputfelder richten, und gibst den Labels dann noch ein bisschen margin-right, damit zwei in einer Zeile nicht direkt aneinander stossen.
                        I don't believe in rebirth. Actually, I never did in my whole lives.

                        Kommentar

                        Lädt...
                        X