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}

Kategorie: alle Artikel (9) | Diese Website (5) | NPage (2) | Webdesign (2)

< 1 2 3 >

Link zur aktiven Seite hervorheben (01.07.2013 12:53:00)

Auf vielen Websites wird der Link zur gerade aktiven seite hervorgehoben. NPage unterstützt so etwas leider nicht automatisch. Mein einem kleinen wenig javaScript kann man das aber nachbauen. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
Inhalt unter der Menüleiste (07.06.2013 00:09:00)

Auch bei einer Npage Designvorlage ist es möglich, unter der Menüleiste noch zusätzlichen Inhalt unterzubringen. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
Neue CSS-Datei für Formularfelder (25.04.2013 07:49:00)

Vor kurzem habe ich festgestellt, dass es bei NPage eine neue CSS-Datei gibt, die automatisch in Webseiten eingebunden wird. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 

< 1 2 3 >

{/if} Zum Seitenanfang
nPage.de-Seiten: Plöner Pioniere sterben nie !!! | Eurasierrüde Puschkin