nicht angemeldet
Fade Effekt in Navigation
Hallo,
ich bin gerade meine Website, http://justinbehmel.funpic.de, komplett neu am Entwickeln.
Ich schreibe sie komplett in PHP und ohne Frames. Das Design soll weiterhin genauso sein, wie bei meiner "Übungswebsite".
Ich wüsste gerne ob es möglich ist meine Website so zu gestalten, das der Text nicht "abgeschnitten" wird, wenn er beim scrollen unter der Navigation verschwindet. Das sieht man bei mir sehr gut im Gästebuch.
->Der Text soll also noch im weißen Bereich der Navigation sichtbar sein.
Hier habe ich mal den HTML-Code der Ausgegeben wird zu Ansicht reingestellt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Justin Behmel</title>
<link rel="shortcut icon" href="./media/images/design/favicon.png">
<link rel="stylesheet" type="text/css" href="./media/stylesheets/main.css"/>
<script type="text/javascript" src="./media/javascript/hover.js"></script>
</head>
<body>
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="header">
<img alt="Justin Behmel" class="header_logo" src="./media/images/design/header_logo.png"/>
</td>
<td class="header" colspan="2" align="right">
Bilder der Navigation, mit Hover-Effekt
</td>
</tr>
<tr>
<td colspan="3">
Mittelteil
</td>
</tr>
<tr height="50" valign="bottom">
<td class="footer" width="200">
</td>
<td class="footer" align="middle">
<img alt="© Justin Behmel" src="./media/images/design/footer_copyright.png"/>
</td>
<td class="footer" width="200" align="right">
</td>
</tr>
</table>
</body>
</html>
-
Ich wüsste gerne ob es möglich ist meine Website so zu gestalten, das der Text nicht "abgeschnitten" wird, wenn er beim scrollen unter der Navigation verschwindet.
An was hast du da so geadacht?
Soll sich der Text "auflösen"?, "schrumpfen"? Oder wie?
Er verschwindet weil er außerhalb der Sichtbarkeit gerät, das ist überall so.Sorry wenn ich dich missverstanden habe.
-
Der Text soll sich im Grau des Hintergrundbilds verlieren.
Also im Prinzip immer durchsichtiger werden wenn man scrollt.-
Hallo,
man könnte, das jetzt nur so dahingeplappert und mit keinem konkreten Beispiel belegbar, direkt unter der Navigationsleiste auf die Fläche des Textes oben auf ein paar Divs legen. (Mit oben auf meine ich "in die Tiefe gesehen")
Und zwar jeweils ein Pixel hoch und Seitenbreit. Sagen wir 20 Stück. In jedes nun über dem Text liegenden Div kommt als Hintergrundbild die Farbigkeit, die unter dem Text ist. Das oberste der 20 Div ist "untransparent", die nächsten 19 Divs bekommen nun abgestufte Transparent, bis hin zu 100% Transparenz beim 20. Der Text scrollt nun, in 20 Abstufungen noch sichtbar, unter den 1 Pixel hohen Divs durch, es sieht aber so aus, als ob er ausblendet.
Wie immer man das schafft, daß die Divs da oben drauf starr stehen bleiben und die unterste Ebene mit dem text scrollbar ist. Aber hey, bin ich Webseitengestalter? ;-)
Chräcker
-
Joa wär ne möglickeit...
ma schaun mit Divs kenn ich mich nichso aus...
aba wozu gibts denn SELFHTML :D
Mich würde interessieren ob man das ohne "rumgeschnipsel" mit Divs hinkriegt,
aba ich denke das wird halt eher schwierig.
Wichtig: Muss nicht rein HTML sein, wenn sich das per Javascript oder PHP lösen lässt hätt ich damit au kein Problem.
-
-
Das was mit in den Sinn kommt, ist das du 2 divs unten (seitenende, unter einander) erstellst, den oberen Div gibst du den filter (opacity) auf schwach, und den unteren auf stark (musst du auf einander abstimmen), mit z-index stellst du sie auf ca. 1000. den text auf 1 oder so.
Dann "sollte" der text beim scrollen unter diese div verschwinden,da diese divs transparent sind (zu x%), sieht es aus als würden sie sich mit der farbe verschmelzen.Ist nur eine Idee, die sicherlich klappt wenn man sich genug mühe damit gibt.
Es gibt auch bessere methoden, aber die fallen mir z.Z. nicht ein :)
-
-
-
Hallo Picard,
... das der Text nicht "abgeschnitten" wird, wenn er beim scrollen unter der Navigation verschwindet.
ich würde es mit einem PNG mit Alphatransparenz versuchen. Das funktioniert zwar im IE6 nicht 100%ig, richtig umgesetzt ist es aber ein schöner Effekt.
Ich hatte da mal vor langer Zeit rumgespielt, ist zwar ein Footer aber das Prinzip ist das gleiche: http://www.electric-lemon.de/self/footer.htmlGrüße,
Jochen
-
ich würde es mit einem PNG mit Alphatransparenz versuchen. Das funktioniert zwar im IE6 nicht 100%ig, richtig umgesetzt ist es aber ein schöner Effekt.
Ich hatte da mal vor langer Zeit rumgespielt, ist zwar ein Footer aber das Prinzip ist das gleiche: http://www.electric-lemon.de/self/footer.htmlAlso das ist wohl die schnellste Möglichkeit mit der, der Threadstarter ans Ziel kommt. Wenn du (Threadstarter) keine Erfahrung mit JS hast, bzw. HTML dann würde ich diese Idee in Betracht ziehen.
-
-
Mahlzeit Picard,
ich bin gerade meine Website,
Du bist Deine Website?
http://justinbehmel.funpic.de, komplett neu am Entwickeln.
Argl ... was für eine Grammatik ...
Ich schreibe sie komplett in PHP und ohne Frames.
Sehr löblich, aber ...
<body>
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="header">... warum verzichtest Du dann nicht auch auf Tabellenlayout aus dem vorherigen Jahrtausend? Stattdessen solltest Du semantischen Code schreiben, dem Du mittels http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=CSS das gewünschte Aussehen verpasst.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
Kritzeln statt texten: