Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 26
Seite [1] 2 >
digga


Wannabe poster





Beiträge: 36
 # Thema - 21.03.2013 um 13:17 Uhr
Hallo
Wie oben schon beschrieben probiere ich auf unserer Homepgae Socialbuttons auf den Background einzubinden.... nur wie Oo?! Kann mir bitte jemand helfen ?! Zum besseren Verständnis hier eine kleine Vorschau wie es aussehen soll Natürlich mit Hoverfunktion

Mfg


------------------
Inaktiv
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
 # Antwort: 1 - 21.03.2013 um 13:24 Uhr
kannste mit position machen, einfach absolute doer fixed und dann halt mit top und left in die ecke


Inaktiv
|
Fr33z3m4n ClanSphere Team


Medal of Honor




Herkunft: Hamm
Beiträge: 11094
 # Antwort: 2 - 21.03.2013 um 14:13 Uhr
Du solltest nur aufpassen, dass bei kleineren Auflösungen die Buttonleiste, den Header nicht überlagert, und somit ein verzerrtes Design entsteht.


------------------
mfg
Patrick "Fr33z3m4n" Jaskulski

Antoine de Saint-Exupéry: Wenn Du ein Schiff bauen willst, so trommle nicht Männer zusammen, um Holz zu beschaffen, Aufgaben zu verteilen, sondern lehre die Männer die Sehnsucht nach dem endlosen weiten Meer.

Inaktiv
|
digga
Thread-Ersteller


Wannabe poster





Beiträge: 36
 # Antwort: 3 - 21.03.2013 um 17:43 Uhr
Ja hab mir das nochmal überlegt und werde probieren die Buttons unterhalt des Footers einzubinden. Das umgeht das Problem mit der niedrigeren Auflösung denke ich mal. Oder eben ein Slider noch mit einfügen. Aber nun zur Hauptfrage... wie stell ich das ganze an ? Hat jemand ein Beispiel für mich. Sry bin noch ziemlich unbeholfen in solchen Sachen


------------------
Inaktiv
|
ev0lution


Geekboy





Beiträge: 1103
 # Antwort: 4 - 21.03.2013 um 17:53 Uhr
in den footer mit html code href und img bild und verlinkung einbinden

beispiel

<a href="link"><img src="pfadzumbild"></a>


------------------
Inaktiv
|
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
 # Antwort: 5 - 21.03.2013 um 18:19 Uhr
also wo sollen die button jetzt hin?


Inaktiv
|
digga
Thread-Ersteller


Wannabe poster





Beiträge: 36
 # Antwort: 6 - 21.03.2013 um 18:20 Uhr
Super Geil dank dir nur wie bekomm ich die Hover funktion jetzt drüber bzw das sich der Link in einem neuen Fenster öffnet?

EDIT: @equal: Hat sich erledigt ... danke. Hab die Buttons jetzt in den Footer gesetzt


------------------


Zuletzt editiert von digga am 21.03.2013 um 18:21 Uhr (2x Editiert)
Inaktiv
|
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 7 - 21.03.2013 um 19:07 Uhr
Du kannst dem img noch ne Klasse geben,
die du dann via CSS definierst.

 
1.
1. / 2. / ... 
 <a href="link"><img class="social_icon" src="pfadzumbild" alt=""></a>


 
1.
2.
3.
4.
5.
6.
7.
1. / 2. / ... 
 .social_icon {
  opacity: 0.7;
}

.social_icon:hover {
  opacity: 100;
}


------------------


www.iv-gaming.de | www.iv-artwork.de

Inaktiv
|
digga
Thread-Ersteller


Wannabe poster





Beiträge: 36
 # Antwort: 8 - 21.03.2013 um 19:28 Uhr
hmm das funktioniert irgendwie nicht -.- ! ich habe auch zwei veschieden jpg´s hochgeladen die so benannt sind Facebook.png und Facebook hover.png. Der Button von Facebook wird jetzt leicht durchsichtig angezeigt. Mach ich was falsch? Wahrscheinlich


------------------
Inaktiv
|
ev0lution


Geekboy





Beiträge: 1103
 # Antwort: 9 - 21.03.2013 um 19:32 Uhr
du brauchst keine bilder für den hover effekt

mit tress seinem code wird die sichtbarkeit verändert -> "opacity"


------------------
Inaktiv
|
digga
Thread-Ersteller


Wannabe poster





Beiträge: 36
 # Antwort: 10 - 21.03.2013 um 20:39 Uhr
Und wie würde das dann aussehen in meinem fall wenn ich die hover jpg schon habe?
Hab es so gemeint:
normaler Button:

mouse over Button :


------------------


Zuletzt editiert von digga am 21.03.2013 um 20:46 Uhr (1x Editiert)
Inaktiv
|
ev0lution


Geekboy





