Button mit Bilder und Text als li oder anders lösen?

toxictoon · 20.01.2013

Hi Leute,

ärger michnun schon seit längerem mit einem Problem herum. Ich möchte gerne mehrere Buttons neben (3x) nund untereinander(endlos) mit verschiedenen inhalten darstellen.
Die Buttons sollten mei Mouseover den Hintergrund und die Text- und Bildfarbe ändern und der gesamte Button verlinkt sein. siehe Bild:

wenn ich aber nun eine <a href=" ... > Tag um ein <li></li> Element lege ist das doch keine saubere löung und funktioniert nicht richtig?

Habt ih mir vielleicht Ideen und Lösungsansätze wie man derartige Buttons am besten darstellt, wenn möglich rein CSS technisch.

Vielen Dank schon mal im Voraus!

hub · 20.01.2013

AW: Button mit Bilder und Text als li oder anders lösen?

Moin moin,
nicht ganz so einfach zu beantworten, das ist Layout-Abhängig. Z.B. solls Zeilenweise oder Spaltenweise aufgebaut sein?
Ich würde es in div-Blöcken organisieren und dann mit Css formatieren. Dann hast du die Möglichkeit, es zeilen- oder spaltenweise zu organisieren. Diese Container gestaltest du mit entsprechender Css. Ich bin kein Css-Spezi - aber mit Css3 kannst du es zumindest für die neueren Browser animieren. Oder du machst eine Kombinatiobn aus Css und jQuery - dann gehts auch für ältere Browser.
Dein jetziger Ansatz wäre: ul -> li -> a -> img (oder div) und perfekt für Listendarstellung. die kannst du ja auch aneinander reihen.
Also hast du 100 Möglichkeiten. Welche die für dich richtige ist, kannst eigentlich nur du für dich entscheiden.

Gruß Ulli

Stone1221 · 20.01.2013

AW: Button mit Bilder und Text als li oder anders lösen?

Da muss ich dem Hub recht geben.Wobei ich persönlich ja zu jquery tendiere da du ja soviel mit einem hover geändert haben möchtest . hintergrund , Bild und text da müsste du ja zwei
divs anlegen mit z-index überneinanderlegen und mit dem css befehl :hover stylen. einfacher ist es glaube ich mit jquery

patrick_l · 20.01.2013

AW: Button mit Bilder und Text als li oder anders lösen?

Ich weiß jetzt nicht ob ich dich richtig verstanden habe, aber eventuell wäre ja eine Tabelle mit CSS was für dich. Hier mal ein einfaches Beispiel. Kann man natürlich beliebig weiter stricken

- HTML5/CSS3 » Simple CSS Table (*.html)

HTML:

<!-- CSS Table -->
<div id="table">
        <div class="col-1">
            <div id="A1">
                <a href="#">button1</a>
            </div>
            <div id="B1">
                <a href="#">button2</a>
            </div>
            <div id="C1">
                <a href="#">button3</a>
            </div>
        </div>
        <div class="col-2">
            <div id="A2">
                <a href="#">button1</a>
            </div>
            <div id="B2">
                <a href="#">button2</a>
            </div>
            <div id="C2">
                <a href="#">button3</a>
            </div>
        </div>
    </div>

Liebe Grüße, Patrick

Stone1221 · 20.01.2013

AW: Button mit Bilder und Text als li oder anders lösen?

Vielleicht hilft dir das ja weiter

http://www.psd-tutorials.de/tutorials/web/html-css/-/view/20086--rollover-effekt-bei-grafiken

hoffe es ist ein ansatz für dich da

Myhar · 21.01.2013

AW: Button mit Bilder und Text als li oder anders lösen?

Faszinierend, was hier für Antworten gegeben werden. Nein, sie sind nicht alle schlecht/gut (und meine ist auch nicht der Weisheit letzter Schluß). Aber wieso hier Javascript (oder gleich jQuery) vorgeschlagen wird, ist mir ein Rätsel. Auch finde ich ein div-Tabellenkonstrukt fehl am Platz. Entweder, es ist eine Tabelle, dann soll aber gefälligst auch eine Tabelle verwendet werden oder es ist keine Tabelle, dann sollen andere Tags verwendet werden.

Sprich: Wenn es sich um eine Aufzählung von Links handelt, dann ist eine Liste (ul) zu verwenden. Eine ul kann nur li als Kindelemente haben, insofern hast du Recht, dass du keinen Link um ein Listenelement legen kannst, aber das ist auch nicht notwendig. Wenn du deinen Listenelementen keinerlei Innenabstand (padding) gibst und direkt nach deinem Listenelement den Link angibst, ist dein Link exakt genauso groß wie dein Listenelement. Auch kann ein Link (in HTML5) jedes beliebige Element beinhalten, du kannst deinen Link also frei gestalten.
Auch muss man nicht zwei divs übereinanderlegen. Hintergrundfarbe und Hintergrundbild kann man auch bei einem einzelnen div angeben.

HTML:

<ul>
  <li>
    <a>
      <h2>Lorem ipsum</h2>
      <p>Aenean leo purus, fringilla ut accumsan ac, consectetur nec ante.</p>
    </a>
  </li>
