Ich bin am umbauen!

HTML

hey wie gehts?

CSS

hey wie gehts?
hey wie gehts?

Linkstyling

Normaler Link

<a href="URL">LINKNAME</a>

Link in einem neuen Tab (Fenster)

<a href="URL" target="_new">LiNKNAME</a>

Link-Buttons

Link öffnet im gleichen Fenster:

<input type="button" value="BUTTON-TITEL" onclick="location='URL'">

Link öffnet in einem neuen Fenster:

<input type="button" value="BUTTON-TITEL" onClick="popup=window.open('URL')">

Popup Generator

Linkstyling Erklärung

</p>
<style type="text/css"><!--

a:link{font-family: times new roman;font-size: 10px;color:#000000;text-transform:uppercase;text-shadow:black 3px 3px 1px;}
a:visited{color:#000000;}
a:active{color:#000000;}
a:hover{color:#000000;background: url(URL);font-style:italic;text-decoration:underline;}
--></style>
<p>

a:link = wie der Link im 'Normalzustand' aussieht
(a:visited = für Verweise zu bereits besuchten Seiten [eher unwichtig])
a:hover = der Effekt des Links, wenn der Anwender mit der Maus herüberfährt
a:active = der Effekt des Links, wenn man den link angeklickt hat

IHR WOLLT EIN EIGENES LINKSTYLING ERSTELLEN?

eine ausführliche Erklärung für die einzelnen Elemente (font-size,text-decoration,font-style... etc.) bekommt ihr unter

http://de.selfhtml.org/css/eigenschaften/schrift.htm

Linkstylings

normal (farben beliebig änderbar)
normal (farben beliebig änderbar)
berührung der maus: schatten, unterstrichen, lücke zwischen buchstaben
berührung der maus: schatten, unterstrichen, lücke zwischen buchstaben

 

 

 

 

 

 

<style type="text/css"><style>td, font, p, a, i {color:#000000 ; font-family: verdana ; font-size:8pt; word-spacing: 1pt; letter-spacing: -1; text-decoration:cursor: help ;}</style><style type="text/css"><!--
s {color:#CD8C95; font-size: 8pt;}
b {color:#CD8C95; font-family:tahoma;font-size:10pt;lette r-spacing:0px}
u {color:#000000; border-bottom: 0px dotted;}
i {color:#000000; border-bottom: 0px dashed;}
a:hover, b:hover {text-shadow:#EE30A7 0px 0px 7px;text-decoration:;letter-spacing: 3px; border-bottom: dashed 1px #ffffff !important;}
--></style>

normal
normal
wenn man mit der Maus draufkommt
wenn man mit der Maus draufkommt

 

 

 

 

 

 

 

<style>td, font, p, a, i {color:#000000 ; font-family: verdana ; font-size:8pt; word-spacing: 1pt; letter-spacing: -1; text-decoration:cursor: help ;}</style><style type="text/css"><!--
s {color:#CD8C95; font-size: 10pt;}
b {color:#CD8C95; font-family:verdana;font-size:10pt;lette r-spacing:-2px}
u {color:#000000; border-bottom: 0px dotted;}
i {color:#000000; border-bottom: 0px dashed;}
a:hover, b:hover {color:black;text-shadow:#EE6AA7 0px 0px 7px;text-decoration:underline: color: !important;}
--></style>

Farben wieder bei ,,Textfarbe'' heraussuchen
Farben wieder bei ,,Textfarbe'' heraussuchen
bei Berührung mit der Maus
bei Berührung mit der Maus

in dem Linkstyling befindet sich auch Makier+Rechtsklick-Schutz

 

<style>td, font, p, a, i {color: ; font-family: verdana ; font-size:9pt; word-spacing: 1pt; letter-spacing: -1; text-decoration:cursor: help ;}</style><style type="text/css"><!--
s {color:#; font-size: 12pt;}
b {color:#; font-family:verdana;font-size:9pt;lette r-spacing:-1px}
u {color:#; border-bottom: 0px dotted;}
i {color:#; border-bottom: 0px dashed;}
<style type="text/css"> <!-- a:link { color: #; cursor:help; text-decoration: none} a:visited { color: #; cursor:default; text-decoration: none } a:active { color: # cursor:help; text-decoration: none} a:hover {color: #ffffff; cursor:; dotted; border-bottom: dashed 1px #ffffff;}
<style type="text/css"><!--
/*No Select by sienc*/
::-moz-selection{background: #; color: #;}
--></style><body oncontextmenu="return false">
</style>

 

 

 

 

 

 

 

 

 

 

<style mce_bogus="1">td, font, p, a, i {color: ; font-family: verdana; font-size:8pt; word-spacing: 1pt; letter-spacing: -1; text-decoration: none ; text-shadow:green 3px 3px 1px;}
</style>

Das Linkstyling hat die Farbe, die ihr oben Auswählt bei

,,Textfarbe''

 

<style>td, font, p, a, i {color: ; font-family: verdana ; font-size:9pt; word-spacing: 1pt; letter-spacing: -1; text-decoration:cursor: help ;}</style><style type="text/css"><!--
s {color:#; font-size: 10pt;}
b {color:#; font-family:verdana;font-size:9pt;lette r-spacing:-1px}
u {color:#; border-bottom: 0px dotted;}
i {color:#; border-bottom: 0px dashed;}
--></style>

 

 

 

 

 

 

 

 

<style>td, font, p, a, i {color: ; font-family: tahoma ; font-size:10pt; word-spacing: 1pt; letter-spacing: -1; text-decoration:cursor: help ;}</style><style type="text/css"><!--s {color:#000000; font-size: 10pt;} b {color:#000000; font-family:georgia;font-size:14pt;lette r-spacing:-1px ;text-shadow:#ffffff 2px 1px 7px} u {color:#000000; border-bottom: 0px dotted;} i {color:#000000; border-bottom: 0px dashed;} body {border:60px #000 solid} body {cursor:;}::-moz-selection{background: #; color:#;}--></style>

normal
normal
Berührung mit Maus (leuchtet Dunkelrot)
Berührung mit Maus (leuchtet Dunkelrot)

 

 

 

 

 

 

 

<style>td, font, p, a, i {color: ; font-family: verdana ; font-size:9pt; word-spacing: 1pt; letter-spacing: -1; text-decoration:cursor: help ;}</style><style type="text/css"><!--
s {color:#ffffff; font-size: 10pt;}
b {color:#ffffff; font-family:verdana;font-size:9pt;lette r-spacing:-1px}
u {color:#000000; border-bottom: 0px dotted;}
i {color:#000000; border-bottom: 0px dashed;}
a:hover, b:hover {color:black;text-shadow:#EE1289 0px 0px 7px;text-decoration:underline: color: !important;}
--></style>

<style mce_bogus="1">td, font, p, a, i {color: ; font-
family: tahoma; font-size:8pt; word-spacing: 1pt; letter-
spacing: 0; text-decoration: none ; text-shadow:purple 0px
3px 8px;}</style><table width=600 border=0 noborder
cellpadding=0 cellspacing=0><tr><td><font
face="Verdana,Geneva,Arial,Helvetica" size=2><center><div
style="BORDER: #000000 0px solid; HEIGHT: auto; WIDTH:
650px;background:url(http://s7.directu pload.net/images/10070
6/3a4efmgs.png); TEXT-ALIGN: center; OVERFLOW:
auto"><style type="text/css"><!--
s {color:#; font-size: 8pt;}
b {color:#FF1493; font-family:Georgia;font-size:13pt; font-weight: normal;text-shadow:#FF1493 2px 2px 7px;}
u {color:#FF1493; font-family: Tahoma; font-size: 8pt; text-decoration: none; letter-spacing: 2; font-weight: bold;}
i {color:#FF1493; font-family: tahoma; font-size: 8pt;}--></style>

<style type="text/css"><!--

/*Linkstyle designed by sienc*/

font, table, p, td {
color:white;
font-family:century gothic;
font-size:13px;
text-shadow:black 1px 1px 1px;
}

 

a:link, b {color:#6eb0c9;text-decoration:none;font-size:24px;font-weight:bold;font-variant:small-caps;font-family:georgia;}
a:visited {color:white;}
a:active {color:white;}
a:hover, b:hover {color:white;text-shadow:#138fbd 0px 0px 7px;text-decoration:underline !important;}
--></style>

<style type="text/css"><!--

/*Linkstyle designed by sienc*/

font, td, table {text-shadow:black 1px 0px 1px;font-family:verdana;color:#7F7F7F;}

b{font-family: georgia;font-size: 18px;color:#43CD80;font-style:italic;text-shadow:black 1px 0px 1px;}

a:link{font-family: georgia;font-size: 18px;color:#43CD80;font-style:italic;text-shadow:black 1px 0px 1px;!important}
a:visited{color:#4EEE94;}
a:active{color:#4EEE94;}
a:hover, b:hover{color:#54FF9F;}
--></style>

<style type="text/css">
<!--
s {color:#; font-size: 12pt;}
b {color:#1C86EE; font-family: Garamond; font-size: 17pt;background-image:url('http://s2.imgimg.de/uploads/2vaf3up2b5ab372jpg.jpg'); text-decoration: none; letter-spacing: 0;}
i {color:#1C86EE; font-family: Verdana; font-size: 14pt;}--></style>

<style>td, font, p, a, i {color: ; font-family:  Tahoma; font-size:12; line-height:8pt; word-spacing: 1pt; letter-spacing: 1pt}</style>
<!-- a:link { color: #1C86EE; cursor:default; text-decoration: none} a:visited { color: #1C86EE; cursor:default; text-decoration: none  } a:active { color: #1C86EE; cursor:default; text-decoration: none} a:hover {color: #1C86EE; cursor:help;}--></style>
<style type="text/css">
<!--
s {color:#1C86EE; font-size: 10pt;}
b {color:#1C86EE; text-decoration: none ;}
u {color:#1C86EE; border-bottom: 1px solid; height:0; }
i {color:#1C86EE; border-bottom: 1px dotted; height:6; }
--></style>

<table width=600 border=0 noborder cellpadding=0 cellspacing=0><tr><td><font face="Arial,Helvetica" size=2><style>td, font, p, a, i {font-family: Arial; font-size:12; line-height:8pt; word-spacing: 1pt; letter-spacing: 1pt}</style><table width=600 border=0 noborder cellpadding=0 cellspacing=0><tr><td><font face="Verdana,Geneva,Arial,Helvetica" size=2><style type="text/css"><br /><br><!--s {color:1C86EE; font-size: 15pt;} b {color:1C86EE; text-decoration: none ;} u {color:1C86EE; border-bottom: 1px dotted; height:0; } i {color:1C86EE; border-bottom: 2px dashed; height:6; }--> </style><br /><br><br><style type="text/css"> <!-- a:link { color: #1C86EE; cursor:help; text-decoration: none} a:visited { color: #1C86EE; cursor:default; text-decoration: none } a:active { color: #1C86EE cursor:help; text-decoration: none} a:hover {color: #1C86EE; cursor:help; dotted; border-bottom: dashed 3px #1C86EE;}--> </style>

<style>td, font, p, a, i {font-family: tahoma; font-size:10; line-height:10pt; word-spacing: 1pt; letter-spacing: 1pt; text-transform: uppercase}</style><style>td, font, p, a, i {color: #; font-family: tahoma; font-size:10; line-height:9pt; word-spacing: -1pt; letter-spacing: 1pt}</style><style type="text/css">A:link { text-decoration: none;}A:hover;}<br /></style></font></td></tr></table><br /><style type="text/css">A:link { text-decoration: none;}A:hover { background: url(http://unreachable.pytalhost.de/HGS/Hintergrund46.jpg);}<br /><br><br></style>

<style>td, font, p, a, i {font-family: tahoma; font-size:10; line-height:10pt; word-spacing: 1pt; letter-spacing: 1pt; text-transform: uppercase}</style><style>td, font, p, a, i {color: #; font-family: tahoma; font-size:10; line-height:9pt; word-spacing: -1pt; letter-spacing: 1pt}</style><style type="text/css">A:link { text-decoration: none;}A:hover;}<br /></style></font></td></tr></table><br /><style type="text/css">A:link { text-decoration: none;}A:hover { background: url(http://unreachable.pytalhost.de/HGS/Hintergrund50.jpg);}<br /><br><br></style>

 

bei background: url(http://... kann ein eigener Hg eingefügt werden.

 

 

Linkstyle 1
Linkstyle 1
Codes keonnt ihr wieder individuell gestalten (Farbe: FARBTABELLE,Groeße ,Rand...)

</p>
<style type="text/css"><!--A:link {color: #ffffff;}A:hover { background: url(http://i63.photobucket.com/albums/h122/freeglitters/linkhovers/13.gif);}--></style>
<style>td, font, p, a, i {font-family:small fonts; font-size:6pt; text-transform:uppercase}</style>
<style type="text/css"><!--
s {color:#ffffff;}
b {color:#FF6A6A; text-decoration: none ;}
u {color:#ffffff; border-bottom: 2px solid #DC143C;}
i {color:#ffffff; border-bottom: 1px dashed #FF0000;}
--></style>
<p><body onselectstart="return false"><br />
<body oncontextmenu="return false"><br />
</span>

</p>
<table width=600 border=0 noborder cellpadding=0 cellspacing=0>
<tr>
<td><font face="Verdana,Geneva,Arial,Helvetica" size=2><br />
<style>td, font, p, a, i {font-family: Lucida Sans Unicode; font-size:14; text-transform: uppercase; line-height:10pt; word-spacing: 1pt; letter-spacing: 0pt}</style>
<style type="text/css"><!--s {color:#000000; font-size: 15pt;}b {color:#000000; font-family: georgia; font-size: 15pt; text-decoration: none; letter-spacing: -2;}i{color:#000000; font-family: georgia; font-size: 10pt; text-decoration: italic;}img.pic2{border:1px #000000 dashed;}
.eva{font-family: Verdana; background-image:url display: block; font-size: 9pt; color:#000000; line-height:12px; text-decoration: none; margin-bottom: 1px; margin-right: 0px; text-align: center; letter-spacing: 1px; font-weight: normal; border-bottom: 1px solid #000000;}--></style>
<p><body oncontextmenu="return false"><body onselectstart="return false"><br />
</span>

</p>
<style>td, font, p, a, i {color: ; font-family: tahoma; font-size:10; line-height:8pt; word-spacing: 1pt; letter-spacing: 1pt}</style>
<p><!-- a:link { color: #00EE76; cursor:Default; text-decoration: none} a:visited { color: #00EE76; cursor:Default; text-decoration: none } a:active { color: ;#00EE76; cursor:Default; text-decoration: none} a:hover {color: ;#FFFFFF; cursor:help;;}--> </style>
<style type="text/css">
<p><!--
s {color:#00EE76; font-size: 15pt;}
b {color:#00EE76; text-decoration: none ;}
u {color:#00EE76; border-bottom: 1px dotted; height:0; }
i {color:##00EE76; border-bottom: 2px dashed; height:6; }
--> </p>
<p></style>
<p></span>

</p>
<style type="text/css"><!--a:link{color:#EE82EE;}a:visited{color:#EE82EE;}a:active{color:#EE82EE;}a:hover{color:#EE82EE;text-decoration:none;border:1px dotted;}--></style>
<p>

</p>
<style type="text/css"><!--a:link{color:#EE82EE;}a:visited{color:#EE82EE;}
a:active{color:#EE82EE;}a:hover{color:#EE82EE;
text-decoration:none;border:2px dashed;}--></style>
<p>

</p>
<style type="text/css"><!--a:link{color:#EE82EE;}a:visited{color:#EE82EE;}
a:active{color:#EE82EE;}a:hover{color:#EE82EE;
text-decoration:none;border:5px solid;}--></style>
<p>

</p>
<style type="text/css"><!--a:link{color:#EE82EE;}a:visited{color:#EE82EE;}a:active{color:#EE82EE;}a:hover{color:#FFFFFF; background-color:#EE82EE; text-decoration:none; font-family:Tahoma; font-size:10pt;}--></style>
<p>


<tr>
<td><font face="Verdana,Geneva,Arial,Helvetica" size=2><br />
<style type="text/css"><!--A:link {color: #000000; }A:hover { background: url(http://8gnm594g.multipic.de/anigif.gif) ;border:1px dotted; text-transform: uppercase}--></style>
<style>td, font, p, a, i {font-family: small fonts; font-size:7; line-height:10pt; word-spacing: 1pt; letter-spacing: 0pt}</style>
<style type="text/css"><!--s {color:#000000; font-size: 6pt;}b {color:#000000; font-family: small fonts; font-size: 21pt; LETTER-SPACING: 3pt; text-decoration: background-image:url(http://s289.photobucket.com/albums/ll235/Temasche/th_ASsfmSKnsdklg.gif); letter-spacing: -2;}i{color:#000000; font-family: georgia; font-size: 6pt; text-decoration: italic;}img.pic2{border:1px #000000 dashed;}
.eva{font-family: Verdana; background-image:url display: block; font-size: 6pt; color:#000000; line-height:12px; text-decoration: none; margin-bottom: 1px; margin-right: 0px; text-align: center; letter-spacing: 1px; font-weight: normal; border-bottom: 1px solid #000000;}--></style>

</p>
<style type="text/css"><!--A:link {color: #ffffff;}A:hover { background: url(http://i63.photobucket.com/albums/h122/freeglitters/linkhovers/13.gif);}--></style>
<style>td, font, p, a, i {font-family:small fonts; font-size:7pt; text-transform:uppercase}</style>
<style type="text/css"><!--
s {color:#ffffff;}
b {color:#EE2C2C; text-decoration: none ;}
u {color:#ffffff; border-bottom: 2px solid #DC143C;}
i {color:#ffffff; border-bottom: 1px dashed #FF0000;}
--></style>
<p><body onselectstart="return false"><br />
<body oncontextmenu="return false"><br />
</span>

</p>
<table width=600 border=0 noborder cellpadding=0 cellspacing=0>
<br />
<style type="text/css"><!--body{border: 20px #000000 solid}--></style>
<p>
<tr>
<td><font face="Verdana,Geneva,Arial,Helvetica" size=2><br />
<style type="text/css"><!--A:link {color: #000000; text-transform: uppercase }A:hover { background: url('http://dl10.glitter-graphics.net/pub/590/590940trx4idmwj8.gif'); border:1px dotted; text-transform: lowercase}--></style>
<style>td, font, p, a, i {font-family: georgia; font-size:10; line-height:9pt; word-spacing: 1pt; letter-spacing: 0pt}</style>
<style type="text/css"><!--s {color:#000000; font-size: 6pt;}b {color:#000000; font-family: small fonts; font-size: 16pt; LETTER-SPACING: 3pt; text-decoration: background-image:url(http://s289.photobucket.com/albums/ll235/Temasche/th_ASsfmSKnsdklg.gif); letter-spacing: -2;}i{color:#000000; font-family: georgia; font-size: 6pt; text-decoration: uppercase; italic;}img.pic2{border:1px #000000 dashed;}
.eva{font-family: Verdana; background-image:url display: block; font-size: 6pt; color:#000000; line-height:12px; text-decoration: none; margin-bottom: 1px; margin-right: 0px; text-align: center; letter-spacing: 1px; font-weight: normal; border-bottom: 1px solid #000000;}--></style>
<p><body oncontextmenu="return false"><body onselectstart="return false"><br />
</span>

normal
normal
Bei Berührung mit der Maus
Bei Berührung mit der Maus

<br><br><br><table width=600 border=0 noborder cellpadding=0 cellspacing=0><tr><td><font face="Verdana,Geneva,Arial,Helvetica" size=2><style type="text/css"><!--s {color:#CD2990; font-size: 11pt;}b {color:#CD2990; font-family: Lucida Console; font-size: 9pt; text-decoration: none; letter-spacing: -1;}i{color:#CD2990; font-family: lucida console; font-size: 9pt; text-decoration: italic;}img.pic2{border:12px #CD2990 dashed;}--></style>

<br><style type="text/css">A:link { text-decoration: none;}A:hover { background: url(http://img7.myimg.de/12346302931618046386.gif);}</style></font></td></tr></table></font></td></tr></table><br><br><br>

normal
normal
wenn man mit der Maus draufkommt
wenn man mit der Maus draufkommt

<style type="text/css"><!--font, div, body {font-family:Lucida Sans Typewriter; font-size:8pt;}

u {color:# FF1493; border-bottom:3px solid #FF1493}
s {color:# FF1493; font-size:13pt;}
b {color:# FF1493; font-family:Eurostar; font-size:15pt; text-decoration:none; letter-spacing:--1;}
i {color:# FF1493;}

a:link {color:#C71585; text-decoration:none;}
a:active {color:#C71585; text-decoration:none;}
a:visited {color:#C71585; text-decoration:none;}
a:hover {color:#C71585; text-decoration:none; background-image:url(http://i32.tinypic.com/2hnnkzr.jpg);}--></style>

wenn man das Blaue mit der Maus berührt blickt es in Regenbogenfarben
wenn man das Blaue mit der Maus berührt blickt es in Regenbogenfarben

<style type="text/css"><!--
body td {
font-family: Antigoni Med;
font-size: 13px;
text-align: left;
color: #1C86EE;
margin: 0;
line-height: 16px; }

a:link {
color:#000000;
font:normal 8px small fonts;
text-transform:uppercase;
letter-spacing: -2px;
text-decoration: underline;
background-color: #1C86EE
;
border: 0pt solid #000000; }

a:active {
color:#000000;
font:normal 9px small fonts;
text-transform:uppercase;
letter-spacing: 1px;
text-decoration: unerline;
background-color: #1C86EE
;
border: 0pt solid #1C86EE; }

a:visited {
color:#000000;
font:normal 9px small fonts;
letter-spacing: 1px;
text-transform:uppercase;
text-decoration: underline;
background-color: #1C86EE
;
border: 0pt solid #1C86EE; }


a:hover {
color:#000000;
text-transform:uppercase;
font:normal 9px small fonts;
border: 1pt solid #000000;
text-decoration: none;
background-color: #1C86EE

;

}
--></style> 

Bei Berührung. ↑ (Ohne Berühring sind die Sternchen weg)
Bei Berührung. ↑ (Ohne Berühring sind die Sternchen weg)

<mce:style><!--
td, font, p, a, i {color: ; font-family: verdana; font-size:9pt; word-spacing: 1pt; letter-spacing: -1; text-decoration: none ;}
--></mce:style><style mce_bogus="1">td, font, p, a, i {color: ; font-family: verdana; font-size:9pt; word-spacing: 1pt; letter-spacing: -1; text-decoration: none ;}</style><mce:style type=""text/css""><!--
 s {color:#FF6EB4; font-size: 8pt;} b {color:#FF6EB4; text-decoration: none ;} u {color:#FF6EB4; border-bottom: 1px dotted;} i {color:#FF6EB4; border-bottom: 0px dashed;}
--></mce:style><style type=""text/css"" mce_bogus="1"> s {color:#FF6EB4; font-size: 8pt;} b {color:#FF6EB4; text-decoration: none ;} u {color:#FF6EB4; border-bottom: 2px dotted;} i {color:#FF6EB4; border-bottom: 0px dashed;}</style><style type="text/css">A:link { text-decoration: none;}A:hover { background: url(http://img25.imageshack.us/img25/9159/439702yc1s6yyoiin.gif);}</style></font></td></tr></table></font></td></tr></table>

 

 

 

 

 

<style type="text/css">
<br><br><!--
s {color:#ff0505; font-size: 15pt;}
b {color:#ff0505; font-family: georgia; font-size: 15pt; text-decoration: none; letter-spacing: -2;}
i {color:#ff0505; border-bottom: 1px dashed; height:1; }
--></style></font></td></tr></table>