Angy: Breitere Tasten

Hallo, liebe Gemeinde,

nehmts mir nicht übel, dass ich mit einer so trivialen Frage komme, aber ich muss wohl mit Betriebsblindheit geschlagen sein, weil ich nirgends die richtige Lösung finde. Zur Situation:

Mir werden von einem Script 3 Verweise in DHTML definiert. Das erzeugte HTML sieht dann so aus:

<div id="Hugo"
       style="position:absolute;visibility:hidden;line-height:1em;">
       &nbsp;</div>
  <span class="Knopf"><a href="#" onclick="...; return false;">
       X </a></span>

X ist die Beschriftung des Knopfes - ein Zeichen lang. Das DHTML ist lizenziert und gewinnt daher.

Nu ist eine Taste mit einer 1-Byte-Beschriftung nicht gerade berühmt dafür, dass sie gut zu erkennen und zu bedienen ist, daher will ich sie ein wenig in die Länge ziehen, z.B. mit:

#fselect {
             display: inline;
             margin: 0 0 0 0.5em;
   }
   #fselect span.extra a {
             margin: 0 0.4em;
             padding: 0 1em;
             border: 1px solid maroon;
             background-color: #ffc;
             color: #000;
             font-weight: bold;
             text-decoration: none;
   }
   #fselect span.extra a:hover {
             (andere Farbgebung etc.)
   }

Solange mit die Tasten nicht anpackt, siehts auch gut aus. Drückt man  jedoch eine der Tasten, dann ist hinterher um die Beschriftung herum ein dotted Rahmen zu sehen. Vergößert man die Schrift - die ist wie alles andere auch in em angegeben - dann wird der Bereich um die Beschriftung herum, als der Bereich, der den dotted Rahmen bekommt, höher als der Rest des Knopfes.

Drittes Problem: Die Buchstaben sind unterschiedlich breit, daher sind auch die Tasten unterschiedlich breit, weil ich sie nur mit padding in die Länge schieben aber nicht mit width eine Breite verpassen kann.

Ich hab mich also irgendwie verrannt und weiß auch nicht mehr, wo ich nachsehen kann. Und wie der Zufall es so will, findet man natürlich auch keine Beispiele, von denen man abschreiben kann. Wenn Ihr mir weiterhelfen würdet, würdet Ihr einen alten Mann sehr glücklich machen ;)

Grüße aus dem schönen Angermund, das leider keine Sau kennt

Angy

--
there are 10 types of people: those who understand binary and those who don't
  1. Hallo,

    Solange mit die Tasten nicht anpackt, siehts auch gut aus. Drückt man  jedoch eine der Tasten, dann ist hinterher um die Beschriftung herum ein dotted Rahmen zu sehen.

    Siehe dazu http://forum.de.selfhtml.org/faq/#Q-32h

    Marvin

    1. Hallo, liebe Gemeinde, hi, Marvin,

      Siehe dazu http://forum.de.selfhtml.org/faq/#Q-32h

      wie gesagt: das Script darf ich nicht verändern. Dank Dir trotzdem für den Versuch.

      Grüße aus dem schönen Angermund, das leider keine Sau kennt

      Angy

      --
      there are 10 types of people: those who understand binary and those who don't
  2. Hi,

    <div id="Hugo"
           style="position:absolute;visibility:hidden;line-height:1em;">
           &nbsp;</div>
      <span class="Knopf"><a href="#" onclick="...; return false;">
           X </a></span>

    aha.

    Das DHTML ist lizenziert und gewinnt daher.

    Was genau willst Du damit sagen? Was gewinnt das DHTML? Den ersten Preis? In welcher Kategorie?
    Und um welche Lizenz geht es?

    Nu ist eine Taste mit einer 1-Byte-Beschriftung nicht gerade berühmt dafür, dass sie gut zu erkennen und zu bedienen ist, daher will ich sie ein wenig in die Länge ziehen, z.B. mit:
       #fselect {
       #fselect span.extra a {
       #fselect span.extra a:hover {

    Keiner der hier verwendeten Selektoren wählt eines der obengenannten HTML-Elemente aus.

    Solange mit die Tasten nicht anpackt, siehts auch gut aus. Drückt man  jedoch eine der Tasten, dann ist hinterher um die Beschriftung herum ein dotted Rahmen zu sehen.

    Klar, damit man sehen kann, welches Element den Eingabefokus hat. Sehr wichtig für Navigation mit der Tastatur.

    Vergößert man die Schrift - die ist wie alles andere auch in em angegeben - dann wird der Bereich um die Beschriftung herum, als der Bereich, der den dotted Rahmen bekommt, höher als der Rest des Knopfes.

    Hast Du etwa eine Größe in Pixeln für den Knopf vorgegeben?

    Drittes Problem: Die Buchstaben sind unterschiedlich breit, daher sind auch die Tasten unterschiedlich breit,

    Dagegen gibt es monospace-Schriften.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hallo, liebe Gemeinde, hi, Mud,

      Was genau willst Du damit sagen? Was gewinnt das DHTML? Den ersten Preis? In welcher Kategorie?

      :) Boah, echt! Will heißen, dass ich das Script nicht verändern, sondern nur benutzen darf.

      Keiner der hier verwendeten Selektoren wählt eines der obengenannten HTML-Elemente aus.

      Sorry, ich hätte "span.Knopf" schreiben sollen, ich hatte das ...extra im HTML zum besseren Verstehen nach ...Knopf verändert, was wohl in die Hose gegangen ist, weil ichs im Style vergessen habe :|

      Klar, damit man sehen kann, welches Element den Eingabefokus hat. Sehr wichtig für Navigation mit der Tastatur.

      Ich versteh Dich wohl, aber bei den anderen Tasten bei mir und anderswo ist der Rahmen auch nicht zu sehen. Davon abgesehen habe ichs mal ausprobiert, und mit Tabulator erreiche ich die 3 Knöpfe nicht (weiß nicht, wieso, hatte mich bisher noch nie drum gekümmert).

      Hast Du etwa eine Größe in Pixeln für den Knopf vorgegeben?

      Außer bei Rahmen gibt es keine Verwendung von Pixeln bei mir.

      Dagegen gibt es monospace-Schriften.

      Da hat er wohl recht. Hmmm ;)

      Dank Dir erst mal, Andreas, Du weißt nicht zufällig, welche Monospacer ich im Web unabhängig vom OS sicher verwenden kann, oder? Und würdest Du mir das dann bitte auch verraten?

      Grüße aus dem schönen Angermund, das leider keine Sau kennt

      Angy

      --
      there are 10 types of people: those who understand binary and those who don't
      1. hi,

        Dank Dir erst mal, Andreas, Du weißt nicht zufällig, welche Monospacer ich im Web unabhängig vom OS sicher verwenden kann, oder? Und würdest Du mir das dann bitte auch verraten?

        Na die generische Schriftfamilie monospace natürlich.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Hallo, liebe Gemeinde, lieber wahsaga

          Na die generische Schriftfamilie monospace natürlich.

          Ja doch ;) Aber der generische ist doch immer der hässlichst mögliche, stimmts? Ich dachte, jetzt käm was wie "Lucida Console" oder so, nicht, dass ich hinterher "fixedsys" verwende ;)

          Grüße aus dem schönen Angermund, das leider keine Sau kennt

          Angy

          --
          there are 10 types of people: those who understand binary and those who don't
          1. hi,

            Ja doch ;) Aber der generische ist doch immer der hässlichst mögliche, stimmts?

            Das hängt zu großen Teilen vom ästehtischen Geschmack des jenigen ab, der den Browser konfiguriert hat.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
          2. Hallo Angy.

            Ja doch ;) Aber der generische ist doch immer der hässlichst mögliche, stimmts? Ich dachte, jetzt käm was wie "Lucida Console" oder so, nicht, dass ich hinterher "fixedsys" verwende ;)

            Ja, „Lucida Console“ und die neue „Consolas“-Schriftart sind die angenehmsten Monospace-Schriftarten, die mir derzeit bekannt sind.

            Einen schönen Montag noch.

            Gruß, Ashura

            --
            Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
            30 Days to becoming an Opera8 Lover -- Firefox tools for Opera built-ins
            Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
            MathML fetzt | Use OpenOffice.org
      2. Hi,

        Dagegen gibt es monospace-Schriften.

        Da hat er wohl recht. Hmmm ;)

        Dank Dir erst mal, Andreas, Du weißt nicht zufällig, welche Monospacer ich im Web unabhängig vom OS sicher verwenden kann, oder?

        Die generische Schriftart monospace sollte immer vorhanden sein.

        Courier und Courier New sind auch noch häufig.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Hallo, liebe Gemeinde,

          Courier und Courier New sind auch noch häufig.

          Na ist doch bestens :) Ich meine, nicht dass meine Site so wahnsinnig wichtig würde, aber man will von den dreieinhalb möglichen Besuchern ja nicht noch den einen Mac-Menschen ausschließen, gelle?

          Danke einstweilen!

          Grüße aus dem schönen Angermund, das leider keine Sau kennt

          Angy

          --
          there are 10 types of people: those who understand binary and those who don't
          1. Hallo,

            ... aber man will von den dreieinhalb möglichen Besuchern ja nicht noch den einen Mac-Menschen ausschließen, gelle?

            Wir Mac-Nutzer präferieren als diktengleiche Schrift übrigens Monaco. ;)

            Tim

      3. Hi,

        Was genau willst Du damit sagen? Was gewinnt das DHTML? Den ersten Preis? In welcher Kategorie?

        :) Boah, echt! Will heißen, dass ich das Script nicht verändern, sondern nur benutzen darf.

        Sofern es die deutsche Jurisdiktion betrifft ist eine Anpassung aus technischen Gründen erlaubt. Derartige Gründe dürften hier wohl vorliegen.

        Problem bei Javascript u.ä. ist dann natürlich, das es alleine schon zum Zwecke der Benutzung veröffentlicht werden muß. Wie da die Gerichte urteilen wäre zwar interessant, aber so reich bin ich leider nicht.

        Wenn Du verrätst, was es ist (ein Link wäre da ideal) könnte jemand oder vielleicht sogar ich selber Dir freie Alternativen anbieten. Aber wahrscheinlich hast Du da schon zuviel Arbeit reingesteckt und der Abgabetermin ist auch gestern, oder? ;-)

        Davon abgesehen habe ichs mal ausprobiert, und mit Tabulator erreiche ich die 3 Knöpfe nicht (weiß nicht, wieso, hatte mich bisher noch nie drum gekümmert).

        Das ist auch ein interessantes Problem. Kann man sich das mal anschauen?

        Dagegen gibt es monospace-Schriften.

        Da hat er wohl recht. Hmmm ;)

        Man könnte natürlich auch auf die dumme Idee verfallen und mit SVG o.ä. selbst ein Kreuzchen basteln ;-)

        so short

        Christoph Zurnieden

        1. Hallo, liebe Gemeinde, hi Christoph,

          Sofern es die deutsche Jurisdiktion betrifft ist eine Anpassung aus technischen Gründen erlaubt.

          Laut irgendeiner c't gabs aber Probleme, da im Dateikopf der Lizenzgeber genannt wird und andere Leute glauben könnten, die veränderte Form sei das Original.

          Wenn Du verrätst, was es ist (ein Link wäre da ideal) könnte jemand oder vielleicht sogar ich selber Dir freie Alternativen anbieten. Aber wahrscheinlich hast Du da schon zuviel Arbeit reingesteckt und der Abgabetermin ist auch gestern, oder? ;-)

          Nee, einen Abgabetermin habe ich für meine Homepage nicht gegeben ;)
          Frei ist die Lizenz schon von alleine: http://www.einfachfueralle.de/, hier insbesondere das Fontsize-Script, das hier im Original aber auch schon anders aussieht als die Version von /pa.eng, die ich mir angeeignet hatte (hab das Original erst später angeschaut).

          Das ist auch ein interessantes Problem. Kann man sich das mal anschauen?

          Bei mir noch nicht online, aber bei /pa.eng: http://barrierefrei.e-workers.de/

          Man könnte natürlich auch auf die dumme Idee verfallen und mit SVG o.ä. selbst ein Kreuzchen basteln ;-)

          umpfff - aber mit Courier New klappt das echt ganz gut. Und wenn das einer nicht hat, dann muss das monospace eben reichen, so hässlich kann es ja nicht werden, wenn nur +, = und - nötig sind :)

          so fat ;-P

          Grüße aus dem schönen Angermund, das leider keine Sau kennt

          Angy

          --
          there are 10 types of people: those who understand binary and those who don't
          1. Hi,

            Sofern es die deutsche Jurisdiktion betrifft ist eine Anpassung aus technischen Gründen erlaubt.

            Laut irgendeiner c't gabs aber Probleme, da im Dateikopf der Lizenzgeber genannt wird und andere Leute glauben könnten, die veränderte Form sei das Original.

            Wenn dsa das einzige Problem wäre, wäre ein simpler Kommentar an den passenden Stellen schon ausreichend. Aber solang es zum neuem Urheberrecht keine Urteile gibt würde ich da nichts annehmen wollen.

            Nee, einen Abgabetermin habe ich für meine Homepage nicht gegeben ;)

            Achsooo ,-)

            Frei ist die Lizenz schon von alleine: http://www.einfachfueralle.de/, hier insbesondere das Fontsize-Script, das hier im Original aber auch schon anders aussieht als die Version von /pa.eng, die ich mir angeeignet hatte (hab das Original erst später angeschaut).

            Dann würde ich die Leute doch mal ganz unverbindlich fragen, normalerweise sollte das kein Problem darstellen.
            Wenn aber die Zeit da ist, würde ich einen kompletten Neubau *from scratch* vorziehen. Es ist zwar ganz anständiger Code aber nicht sehr elegant.

            Das ist auch ein interessantes Problem. Kann man sich das mal anschauen?

            Bei mir noch nicht online, aber bei /pa.eng: http://barrierefrei.e-workers.de/

            Du meinst http://barrierefrei.e-workers.de/pa.eng? Da ist nichts .. ah, jetzt hab ich's verstanden ;-)
            Nun, beim altem Konqueror (3.2.1) klappt's schon mal, Mozilla 1.7a auch. Soll ich mal raten, wer Probleme macht? ;-)

            BTW: Sowas hier:

              
            <!--[if IE]>  
            <div id='message'>  
            <p><strong>Hinweis f&uuml;r Nutzer des Browsers 'Internet Explorer'</strong><br />  
            Diese Seiten orientieren sich ausschlie&szlig;lich an definierten Webstandards. Um zu demonstrieren, wie fehlerhaft der Internet Explorer mit CSS umgeht, haben wir auf gr&ouml;&szlig;ere Korrekturen (manchmal auch "IE-Optimierung" genannt) verzichtet (Beschreibung folgt demn&auml;chst).<br />  
            Wir empfehlen, einen modernen, standardkonformen Browser auszuprobieren, z.B. den <a href="http://www.e-workers.de/firefox/" class="spec">Mozilla Firefox</a>.</p>  
            </div>  
            <![endif]-->  
            
            

            ist eher peinlich denn sinnvoll. Sowas hat auf einer auch nur halbwegs seriösen Seite nichts zu suchen. Jeder Aufgabe ihr Werkzeug, dazu gehören natürlich auch Produkte der Firma Microsoft. Auch wenn ich in den ganzen Jahren keine Aufgaben gefunden habe, die dazu paßt, heißt das noch lange nicht, das es gar keine gibt.

            Man könnte natürlich auch auf die dumme Idee verfallen und mit SVG o.ä. selbst ein Kreuzchen basteln ;-)

            umpfff - aber mit Courier New klappt das echt ganz gut. Und wenn das einer nicht hat, dann muss das monospace eben reichen, so hässlich kann es ja nicht werden, wenn nur +, = und - nötig sind :)

            Du könntest natürlich auch gleich ein Bildchen drüberlegen. Wer größere Schrift aufgrund schlechter Seh- oder Darstellungsleistung benötigt weiß meist selber, wo das passende Knöpfchen am Browser ist.
            Aber das soll's jetzt auch an Seitenhieben auf bestimmte amerikanische Softwarehersteller gewesen sein ;-)

            so fat ;-P

            Ja, seit ich das Zigarettenrauchen dreingegeben habe bin ich ganz schön aufgegang... ach so war's gar nicht gemeint? Na dann ;-)

            so short

            Christoph Zurnieden

  3. Hallo Angy,

    Drittes Problem: Die Buchstaben sind unterschiedlich breit, daher sind auch die Tasten unterschiedlich breit, weil ich sie nur mit padding in die Länge schieben aber nicht mit width eine Breite verpassen kann.

    warum kein width in em und dann den Buchstaben zentriert?

    Gruß, Jürgen

    1. Hallo, liebe Gemeinde,

      warum kein width in em und dann den Buchstaben zentriert?

      weil width im span nicht funktioniert

      Grüße aus dem schönen Angermund, das leider keine Sau kennt

      Angy

      --
      there are 10 types of people: those who understand binary and those who don't
      1. Hallo Angy,

        ich habe jetzt an ein div gedacht. Aber vieleicht ginge ja auch ein div oder ein display:block.

        Gruß, Jürgen