</ul>

Die Taube kann dann mittels CSS dem Linkelement zugewiesen werden (oder als Bild eingebunden werden, wenn es bei jedem Link anders sein soll.

hub · 21.01.2013

AW: Button mit Bilder und Text als li oder anders lösen?

Myhar schrieb:
Aber wieso hier Javascript (oder gleich jQuery) vorgeschlagen wird, ist mir ein Rätsel.

Kann ich beantworten, zumal es von mir kommt. Wie schon geschrieben, liegen für konkrete Vorschläge zu wenig Informationen vor. jQuery oder auch JS ohne Framework bezieht sich auf eine mögliche Animation/Überblendeffekte und hat nichts mit einer sinnvollen Konstruktion zu tun - damit hast du Recht.

Myhar schrieb:
Wenn es sich um eine Aufzählung von Links handelt, dann ist eine Liste (ul) zu verwenden.

Wer sagt das?

Gruß Ulli

Myhar · 21.01.2013

AW: Button mit Bilder und Text als li oder anders lösen?

hub schrieb:
Kann ich beantworten, zumal es von mir kommt. Wie schon geschrieben, liegen für konkrete Vorschläge zu wenig Informationen vor. jQuery oder auch JS ohne Framework bezieht sich auf eine mögliche Animation/Überblendeffekte und hat nichts mit einer sinnvollen Konstruktion zu tun - damit hast du Recht.

Falls es darum geht, auch ältere Browser mit Überblendungseffekten zu unterstützen, dann muss man leider auf Javascript (oder eine Javascriptbibliothek seiner Wahl) zurückgreifen. Kann man sich damit abfinden, dass ältere Browser keinen fade-effekt, sondern lediglich einen "normalen" Hovereffekt zu sehen bekommen, kann auf das JS verzichtet werden.

hub schrieb:
Wer sagt das?

Die Semantik

Wird in einem HTML Dokument eine Überschrift dargestellt, ist ein Überschriftentag zu verwenden. Wird ein Absatz dargestellt, wird ein Absatztag verwendet. Wird eine Aufzählung (auch Liste genannt) dargestellt, wird der Listentag verwendet. So einfach ist das. Auch wenn man ein div oder span beliebig stylen kann, es bleiben trotzdem nichtssagende Container.

hub · 21.01.2013

AW: Button mit Bilder und Text als li oder anders lösen?

@Myhar:

So gesehen hast du recht. Vorausgesetzt, ich will die Links als Liste darstellen. HTML bietet mir aber mehr Möglichkeiten zur Darstellung/Positionierung, auch in den Grenzen den Semantik.
Oder liege ich falsch?

Gruß Ulli

Myhar · 21.01.2013

AW: Button mit Bilder und Text als li oder anders lösen?

Du hast mittels CSS die Möglichkeit, eine Liste so darzustellen wie du willst. Also verstehe ich deine Frage hier nicht? Bzw. HTML bietet keine Möglichkeiten zur Darstellung/Positionierung, das passiert alles per CSS.
Du kannst auch eine Liste "wie eine Tabelle" darstellen, wenn du möchtest.

hub · 21.01.2013

AW: Button mit Bilder und Text als li oder anders lösen?

Ok. Auch da hast du recht, der allgemeine Irrglaube. HTML-Elemente besitzen Css Default-Werte.
Ich halte jetzt aber meine Klappe, sonst können wir stundenlang weiter machen.

Gruß Ulli

cebito · 21.01.2013

AW: Button mit Bilder und Text als li oder anders lösen?

Was hier semantisch richtig oder angebracht ist, lässt sich aus der Fragestellung leider nicht ersehen. Dafür sollte bekannt sein, in welchem Kontext diese Elemente stehen. Eine einfache Navi freilich ist eine Aufzählung von Links (ähnlich dem Inhaltsverzeichnis eines Buches) und dementsprechend als Liste anzulegen.

Ach ja, ich hatte auch lange "tag" als Bezeichnung für alles Mögliche verwendet... aber man lernt ja nie aus

http://meiert.com/de/publications/articles/20060924/

toxictoon · 02.02.2013

AW: Button mit Bilder und Text als li oder anders lösen?

so leute, sorry für die späte antwort und vielen dank für eure Tips!

hab es mir nochmal durch den kopf gehen lassen und binnun zu folgener lösung gekonnen (falls jmd. mal ein ähnlichs problem hat.

Code:

<div id="name1" class="buttons">
<a href="#" >
<span class="image">Titel 1</span>
<span class="text"><h2>Überschrift 1</h2>Hier steht dann der kurze text</span>
</a>
</div>

habe die buttons im css definiert und dann über die jeweilige ID der DIV´s ein Hintergrundbild in "span > image" definiert.

somit konnte ich dem button beim hover eine andere hintergrund- und textfarbe geben, und dem sman image tag bei hover ein anderes hintergrund bild.

das css ist somit etwas umfangreicher geworden aber dafür musste ich kein javascript einsetzen.

wenn es jemanden interessiert kann ich gerne noch einen ausschnitt aus dem css hinterherwerfen