0800 - SPACEQUADRAT

Html Codes kombinieren (Hover und Verlinkung)

 1 2 > 
Neuen Beitrag schreiben
nudl
User
images/default_ava.png
Beiträge: 211
Spacecoins: 238

Html Codes kombinieren (Hover,Verlinkung und Zentr...

am 10.06.2011 um 13:59 Uhr

Huhu!

Brauche nur eine kleine Hilfe von euch.
Ich habe ein Bild,ein Hover-Bild und eine Webadresse.
Nun möchte ich diese drei Sachen per Html verbinden.
Bis jetzt habe ich die Codes für ein verlinktes Bild und für einen Hover gefunden, kann diese jedoch nicht gescheit kombinieren.

Momentan sieht es bei mir so aus:

  1. <a target="_blank" href="http://forum.gw2-hq.de/index.php?page=Register"><img src="http://forum.gw2-hq.de/images/logos/registrieren.png">
  2.  

Es funktioniert zwar, aber ich glaube, dass der Code ansich ziemlich verhunzt ist, da ich ihn provisorisch zusammengebaselt habe.

Dazu kommt noch, dass ich nicht weiß, wie ich dieses Bild dann noch zentrieren kann.

Hat jemand vielleicht einen Rat für mich?

Noisy
Administrator
images/avatars/4746632aaef792af258998b9275bb885.gif
Beiträge: 3555
Spacecoins: 2374

Re: Html Codes kombinieren (Hover und Verlinkung)

am 10.06.2011 um 14:17 Uhr

Ja. Das Ganze nennt sich CSS ;)
Dein Code oben ist aber unvollständig (?).

Du nimmst den Link, weißt ihm display: block; (ggf. inline-block) zu. Danach definierst du wie hoch und breit dein Link sein soll. Das normale Bild ist das Hintergrundbild für den Link, mit der Pseudoklasse :hover wechselst du das Hintergrundbild ganz einfach beim überfahren. Das Hintergrundbild kannst du auch einfach per CSS ausrichten, wie du es benötigst.

Ähnliches kannst du oben in der Navigation finden. Ich denke das ist was du suchst?

__________________

Trashware.eu

nudl
User
images/default_ava.png
Beiträge: 211
Spacecoins: 238

Re: Html Codes kombinieren (Hover und Verlinkung)

am 10.06.2011 um 14:24 Uhr

Ich denke schon, nur weiß ich grad nicht, wie das dann als Css-Code aussehen soll.

Danach definierst du wie hoch und breit dein Link sein soll

Du meinst wahrscheinlich Bild, oder?

Grüße

s-ma
User
images/avatars/dc112ae61d84a82d0c5c18f0a196af80.png
Beiträge: 774
Spacecoins: 857

Re: Html Codes kombinieren (Hover und Verlinkung)

am 10.06.2011 um 14:58 Uhr

Altmodisch wäre es mit CSS möglich:

