links

Arne

wer weiß ob man links auch durchgestrichen darstellen kann wenn man mit der maus drüber geht?

Taz

Hi,
kein Problem smile

a:hover {
text-decoration: line-through;
}

So wird der Link Durchgestrichen dargestellt bei on mouse-over breites Grinsen

Arne

he danke taz,

ich hab auf strike spekuliert und ging mal wieder nicht. smile

mfg arne

na-ich

Hiho Taz,

sag mal wie machst du dieses Mouseover in deiner Navigation? (das der hintergrund dann weiss wird...

Bin nicht schlau daraus geworden...
könntest du mir des an dieser tabelle zeigen ? *Fleh* an besten mit ner grafik als hintergrund (mousoverefekt)

Dat wäre super...

code:
1: 2: 3: 4: 5:	<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%"> <tr> <td width="100%"> </td> </tr> </table>

Greetz

Arne

hallo,

guck mal in der style nach class=a nach.

mfg arne

nobody08

Ich kann natürlich nicht für das Beispiel von Taz antworten, aber allgemein kann man das mit CSS sehr einfach.

code:
1: 2: 3: 4: 5: 6: 7: 8:	<style type="text/css"> <!-- a.menu:hover{ background: url("bildurl.gif"); width: 100%; } --> </style>

So wird einfach bei allen Links die du so (unten) angibst bei einem Rollover das Bild angegeben und die ganze Spalte damit ausgefüllt.

Die Links so angeben:

code:
1:	<a href="Zielurl" class="menu">Link</a>

Das wäre ein beispiel für Menulinks. Ich nehme mal an, du kennst dich mit classes aus, ansonsten kann ich es noch genauer erklären.

Gruss

Taz

Zitat:

Original von na-ich
Hiho Taz,

sag mal wie machst du dieses Mouseover in deiner Navigation? (das der hintergrund dann weiss wird...

Bin nicht schlau daraus geworden...
könntest du mir des an dieser tabelle zeigen ? *Fleh* an besten mit ner grafik als hintergrund (mousoverefekt)

Dat wäre super...

code:

1: 2: 3: 4: 5:

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%"> <tr> <td width="100%"> </td> </tr> </table>

Greetz

Na klar kein Problem, hier mal ein Beispiel: smile

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:

<style type="text/css">
<!--
#NavBlock a:link, a:visited, a:active {
	display: block;
	padding: 1px;
	background-image: url(http://www.ehmig.net/gfx/hintergrundbilder/hellgrau/029.jpg);
	background-repeat: repeat;
	background-color: #F3F3F3;
	color: #000066;
	text-decoration: none;
	font-weight: bold;
}
#NavBlock a:hover {
	display: block;
	padding: 1px;
	background-image: url(http://www.ehmig.net/gfx/hintergrundbilder/hellgrau/030.jpg);
	background-repeat: repeat;
	background-color: #FFFFFF;
	color: #FF0000;
	text-decoration: none;
	font-weight: bold;
}
-->
</style>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" id="NavBlock">
  <tr>
    <td><a href="http://www.ehmig.net" target="_blank">Ein Link</a></td>
  </tr>
</table>

na-ich

Zitat:

Nu habsch des so...so brauch ich des...des funzt aber leider nicht da der den text an sich nich für voll nimmt Traurig

kann man nich <td class="NavBlock"></td> Schreiben? ..hmm kann man nich...habs probiert *grummel* wisst ihr vielleicht noch was?

nobody08

ich glaub nicht, dass man :hover für etwas anderes als die Links gebrauchen kann. Finde ich auch schade.
Um einen Rollover-effekt für <td>s zu machen gibt es ein Java-Script. Ich kann des morgen mal posten, hab grad keine Zeit.

Taz

Zitat:

Original von na-ich
Nu habsch des so...so brauch ich des...des funzt aber leider nicht da der den text an sich nich für voll nimmt

kann man nich <td class="NavBlock"></td> Schreiben? ..hmm kann man nich...habs probiert *grummel* wisst ihr vielleicht noch was?

So funktioniert es:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

<style type="text/css">
<!--
#NavBlock td {
padding: 1px;
background-image: url('http://www.ehmig.net/gfx/hintergrundbilder/hellgrau/029.jpg');
background-color: #F3F3F3;
color: #000066;
text-decoration: none;
font-weight: bold
}
#NavBlock td:hover {
padding: 1px;
background-image: url('http://www.ehmig.net/gfx/hintergrundbilder/hellgrau/030.jpg');
background-color: #FFFFFF;
color: #FF0000;
text-decoration: none;
font-weight: bold
}
-->
</style>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" id="NavBlock">
<tr>
<td>huhu&nbsp;<a href="http://www.ehmig.net" target="_blank">Ein Link</a></td>
</tr>
</table>

Habe folgendes dazu im www gefunden:

Zitat:

Normaler Weise wird :hover für Hyperlinks eingesetzt, laut der W3C-Spezifikation ist diese Eigenschaft aber für alle Elemente zugelassen.

Alles schön und gut, mit Firefox, Opera, Netscape funktioniert das tadellos Super :-)

Aber, da gibt es noch so einen komischen Browser der sich Internet Explorer nennt vom Billy, bei dem Browser funktioniert das ganze natürlich nicht, obwohl es laut W3C-Spezifikation zulässig ist Verärgert / Aufgeregt

na-ich

Zitat:

Original von nobody08
ich glaub nicht, dass man :hover für etwas anderes als die Links gebrauchen kann. Finde ich auch schade.
Um einen Rollover-effekt für <td>s zu machen gibt es ein Java-Script. Ich kann des morgen mal posten, hab grad keine Zeit.

Ne lass mal Gutsein...in meiner geplanten Navigation will ich kein Javascript mhhh.... ???

Aber dank dir trotzdem für den Vorschlag.

Zitat:

Alles schön und gut, mit Firefox, Opera, Netscape funktioniert das tadellos
Aber, da gibt es noch so einen komischen Browser der sich Internet Explorer nennt vom Billy, bei dem Browser funktioniert das ganze natürlich nicht, obwohl es laut W3C-Spezifikation zulässig ist .

Dat is ja mal blöd... stark weinen

Seit wann können diese Browser besser darstellen als mein guter alter löschriger IE *schnüff*

Danke für den Code@Taz...mal sehn was ich nu mache...vielleicht entferne ich halt doch den Text mhhh.... ???

Greetz

Edit: ok, ich nehm Taz sein ersten Code...kann ja das wort mit in den Link einbinden, da ich eh textdeco auf none hab.

thx...

na-ich

so nu habsch des wie Taz gesagt hat gemacht...ich bin aber kurz vorm verzweifeln...geht ja alles wunderbar, aber 2 stellen funzen einfach nicht...obwohl da nix anderes da ist.. Mit dem Kopf vor die Wand stoßen

( im IE oder opera sieht man des am besten)

Bild 1: hintergrund hört einfach auf....is aba der gleiche Code wie drüber und mouseover funzt auch.

Bild 2: hintergrund geht zu weit nach links...wieso? is doch der gleiche code wie drüber und drunter...

Edit: (.....)

Taz

also zu bild 2:
Deine Hintergrundgrafiken sind nicht gleich!
Dadurch entsteht dieser komische effekt.
Ich habe dir hier mal deine beiden Hintergrundgrafiken in ein bild mit einem Raster gemacht, zur bessern Veranschaulichung smile

(s.b)

Zu bild2:
Also der Fehler tritt bei mit momentan nicht auf mit Opera, Netscape IE6, Firefox

na-ich

Danke Danke Danke

lag auch bissle an der Cache...da waren die ersten fehler beseitigt...warum auch immer crazy

Grafik is nu auch angepasst.

Thx

nobody08

@na-ich
Darf ich noch einen winzigen Tip abgeben? breites Grinsen

Ich finde es ein wenig komisch, dass:
Wenn man über einen Link fährt, bekommt die ganze Zeile einen anderen Hintergrund, wenn man aber über die Zelle fährt aber nicht über den Link, passiert nichts.
Ich habe das bei mir so gemacht:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:

#NavBlock a:hover {
width: 100%;
padding: 1px;
background-image: url('http://www.ehmig.net/gfx/hintergrundbilder/hellgrau/030.jpg');
background-color: #FFFFFF;
color: #FF0000;
text-decoration: none;
font-weight: bold
}

Nun habe ich Zeile 2 ein wenig verändert.
Jetzt wird der BG auch gewechselt, wenn man über eine Setelle der Tabelle fährt, wo grad kein Link(Text) drunter ist.
Hoffentlich verständlich...

Gruss

na-ich

öhm...ok...aber wie kann die tabelle den hover effekt haben wenn du nen link deklarierst? ( a.NavBlock )

egal...funzt schon so wie ich des haben wollte ( GratisTempel )

Hihi, diesmal funzt des sogar mit allen gängigen Browsern ohne irgendwelche darstellungsunterschiede, wie verschobene Tabellen oder ähnliche Scherze...

Greetz

nobody08

oh, da meinte ich wahrscheinlich die Zeile...
Ein Beispiel: meine Page
Schau dort mal die Navigation an. Dort wird grad der ganzen <td> eine neue BG-Farbe gegeben, wenn man schon nur auf die Zeile mit dem Link kommt, da der Link mit "width: 100%" die ganze Breite ausfüllt. Bei dir muss man immer zuerst über den Text fahren, damit der BG wechselt.

Aber du musst es wissen, ob du es so lassen willst, wi du es jetzt hast.

Gruss

na-ich

Jo, das mag sein, ich kann aber auf deiner Page den Mouseover wo kein link ist auch net anschauen weil ich mit dem löschrigen IE unterwegs bin Fröhlich

und dieses feature nur in den alternativen Browsern funzt...deswegen hab ich im endefekt drauf verzichtet, weil GT in allen Browsern gleich auschauen soll...

Das hatten wir auch schon: guggei hier

nobody08

??? bei mir gehts ganz gut mitm IE... verwirrt

Und dein Link geht nur beinahe... Augenzwinkern

na-ich

höö? mach maln screen plz Augenzwinkern

...und was geht nur beinahe bei mir???

nächste Seite

Forensoftware: Burning Board, entwickelt von WoltLab GmbH