Juergens-Workshops.de Forum › HTML und Co › Webeditoren
Kontaktformular

Ansichts-Optionen
Kontaktformular
MarSch
Gast
 
#51
07.06.2015, 11:02
Hallo und nochmals lieben Dank für für die ganze Hilfe. xmasdanke

@ Koter
Ich habe jetzt dein contacten.php noch nicht komplett übernommen weil dort die Inputfelder größer (höher) sind als bei mir, somit dann das Formular größer wird, auch der Grund warum es nach unten rausschiebt, wenn ich die Änderungen von dir (CSS, Medlungen in <p> und Sendeknop in <p>) in mein Formular mit den kleinen Inputfeldern übernehme schiebt es nicht unten raus und die “Sucsessfully send” bzw. “Try again” stehen mittig (nicht ganz, dazu die Screenshots im angehängten .PDF). Komischerweise sind im CSS ja aber die Größenangaben für die Felder gleich, ich habe das ganze CSS jetzt so wie deines, habe die Meldungen in <p> gesetzt und auch die Angaben ganz unten zum “Send-Button” komplett übernommen. Warum ich natürlich gern dein komplettes Formular übernehmen würde ist weil du ja wahnsinnig viele </n> eingefügt hast und auch <html>></html> und einemal einen <table> entfernt hast...
Nochmal die Fragen zusammengefaßt:
Wieso sind bei dir die Inputfelder höher? Warum das Messagefeld kleiner ist finde ich im CSS...
Wie kann ich die horizontalen Verschiebung in den Screenshots ausrichten? (Sind auch in deinem PHP vorhanden, kann also kein Übernahmefehler von mir sein).

So, ich muss den Hovereffekt nochmal genau beschreiben (Screenshots im PDF):

Chrome (43.0.2357.81) macht den schwarzen Rand des Buttons deutlicher schwarz, keine verfärbung des Innenraums. (Finde ich am besten).
FireFox (28.0.1), Safari (5.1.7 (7534.57.2)) und Opera (29.0) machen eine leichte türkise Verfärbung. (Ist noch ganz ok so).
IE (11.0.9600.17801) macht eine starke türkise Verfärbung. (Sieht schlimm aus).

Kann ich den Hovereffekt irgendwie deaktivieren auch wenn keiner eingeschaltet ist um zu sehen ob es dann weg ist? Z.B. Habe ich ausprobiert:

#Sendeknopf:hover{background-color: red;}
Alle 5 Browser machen ihn rot.

#Sendeknopf:hover{background-color: none;}
Chrome und IE machen einen stärkeren Rand beim Hovern aber keine Verfärbung des ganzen Buttons, die anderen drei verfärben weiterhin gleich.

#Sendeknopf:hover{background-color: transparent;}
Alle 5 Browser machen ihn transparent. Nehmen also die Hintergrundfarbe der Seite an.

Welcher Befehl macht nur einen schwarzen Rand um den Button, das wäre mir denke ich wohl noch am liebsten...?

Grüße
Markus


Angehängte Dateien
.pdf   Kontaktformular 2 1.pdf (Größe: 84,83 KB / Downloads: 5)
Zitieren
koter Offline
Profi Member
Beiträge: 1.437
Themen: 11
Danke erhalten: 273 in 232 Posts
Danke gesagt: 26
Registriert seit: 24.03.2012
#52
07.06.2015, 20:26
Hallo Markus,

MarSch schrieb:Warum ich natürlich gern dein komplettes Formular übernehmen würde ist weil du ja wahnsinnig viele </n> eingefügt hast und auch <html>></html> und einemal einen <table> entfernt hast...
Das „/n“ ändert übrigens nichts am Aussehen der Seite. Es fügt nur einen Zeileumbruch im HTML-Quelltext ein, der vom PHP erzeugt wird. (So blicke ich besser durch)

MarSch schrieb:Wieso sind bei dir die Inputfelder höher?

Weil da das CSS besser funktioniert. Bei Deinem sind die Felder trotz einer Höhenangabe von 22px, nur 12px hoch. Ich habe nicht ergründet warum das so ist.

MarSch schrieb:Wie kann ich die horizontalen Verschiebung in den Screenshots ausrichten? (Sind auch in deinem PHP vorhanden, kann also kein Übernahmefehler von mir sein).

Das ist bei Eingabefeldern nicht so einfach, die machen oft Zicken bei Höhen- und Breitenangaben. Da muss man ein bisschen herumprobieren. Auch bei Schriftart und Schriftgröße muss man aufpassen. Bei Deinem CSS werden die Unterlängen der Minuskeln abgeschnitten. Das „g“ und „q“ sind so kaum noch zu unterscheiden:

[Bild: unterlaengenn0otd.jpg]

MarSch schrieb:...Z.B. Habe ich ausprobiert:

#Sendeknopf:hover{background-color: red;}
Alle 5 Browser machen ihn rot.