<style type="text/css">
<!--
a.ho {
text-align:center;
background-image:url(http://forum.gw2-hq.de/images/logos/registrieren.png);
}
a.ho:hover[ text-align:center;
background-image:url(http://forum.gw2-hq.de/images/logos/registrieren_hover.png);
}
-->
</style>

<a class="ho" target="_blank" href="http://forum.gw2-hq.de/index.php?page=Register"></a>

Ist jetzt ungetestet sollte aber passen :P

Ganz schön wäre es mit js bzw. onmouseover() zu realisieren :P

Noisy
Administrator
images/avatars/4746632aaef792af258998b9275bb885.gif
Beiträge: 3555
Spacecoins: 2374

Re: Html Codes kombinieren (Hover und Verlinkung)

am 10.06.2011 um 15:15 Uhr

Wie kommst du den zu der Aussage? Altmodisch wäre der JS Variante, CSS die wesentlich bessere Lösung.

In deinem Beispiel muss der Link noch in Ein (Inline-)Block Element umgewandelt werden, auf Grund dessen ist dann auch die Zuweisung ein größer nötig. Ist der Link nämlich leer, wir nichts angezeigt...

PS: text-align: center; wirkt sich nicht auf die Ausrichtung des Hintergrundbildes aus, ich habe es so verstanden, dass dieses ausgerichtet werden soll und das geht nun mal ob man es glauben mag oder nicht über background-position:

__________________

Trashware.eu

nudl
User
images/default_ava.png
Beiträge: 211
Spacecoins: 238

Re: Html Codes kombinieren (Hover und Verlinkung)

am 10.06.2011 um 18:09 Uhr

@Sven

Bin grad ein wenig verwirrt.
Was von diesem Code muss ich nun als Html angeben und was als Css?
Da ist doch beides vermischt oder?

Ihr müsst verstehe, habe im Prinzip kaum/gar keine Ahnung davon.
Ich habe hier in meinem Woltlab-Forum eine Box, in der ich Html-Codes eingeben kann und einen Css-Editor.

Grüße

ibirne
User
images/avatars/30393c07d160a5b36a9e1e4c2539b924.png
Beiträge: 174
Spacecoins: 187

Re: Html Codes kombinieren (Hover und Verlinkung)

am 11.06.2011 um 08:44 Uhr

@nudl

Der CSS-Teil kommt in den <head>-Bereich deines HTML Dokumentes.
in (fast) jedem HTML Dokument wird man folgende HTML Codes finden.

  3. <title> Hier steht dann der Titel der Seite </title>
  4.  
  5.  
  6. <style type="text/css">
  7.   <!--
  8.    a.ho {
  9.       text-align:center;
  10.       background-image:url(http://forum.gw2-hq.de/images/logos/registrieren.png);
  11.       }
  12.      a.ho:hover[ text-align:center;
  13.       background-image:url(http://forum.gw2-hq.de/images/logos/registrieren_hover.png);
  14.       }
  15.    -->
  16.  </style>
  17.     <!-- Füge denn CSS-Code ein bevor der <head> wieder geschlossen wird. So wie hier zu sehen direkt vor dem </head> -->
  18.  
  19.  </head>
  20. </head>
  22.  
  23.  <!-- Hier stehen dann die eigentlichen Seiteninhalte, hier ist dann dein Link auch irgendwo zu finden. -->
  24.     <a class="ho" target="_blank" href="http://forum.gw2-hq.de/index.php?page=Register"></a>
  25.  
  26. </body>
  27. </html>

__________________

iBirne.de - Die Community für iPhone, iPad & iPod touch

nudl
User
images/default_ava.png
Beiträge: 211
Spacecoins: 238

Re: Html Codes kombinieren (Hover und Verlinkung)

am 11.06.2011 um 20:01 Uhr

Schonmal danke für die Antworten!

Nur zum Verständnis:

So sehen meine beiden Boxen aus, die ich zur Verfügung habe:

http://www.abload.de/thumb/unbenanntvfgc.jpg http://www.abload.de/thumb/unbenannt25hai.jpg

Ich steh grad nur vor dem Problem, was du mit Head-Bereich meinst, da ich ja einfach nur zwei Boxen habe, die momentan noch leer sind. :\

Grüße

Noisy
Administrator
images/avatars/4746632aaef792af258998b9275bb885.gif
Beiträge: 3555
Spacecoins: 2374

Re: Html Codes kombinieren (Hover und Verlinkung)

am 12.06.2011 um 00:45 Uhr 

  1. a.ho {
  2. text-align:center;
  3. background-image:url(http://forum.gw2-hq.de/images/logos/registrieren.png);
  4. }
  5. a.ho:hover{ text-align:center;
  6. background-image:url(http://forum.gw2-hq.de/images/logos/registrieren_hover.png);
  7. }

Kommt in den CSS Teil.

Und 

  1. <!-- Hier stehen dann die eigentlichen Seiteninhalte, hier ist dann dein Link auch irgendwo zu finden. -->
  2. <a class="ho" target="_blank" href="http://forum.gw2-hq.de/index.php?page=Register"></a>

kannst du in den HTML Teil eintragen, dann einfach mal gucken was passiert, ggf. auch mal einen Link zum Forum posten, damit wir uns den IST-Zustand ansehen können, anschließend ein Bild oder genaue Beschreibung wie es werden soll. Dann können wir bestmöglich helfen.

__________________

Trashware.eu

nudl
User
images/default_ava.png
Beiträge: 211
Spacecoins: 238

Re: Html Codes kombinieren (Hover und Verlinkung)

am 12.06.2011 um 00:55 Uhr

Huhu!

Wenn ich dies genauso eintrage sieht es so aus:

http://www.abload.de/img/unbenannthpf4.jpg

Habe die Box, in der die Grafik dann erscheinen soll Rot markiert.
Wie die Box aussieht, wenn sie ausgefüllt ist, kann man darüber erkennen (Buttons).

Grüße

 1 2 >