Wieder einmal: Wie die Abstände eingeben?

Wieder einmal: Wie die Abstände eingeben?

Beitragvon cannondale63 » 17.09.2010, 17:25

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!
cannondale63
Gelegenheitsleser
 
Beiträge: 45
Registriert: 19.02.2010, 22:34

Re: Wieder einmal: Wie die Abstände eingeben?

Beitragvon sejuma » 17.09.2010, 18:48

<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;}
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: Wieder einmal: Wie die Abstände eingeben?

Beitragvon cannondale63 » 18.09.2010, 17:41

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!
cannondale63
Gelegenheitsleser
 
Beiträge: 45
Registriert: 19.02.2010, 22:34

Re: Wieder einmal: Wie die Abstände eingeben?

Beitragvon sejuma » 19.09.2010, 09:21

<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.
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: Wieder einmal: Wie die Abstände eingeben?

Beitragvon cannondale63 » 19.09.2010, 15:15

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

Herzliche Grüsse aus der Schweiz, Dominik
cannondale63
Gelegenheitsleser
 
Beiträge: 45
Registriert: 19.02.2010, 22:34

Nachfrage: Unterschiedlicher Output in Firefox und IE

Beitragvon cannondale63 » 24.09.2010, 12:44

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!
cannondale63
Gelegenheitsleser
 
Beiträge: 45
Registriert: 19.02.2010, 22:34

Re: Wieder einmal: Wie die Abstände eingeben?

Beitragvon sejuma » 24.09.2010, 13:20

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">
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: Wieder einmal: Wie die Abstände eingeben?

Beitragvon cannondale63 » 24.09.2010, 16:02

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.
cannondale63
Gelegenheitsleser
 
Beiträge: 45
Registriert: 19.02.2010, 22:34

Re: Wieder einmal: Wie die Abstände eingeben?

Beitragvon sejuma » 24.09.2010, 16:17

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.
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: Wieder einmal: Wie die Abstände eingeben?

Beitragvon cannondale63 » 24.09.2010, 17:44

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
cannondale63
Gelegenheitsleser
 
Beiträge: 45
Registriert: 19.02.2010, 22:34

Re: Wieder einmal: Wie die Abstände eingeben?

Beitragvon sejuma » 24.09.2010, 17:48

Ich kann in der Quelltextansicht aber nur diesen erkennen:
Code: Alles auswählen
<!DOCTYPE html>
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: Wieder einmal: Wie die Abstände eingeben?

Beitragvon cannondale63 » 24.09.2010, 18:23

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.
cannondale63
Gelegenheitsleser
 
Beiträge: 45
Registriert: 19.02.2010, 22:34

Re: Wieder einmal: Wie die Abstände eingeben?

Beitragvon sejuma » 24.09.2010, 18:28

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.ä.
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: Wieder einmal: Wie die Abstände eingeben?

Beitragvon cannondale63 » 24.09.2010, 19:51

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.
cannondale63
Gelegenheitsleser
 
Beiträge: 45
Registriert: 19.02.2010, 22:34


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Wieder einmal: Wie die Abstände eingeben?"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste