[Erledigt] Absatzabstand an einer Stelle deutlich verkleinern

[Knexx]

Hallo,

ich habe ein "Passwort vergessen" Formular auf meiner Seite eingerichtet.
Das ganze sieht etwa so aus:

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

[der_robert]

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

[tr0y]

Dir sollte außerdem auch klar sein das es <small>-Tags gibt.

[Knexx]

Der CSS teil der dafür Relevant ist, ist der:

/*--------------------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

[SebTM]

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.

[Knexx]

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

[SebTM]

Wenn du das "margin" auf negative Werte setzten musstest um deinen Effekt zu erreichen war es wohl das falsche Element oder das falsche Attribut!

[Knexx]

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

[SebTM]

Weniger komisch als mehr warscheinlich das es das falsche Element ist für das es versucht wird!

[Knexx]

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

[tr0y]

Okay, jetzt jag mal deinen "Hauptsache et funnzt"-Code dadurch: http://validator.w3.org/

[Knexx]

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

[tr0y]

Und auf was hast du validiert ? HTML Asbach+ HD oder 5 ?

[Knexx]

Detected automatically auf html5^^

Das was ich dann auch im Doctype festgelegt hatte

[tr0y]

Na dann, Gratulation.