Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Orginaldesign mit Fußleiste

{$debug=1} {if {$page_title}=="Orginaldesign ansehen"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Fußleiste"} {head} {/head} {elseif {$page_url}|contains:'preview'}

Vorschau

{elseif {$page_url}|contains:'136'} {head} {/head} {else} {head} {/head}
{/if}

Orginaldesign mit Fußleiste

Auf dieser Seite wird demonstriert, wie man unter Beibehaltung der bestehenden Designvorlage eine zusätzliche Fussleiste einfügen kann.

Ich habe diese Fußleiste so gestaltet, dass ein schmaler Rand unten immer sichtbar ist. Bei einer Berührung mit der Maus vergrößert sich dieser Bereich. Wenn man einen modernen browser benutzt, dann geschieht dieses Vergrößern mit einem sanften slide-in-Effekt.

Einbauanleitung

CSS-Teil in Sidewide

Es wird eine CSS3-Animation verwendet. Diese Art von Animationen wird von allen modernen Browsern unterstützt, allerdings muss man teilweise noch mit browserspezifischen Präfixen arbeiten.

<style type="text/css">
.wrapper{
/* ganz unten etwas Platz schaffen */
margin-bottom: 15px;
}

#fussleistefix{
/* Text etwas einruecken */
padding-left:20px;
padding-right:20px;
/* feste Position unten von ganz rechts bis ganz links */
position:fixed;
bottom:0; left:0; right:0;
/* Schriftfarbe des Designs ueberschreiben */
color:#000 !important;
/* Ausgangshoehe */
height:10px;
background-color: #f99;
/* etwas durchscheinend */
opacity:0.85;
/* Die Animation */
/* Zuerst fuer Firefox */
/* Was soll animiert werden */
-moz-transition-property: height;
/* wie lange */
-moz-transition-duration: 1s, 1s;
/* Verzoegerung */
-moz-transition-delay: 0s, 1s;
/* Analog fuer andere Browser */
-webkit-transition-property: height;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-delay: 0s, 1s;
-o-transition-property: height;
-o-transition-duration: 1s, 1s;
-o-transition-delay: 0s, 1s;
-ms-transition-property: height;
-ms-transition-duration: 1s, 1s;
-ms-transition-delay: 0s, 1s;
transition-property: height;
transition-duration: 1s, 1s;
transition-delay: 0s, 1s;
}
	
#fussleistefix p{
/* Schriftfarbe des Designs ueberschreiben, auch fuer p-Tags */
color:#000 !important;
}

#fussleistefix:hover{
/* Hoehe bei Animation */
height:95px;
}
</style>

HTML-Code in Sitewide

Dieser HTML-Code ist nur als Beispiel gedacht, Der eigentliche Inhalt kann natürlich viel umfangreicher sein. Wichtig ist aber immer die Verwendung von fussleistefix als eindeutige Kennung, auf die im CSS-Teil Bezug genommen wird.

<div id="fussleistefix">
<p>Irgendein Text</p>
</div>

Mehr Informationen zu CSS3-Animationen

Ausführliche Informationen zu CSS3-Animationen -auch zu weitaus komplexeren Animationen findet man im CSS-Teil von Skywalk-Webdesign.de.

{if {$page_title}=="Orginaldesign ansehen"} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {elseif {$page_title}=="Orginaldesign mit Fußleiste"}

In diese Fussleiste kann man allen möglichen Kram einbauen: Links zu anderen Website, irgendwelche Like-Buttons, die News, ja wahrscheinlich sogar das Kontaktformular. Das ist dann nur noch eine sache der Formatierung.

{else}
Tabellensortierung (16.01.2014 11:01:00)

Die Beschreibung zum Einbau einer Tabellensortierung wurde verbessert und erweitert. Anhand eines Beispiels kann man den Einbau einer sortirbaren tabelle bei nPage künftig besser nachvollziehen. Außerdem wurde ein Downloadlink zur JavaScript-Datei bereit gestellt. Das kleine Tutorial findet man auf der Seite Tabelle sortieren.


Bewertung: (Keine Bewertung)

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
{/if} Zum Seitenanfang
nPage.de-Seiten: tolle Ferienstudios in Euronat | Jeder Tag bringt neue Hoffnung