Buttons

[DaHoden]

Hi,

ich hab mal ne Frage:

wie kann ich die buttons richtig in meine seite einfügen und wie kann ich aus ihnen links machen???

 

[Frank]

Es gibt für buttons genau drei möglichkeiten:
1.

<button onClick="document.location.href=\"Path/To/Document.doc\"">Dies ist mein button</button>

2.

<form action="path/to/document.doc" method="post">
<input type="submit" value="Das ist mein button" name="button"></input>
</form>

3.

table.button
{
  color:black;
  background-color:white;
  background-image:none;
  font-size:11px;
  font-family:verdana;
  text-decoration:none;
  text-align:left;
  width:100%;
}

a.button:link
{
  color:white;
  background-color:#666666;
  background-image:none;
  font-size:11px;
  font-family:verdana;
  text-decoration:none;
  text-align:left;
  width:180px;
  border:1px solid black;
  border-bottom:none;
  line-height:bottom;
  display:block;
  height:16px;
  padding-left:13px;
  padding-top:2px;
}

a.button:visited
{
  color:white;
  background-color:#666666;
  background-image:none;
  font-size:11px;
  font-family:verdana;
  text-decoration:none;
  text-align:left;
  width:180px;
  border:1px solid black;
  border-bottom:none;
  line-height:bottom;
  display:block;
  height:16px;
  padding-left:13px;
  padding-top:2px;
}

a.button:active
{
  color:black;
  background-color:#888888;
  background-image:none;
  font-size:11px;
  font-family:verdana;
  text-decoration:none;
  text-align:left;
  width:180px;
  border:1px solid black;
  border-bottom:none;
  line-height:bottom;
  display:block;
  height:16px;
  padding-left:13px;
  padding-top:2px;
}

a.button:hover
{
  color:white;
  background-color:#888888;
  background-image:none;
  font-size:11px;
  font-family:verdana;
  text-decoration:none;
  text-align:left;
  width:180px;
  border:1px solid black;
  border-bottom:none;
  line-height:bottom;
  display:block;
  height:16px;
  padding-left:13px;
  padding-top:2px;
}

<table class="button" cellpadding="0" cellspacing="0">
  <tr>
    <td class="link">
      <a href="?site=home" class="button" title="Startseite">Startseite</a>
    </td>
  </tr>
</table>

Zu1.:
Diese Variante lässt sich ohne Probleme überall einfügen, basiert jedoch auf javascript und wird somit nicht bei allen Benutzern funktionieren, da nicht jeder JavaScript aktiviert hat.

Zu2.:
Diese Vatiante ist ein ganz "normales" Formular. Sie wird immer funktionieren und durch target="" im <form>-Tag auf ein bestimmtes Fenster(z.b. iframe)richten. Nachteil ist, das durch <form> (wenn nicht verhindert, z.B. durch <table><form><tr> !!nicht wc3 konform!!) ein doppelter Zielenumbruch erzeugt wird. (wie der abstand zwischen zwei <p></p>)

zu3.:
Dies ist die wohl beste (aber auch aufwändigste) Art und Weise ein Button per HTML und CSS auf der Seite anzuzeigen.
Sie ist von JavaScript unabhängig und erzeugt zu dem kein bzw. bestimmbare (Mit CSS z.b.line-height , float;left) Zeilenumbrüche.
Diese Variante würde ich dir empfehlen, aber wenn du sie zu aufwändig findest, kann ich das Verstehen.

Ps: Möglichkeit 3 habe ich von der graphischen anzeige her erfolgreich bei MSIE und MF getestet

EDIT
@Prophet:

ups, ja stimmt das onClick funzt natürlich auch bei input, oder bildern die wie buttons aussehen... egtl überall ;-)

 

[Prophet]

Anbei sei angemerkt das die javascript methode mit input und button funktioniert. Da das onClick attribut unversal gültig ist.

> http://de.selfhtml.org/html/referenz/elemente.htm#button
> http://de.selfhtml.org/html/referenz/elemente.htm#input

 

[DaHoden]

DANKE!!! ich hab natürlich #3 benutzt,wegen der herausforderung ;) und es hat funktioniert.Danke danke danke vielmals!!!

 

[DaHoden]

aber eine frage noch: Wie kann ich mit der art zu meiner anderen seite verweisen?

 

[Prophet]

Indem du einfach das ziel des links auf die entsprechende seite einstellst.

> http://de.selfhtml.org/html/verweise/definieren.htm
> http://de.selfhtml.org/html/referenz/attribute.htm#a

 

[DaHoden]

ok thx.habs jetzt hingekriegt