bombastiic

Navigationen-styles

Styles eure Navigationen

Ich dachte mir ich mache mal Styles für eure Navigationen, da es einige von euch schwer fällt selber welche zu machen.

1. Dieser Code kommt  zwischen den Style-tags (also zwischen < style> und < /style>)



A.navi:link, A.navi:active, A.navi:visited { display: block; text-decoration: none; padding: 3px ; text-transform: uppercase; border-bottom: 1px dotted #00BFFF; border-right: 4px solid #00BFFF; text-align: left; font-family: Arial; font-size : 10px ; color: #00B2EE; letter-spacing: 2px; line-height: 10px; } A.navi:hover { display: block; background-color: #f7f7f7; padding: 3px ; text-transform: uppercase; border-right: 4px solid #009ACD; border-bottom: 1px dotted #009ACD; text-align: left; font-family: Arial ; letter-spacing: 3px; font-size : 10px ; color: #104E8B; line-height: 10px; }




A.navi:link, A.navi:active, A.navi:visited { display: block; text-decoration: none; padding: 3px ; text-transform: uppercase; padding-left: 2px; font-family: Century Gothic; font-size: 10px; background-color: transparent; margin-bottom: 2px; border-bottom: 1px dotted #CCE5E5; border-left: 4px solid #458B74; text-transform:uppercase; letter-spacing: 1px; color: #BEBEBE; text-align: left; line-height: 10px;} A.navi:hover { display: block; padding-left: 2px; font-family: Century Gothic; font-size: 10px; background-color: transparent; margin-bottom: 2px; border-bottom: 1px dotted #F1F1F1; border-left: 4px solid #66CDAA; text-transform:uppercase; letter-spacing: 1px; color: #A4A4A4; text-align: left; line-height: 10px;}




A.navi:link, A.navi:active, A.navi:visited { display: block; text-decoration: none; padding-left: 11px; font-family: trebuchet ms; font-size: 10px; margin-left: 3px; margin-bottom: 2px; border-left: 5px solid #E0E0E0; border-right: 5px solid #E0E0E0; letter-spacing: 2px; background-color: #ededed; border-bottom: 1px solid #D4D4D4; text-transform: uppercase; color: #777777; line-height: 15px;} A.navi:hover { display: block; padding-left: 11px; font-family: trebuchet ms; font-size: 10px; margin-left: 3px; margin-bottom: 2px; border-left: 5px solid #E0E0E0; border-right: 5px solid #E0E0E0; letter-spacing: 2px; background-color: #fdfdfd; border-bottom: 1px solid #D4D4D4; text-transform: uppercase; color: #8f8f8f; line-height: 15px;}




A.navi:link, A.navi:active, A.navi:visited { display: block; text-decoration: none; padding: 2px; font-family: Arial; font-size: 10px; background-color: #0F0D0D; margin-bottom: 2px; text-transform:uppercase; letter-spacing: 1px; color: #8F8F8F; text-align: center; line-height: 11px;} A.navi:hover { display: block; padding: 2px; font-family: Arial; font-size: 10px; background-color: #0F0D0D; margin-bottom: 2px; text-transform:uppercase; letter-spacing: 1px; color: #CD3333; text-align: center; line-height: 11px;}




A.navi:link, A.navi:active, A.navi:visited { display: block; text-decoration: none; padding: 2px; font-family: Tahoma; font-size: 9pt; margin-bottom: 1px; background-color:F4F4F4; border-top: 1px solid #EAEAEA; text-transform:uppercase; letter-spacing: 2px; color: #909090; text-align: left; line-height: 11px;} A.navi:hover { display: block; padding: 2px; border-top: 1px solid #CACACA; color: #CACACA; font-family: Tahoma; font-size: 9pt; text-align: left; line-height: 11px; }




A.navi:link, A.navi:active, A.navi:visited { display: block; text-decoration: none; font-family: Verdana; font-size: 10px; background-color: FFFFFF; margin: 2px; border-bottom: 1px dotted #F1F1F1; border-left: 1px solid #EAEAEA; border-top: 1px dotted #EEEEEE; border-right: 1px solid #E5E5E5; letter-spacing: 1px; color: #BEBEBE; text-transform: uppercase; text-align: center; line-height: 10px;} A.navi:hover { display: block; font-family: Verdana; font-size: 10px; background-color:F8F8F8; margin-bottom: 2px; border-bottom: 1px dotted #F1F1F1; border-left: 1px solid #EEEEEE; border-right: 1px solid #EAEAEA; border-top: 1px dotted #EEEEEE; letter-spacing: 1px; text-align: center; color: #00a500; line-height: 10px;}




A.navi:link, A.navi:active, A.navi:visited { display: block; text-decoration: none; padding-left: 2px; font-family: Century Gothic; font-size: 10px; margin-bottom: 2px; border-bottom: 1px dotted #F1F1F1; text-transform:uppercase; letter-spacing: 1px; color: #818181; text-align: left; line-height: 10px;} A.navi:hover { display: block; padding-left: 2px; font-family: Century Gothic; font-size: 10px; Background: url('http://i56.tinypic.com/35k01zc.png'); margin-bottom: 2px; border-bottom: 1px dotted #F1F1F1; text-transform:uppercase; letter-spacing: 1px; color: #A4A4A4; text-align: left; line-height: 10px;}




A.navi:link, A.navi:active, A.navi:visited { display: block; text-decoration: none; padding-left: 9px; font-family: Century Gothic; font-size: 10px; margin-bottom: 2px; border-bottom: 1px dotted #F1F1F1; text-transform:uppercase; letter-spacing: 1px; color: #818181; text-align: left; line-height: 10px;} A.navi:hover { display: block; padding-left: 9px; font-family: Century Gothic; font-size: 10px; Background: url('http://i55.tinypic.com/29xbxuv.png'); margin-bottom: 2px;; border-bottom: 1px dotted #F1F1F1; text-transform:uppercase; letter-spacing: 1px; color: #A4A4A4; text-align: left; line-height: 10px;}






2. Mit diesem Code fügt ihr eure Navi ein.

<a href="http://URL" class="navi">Titel</a>


http://URL die Url der Zielseite eingeben.
Titel Euren Navigationstitel eingeben (z.B. Home, About me usw)


Fall es noch Fragen gibt könnt ihr mich HIER fragen.
Tutorial by Bombastiic