PING[uin] 2 TOP 4 Pads V1.0 – position:fixed =to top= Navigation

Nach meinem Beitrag über position-fixed-fuer-navigation-ja-oder-nein habe ich mich heute nocheinmal hingesetzt und das ganze als Übungsbeispiel, welches jeder für sich individuell anpassen kann, fertiggestellt.

Eine HTML-Testseite habe ich eingerichtet (mit CSS3-Media-Queries):
http://www.css3.de/spielwiese/ping-uin-2-top-4-pads/ping-uin-2-top-4-pads.html
(ggf. Browserfenstergrösse = Vieport ändern!)

Vorgehensweise:
- den div-Kontainer in die HTML-Datei einfügen:
<div id=”footer-navigation”><a href=”#site-header” title=”nach Oben!”>nach Oben!</a></div>
(nicht vergessen, z. B. dem body die id=”#site-header” zu geben, oder ggf. anzupassen)

- und das in die CSS-Datei:

/* ** CSS 4 PING[uin] 2 TOP 4 Pads V1.0 *** */
/* ** http://www.css3.de 22.03.13 *** */

/* ** Media Queries *** */
@media
/* Mobile/Smartphone – Portrait */
only screen and (min-width: 320px) and (max-width: 479px),
only screen and (min–moz-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: portrait),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-resolution: 1.5dppx) and (orientation: portrait),
/* Mobile/Smartphone – Landscape */
only screen and (min-width: 480px) and (max-width: 767px),
only screen and (min–moz-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: landscape),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-resolution: 1.5dppx) and (orientation: landscape),
/* Mobile/Tablets – Portrait */
only screen and (min-width: 768px) and (max-width: 959px),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
{

#footer-navigation{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background: rgba(105,166,204, .8); /* #69A6CC; */
z-index: 1000;
padding: 5px;
text-align: right;
}

/* Der kleine “Pinguin” unten links ist auch mit einem “nach Oben” Link *** */
/* versehen, also auch klickbar, hier habe ich mir die ID des Kontainers und *** */
/* den (href des) to-top-link gegriffen und auch unten fix positioniert: *** */

#footer-navigation a::after{
content: url(http://www.css3.de/css3-LoGO.png) attr(href);
display: block;
width: 90px;
height: 90px;
z-index: 1010;
position: fixed;
bottom: 1px;
right: 30px;
}

#footer-navigation a::before{
display: block;
content: ” ^^__^^ “;
color: black;
position: fixed;
right: 220px;
bottom: 5px;
}

#footer-navigation a {
color: #fff;
padding-right: 130px;
}
} /* — ENDE Media Queries –*/

/* ** alle anderen Screens > 1050px ** */
@media screen and (min-width: 1050px) {
#footer-navigation{
display:none;
}
}
/* ** CSS 4 PING[uin] to TOP V1.0 *** */
/* ** http://www.css3.de 22.03.13 *** */

Als Logo verwende ich eine Abwandlung/Anpassung der Grafik “Pilot Penguin” von OpenClipArt, LINK, Benutzer: osotogari

THANKS for this!