Zusätzlicher Footer

Ich habe einen zusätzlichen Footer benötigt, da ich meine eh schon lange Seiten-Navi nicht noch mit weiteren Inhalten belasten wollte. Der Footer soll auf allen Seiten gleich auftauchen, unterhalb des Content fixiert sein und Inhalte wie Kontakt, Links, Gästebuch etc. enthalten.

 

Sicherlich hätte ich auch einfach eine andere Design-Vorlage wählen können, die bereits einen Footer anbietet, aber dann fehlten mir andere Sachen, wie z.B. die Sticky Haupt-Navigation und/oder die Unternavigation in der Sidebar. Und da erschien es mir mit meinem Nicht-Wissen einfacher, einen zusätzlichen Footer zu basteln.

 

In der Seiten-Navi ist das Widget versteckt:

<div class="ksFooter">

<ul>

<li>

<a href="https://irenalap.jimdo.com/kontakt/" title="kontakt">Kontakt</a>

</li>

<li>

<a href="https://irenalap.jimdo.com/newsletter/" title="newsletter">Newsletter</a>

</li>

<li>

<a href="https://irenalap.jimdo.com/gästebuch/" title="Gästebuch">Gästebuch</a>

</li>

<li>

<a href="https://irenalap.jimdo.com/banner/" title="Banner">Banner</a>

</li>

</ul>

</div>

 

Die Formatierung erfolgte im Head:

<style>

/* <![CDATA[ */

/*eigenen Footer gestalten*/

.ksFooter { 

    display: inline-block;

    background-color:#c9c9c9; 

    border: 0px solid #c9c9c9; 

    border-radius: 0 0px 0px 0; /*ggf. Ecken abrunden*/

    position: absolute; /*absolute zum Browser*/

    bottom: 0px;

    left: 0px; 

    width: 100%; 

    height: 75px;

    padding: 3px; /*Innenabstand (in der Box)*/

    text-align: center;

    z-index: 2;

}

 

.ksFooter li {

    display:inline-block;

    border-radius: 5px;

     }

 

.ksFooter a {

    display:block;

    width: 130px;

    padding:10px;

    margin: 0px 10px;

    border-radius: 5px ;

    background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%,

         #CCCCCC 100%);

    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-

          stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC));

    list-style:none;

    text-decoration:none;

    -webkit-box-shadow: 3px 10px 25px 0px rgba(33, 33, 33, 0.75);

    -moz-box-shadow: 3px 10px 25px 0px rgba(33, 33, 33, 0.75);

    box-shadow: 3px 10px 25px 0px rgba(33, 33, 33, 0.75);

}

 

.ksFooter a:hover {

    background: -moz-linear-gradient(left, #eeeeee 0%, #cccccc 50%, #cccccc 50%, #eeeeee

          100%);

    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eeeeee),color-

          stop(50%,#cccccc), color-stop(50%,#cccccc), color-stop(100%,#eeeeee));

    color: rgba(255,165,0, 0.75);

}

 

/*]]>*/

</style>