Genau! Und wenn Du bei „#Sendeknopf:hover“ die selben Befehli wie bei „#Sendeknopf:hover“ eingibst, sollte der Effekt verschwunden sein.

MarSch schrieb:Welcher Befehl macht nur einen schwarzen Rand um den Button, das wäre mir denke ich wohl noch am liebsten...?

Das wäre „border“. Der würde aber auch den 3D-Effekt entfernen.

Im Anhang die überarbeitete contacten.php.

Gruß

Koter


Angehängte Dateien
.zip   contacten.zip (Größe: 2,55 KB / Downloads: 3)
Zitieren
MarSch
Gast
 
#53
08.06.2015, 09:56
Hallo Koter,

abermals vielen Dank.

Ich habe jetzt dein gesamtes PHP übernommen, wußte nicht das die 22px-Angabe viel zu groß war und ich nur 12px angezeigt bekommen habe... Ich sehe du hast wegen den Abschnitten bei g,j, etc. die Zeilenhöhe der Inputfelder (14px) größer gemacht als die Schrift (12px) ist... Komischerweise hatte ich diese Abschnitte nicht … Hoffentlich bleibt alles wie es ist wen nich demnächste online gehe, ich habe mal gehört das Jemand danach noch Schriften abändern mußte obwohl diese ihm vom Program als “Websafe” genannt wurden... Apropros Schriften, du hattest auch diese geändert, waren “Arial” und “Helvetica” nicht so safe wie “Verdana”, “Geneva” und “Tahoma”?

Ich habe bei den beiden Meldungen noch Fettschrift und Unterstrich eingefügt, sind da Fehler zu erkennen?:
$msgError = '<p style="text-align:center; font-weight: bold;">Sorry, something went wrong. Please try again!<p>'."\n";
$msgSent = '<p style="text-align:center; font-weight: bold; text-decoration:underline;">Message successfully send!</p>'."\n";

Nochmal zum Sendebutton, wenn ich alles abschalte (none) bzw. festlege (lightgray) wie in deinem CSS dann ist auch wirklich alles ok aber sobald das gelöscht wird verhalten sich die Browser wieder wie beschrieben...
Ich dachte ja an einen schwarzen Rahmen beim Hovern, hatte ich ich missverständlich geschrieben, im Moment ist ja Alles stillgelegt, die schöne 3D-Ansicht fehlt natürlich, da hast du Recht. Nun wußte ich nicht den Rand beim hovern hinzubekommen, habe statt none” dann “black” und “yes” ausprobiert was beides nichts gebracht hat... Was muss ich eintragen um einen Rand beim Hovern hinzubekommen?

Grüße
Markus
Zitieren
koter Offline
Profi Member
Beiträge: 1.437
Themen: 11
Danke erhalten: 273 in 232 Posts
Danke gesagt: 26
Registriert seit: 24.03.2012
#54
08.06.2015, 18:00
Hallo Markus,

MarSch schrieb:...Hoffentlich bleibt alles wie es ist wen nich demnächste online gehe, ich habe mal gehört das Jemand danach noch Schriften abändern mußte obwohl diese ihm vom Program als “Websafe” genannt wurden...

Keine Schrift ist „Websafe“. Wenn der Benutzer Deiner Seite die Schrift nicht installiert hat, wird sie auch nicht angezeigt.
Der Eintrag: „font-family: Verdana, Geneva, Tahoma, sans-serif“ sagt dem Browser: „Nimm Verdana, wenn die nicht da ist, nimm Geneva (usw.)“. Nur der letzte Eintrag „sans-serif“ ist einigermaßen sicher. Er bedeutet: „wenn keine der Schriften da ist, nimm irgendeine ohne Serifen“. Wenn keine serifenlose Schrift da ist, wird eben eine mit Serifen genommen.

Du solltest Dich auch nicht der Illusion hingeben, dass bei Webseiten irgendetwas „save“ ist. Du kanst nicht wissen, mit welchem Gerät oder Browser-Exoten die Benutzer Deine Seite betrachten oder wie sie den Browser einstellen.

Beispiel:
Einem Benutzer ist die Schrift zu klein, und er drückt mit Firefox ein paar mal Strg+Plus:

[Bild: mist_03g8ur7.gif]

Schon sieht die Seite besch... aus!
(Vortrag beendet ;-))

MarSch schrieb:...Apropros Schriften, du hattest auch diese geändert, waren “Arial” und “Helvetica” nicht so safe wie “Verdana”, “Geneva” und “Tahoma”?...

Das war nur Spielerei ohne tieferen Sinn. Du musst eben raten, welche Schrift Deine Benutzer am wahrscheinlichsten installiert haben. Falls Deine Zielgruppe Kindergärtnerinnen sind, würde ich auf jeden Fall „Comic Sans“ nehmen.:erschreck:

MarSch schrieb:Ich habe bei den beiden Meldungen noch Fettschrift und Unterstrich eingefügt, sind da Fehler zu erkennen?...

