Antworten auf deine Fragen:
Neues Thema erstellen

Hover Grafik in den Vordergrund

Grotesque

Noch nicht viel geschrieben

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.

HTML:
.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

Aktives Mitglied

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

Noch nicht viel geschrieben

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

von allem ein bisschen

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

localhorst

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:
HTML:
<ul>
  <li><a href="#" class="button">Button 1</a></li>
  <li><a href="#" class="button">Button 2</a></li>
</ul>

CSS:
HTML:
.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

Noch nicht viel geschrieben

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

Noch nicht viel geschrieben

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

undefined

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

pauschalschuldig

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

Noch nicht viel geschrieben

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

Hat es drauf

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

von allem ein bisschen

AW: Hover Grafik in den Vordergrund

kurz gesagt....

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

HTML:
<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:
HTML:
#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

Noch nicht viel geschrieben

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
 
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.635
Beiträge
1.538.481
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben