Antworten auf deine Fragen:
Neues Thema erstellen

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

toxictoon

Pixelpatriot

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

nicht ganz neu hier

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

Nicht mehr ganz neu hier

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

Hat es drauf

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
 
Zuletzt bearbeitet:

Myhar

Hat es drauf

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

nicht ganz neu hier

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

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.
Wenn es sich um eine Aufzählung von Links handelt, dann ist eine Liste (ul) zu verwenden.
Wer sagt das?

Gruß Ulli
 

Myhar

Hat es drauf

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

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.



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

nicht ganz neu hier

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

Hat es drauf

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

nicht ganz neu hier

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

undefined

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

Pixelpatriot

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 ;)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.527
Neuestes Mitglied
Christian Eidelloth
Oben