Wieder einmal: Wie die Abstände eingeben?

[cannondale63]

Hallo
In habe in meinem Wordpress-Blog http://www.velofahrer.ch rechts ein neues Widget platziert, das es Usern erlaubt, Beiträge per Mail zu abonnieren. Die Abstände a) zwischen dem Satz "E-Mail-Adresse eingeben" und dem Kasten, in dem man die Adresse eingeben muss und b) zwischen diesem Kasten und dem Icon "Abonnieren" passen mir aber nicht. Wie kann ich diese eingeben?

Der Code lautet:

Code: Alles auswählen

<form style="border:1px solid #ccc;padding-top:5px; padding-bottom:5px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=DasLebenAufZweiRdern', 'popupwindow', 'scrollbars=yes,width=550,height=420');return true"><p>E-Mail-Adresse eingeben:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="DasLebenAufZweiRdern" name="uri"/><input type="hidden" name="loc" value="de_DE"/><input type="submit" value="Abonnieren" /><p></p>
<p></form>

Vielen Dank für Eure Hilfe!

[sejuma]

<input style="width: 140px; margin-bottom: 20px;" name="email" type="text">

dann füge der Klasse .textwidget (hab sie nicht gefunden) einen margin-top Wert hinzu oder definiere

Code: Alles auswählen

.textwidget {margin-top: 10px;}

[cannondale63]

Danke!

Der Code

Code: Alles auswählen

input style="width: 140px; [color=#FF0000]margin-bottom: 20px;[/color]" name="email" type="text"

hat den Abstand zwischen dem Kasten, in den man die Mailadresse eingeben muss, wunschgemäss hergestellt.

Code: Alles auswählen

.textwidget {margin-top: 10px;}

in der CSS-Datei hat den Abstand zwischen dem Widget-Titel und dem Beginn des Kastens erhöht, was mir auch recht ist.

Was ich noch nicht hingekriegt habe, ist der Abstand zwischen "E-Mail-Adresse eingeben" und dem Eingabefeld.

Hier nochmals der aktuelle Widget-Code

Code: Alles auswählen

<form style="border:1px solid #ccc;padding-top:5px; padding-bottom:8px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=DasLebenAufZweiRdern', 'popupwindow', 'scrollbars=yes,width=550,height=420');return true"><p>E-Mail-Adresse eingeben:</p><p><input type="text" style="width:140px; margin-bottom: 4px;" name="email"/></p><input type="hidden" value="DasLebenAufZweiRdern" name="uri"/><input type="hidden" name="loc" value="de_DE"/><input type="submit" value="Abonnieren" /><p></p>
<p></form>

Die ganzen Farben sind auch noch nicht schön, am liebsten wären mir alle schwarz und bei Hover grau, aber das find ich dann in der CSS mit Pröbeln schon noch raus.

Vielen Dank!

[sejuma]

<p style="margin-bottom: 3px;">E-Mail-Adresse eingeben:</p>

Besorg dir mal den Webdeveloper von Firefox. Damit kannst du den entsprechenden Bereich auswählen und sehr schnell sehen, welche Selektoren betroffen sind. Online kannst du dann Änderungen vornehmen und sehen ob, wie und wo sie wirken.

[cannondale63]

Vielen Dank! Dieser Webdeveloper, wirklich genial, hab ich gleich runtergeladen. Kannte ich noch gar nicht.

Herzliche Grüsse aus der Schweiz, Dominik

[cannondale63]

Hallo

Deine Hinweise haben ja zum Erfolg geführt. Trotzdem eine Nachfrage: Weshalb wird das Feedburner-Widget auf [url]www..velofahrer.ch[url] im Firefox korrekt dargestellt, im Internet-Explorer aber zu hoch? Kann man das beeinflussen, d.h. gibt es eine Codierung, die bei allen Browsern zum gleichen Ergebnis führt?

Vielen Dank!

[sejuma]

Das kann verschiedene Ursachen haben:
Zum einen verwenden unterschiedliche Browser oft unterschiedliche Standardabstände.
Du hast zwar ein Abstandsreser vorgenommen; möglicherweise fehlen da aber noch einzelne Elemente.
Deshalb besser und allumfassend:

Code: Alles auswählen

* {margin: 0; padding: 0;}

Dann sehe ich gerade, dass deiner Seite ein qualifizierter Doctype fehlt. Damit kann der IE das CSS-Boxmodell nicht korrekt darstellen.
Versuch's mal mit diesem:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

[cannondale63]

Ich nehme an, der Doctype-Code muss einfach am Anfang der CSS-Datei eingefügt werden? Oder anderswo? Ich habs drum gemacht, im IE wird die Box aber gleichwohl noch nicht richtig dargestellt.

[sejuma]

Nein, der Doctype muss in die allererste Zeile des HTML-Quelltextes.
Wenn du dir diesen auf deiner Seite ansiehst, dann steht dort

Code: Alles auswählen

<!DOCTYPE html>

Ersetze das mit dem von mir geposteten Doctype.

[cannondale63]

Habs gefunden, ist aber schon eine Doctype drin, nämlich diese:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

Ist doch der gleiche Code wie Du angegeben hast

[sejuma]

Ich kann in der Quelltextansicht aber nur diesen erkennen:

Code: Alles auswählen

<!DOCTYPE html>

[cannondale63]

Stimmt, ich seh grad, dass ich da versehentlich die Datei editor-styles.css genommen habe. Ich bin nun unsicher, in welcher Datei der HTML-Quelltext drin ist. Es muss ja eine aus dem Theme sein? Da gibt es so viele php-Dateien, bin ein bisschen ratlos.

[sejuma]

In einer CSS-Datei hat der Doctype nichts zu suchen. Also dort überall löschen wo vorhanden.

Ansonsten die Theme-PHP-Dateien entsprechend anpassen.
Aber auch da Vorsicht: Es betrifft nur solche, die auch einen "Kppfbereich" haben, also nicht lediglich includiert werden o.ä.

[cannondale63]

In der erwähnten CSS-Datei (editor-style.css) hab ich den Doctype nun entfernt und in der header.php dafür eingefügt (dort war vorher, wie von dir gepostet, das <!DOCTYPE html> drin. Hat aber im IE nix bewirkt.
Seis drum, ist nicht so schlimm.