Bernhard H: Wert eies Buttons (input)

SELF-Forum

Wert eies Buttons (input)

Bernhard H
– Informationen zu den Bewertungsregeln

Hallo,

ich bin ein Anfänger und habe ein Problem mit der Darstellung des Wertes eines Buttons. Ich habe unten ein Beispiel vorbereitet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">
<!--

input.button {
  color: #000000; background: #800080;
  border: solid 1px #800080;width:120px;
}
-->
</style>

<style type="text/css">
<!--

input.button2 {
  color: #000000; background: #FFD700;
  border: solid 1px #FFD700;width:120px;
}
-->
</style>

<script type="text/javascript" language="JavaScript">
<!--

function toggleMe(a){
  var e=document.getElementById(a);
  if(!e)return true;
  if(e.style.display=="none"){
    e.style.display="block"
  } else {
    e.style.display="none"
  }
  return true;
}

//-->
</script>

</head>
<body>

<h1 align="center">XXX<font size="5">X</font></h1>

<h2 align="center">XX<sup>X-XX</sup></h2>

Text

<br><br>

<input type="button" class="button" onclick="return toggleMe('para01')" value="?">

<br>

<div id="para01" style="display:none">

<br>

<input type="button" class="button2" onclick="return toggleMe('para01a')" value="?">

<div id="para01a" style="display:none">

<br>

<font>

Text
<br>

</font>

<br>

</div>

<input type="button" class="button2" onclick="return toggleMe('para01b')" value="?">

<div id="para01b" style="display:none">

<br>

<font>

Text

</font>
</div>

<p></p>

Text

</div>

<br>

</body>
</html>

Ich möchte, dass der Wert genauso dargestellt wird wie bei den Überschriften, wobei das X für eine beliebige Zahl steht.

Browser: Firefox 3.6.10

Ist das möglich? Wenn ja, wie?

Danke im Voraus für eure Hilfe

lg. Bernhard H

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Wert eies Buttons (input)

    Deus Figendi
    – Informationen zu den Bewertungsregeln

    Hallo,

    Hallo

    ich bin ein Anfänger

    Ohne es böse zu meinen: Merkt mann :D
    Aber das heißt ja vielleicht, dass man dich noch erretten kann.

      

> <style type="text/css">  
> <!--  
>   
> input.button {  
>   color: #000000; background: #800080;  
>   border: solid 1px #800080;width:120px;  
> }  
> -->  
> </style>  
>   
> <style type="text/css">  
> <!--  
>   
> input.button2 {  
>   color: #000000; background: #FFD700;  
>   border: solid 1px #FFD700;width:120px;  
> }  
> -->  
> </style>  

~~~du musst deine Deklinationen nicht in mehrere Style-Bereiche aufteilen und du musst deine Styles normalerweise auch nicht auskommentieren.  
Du kannst also in der Mitte das  
` --> </style> <style type="text/css"> <!--`{:.language-html}  
weglassen und die `<!--`{:.language-html} am Anfang und `-->`{:.language-html} am Ende auch. Gleiches gilt für `script`{:.language-html}-Elemente (zumindest jeweils im Header).  
  
`» <h1 align="center">XXX<font size="5">X</font></h1>`{:.language-html}  
`font `{:.language-html}ist out. Insbesondere in XHTML1, lass das! Verwende CSS <http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_size@title=font-size>  
`align`{:.language-html}-Attribute sind auch out, lass das! Verwende CSS <http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_align@title=text-align>.  
  
`» <h2 align="center">XX<sup>X-XX</sup></h2>`{:.language-html}  
`sup`{:.language-html}... kann man machen, ist aber seltenst richtig. Verwende besser CSS <http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align@title=vertical-align> in Kombination mit `font-size`{:.language-css}.  
  
`» <br><br>`{:.language-html}  
du musst in XHTML inhaltsleere Elemente mit `/>`{:.language-xml} abschließen. Außerdem benutzt man `<br>`{:.language-html} eigentlich nicht mehr (Ausnahmen, Regel, blah). Lass das! Verwende CSS <http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin@title=margin> und/oder <http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding@title=padding> wenn du Abstände erzeugen willst. Verwende <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display:block> bzw. Block-Elemente um irgendeine Art von Absatz o.ä. zu beenden.  
  