Beiträge: 1103
 # Antwort: 11 - 21.03.2013 um 20:49 Uhr
nimmst im hover part die grafik -> background-image:url(hover.jpg);


------------------
Inaktiv
|
digga
Thread-Ersteller


Wannabe poster





Beiträge: 36
 # Antwort: 12 - 21.03.2013 um 20:53 Uhr
also sprich so
.social_icon:hover
background-image: url( /templates/cg01/images/Facebook hover.png) {
opacity: 100;

sry steh aufm Schlauch


------------------


Zuletzt editiert von digga am 21.03.2013 um 20:55 Uhr (1x Editiert)
Inaktiv
|
ev0lution


Geekboy





Beiträge: 1103
 # Antwort: 13 - 21.03.2013 um 21:16 Uhr
 
1.
1. / 2. / ... 
 <a href="http://www.facebook.com/groups/454354127971327/"  onMouseOver= "if (document.images) document.facebookdm.src= 'http://team-uhrwerk.eu/templates/cg01/images/Facebook hover.png';" onMouseOut= "if (document.images) document.facebookdm.src= 'http://team-uhrwerk.eu/templates/cg01/images/facebookdm.png';"><img src="http://team-uhrwerk.eu/templates/cg01/images/facebookdm.png" name=facebookdm border=0></a>


so müsste es bei dir passen. kannst ja nochmal die links zu den bildern prüfen

das ist die html und nicht die css variante. mit css gehts halt anders aber du solltest dir erstmal html aneignen


------------------


Zuletzt editiert von ev0lution am 21.03.2013 um 21:18 Uhr (1x Editiert)
Inaktiv
|
digga
Thread-Ersteller


Wannabe poster





Beiträge: 36
 # Antwort: 14 - 21.03.2013 um 21:35 Uhr
Super hat geklappt Ich danke dir!Das hätte ich niemals hinbekommen . Nur ist es jetzt so. Wenn man die Seite neu lädt bis neu aufmacht erscheinen die Buttons im Hover Stil und erst wenn man drüber geht werde sie normal angezeigt?!


------------------
Inaktiv
|
ev0lution


Geekboy





Beiträge: 1103
 # Antwort: 15 - 21.03.2013 um 21:43 Uhr
der bild link im img part verweist aber auf das nicht hover bild ja?

du gibts bei den links eine div class an "footer_social". was steht in der drin ?


------------------
Inaktiv
|
digga
Thread-Ersteller


Wannabe poster





Beiträge: 36
 # Antwort: 16 - 21.03.2013 um 21:54 Uhr
Ok hab den Fehler dan dir gefunden. Der IMG Part war doch auf den hover gesetzt XD Dank dir

Aber wie bekomm ich das jetzt hin das der Link in einem neuen Fenster geöffnet wird? Wenn du mir das noch verraten kannst wäre das Top


------------------


Zuletzt editiert von digga am 21.03.2013 um 22:04 Uhr (1x Editiert)
Inaktiv
|
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 17 - 21.03.2013 um 22:28 Uhr
 
1.
1. / 2. / ... 
  target="self"


Aber ich würde die Bilder anders einbinden.
Musste halt nur deine Werte einsetzen.

HTML:
 
1.
1. / 2. / ... 
 <div id="facebook"><a href="http://de-de.facebook.com" target="self"></a></div>


CSS:
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
1. / 2. / ... 
 #facebook a {
  background: url(Bilder/facebook.png);
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 5px;
}

#facebook a:hover {
  background: url(Bilder/facebook_hover.png);
}


------------------


www.iv-gaming.de | www.iv-artwork.de

Zuletzt editiert von Tress13 am 21.03.2013 um 22:34 Uhr (1x Editiert)
Inaktiv
|
ev0lution


Geekboy





Beiträge: 1103
 # Antwort: 18 - 21.03.2013 um 23:05 Uhr
neues fenster ist nicht self sondern target ="_blank"


------------------
Inaktiv
|
digga
Thread-Ersteller


Wannabe poster





Beiträge: 36
 # Antwort: 19 - 21.03.2013 um 23:54 Uhr
Super ich danke euch klappt jetzt alles. Tress, deine Version werde ich morgen mal probieren!Gibt es da einen Unterschied zu der HTML Variante?


------------------
Inaktiv
|
ev0lution


Geekboy





Beiträge: 1103
 # Antwort: 20 - 22.03.2013 um 00:00 Uhr
21.03.2013 um 23:54 Uhr - digga:
Super ich danke euch klappt jetzt alles. Tress, deine Version werde ich morgen mal probieren!Gibt es da einen Unterschied zu der HTML Variante?


das über css einzubinden ist besser wegen ladezeiten und schlankeren code etc.
vom effekt genau das gleiche.


------------------
Inaktiv
|
Antworten: 26
Seite [1] 2 >


Sie müssen sich registrieren, um zu antworten.