nicht angemeldet
Wie kann ich einen text IN einem link verschieben????
Hallo harry (oder andere die helfen wollen),
ich möcht dass sich der text "link" in einem link um ein zentimeter oder so nach rechts verschiebt so:
normal: -->Link
mouseover oder hover:--> Link
Alles soll im link sein also auch des --> ???
wie kann ich des machen
damit:
Hallo Alex,
danke für die schnelle hilfe :)
aber.....dann ist ja nich des ganze -->Link der link sondern nur das wort "link" oder ???
Richtig
kann ich es villeicht in eine class schreiben
auch richtig.
<a href.....>--> <font.wort ....>link</font></a>
äh naja das is nicht so ganz also äh - das ist falsch.
und dass dann .wort bei hoover irgendwie verschoben wird
geht dass??? wenn ja wie?? oder villeicht ganz anders??
(nicht hoover das is'n Staubsauger sondern hover zu deutsch 'schweben') es geht so:
<style type="text/css">
a.bewegdich {padding-left:0px; width:200px; display:block; border:1px solid red}
a.bewegdich:hover{padding-left:100px;width:100px}
</style>
(der border ist nur zur Demo eingefügt, das display:block; brauchst Du sonst wird die width ignoriert)
und im body dort wo der link steht (Du kannst den Link natürlich auch in ne Tabelle setzen, aber die class für den Link muß immer im <a> tag stehen):
<a href="#" class="bewegdich">Text</a>
Grüße aus Nürnberg, HarryS
versiebe ich ja alles
bite hilf mir nchmal!!!
ALex
-
Hallo,
ich möcht dass sich der text "link" in einem link um ein zentimeter oder so nach rechts verschiebt so:
normal: -->Link
mouseover oder hover:--> Link
Alles soll im link sein also auch des --> ???
wie kann ich des machenDer Ansatz war doch gut. Du musst halt selbst ein wenig basteln. So könnte es gehen:
<html>
<head>
<title></title>
<style type="text/css">
<!--
a.flipl {text-decoration:none; color:black;}
a.flipl:hover {text-decoration:none; color:blue;}
a.flipl:hover span.flipsp {padding-left:1cm;}
-->
</style>
</head>
<body>
<a href="#" class="flipl"><span>--></span><span class="flipsp">Fliplink1</span></a><br>
<a href="#" class="flipl"><span>--></span><span class="flipsp">Fliplink1 etwas länger</span></a><br>
<a href="#" class="flipl"><span>--></span><span class="flipsp">Fllnk1</span></a>
</body>
</html>Gruß
Axel
-
Hallo,
danke!!!
Der Ansatz war doch gut. Du musst halt selbst ein wenig basteln.
wie soll ich des basteln wenn ich kein css kann
eir hast du des gemacht es funktioniert zwar aber ich hab keinen blassen schimmer wie ????
gruß
Alexps: findest du meine homepage wenigstens n bissl gut http://www.x-fighters.de.vu ??? ;)
-
Hallo,
wie soll ich des basteln wenn ich kein css kann
CSS lernen? http://selfhtml.teamone.de/css/index.htm
Ein paar Erläuterungen:
<style type="text/css">
<!--
/*CSS Definition für das a-Element der Klasse flipl*/
a.flipl {text-decoration:none; color:black;}/*CSS Definition für den Link der Klasse flipl bei hover (Maus drüber). Das wird eigentlich nur für die Kompatibilität zu MSIE5.5 benötigt. Der braucht einen Anstoss, damit er das CSS für Elemente _im_ Link interpretiert.*/
a.flipl:hover {text-decoration:none; color:blue;}/*CSS Definition für das span-Element mit der Klasse flipsp, welches sich im a-Element der Klasse flipl befindet bei hover dieses Links*/
a.flipl:hover span.flipsp {padding-left:1cm;}
-->
</style>Gruß
Axel
-
Hallo Axel,
wie soll ich des basteln wenn ich kein css kann
CSS lernen? http://selfhtml.teamone.de/css/index.htmSorry, aber wenn ich gewusst hätte daß Du mit CSS noch nicht so vertraut bist, hätte ich versucht mein Beispiel ausführlicher zu erklären.
Aber das hat ja jetzt schon Axel für mich erledigt.
Also nochmal: Bitte beschäftige Dich mit CSS man kann damit tolle Dinge relativ einfach und ohne Einsatz von Javascript machen (gehe ich recht in der Annahme daß auch JS noch nicht so Dein Ding ist?). Keine Angst CSS ist viel einfacher als JS.
Neben dem oben genannten Link der natürlich DIE Referenz ist, gibt es zu CSS noch viele gute Seiten, z.B.:
http://www.styleassistant.de/index.htm
http://bjoernsworld.de/css/grundlagen.html
http://www.fractatulum.de/fraccss/
http://aktuell.de.selfhtml.org/artikel/css/mouseover/
http://www.jan-winkler.de/hw/program/css_1.htmAlso Die Links gleich Bookmarken und dann fleißig lernen gell ;-)
Ach ja nochwas: Das Beispiel von Axel ist zwar sehr elegant, aber einen Einsteiger überfordert es vielleicht etwas.
Du kannst auch folgendes machen (finde das ist etwas übersichtlicher):
Setze die --> in die erste Tabellenspalte und die Links in die zweite Spalte.
Allerdings finde ich, sehen die --> nicht sooooo toll aus. Wie wäre es mit einer winzigen Grafik als Pfeil?OK hier nochmal ein komplettes ultraeinfaches Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bewegter Link</title><style type="text/css">
a.bewegdich {padding-left:0} /*padding-left ist der Abstand links. Im Ruhezustand ist er auf 0*/
a.bewegdich:hover{padding-left:1cm} /*bei Mouseover (hover) ist der linke Abstand 1 centimeter*/
</style></head>
<body><table>
<tr><td>--></td><td><a href="#" class="bewegdich">Erster Link</a></td></tr>
<tr><td>--></td><td><a href="#" class="bewegdich">Zweiter Link</a></td></tr>
<tr><td>--></td><td><a href="#" class="bewegdich">Dritter Link</a></td></tr>
</table></body>
</html>Viel Spaß beim experimentieren
Grüße aus Nürnberg, HarryS
-
Hallo
danke nochmal an euch beide :)
ich hab n bissl was gelesen jetzt kappier ich des mit <span>
jetzt is genau des was ich wollte da :)ich lern css versprochen
aber erst will ich php lernen und mysql n bissl
für meine homepage http://www.x-fighters.de.vu (wie findet ihr die)??gruß
Alex
-
-
-
-