> <input type="button" class="button" onclick="return toggleMe('para01')" value="?">  

Siehe oben, inhaltsleeres Element abschließen mit `/>`{:.language-xml}  
Ich bin mir gerade nicht ganz sicher ob `<input>`{:.language-html} bei XHTML1 transitional im `<body>`{:.language-html}-Element stehen darf.  
  
`» <div id="para01" style="display:none">`{:.language-html}  
Wenn "para01" für "paragraph" (Absatz) steht, dann benutz' doch einfach ein <http://de.selfhtml.org/html/text/absaetze.htm#definieren@title=paragraph-Element>  
  
~~~html
» <font>  

>   
> Text  
> <br>  
>   
> </font>

    Na du bist ja witzig, ein font-Tag, welches man wie gesagt eigentlich nicht mehr benutzt, welche keinen Namen, keine Attribute nichts hat und einfach nur ein Stück Text einrahmt. Wofür?

    » <p></p>
    Wie gesagt um Abstände zu erzeugen verwende CSS padding oder margin.

    Ich möchte, dass der Wert genauso dargestellt wird wie bei den Überschriften, wobei das X für eine beliebige Zahl steht.
    Ist das möglich? Wenn ja, wie?

    Ja, das ist absolut möglich.
    Wobei ich mir nicht sicher bin wie du das mit dem "wie bei den Überschriften" meinst.
    Also:
    Du kannst (soweit ich weiß) _NICHT_ sagen "dieses Element bitte so formatieren, wie h1 im browser-default-style". Wäre mir jedenfalls neu (ggf. geht das mit JavaScript).
    Du kannst aber sehr wohl genau die gleichen Styles auf h*-Elemente wie auf input-Elemente anwenden, so dass sie identisch aussehen.
    Du kannst den value-Teil nicht in sich unterschiedlich stylen (also sowas wie sup was du gemacht hast), aber...
    Du kannst echten Überschriften also h*-Elementen ebenso ein onClick-Ereignis geben
    Du kannst button-Elemente verwenden um darin span-Elemente o.ä. zu definieren.

    --
    sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Wert eies Buttons (input)

      MudGuard Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi,

      Du musst deine Deklinationen nicht in mehrere Style-Bereiche aufteilen und du musst deine Styles normalerweise auch nicht auskommentieren.

      Da ist doch nicht eine einzige Deklination.
      Du meinst vermutlich Deklarationen ...

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Wert eies Buttons (input)

        Deus Figendi
        – Informationen zu den Bewertungsregeln

        Da ist doch nicht eine einzige Deklination.
        Du meinst vermutlich Deklarationen ...

        In der Tat.

        --
        sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. Wert eies Buttons (input)

      Bernhard H
      – Informationen zu den Bewertungsregeln

      Hallo,

      danke für deine Ratschläge. Ich habe in einer Datei schon fast alles geändert.
      Nur zwei Dinge sind mir noch nicht klar.
      Wieso sollte ich bei einen einfachen Zeilenumbruch auf <br> verzichten?
      Die Darstellung im value-Teil sollte genauso sein wie bei der Überschrift. Dabei geht es mir nur um den "XXX<font size="5">X</font>" oder "XX<sup>X-XX</sup>" teil.
      Die einzelnen Button sollten allerdings die selbe Formatierung haben (höhe, breite, Farbe, usw.,) nur der Text soll anders dargestellt werden. Und dabei ist mir einfach nicht klar wie das funktioniert.

      lg Bernhard H

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Wert eies Buttons (input)

        Der Martin
        – Informationen zu den Bewertungsregeln

        Hi,

        Wieso sollte ich bei einen einfachen Zeilenumbruch auf <br> verzichten?

        ein einzelnes <br> (oder <br />, wenn man XHTML verwendet) mag durchaus in Ordnung sein, auch wenn es im Einzelfall vielleicht elegantere Möglichkeiten gibt. Mehrere br-Elemente in Folge sind aber auf jeden Fall Unsinn.

        Die Darstellung im value-Teil sollte genauso sein wie bei der Überschrift.

        Dann formatiere das input-Element genauso wie das hX-Element. Beachte dabei, dass unterschiedliche Formatierungen innerhalb des Inhalts von <input> nicht möglich sind.

        Dabei geht es mir nur um den "XXX<font size="5">X</font>" oder "XX<sup>X-XX</sup>" teil.

        Vergiss bitte, dass es das font-Element je gegeben hat! Formatierungen per CSS lassen sich (mit kleinen Einschränkungen) auf jedes Element anwenden.

        Die einzelnen Button sollten allerdings die selbe Formatierung haben (höhe, breite, Farbe, usw.,) nur der Text soll anders dargestellt werden. Und dabei ist mir einfach nicht klar wie das funktioniert.

        Wo liegt dein Problem? Du kannst doch die Dimensionen und die Farben eines Elements völlig unabhängig von den Eigenschaften seines Textinhalts formatieren.

        Ciao,
         Martin

        --
        Ein Patriot ist jemand, der bereit ist, sein Land gegen seine Regierung zu verteidigen.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Wert eies Buttons (input)

          Deus Figendi
          – Informationen zu den Bewertungsregeln

          Hi,

          Wieso sollte ich bei einen einfachen Zeilenumbruch auf <br> verzichten?

          ein einzelnes <br> (oder <br />, wenn man XHTML verwendet) mag durchaus in Ordnung sein, auch wenn es im Einzelfall vielleicht elegantere Möglichkeiten gibt. Mehrere br-Elemente in Folge sind aber auf jeden Fall Unsinn.

          Ich deutete an, dass Ausnahmen die Regel bestätigen :)
          Ich denke, die meisten Leute, die einen Zeilenumbruch erzeugen meinen eigentlich das Ende eines Absatzes. Natürlich gibt es auch Fälle in denen das nicht zutrifft :) Aber viele von diesen Fällen sind dann wieder Listen ^^
          Daher meine Grundsätzliche Ablehnung. Wenn man ein <br /> setzt sollte man einfach drei Sekunden darüber nachdenken, ob man wirklich einen Zeilenumbruch will oder vielleicht in Wirklichkeit das Ende eines Absatzes (ggf. ohne Abstand). Wenn man nach den drei Sekungen zu dem Ergebnis kommt "jawohl, da will ich wirklich einen Zeilenumbruch" dann ist es wohl einer :D

          Die Darstellung im value-Teil sollte genauso sein wie bei der Überschrift. Dabei geht es mir nur um den "XXX<font size="5">X</font>" oder "XX<sup>X-XX</sup>" teil.
          Die einzelnen Button sollten allerdings die selbe Formatierung haben (höhe, breite, Farbe, usw.,) nur der Text soll anders dargestellt werden. Und dabei ist mir einfach nicht klar wie das funktioniert.

          Ich hatte das oben versucht zu erklären. Mit <input type="button" /> ist dein Vorhaben nicht lösbar, aber du kannst die Formatierungen wie auch die Script-Events normalerweise auch auf andere Elemente anwenden.

          Am ehesten böten sich folgende Lösungen an:
          * Verwende ein <button>-Element. Damit erledigt der Browser schonmal die grundsätzliche Darstellung einer Schaltfläche. Oder
          * Verwende ein h*-Element. Wie du ja den Wunsch zu haben scheinst (z.B. wenn du Überschriften anzeigen willst und die zugehörigen Inhalte "aufklappen" möchtest).

          Du kannst beide Elemente stylen und du kannst auf beiden Elemente das onClick-Element abfangen.

          Schnelles Beispiel:

          .potenz {  
 font-size:50%;  
 vertical-align:super;  
}

          <button class="button" onclick="return toggleMe('para01')">  
 3<span class="potenz">3</span>  
</button>  
<h3 class="button" onclick="return toggleMe('para01a')">  
 3<span class="potenz">3</span>  
</h3>
          --
          sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Wert eies Buttons (input)

            Bernhard H
            – Informationen zu den Bewertungsregeln

            Hallo,

            danke für die Hilfe. Ich habe nun verstanden um was es geht. Bei mir sie das so aus:

            button {
              color: #000000; background: #FFD700;
              border: solid 1px #FFD700;width:120px;
            }

            <button onclick="return toggleMe('para01a')">XX<span style="font-size:75%">X</span></button>

            <button onclick="return toggleMe('para01b')" >XX<span style="font-size:75%; vertical-align:super">X-XX</span></button>

            Lg Bernhard H

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln