Willkommen auf dem Portal für Mediengestalter

dudave · Threadersteller

Hiho, ich überlege derzeit eine neue Webseite zu erschaffen und bin deshalb natürlich viel am überlegen, wie ein innovatives und praktisches Layout aussehen könnte.

Nun, da ich schon einiges erstellt hab und auch gewisse Erfahrungen mit CSS und JavaScript sammeln durfte, habe ich mir natürlich Großes vorgenommen und mir nun erst einmal rein theoretisch ein Problem gestellt, dass es zu lösen gibt.

Ich bin zwar noch viel am googlen und csstuts lesen, aber wahrscheinlich ist diese Vorstellung leider nicht nur mit CSS/JS lösbar oder vielleicht doch? Darum frag ich euch mal.

Die Seite soll in 4 Teile (horizontal)
- Header (titel etc) -
- Navigation -
- Content -
- Footer (Copyright..)

:Der Header mit fixer Höhe soll ganz oben kleben und entweder:
#1 Beim Scrollen aus dem Bildfeld verschwinden
#2 Oder nach ca 30 sec wegklappen bzw aus dem Bild fahren [und die navi muss sich dementsprechend anpassen] (Seite soll nicht oft neu geladen werden, da fast alles durch ajax geladen werden soll)
:Die Navigation mit fixer Höhe soll immer am oberen Rand kleben und nicht mitscrollen (pseudo-frame), aber solange der Header im Bild ist unter diesem sein
:Der Content ist unter der Navigation und ist von variabler Größe, sowohl horizontal als auch vertikal
:Der Footer mit fixer Höhe soll entweder ganz unter dem Content sein oder (falls #2 genau wie der Header aus dem Bild fahren bzw wieder reinfahren wenn man mit der Maus nach unten kommt)

Möglichkeit #2 ist wahrscheinlich lösbar, wenn auch nicht umbedingt einfach, aber eine Möglichkeit bei der der Header aus dem Bildfeld scrollt, die Navigation aber nicht und trotzdem unter dem Header bleibt offenbar nicht oder fällt einem von euch vielleicht ein javascript ein, dass diesen Effekt schaffen könnte?

schattenjaeger · **Verfasst** So 23.03.2008 21:29 **Titel**

Ähm... klar geht das ... www.diekert-media.de

dudave · Threadersteller

äh ja und? was soll auf dieser seite sein? o_O?

ich verdeutliche meine Vorstellung des Layouts mal mit Bildern *zwinker*

Ungescrollter Inhalt

Nach etwas Scrollen

Und nach noch etwas mehr (nun verhält sich die Navigationsleiste wie ein Frame)

dudave · Threadersteller

ui und da hab ich durch puren Zufall doch glatt eine Seite gefunden die solch eine Art des Menüs (zwar vertical) umsetzt, nur würde ich gerne wissen ob man diese Lösung vielleicht sogar noch etwas optimieren könnte (habe jetzt so spät aber keine lust noch den code zu studieren)

http://www.filmstarts.de/produkt/75382,8%20Blickwinkel.html

dort wird das Menü auf der linken Seite an das obere Ende des Browserfensters festgesetzt sobald man weit genug (ca 200 px) nach unten gescrollt hat und das menü eigentlich aus dem bild verschwinden müsste.

Leider entsteht durch dieses JS das Problem, dass bei zu schnellem Scrollen das Menü nicht schnell genug ab bzw angekoppelt wird.

Für weitere Lösungswege oder auch das interpretierens und kommentierens des dortigen Codes würde ich sehr begrüßen!

Edit: Code: (Firebug ftw ^^)
Voreingestellt:
<div id="floatMenu" style="width: 146px; position: absolute; top: 219px;">

Nach Scrollen durch JS geändert:
<div id="floatMenu" style="width: 146px; position: fixed; top: 10px;">

Denke die JS Funktion wird durch irgendeine .js Datei eingebunden:
<body onload="floatMenu();initLightbox();tt_Init()"> und mit floatMenu() gestartet.

Edit2:
Inhalt menu.js:
var ie=false;

function MenuKeepor( id )
{
this.E = document.getElementById( id );
if ( !this.E ) return;
this.oldY = 0;
this.smooth = false;
this.minTop = 176;
this.style = 0;
this.topDist = 10;
this.ie = typeof (window.pageYOffset)=='undefined';

this.getPosition = function()
{
var elem=this.E.parentNode, y=0;
while (elem!=null&&(typeof(elem)=="object")&&(typeof(elem.tagName)!="undefined"))
{
y += elem.offsetTop;
if (elem.tagName.toUpperCase()=="BODY")
elem=0;
else
{
if (typeof(elem.offsetParent)=="object")
elem=elem.offsetParent;
else
elem = 0;
}
}
if ( y ) this.minTop = y;
}
this.oldSY = 0;
this.getPosition();
this.check = function()
{
var sY = 0;
if ( this.ie || ie )
sY=document.body.scrollTop;
else
sY=window.pageYOffset;

if ( sY<=this.minTop-this.topDist )
{
/* wir sind oben */
if ( this.style==0 ) return;
this.style = 0;
this.oldY = 0;
this.E.style.position = 'absolute';
if (ie)
this.E.style.posTop = this.minTop+'px';
else
this.E.style.top = this.minTop+'px';
this.smooth = false;
return;
}
/* wir sind auf halber strecke */
if ( this.style==2 ) return;
if ( this.style==0 )
{
this.oldY = -sY + this.minTop - this.topDist;
this.E.style.position = 'fixed';
this.style = 1;
this.smooth = true;
}
var dY = -this.oldY;
if ( dY==0 )
{
this.smooth = false;
this.style = 2;
return;
}

if ( dY>10 )
{
dY = Math.round(dY/3);
} else {
if ( dY>3 )
dY = 3;
}
this.oldY = this.oldY + dY;
if (ie)
this.E.style.posTop = (this.oldY+this.topDist)+'px';
else
this.E.style.top = (this.oldY+this.topDist)+'px';
};
this.checkRel = function()
{
var sY = 0;
if ( typeof (window.pageYOffset)!='undefined' )
sY=window.pageYOffset;
else
sY=document.body.scrollTop;
var newY = sY - 170;
this.smooth = false;
if ( newY<0 ) newY = 0;
if ( this.oldY == newY ) { this.timer(); return; }

var dY = (newY-this.oldY);
// if ( dY==0 ) { this.timer(); return; }
this.smooth = true;
if ( dY>10 || dY<10 )
{
newY = this.oldY + Math.round(dY/4);
} else {
newY = this.oldY + dY/Math.abs(dY)*3;
}
this.oldY = newY;
if (ie)
this.E.style.posTop = newY+'px';
else
this.E.style.top = newY+'px';
this.timer();
};
this.precheck = function()
{
this.check();
this.timer();
}
this.timer = function()
{
var obj = this;
if ( this.smooth )
setTimeout( function() { obj.precheck(); }, 10 );
else
setTimeout( function() { obj.precheck(); }, 50 );
};

this.timer();
}
function floatMenu()
{
new MenuKeepor( "floatMenu" );
}

function popupMenu( id, keep )
{
var menu = document.getElementById( id );
if ( menu )
{
if ( menu.style.display != 'none' )
{
menu.style.display = 'none';
return;
}
var block = 0;
if ( keep==true )
menu.onclick = function(){
var d = new Date();
block = d.getTime();
return true;
};
window.setTimeout( function() {
document.body.onclick = function()
{
var d = new Date();
if ( d.getTime()-block < 100 ) return true;
menu.style.display = 'none';
document.body.onclick = null;
return true;
} }, 100 );
menu.style.display = 'block';
}
}

123456 · **Verfasst** Mo 24.03.2008 00:36 **Titel**

also die seite lädt bei mir unendlich... ohne mir deinen unformatierten(!!) javascript code angeschaut zu haben: navigation oder layout dass auf javascript basiert, kannste sofort in die tonne hauen, oder noch nie was von barrierefraien websites gehört? zudem wirds schwer das für möglichst viele browser problemlos zu erstellen

edit: setz halt die navi über den header und gut ist * Ja, ja, ja... *

Smooth-Graphics · **Verfasst** Mo 24.03.2008 00:42 **Titel**

Du kannst das Menü doch mit CSS "fixed" setzen, dann müsste das ziemlich genauso funktionieren wie der ganze JS Kram.

dudave · Threadersteller

Ok meine Theoretische Lösung wäre nun:

<body onScroll="floatMenu('navi');">

<script language="javascript">
- function floatMenu(divbox)
- {
---- var headersize = 200;
---- var scrollPos;
---- if (typeof window.pageYOffset != 'undefined') {
------scrollPos = window.pageYOffset;
---- }
---- else if (typeof document.compatMode != 'undefined' &&
-------document.compatMode != 'BackCompat') {
------scrollPos = document.documentElement.scrollTop;
---- }
---- else if (typeof document.body != 'undefined') {
------scrollPos = document.body.scrollTop;
---- }

---- if( scrollPos > headersize )
---- {
-------document.getElementById(divbox).style.position = "fixed";
-------document.getElementById(divbox).style.top = "10px";
---- }
---- else
---- {
-------document.getElementById(divbox).style.position = "absolute";
-------document.getElementById(divbox).style.top = "0px";
---- }
- }
</script>

->
<div id="header" style="position:absolute; top:10px; height:200px; width:100%;"></div>
<div id="navi" style="position:absolute; top:0px; height:100px; width:100%;"></div>
...

dies müsste rein theoretisch (noch net getestet und nur erster Ansatz) mitm Firefox funzen, im Iexplorer dürfte das fixed leider nichts bringen :/ Aber ein blödes neuberechnen (flackern des menüs) finde ich sinnlos, da hab ich lieber ein weggescrolltes!

Smooth-Graphics · **Verfasst** Mo 24.03.2008 00:52 **Titel**

Junge, wozu der ganze Javascript Code?
Das geht auch ohne. Einfach als CSS Definition. Und für den IE fixed-Bug gibts auch diverse Hacks *zwinker*

Willkommen auf dem Portal für Mediengestalter

Thema: Ist so ein Layout in CSS umsetzbar? vom 23.03.2008

Ist so ein Layout in CSS umsetzbar?