yaml4 - button icons + font awesome

[narc]

Hallo, habe mich mit begeisterung an yaml 4 gestürzt. sieht wirklich super aus, da eh ein redesign meiner aktuellen seite bevorsteht, wollte ich sofort das neue yaml4 kennen lernen.

dabei möchte ich yaml4 und font awesome kombinieren, was auch wunderbar funktioniert. nur unter dem ie7-9 werden keine symbole angezeigt, da fehlt wohl sicher noch ein verweis seitens font awesome.

was mich aber brennend interessiert. yaml4 bringt ja super designte buttons mit, die optional auch mit einem icon ausgestattet werden können neben der beschriftung selbst. ist es irgendwie möglich, das die yaml4 buttons ohne beschriftung ausgegeben werden?

sprich yaml4 button + ein font awesome icon ohne text. habe versucht etwas rum zu tricksen, nur ist mir dies leider nicht gelungen. würde mich über feedback freuen.

implementiert habe ich dies wie folgt:

<a class="ym-button icon-signin" href="#" title="Anmelden"></a>

[djesse]

@narc

Ein Link-Element ohne Inhalt ist ein denkbar schlechtes Konzept. Wenn Du wirklich den Button nur durch ein Icon repräsentieren willst, dann füge das Bild als Image-Element in den Link ein und beschrifte es über das alt-Attribut entsprechend. Empfehlenswert ist dieser Weg dennoch nicht, denn ein "Anmelden" Button sollte man als solchen erkennen, ohne zuvor den Sinn einer Symbolgrafik erraten zu müssen.

Gruß
Dirk

[narc]

Hallo Dirk,
vielen Dank für dein Feedback. Da hast Du absolut recht, wobei es bei mir nicht um die Hauptnavigation handelt. Zum einem möchte ich YAML4 + font awesome zum laufen bekommen, zum einem einfach wissen ob es mit YAML möglich ist, das bei den Buttons nur das Symbol angezeigt wird. Oder muss ich mir doch ein externes CSS Menü suchen? Wollte eigenlich alles out-of-the-box halten mit YAML. Daher auch die etwas merkwürdige Frage.

PS: Hast Du vielleicht noch einen Tipp, wie ich font awesome auch bei IE zum laufen bekomme? Vielleich hast Du damit ja bereits selbst rum gespielt, mir geligt das im Moment nicht so recht - sry für die Frage die hat ja nicht mit YAML zutun.

Gruß, Andreas

[djesse]

Hi,

Zum einem möchte ich YAML4 + font awesome zum laufen bekommen, zum einem einfach wissen ob es mit YAML möglich ist, das bei den Buttons nur das Symbol angezeigt wird.

Das musst Du ausprobieren. In jedem Fall ist das von mir nicht getestet, weil wie schon beschrieben, nicht sinnvoll (gleiche Begründung wie bei Links ohne Text).

Oder muss ich mir doch ein externes CSS Menü suchen?

Was jetzt, Buttons oder Menü-Items. Wovon sprichst Du?

Gruß
Dirk

[narc]

Sry, habe mich wohl etwas falsch ausgedrückt. Ich brauche lediglich ein Menü / Liste - die kein User bis auf den Admin sieht. Daher ist das recht egal ob die Menüpunkte beschrieben sind. Da ich der Admin bin und es mir nur etwas "schöner" gestalten möchte ;) - Habe mir dabei einfach selbst ein Listenelement in der horizontalen gebaut.

Dirk, noch eine Frage - die ich gerade nicht gelöst bekomme.
Ich habe oben auf der Seite zwei Menüleisten, dazwischen ist eine weitere Leiste dir lediglich mein Logo anzeigt und ein Suchfeld. Ich möchte beide Menüleisten ontop fixieren. Dabei fügte ich folgendes ins css ein:

topnav { border-bottom: 1px solid #ccc; height: 50px; background: #eee; position: fixed; width:100%; z-index:777; }

An sich funktioniert es auch prima, nur wird die gesamte Seite eben um diese 50px nach oben verschoben, so das einige Bereiche einfach überblendet sind.
Ich habe mir deine YAML4 Seite bereits angeschaut, werde daraus aber leider nicht schlau.

Dort hast Du ja auch ein Menü, dann einen "Banner" und eben die Navigation für die Doku - die eben auch ontop fixiert wird. Dabei werden jedoch keine Elemente der Seite verdeckt oder verschoben. Mein HTML schaut wie folgt aus, wobei topnav eben immer ontop bleiben sollte.

  <topnav>
    <div class="ym-wrapper">
      <div class="ym-wbox">
          
            <div class="ym-grid">
            <div class="ym-g50 ym-gl">
                <div class="ym-gbox menul">
                    <ul>
                        <li><a href='<?php echo SITEURL; ?>' title="Startseite"><i class="icon-home icon-large"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="ym-g50 ym-gr">
                <div class="ym-gbox menur">
                    <ul>
                    -phpzeug
                    </ul>
                </div>
            </div>
            </div>
          
      </div>
    </div>
  </topnav>    
    


<header>
<div class="ym-wrapper">
    <div class="ym-wbox">
        <section class="ym-grid linearize-level-1">
                <article class="ym-g75 ym-gl content">
                        <div class="ym-gbox-left ym-clearfix menu">

                        </div>
                </article>
                <aside class="ym-g25 ym-gr">
                        <div class="ym-gbox-right ym-clearfix menu">
                            -php zeug
                        </div>
                </aside>
        </section>
        </div>
</div>
</header>

Könntest Du mir eventuell einen Tipp geben bitte.

[narc]

zusatz: sobald die leiste auf fixed ist - spielt der IE7-9 verrückt. die höhe stimmt überhaupt nicht überein, die hintergrundfarbe wird auch nicht angezeigt. es bleibt leider durchsichtig.