worst_case: button mit CSS verändern

Hi,

ich habe aus dem Januar-Archiv einen Teil Code gezogen und bringe dies nicht zum laufen.
Ich möchte mit CSS den buttom verändern (aus button besteht meine menüleiste)
Hier mal der Code.

<style type="text/css">

button
 {
  background-color: #00FFFF;
  border-color: transparent;
  border-style: none;
  border-width: 0px;
  color: #ff0000;
  font-family: verdana, arial;
  font-size: 10px;
  height: 25px;
  margin-right: 2px;
  width: 120px;
 }

</style>

</head>

<body bgcolor="#8B9DBD">

<center>
<input class=button type="button" value="Grundbild"onClick="parent.frames[1].location.href='grundbild.html'">

Hier wird aber nichts am button verändert. Nur wenn ich den style direkt in das input setze kann ich die Form/Farbe des button's verändern.

Was mache ich falsch ?

Danke
     worst_case

  1. Hi,

    Hi!

    <style type="text/css">

    button
     {
      background-color: #00FFFF;
      border-color: transparent;
      border-style: none;
      border-width: 0px;
      color: #ff0000;
      font-family: verdana, arial;
      font-size: 10px;
      height: 25px;
      margin-right: 2px;
      width: 120px;
     }

    </style>
    <input class=button type="button" value="Grundbild"onClick="parent.frames[1].location.href='grundbild.html'">

    Eine Klasse wird in CSS mit einem Punkt davor definiert, also heisst es im <style>-Element .button {..., nicht button{...

    CU
    http://www.yubb.de

  2. Hallo worst_case,

    button

    hier muss der Name des Elements hin, das geändert werden soll in dem fall also input, das hat allerdings den Nachteil, dass dann auch Eingabefelder geändert werden (das kann man verhindern in dem man input[type=button] schreibt, aber dafür ist der IE wiederrum zu blöd :-))

    background-color: #00FFFF;

    lass mal besser da Leerzeichen hinter dem Doppelpunkt weg (u.U. könnten diverse Browser meckern :-))

    border-width: 0px;

    hier darfst du das 'px' weglassen

    font-family: verdana, arial;

    da fehlt noch eine generische Familie, in dem Fall vermutlich sans-serif

    <center>

    *pfui* :-) dafür gibt es css

    <input class=button type="button" value="Grundbild"onClick="parent.frames[1].location.href='grundbild.html'">

    vor "onClick" sollte noch ein Leerzeichen.

    Grüße aus Nürnberg
    Tobias

  3. Hallo,

    Ich möchte mit CSS den buttom verändern (aus button besteht meine menüleiste)

    Du willst im Grunde genommen nur grafische Interfaceelemente, welche dieselbe Funktion wie ordinäre Links besitzen und keine Formularelemente (und ja ich weiß, dass »push button« als legitimer control type für button ausschließlich für clientseitige Scripts in den Specs existiert). Du willst die Buttons auch nicht in einem Zusammenhang mit Pseudoformularen verwenden, was dazu führt, dass sie ohne JavaScript nicht funktionieren werden, wodurch deine Navigation vermutlich bei vielen BenutzerInnen infunktional werden wird. Du könntest die Buttons natürlich in eine Reihe von in ihrer ursprünglichen Funktion beraubten Formularen einbetten:

    <form action="seiteX.html" method="get" target="framename">
    <div><input type="submit" name="leer" value="Gehe zu Seite X" /></div>
    </form>
    ...

    Damit hättest du das Problem, dass viele BesucherInnen und beispielsweise Suchmaschinen die Folgeseiten nie erreichen werden, trotzdem nicht gelöst. Folglich würde ich dir entweder empfehlen, das Aussehen sowie das Verhalten dieser Buttons durch extensiv mit CSS formatierte a-Elemente zu simulieren (als Blockelemente, mit bestimmter Farbe und bestimmtem Rahmen, a.klasse:active für den Eindrückeffekt usw.) oder gewöhnliche a-Elemente mit darin enthaltenen Grafiken zu verwenden, welche wie Buttons aussehen. Falls sie gedrückt werden, kannst du zusätzlich über JavaScript das Bild ändern, dieser optionale Effekt schränkt die Benutzbarkeit nicht ein. Dadurch wird die Funktionalität um ein vielfaches zuverlässiger.

    Mathias