Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Absatzabstand an einer Stelle deutlich verkleinern

Einklappen

Neue Werbung 2019

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

  • [Erledigt] Absatzabstand an einer Stelle deutlich verkleinern

    Hallo,

    ich habe ein "Passwort vergessen" Formular auf meiner Seite eingerichtet.
    Das ganze sieht etwa so aus:
    Code:
    <form action="xx.php" method="post">
      <h1>PW zurücksetzten</h1>
      <input type="text" name="LG" placeholder="Login"/>
      <div class="small">oder</div>
      <input type="email" name="EM" placeholder="Mail"/>
      <input type="submit" value="bla"/>
    </form>
    in der class "small" habe ich jetzt eine sehr kleine Schriftgröße eingestellt, weil das oder sehr klein angezeigt werden soll.
    Das Problem ist nun aber, dass der Abstand vom 'Login' zum 'oder' und der Abstand vom 'oder' zum 'Mail' Feld nicht durch die Schriftverkleinerung kleiner geworden ist sondern gleich geblieben ist. Er soll aber deutlich kleiner werden weil es so katastrophal aussieht. Wie kann ich das erreichen?*

    MfG


    *Ich hatte selber schon die Idee, jedes Element selber in eine CSS Box zu stecken, das kam mit aber sehr umständlich vor, weil ich sonst auf der Seite keine Formatierung brauche. Ich hoffe desshalb dass mir hier irgendwie nen einfacherer Weg empfohlen werden kann.

  • #2
    Wo ist dein CSS welches den o.g. HTML Code formatiert?

    Kommentar


    • #3
      Dir sollte außerdem auch klar sein das es <small>-Tags gibt.
      [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

      Kommentar


      • #4
        Der CSS teil der dafür Relevant ist, ist der:

        Code:
        /*--------------------font(text small)--------------------*/
        .small {
        	font-family: Helvetica, Arial, sans-serif;
            font-size: 0.625em;
            color: #FFFFFF;
        }
        /*--------------------font(theme1)--------------------*/
        h1 {
        	font-family: Helvetica, Arial, sans-serif;
            font-size: 1.125em;
            color: white;
        }
        Wenn es small so schon gibt ändere ich das auf jeden Fall schonmal ändern aber das ändert leider am Abstand erstmal nix^^
        Mehr formatiert hab ich nicht, ich setzte es nur noch im HTML in nen <center> und an die richtige Position.
        Alles außer dem Zeilenabstand an der position sieht es ja schon gut aus, desshalb hab ich mir da bisher ne genauere Definition gespaart.


        MfG

        Kommentar


        • #5
          Schau dir den Adventskalender-Artikel von gestern an und installier dir Firebug: http://www.php.de/board-support/1122...elferlein.html

          Dann schau via Firebug nach indem du die entsprechenden Elemente durchgehst welches den Abstand erzeugt und ob es ein Padding oder ein Margin ist. Dann kannst du dem Element einen CSS-Selektor setzten z.b. eine Klasse und diesen verringern.
          Gruß,
          SebTM

          Kommentar


          • #6
            Das Addon ist der absolute Hammer

            Habs sofort herrausgefunden, das margin-top auf -5 gesetzt und der Abstand ist so wie ichs mir vorstelle, vielen Dank

            Kommentar


            • #7
              Wenn du das "margin" auf negative Werte setzten musstest um deinen Effekt zu erreichen war es wohl das falsche Element oder das falsche Attribut!
              Gruß,
              SebTM

              Kommentar


              • #8
                Naja ich komme aus den Ingeneurwissenschaften, da gilt das Motto "hauptsache et funzt"

                Hab es jetzt auch mit Padding top 5 und margin top 5 versucht aber damit ist der abstand immernoch riesig, nur mit - ging es, sehr seltsam irgendwie

                Kommentar


                • #9
                  Weniger komisch als mehr warscheinlich das es das falsche Element ist für das es versucht wird!
                  Gruß,
                  SebTM

                  Kommentar


                  • #10
                    Ich bin so ein Trottel

                    Mich hatte irritiert, dass er um die Eingabefelder immernoch oben und unten nen gelben rand angezeigt hatte, obwohl ich bei beiden manuell als inline style element margin und padding top und bottom auf 0 gestellt hatte.
                    Was war das Problem: Weil vorher vor den Eingabefeldern noch ein Text stand, der in <p> war, hat das p für die Abstände gesorgt, nicht das loginfeld. Das hatte ich hier weil ich es nicht für wichtig hielt aus übersichtlichkeitsgründen aus dem code geschnitten. Den fehler mach ich nie wieder.

                    Naja, jetzt klappt es alles, vorallem auch mit Positiven Werten, vielen Dank und Danke auch nochmal für das Super Plugin

                    Kommentar


                    • #11
                      Okay, jetzt jag mal deinen "Hauptsache et funnzt"-Code dadurch: http://validator.w3.org/
                      [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

                      Kommentar


                      • #12
                        Edit: Kommando zurück, ich guck nochmal drüber!

                        Edit2: Nochmal drübergeguckt, hier das Resultat:



                        Sooooo, 17 Fehler die nur dadurch kamen, dass ich keine HTML version definiert hatte, nicht übel.

                        Jetzt hat er nur noch einen einzigen:
                        Line 36, Column 16: The center element is obsolete. Use CSS instead.
                        <center>

                        Naja gut, dass kann ich ja noch ändern^^

                        Kommentar


                        • #13
                          Und auf was hast du validiert ? HTML Asbach+ HD oder 5 ?
                          [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

                          Kommentar


                          • #14
                            Detected automatically auf html5^^

                            Das was ich dann auch im Doctype festgelegt hatte

                            Kommentar


                            • #15
                              Na dann, Gratulation.
                              [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

                              Kommentar

                              Lädt...
                              X