Autor |
Nachricht |
dudave
Threadersteller
Dabei seit: 23.03.2008
Ort: -
Alter: 39
Geschlecht:
|
Verfasst So 23.03.2008 20:55
Titel Ist so ein Layout in CSS umsetzbar? |
|
|
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?
Zuletzt bearbeitet von dudave am So 23.03.2008 21:19, insgesamt 3-mal bearbeitet
|
|
|
|
|
schattenjaeger
Dabei seit: 03.11.2005
Ort: Kiel
Alter: 34
Geschlecht:
|
|
|
|
|
Anzeige
|
|
|
dudave
Threadersteller
Dabei seit: 23.03.2008
Ort: -
Alter: 39
Geschlecht:
|
Verfasst So 23.03.2008 21:49
Titel
|
|
|
äh ja und? was soll auf dieser seite sein? o_O?
ich verdeutliche meine Vorstellung des Layouts mal mit Bildern
Ungescrollter Inhalt
Nach etwas Scrollen
Und nach noch etwas mehr (nun verhält sich die Navigationsleiste wie ein Frame)
Zuletzt bearbeitet von dudave am So 23.03.2008 21:49, insgesamt 1-mal bearbeitet
|
|
|
|
|
dudave
Threadersteller
Dabei seit: 23.03.2008
Ort: -
Alter: 39
Geschlecht:
|
Verfasst Mo 24.03.2008 00:12
Titel
|
|
|
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';
}
}
Zuletzt bearbeitet von dudave am Mo 24.03.2008 00:28, insgesamt 7-mal bearbeitet
|
|
|
|
|
123456
Dabei seit: 15.01.2006
Ort: Dresden
Alter: -
Geschlecht:
|
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
Zuletzt bearbeitet von 123456 am Mo 24.03.2008 00:41, insgesamt 1-mal bearbeitet
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
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
Dabei seit: 23.03.2008
Ort: -
Alter: 39
Geschlecht:
|
Verfasst Mo 24.03.2008 00:50
Titel
|
|
|
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!
Zuletzt bearbeitet von dudave am Mo 24.03.2008 01:08, insgesamt 4-mal bearbeitet
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
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
|
|
|
|
|
|
|
|
Ähnliche Themen |
Website mit festen Layout in dynamisches Layout umbauen
[CSS Layout] An Fenstergröße anpassendes Layout
Probleme mit Layout - div im layout height="100%"
CSS-Layout.. wie?
css layout
CSS Layout
|
|