Eingabefelder und Buttons

[Henkeyy]

Hallo und frohes neues Jahr an alle!

Mein erstes Problem in diesem Jahr besteht in Eingabefeldern und Buttons die ich mit CSS etwas von Standartfeldern bzw Buttons abheben möchte. Nun mein Problem:
Ich habe zwei Styles erzeugt. Winmal für die Eingabefelder und einmal für den button. Die Ränder der jeweiligen Objekte sollen nur 1px und in schwarz dargestellt werden. soweit so gut.. die CSS hab ich.. funktioniert auch bei den Eingabefeldern. Allerdings hat der Button trotz gleichen Style einen dickeren rand als die Eingabefelder. Habe es auch mit einem Style der extra für den Button erstellt wurde versucht... jedoch ohne positives ergebniss.

Her mal der Code (der ganze Code der CSS):
.login {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: 10px;
font-weight: normal;
text-transform: none;
color: #074483;
text-decoration: none;
background-color: #002653;
height: 15px;
width: 70px;
border: 1px solid #000000;
padding: 0px;
margin: 1px;

}
.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #074483;
background-color: #00264B;
border: 1px solid #000000;
text-decoration: none;
height: 15px;
width: 40px;
margin: 1px;
padding: 0px;
font-size: 9px;

}

BODY { SCROLLBAR-FACE-COLOR: #476787; SCROLLBAR-HIGHLIGHT-COLOR: #476787; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #377099;
font-family:Verdana;
font-size:10pt;
}

.tabelle {
font-family:Verdana;
font-size:10pt;

}

Und hier der Link zur Seite wo man das Resultat sieht:
Seite

Hoffe Ihr könnt mir helfen.
Danke im vorraus!

mfg
Henkeyy

 

[hpvw]

Du meinst die kaum zu findenden unten rechts?
Im FF haben alle einen Rahmen von 1 px, soweit ich das erkennen kann.
Im IE hatte ich das auch desöfteren.
Er markiert damit diesen Button als aktiv, also, wenn Enter gedrückt wird, wird der Button abgeschickt.
Du könntest evtl. versuchen, mit JavaScript dem Button den Fokus zu klauen, aber, dazu müsstest Du den Fokus schon bis in die Adressleiste bringen. Und sowie jemand in die Seite klickt, ist er wieder aktiv.
Ich glaube, das fällt nur eingeweihten (negativ) auf.

Gruß hpvw

PS: Die Seite sieht ja sehr ansprechend aus, aber das Menü kann ich nur erkennen, wenn ich auf 10 cm an den Bildschirm herangehe, genauso verhält es sich mit dem Buttonrahmen, also mach Dir darum keine sorgen.

 

[Henkeyy]

Unten links! Ja es ist nur ein kleiner optischer fehler... ich mcih stört der irgendwie. Auf anderen Seiten wurden ja auch eigene Buttons mit neer CSS angepasst und die haben nciht sowas.

Danke für Dein Lob! Freut einen immer sowas zu hören! DANKE!

 

[Henkeyy]

Ups.... Ausversehen auf Zitieren gekommen... naja wollte sagen das die Seite noch lange nicht Fertig ist

 

[Budman]

Hallo!

Das einzige was mir einfällt, wäre den Button als button abzuschalten, und mittels CSS das ganz selbst zu definieren. Allerdings hat man dann den onPress-Effekt eines Buttons nicht mehr.

Es gibt aber auch die Möglichkeit, den Fokus auf den Button abzuschalten (also die FokusFunktion im IE), nicht so wie hpvw meint, sondern einfach dem Button sagen "verändere Dich nciht" beim Fokus.

Aber frag mich bitte ncht wie, ich hab das mal irgendwo gelesen, hab's aber noch nie gebruacht, deshalb keine Ahnung mehr... Sorry, da müsstest Du mal suchen.

Gruss

 

[hpvw]

Danke für Dein Lob! Freut einen immer sowas zu hören! DANKE!

Gerngeschehen, aber bedenke auch den kleinen Kritikpunkt. Vielleicht kannst du ja für etwas mehr Kontrast zwischen Schrift und Hintergrund im Menü sorgen.

 

[Henkeyy]

Hallo!

Das einzige was mir einfällt, wäre den Button als button abzuschalten, und mittels CSS das ganz selbst zu definieren. Allerdings hat man dann den onPress-Effekt eines Buttons nicht mehr.

Wäre mir egal... der Effekt sollte sowieso weg. Sag mir nur wie =)

@hpvw:

Ich weis nicht was Du meinst... Ich kann die Schrift in den Links gut lesen... Oder was meinst Du?

Was sagen denn die anderen... sollte die Schrift heller

mfg
Henkeyy

 

[hpvw]

Ich habe im angehängten Bild mal markiert, was ich meine.
Mein Monitor hat ca. 120 dpi, das ist etwas kleiner als üblich, aber auch moderne Notebooks haben zum Teil eine ähnliche Auflösung.
Du musst auch bedenken, dass die User unterschiedliche Farbkonfigurationen an ihren Monitoren haben. Ich habe mich manchmal schon ganz schön gewundert, wie ein kräftiges Orange bei einem Bekannten eher aussah, wie Eigelb in einem hartgekochten Ei mit einem Touch Pink dazu.
Vielleicht sieht es bei Dir auf dem Monitor ja anders aus. Um die Lesbarkeit auf anderen Monitoren zu gewährleisten empfiehlt sich meist ein höherer Kontrast zwischen Schrift und Hintergrund.
Ich habe meinen Monitor lange nicht mehr eingestellt, vielleicht liegt es auch daran. Aber welcher normale User nutzt schon Kalibrierungsmechanismen, um z.B. druckidentische Farben auf seinem Monitor anzuzeigen, wenn er nicht gerade in einer Grafikschmiede arbeitet?
//EDIT: Auf dem Laptop mit ca. 90dpi ist es besser zu lesen, auf meinem CRT auch nach Kalibrierung nicht wesentlich besser.

Zum Thema nochmal: Du könntest versuchen, ob sich <button> anders verhält, oder eine Grafik erstellen und mit <input type="image"...> einbinden.

Gruß hpvw

 

[Henkeyy]

Also was mich wundert ist das auf der rechten Seite der Servertext schwarz ist.... sollte je nach Serverstatus Rot oder Grün sein. aber wie mache ich das dann mit dem Loginscript später... der button hat ja jetzt diese Post variable.

mfg
Henkeyy

 

[hpvw]

Sowohl <input type="image" name="loginaction">, als auch <button name="loginaction"> haben ein name-Attribut, Du solltest dann jedoch (PHP?) nur auf den Namen Wert legen (isset($_GET['loginaction']) und nicht auf den Inhalt achten, da die Browser gerade bei <button> unterschiedlich agieren.
Meintest Du das?

Ich habe mir übrigends gerade mal den Quelltext angeschaut, den solltest Du unbedingt noch mal durch den Validator schicken.

Gruß hpvw