Der Quelltext ist in Ordnung. Es gibt nur einen gestalterischen Fehler: Unterstreichungen sind überflüssig, veraltet und hässlich (aber dass ist natürlich Geschmackssache). :tease:

MarSch schrieb:Was muss ich eintragen um einen Rand beim Hovern hinzubekommen?

Ich weiß nicht ob und wie das geht, ohne den 3D-Effekt zu zerstören. Man könnte vielleicht einen Rahmen um die Schaltfläche legen, und diesen dann mit einem hover belegen.

Gruß

Koter
Zitieren
Tschipiar Offline
Moderator
Beiträge: 647
Themen: 94
Danke erhalten: 20 in 15 Posts
Danke gesagt: 9
Registriert seit: 05.07.2014
#55
08.06.2015, 18:34 (Dieser Beitrag wurde zuletzt bearbeitet: 08.06.2015, 18:58 von Tschipiar.)
Salü allerseits

koter schrieb:... Ich weiß nicht ob und wie das geht, ohne den 3D-Effekt zu zerstören. ...

Rahmen um Button bei :hover könnte so umgesetzt werden

Code:
#Sendeknopf:hover {
box-shadow: inset 0 0 0 3px black;
}

Beispiel

PS. statt "black" vielleicht ein dezenteres grau oder natürlich auch andere Farbe nach Wahl
Zitieren
MarSch
Gast
 
#56
08.06.2015, 21:19
@ Koter
Ich weiss nicht wie du das mit FireFox und Strg+Plus hinbekommen hast aber bei mir vergrößert sich der Hintergrund mit der Schrift proportional und somit verschwindet die Schrift nicht wie in deinem Bespiel!?
Gibt es keine Schrift die von Windows immer installiert wird? Natürlich ist dann die Frage welche auf Macs, iPhones und Android Phones ist, schon klar...

@ Gaby
Das werde ich morgen gleich mal testen, danke. Smile
Zitieren
koter Offline
Profi Member
Beiträge: 1.437
Themen: 11
Danke erhalten: 273 in 232 Posts
Danke gesagt: 26
Registriert seit: 24.03.2012
#57
09.06.2015, 17:11
Hallo Markus,
MarSch schrieb:...Ich weiss nicht wie du das mit FireFox und Strg+Plus hinbekommen hast...

Einen Haken bei „Nur Text zoomen“ setzen:

[Bild: zwischenablage01y4ljd.jpg]

Nur Text zoomen, hat den Vorteil, dass Bitmaps nicht vergrößert, also auch nicht verpixelt werden.
Bei guten Seiten ändert sich auch die Breite nicht, ich muss also nicht seitwärts scrollen.

MarSch schrieb:Gibt es keine Schrift die von Windows immer installiert wird?

Doch, aber man kann Schriften ja löschen.
Eine Liste gibt es bei Microsoft.

Gruß

Koter
Zitieren
MarSch
Gast
 
#58
12.06.2015, 08:57
Moin, moin! ;-)

Es ist Zeit mich nochmal bei allen, besonders Koter, hier zu bedanken. xmasdanke

Ich bin jetzt soweit fertig und zufrieden mit meiner Seite, hoffe das sie bald online gehen kann...
Wenn es da noch Probleme gibt werde ich mich bestimmt wieder melden, versprochen... ;-)

Vielen Dank nochmal und gaaanz liebe Grüße!

Markus
Zitieren
MarSch
Gast
 
#59
28.12.2015, 18:53
Hallo zusammen,

wie versprochen melde ich mich wieder weil es Problme gibt... ;-)

Ich wollte aus Sicherheitsgründen mein PHP-Kontaktformular mit Captcha nachrüsten und habe "eigentlich" alles wie in der Anleitung übernommen aber die Mail wird auch ohne Captchaeingabe versendet. Ich bekomme dann mit der "Erfolgreich versendet" Meldung eine Fehlermeldung angezeigt die auf Zeile 117 verweißt welche diesen Code beinhaltet:

if ($_POST['captcha_code'] != $_SESSION['captcha_spam'] || $_POST['email'] != '') {

Die Fehlermeldung sagt:

Notice: Undefined variable: _SESSION in C:\xampp\htdocs\contactde.php on line 117

Angehängt auch die ganze PHP Datei.

Könnt ihr mir bitte sagen was da falsch ist?

Vielen Dank im Vorraus
Markus


Angehängte Dateien
.txt   contactde.txt (Größe: 6,64 KB / Downloads: 5)
Zitieren
MarSch
Gast
 
#60
28.12.2015, 22:39
PS: Oder ist es besser niemanden mit Captchas zu belästigen sondern versteckte Felder die nicht ausgefüllt werden dürfen einzubinden...
Habe gelesen das Bots immer alles ausfüllen?
Zitieren



Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Externes Kontaktformular einbinden patrick1287 4 2.645 15.04.2013, 20:41
Letzter Beitrag: Nachtviole