Hover Grafik in den Vordergrund

[Grotesque]

Hallo,

und zwar habe ich vor, meine Buttons ein wenig hervorzuheben. Dazu möchte ich gerne, sobald man mit der Maus drüber fährt, dass eine Grafik eingeblendet wird und genau über dem jeweiligen Button liegt.

.SidebarSocial a img{ height: 75px;}
.SidebarSocial a img, .SidebarSocial a:visited img { width: 64px; height: 64px; }
.SidebarSocial a:hover img { background: url(images/social/Hover.png);}

Nun füge ich die Grafik aber lediglich in den Hintergrund ein. Kann mir jemand sagen, wie ich diese in den Vordergrund bekomme?

Beste Grüße, Skatze

 

[alexanderhey]

AW: Hover Grafik in den Vordergrund

Hallo.

Da ich den restlichen Quelltext nicht kenne, könnte das hier dir helfen:


Mit dem z-index legt man fest, in welcher Ebene die Grafik geladen werden soll. Wenn man da also 999 eingibt, sollte diese immer über den anderen liegen.

Gruß Alex

 

[Grotesque]

AW: Hover Grafik in den Vordergrund

Also mit dem z-index habe ich das auch schon probiert gehabt. Irgendwie bekomme ich das nur nicht gehandelt.
Ich habe meine Buttons direkt in der .php eingebunden, also die Grafiken. Und in der .css versuche ich eine Grafik darüber zu legen. Hab das Gefühl, so klappt das irgendwie nicht, oder irre ich mich?

Bin leider nicht so sehr versiert in den Sprachen..

 

[Paric]

AW: Hover Grafik in den Vordergrund

Wenn Du uns die Seite zeigen könntest, wäre eine Hilfe sicher einfacher... so können wir nur raten...

 

[MyBad]

AW: Hover Grafik in den Vordergrund

Verstehe leider dein Problem nicht so wirklich ein Link zum Projekt wäre hier sicher vorteilhaft.

Ich kann dir nur den Tipp geben die Grafiken deiner Buttons nicht direkt in das Markup deiner Site einzubauen, sondern mit CSS-Rollovers zu arbeiten. Du kannst deinen Buttons (zum Beispiel dem a-Tag) einfach Hintergrundgrafiken per CSS verpassen. Ähnlich versuchst du es ja schon mit dem img-Tag. Aber das ist so keine gute Lösung.

Hier mal ein Beispiel:
HTML:

<ul>
  <li><a href="#" class="button">Button 1</a></li>
  <li><a href="#" class="button">Button 2</a></li>
</ul>

CSS:

.button{ 
  background: url('button.png') no-repeat;
  display: block;
  height: *höhe der grafik*;
  line-height: 0;
  text-indent: -9999px;
  width: *breite der grafik*
}
.button:hover{ 
  background: url('button_hover.png') no-repeat;
}

Wenn jeder Button ein anderes Bild haben soll, kannst du zusätzlich mit IDs arbeiten

Ist nur ein schnelles Beispiel. Das kann man noch verfeinern. Man kann beide / alle Button(s) / -Zustände auch in einer Grafik anlegen -> Stichwort: CSS Sprites.

 

[Grotesque]

AW: Hover Grafik in den Vordergrund

Das Problem ist, das ich an dem Theme nur lokal bastel, deswegen ist es mit dem Zeigen ein wenig schwer.

Es sind vier verschiedene social buttons und die Lösung von dir MyBad sieht wirklich am Besten aus. Leider habe ich noch nie mit ID's gearbeitet und von CSS Sprites hab ich leider auch noch nichts gehört. Aber ich werde mich mal daran versuchen und gebe nochmals Bescheid.

Vielen Dank schonmal

 

[Grotesque]

AW: Hover Grafik in den Vordergrund

Also ich hab das Problem jetzt gelöst und dem a-Tag jeweils eine Hintergrundgrafik angepasst.
Nun will ich das Ganze noch ein wenig optimieren, da ich 4 verschiedene Buttons habe, mit jeweils einem unterschiedlichen Hover-Grafik. Ich denke mit der ID Variante müsste das gut zu lösen sein. Vielleicht kannst du es mir ganz kurz erklären?

 

[cebito]

AW: Hover Grafik in den Vordergrund

Ich denke mit der ID Variante müsste das gut zu lösen sein. Vielleicht kannst du es mir ganz kurz erklären?

Ab und an hilft es mal das hier gesagte zu nehmen und Google zu bemühen, oder sich einfach mal Gedanken drüber zu machen statt sich hier alles perfekt auf einen zugeschnitten servieren zu lassen. Beschäftige dich mit den Grundlagen von HTML und CSS!
Entweder du gibst jedem Button 'ne andere class, oder du gibst jedem Button eine ID.

 

[LaFaSiLuc]

AW: Hover Grafik in den Vordergrund

es gibt bei webdesignerwall ein tolles tut, wo das erklärt wird (ich hoffe, es ist das, was du suchst) findest du unter "advanced css menu"...

 

[Grotesque]

AW: Hover Grafik in den Vordergrund

@LaFaSiLuc Das ist ein super Tutorial, wird gut erklärt, aber leider nicht das was ich suche. Soweit habe ich das bereits programmiert, mir ist nur die Methode mit den ID's nicht klar..

@cebito Ein wenig Kenntnisse habe ich ja bereits, nur wie gesagt ist mir die Methode mit den ID's unklar, deswegen dachte ich ja nur, einer kann fix was dazu sagen. Momentan habe ich für meine vier Buttons auch vier Klassen.

 

[Myhar]

AW: Hover Grafik in den Vordergrund

Dann sag doch, was dir bei IDs unklar ist? Dann kann man dir auch helfen, dieses Problem zu beheben
Und mit "alles" zu antworten ist nicht zulässig, du findest genügend Grundwissen wenn du auch nur 10 sekunden googlest.

 

[Paric]

AW: Hover Grafik in den Vordergrund

kurz gesagt....

im HTML-code gibst Du jedem Link eine ID..

<a href"link1.html" id="link1">Link 1</a>
<a href"link2.html" id="link2">Link 2</a>
<a href"link3.html" id="link3">Link 3</a>
<a href"link4.html" id="link4">Link 4</a>

und dann kannst Du diese über CSS ansprechen:

#link1 {background: url(bild_link_1.png);}
#link2 {background: url(bild_link_2.png);}
#link3 {background: url(bild_link_3.png);}
#link4 {background: url(bild_link_4.png);}

#link1:hover {background: url(bild_link_1_hover.png);}
#link2:hover {background: url(bild_link_2_hover.png);}
#link3:hover {background: url(bild_link_3_hover.png);}
#link4:hover {background: url(bild_link_4_hover.png);}

ist zwar recht einfach formuliert, sollte Dir aber in groben zügen zeigen wie man mit ID's arbeitet. Wichtig ist zu wissen, das jede ID auf der Seite nur einmal vorkommen darf, wärend Klassen mehrfach verwendet werden dürfen.

Gruß,
Paric

 

[Grotesque]

AW: Hover Grafik in den Vordergrund

Hey Paric,

klappt super, genau so eine kurze und prägnante Darstellung hat mir geholfen
Jetzt hab ich es gleich kapiert und ein Menge an zusätzlichen Code ausradiert.

Beste Grüße