mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 07:39 Benutzername: Passwort: Auto-Login

Thema: Zentrieren & Fixed im IE vom 29.01.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Zentrieren & Fixed im IE
Autor Nachricht
SimonDerDude
Threadersteller

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Fr 29.01.2010 15:19
Titel

Zentrieren & Fixed im IE

Antworten mit Zitat Zum Seitenanfang

Tagchen,

ich habe mir ein etwas ungewöhnliches Layout aufgebaut.
Es handelt sich hierbei um ein Portfolio mit nur einer Startseite.

Vorhanden ist ein wrapper (width:3210px; height:800px;)
Darin sind 4 weitere wraps mit der selben breite und die höhen betragen 25px, 140px, 545px und 110px.
Soweit mal dass ihr es euch vorstellen könnt.

Vorschau

Klappt soweit im FF * Ja, ja, ja... *

Dem weissen Feld hab ich folgendes mitgegeben:
Code:
#bar_wrap {
   text-align:center;
   bottom: 30px;
   position:fixed;
   right: 50%;
   margin-right: -300px;
   width: 600px;
   height: 100px;
   background-color: white;


Komm ich um z-index nicht herum?
Weiss einer was?
Thanks
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Fr 29.01.2010 15:25
Titel

Antworten mit Zitat Zum Seitenanfang

Was willst Du denn erreichen?
  View user's profile Private Nachricht senden
Anzeige
Anzeige
SimonDerDude
Threadersteller

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Fr 29.01.2010 15:31
Titel

Antworten mit Zitat Zum Seitenanfang

Richtig, hatte ich vergessen zu erwähnen:

Das weisse Feld soll im Internet-Explorer so angezeigt werden wie im Firefox *bäh*

Zentriert
Fixed
Passt sich dem Fenster an
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Fr 29.01.2010 15:37
Titel

Antworten mit Zitat Zum Seitenanfang

Der IE hat Probleme mit Fixed. Da mußt Du Dir mit einem JavaScript helfen.

Code:
// fixed.js: fix fixed positioning and fixed backgrounds in IE/Win
// version 1.8, 08-Aug-2003
// written by Andrew Clover <and@doxdesk.com>, use freely

/*@cc_on
@if (@_win32 && @_jscript_version>4)

var fixed_positions= new Array();
var fixed_backgrounds= new Array();
var fixed_viewport;

// Initialisation. Called when the <body contentEditable="false"> tag arrives. Set up viewport so the
// rest of the script knows we're going, and add a measurer div, used to detect
// font size changes and measure image sizes for backgrounds later

function fixed_init() {
 fixed_viewport= (document.compatMode=='CSS1Compat') ?
 document.documentElement : document.body;
 var el= document.createElement('div');
 el.setAttribute('id', 'fixed-measure');
 el.style.position= 'absolute';
 el.style.top= '0'; el.style.left= '0';
 el.style.overflow= 'hidden'; el.style.visibility= 'hidden';
 el.style.fontSize= 'xx-large'; el.style.height= '5em';
 el.style.setExpression('width', 'fixed_measureFont()');
 document.body.insertBefore(el, document.body.firstChild);
}

// Binding. Called every time an element is added to the document, check it
// for fixed features, if found add to our lists and set initial props

function fixed_bind(el) {
 var needLayout= false;
 var tag= el.tagName.toLowerCase();
 var st= el.style;
 var cst= el.currentStyle;
 var anc;

 // find fixed-position elements
 if (cst.position=='fixed') {
 needLayout= true;
 fixed_positions[fixed_positions.length]= el;
 // store original positioning as we'll overwrite it
 st.position= 'absolute';
 st.fixedPLeft= cst.left;
 st.fixedPTop= cst.top;
 st.fixedPRight= cst.right;
 st.fixedPBottom= cst.bottom;
 st.fixedPWidth= fixed_parseLength(cst.width);
 st.fixedPHeight= fixed_parseLength(cst.height);
 // find element that will act as containing box, for convenience later
 st.fixedCB= null;
 for (anc= el; (anc= anc.parentElement).parentElement;) {
 if (anc.currentStyle.position!='static') {
 st.fixedCB= anc;
 break;
 } }
 // detect nested fixed positioning (only ancestor need move)
 st.fixedNest= false;
 for (anc= el; anc= anc.parentElement;) {
 if (anc.style.fixedNest!=null)
 st.fixedNest= true;
 break;
 }
 }

 // find fixed-background elements (not body/html which IE already gets right)
 if (cst.backgroundAttachment=='fixed' && tag!='body' && tag!='html') {
 needLayout= true;
 fixed_backgrounds[fixed_backgrounds.length]= el;
 // get background offset, converting from keyword if necessary
 st.fixedBLeft= fixed_parseLength(cst.backgroundPositionX);
 st.fixedBTop= fixed_parseLength(cst.backgroundPositionY);
 // if it's a non-zero %age, need to know size of image for layout
 if (st.fixedBLeft[1]=='%' || st.fixedBTop[1]=='%') {
 st.fixedBWidth= 0; st.fixedBHeight= 0;
 fixed_measureBack(el);
 }
 }
 if (needLayout) fixed_layout();
}

// Layout. On every window or font size change, recalculate positioning

// Request re-layout at next free moment
var fixed_delaying= false;
function fixed_delayout() {
 if (fixed_delaying) return;
 fixed_delaying= true;
 window.setTimeout(fixed_layout, 0);
}

var fixed_ARBITRARY= 200;

function fixed_layout() {
 fixed_delaying= false;
 if (!fixed_viewport) return;
 var i, el, st, j, pr, tmp, A= 'auto';
 var cb, cbLeft, cbTop, cbRight, cbBottom, oLeft, oTop, oRight, oBottom;
 var vpWidth=fixed_viewport.clientWidth, vpHeight=fixed_viewport.clientHeight;

 // calculate initial position for fixed-position elements [black magic]
 for (i= fixed_positions.length; i-->0;) {
 el= fixed_positions[i]; st= el.style;
 // find positioning of containing block
 cb= st.fixedCB; if (!cb) cb= fixed_viewport;
 cbLeft= fixed_pageLeft(cb); cbTop= fixed_pageTop(cb);
 if (cb!=fixed_viewport) { cbLeft+= cb.clientLeft; cbTop+= cb.clientTop; }
 cbRight= fixed_viewport.clientWidth-cbLeft-cb.clientWidth;
 cbBottom= fixed_viewport.clientHeight-cbTop-cb.clientHeight;
 // if size is in %, must recalculate relative to viewport
 if (st.fixedPWidth[1]=='%')
 st.width= Math.round(vpWidth*st.fixedPWidth[0]/100)+'px';
 if (st.fixedPHeight[1]=='%')
 st.height= Math.round(vpHeight*st.fixedPHeight[0]/100)+'px';
 // find out offset values at max size, to account for margins
 st.left= A; st.right= '0'; st.top= A; st.bottom= '0';
 oRight= el.offsetLeft+el.offsetWidth; oBottom= el.offsetTop+el.offsetHeight;
 st.left= '0'; st.right= A; st.top= '0'; st.bottom= A;
 oLeft= el.offsetLeft; oTop= el.offsetTop;
 // use this to convert all edges to pixels
 st.left= A; st.right= st.fixedPRight;
 st.top= A; st.bottom= st.fixedPBottom;
 oRight-= el.offsetLeft+el.offsetWidth;
 oBottom-= el.offsetTop+el.offsetHeight;
 st.left= st.fixedPLeft; st.top= st.fixedPTop;
 oLeft= el.offsetLeft-oLeft; oTop= el.offsetTop-oTop;
 // edge positioning fix
 if (st.fixedPWidth[1]==A && st.fixedPLeft!=A && st.fixedPRight!=A) {
 tmp= el.offsetLeft; st.left= A; st.width= fixed_ARBITRARY+'px';
 tmp= fixed_ARBITRARY+el.offsetLeft-tmp+cbLeft+cbRight;
 st.left= st.fixedPLeft; st.width= ((tmp<1)?1:tmp)+'px';
 }
 if (st.fixedPHeight[1]==A && st.fixedPTop!=A && st.fixedPBottom!=A) {
 tmp= el.offsetTop; st.top= A; st.height= fixed_ARBITRARY+'px';
 tmp= fixed_ARBITRARY+el.offsetTop-tmp+cbTop+cbBottom;
 st.top= st.fixedPTop; st.height= ((tmp<1)?1:tmp)+'px';
 }
 // move all non-auto edges relative to the viewport
 st.fixedCLeft= (st.fixedPLeft=='auto') ? oLeft : oLeft-cbLeft;
 st.fixedCTop= (st.fixedPTop=='auto') ? oTop : oTop-cbTop;
 st.fixedCRight= (st.fixedPRight=='auto') ? oRight : oRight-cbRight;
 st.fixedCBottom= (st.fixedPBottom=='auto') ? oBottom : oBottom-cbBottom;
 // remove left-positioning of right-positioned elements
 if (st.fixedPLeft=='auto' && st.fixedPRight!='auto') st.fixedCLeft= 'auto';
 if (st.fixedPTop=='auto' && st.fixedPBottom!='auto') st.fixedCTop= 'auto';
 }


 // calculate initial positioning of fixed backgrounds
 for (i= fixed_backgrounds.length; i-->0;) {
 el= fixed_backgrounds[i]; st= el.style;
 tmp= st.fixedBImage;
 if (tmp) {
 if (tmp.readyState!='uninitialized') {
 st.fixedBWidth= tmp.offsetWidth;
 st.fixedBHeight= tmp.offsetHeight;
 st.fixedBImage= window.undefined;
 }
 }
 st.fixedBX= fixed_length(el, st.fixedBLeft, vpWidth-st.fixedBWidth);
 st.fixedBY= fixed_length(el, st.fixedBTop, vpHeight-st.fixedBHeight);
 }

 // now call scroll() to set the positions from the values just calculated
 fixed_scroll();
}

// Scrolling. Offset fixed elements relative to viewport scrollness

var fixed_lastX, fixed_lastY;
var fixed_PATCHDELAY= 300;
var fixed_patching= false;

// callback function after a scroll, because incorrect scroll position is
// often reported first go!
function fixed_patch() {
 fixed_patching= false;
 var scrollX= fixed_viewport.scrollLeft, scrollY= fixed_viewport.scrollTop;
 if (scrollX!=fixed_lastX && scrollY!=fixed_lastY) fixed_scroll();
}

function fixed_scroll() {
 if (!fixed_viewport) return;
 var i, el, st, viewportX, viewportY;
 var scrollX= fixed_viewport.scrollLeft, scrollY= fixed_viewport.scrollTop;
 fixed_lastX= scrollX; fixed_lastY= scrollY;

 // move non-nested fixed-position elements
 for (i= fixed_positions.length; i-->0;) {
 st= fixed_positions[i].style;
 viewportX= (st.fixedNest) ? 0 : scrollX;
 viewportY= (st.fixedNest) ? 0 : scrollY;
 if (st.fixedCLeft!='auto') st.left= (st.fixedCLeft+viewportX)+'px';
 if (st.fixedCTop!='auto') st.top= (st.fixedCTop+viewportY)+'px';
 viewportX= (st.fixedCB==null || st.fixedCB==fixed_viewport) ? 0 : viewportX;
 viewportY= (st.fixedCB==null || st.fixedCB==fixed_viewport) ? 0 : viewportY;
 st.right= (st.fixedCRight-viewportX+1)+'px'; st.right= (st.fixedCRight-viewportX)+'px';
 st.bottom= (st.fixedCBottom-viewportY+1)+'px'; st.bottom= (st.fixedCBottom-viewportY)+'px';
 }

 // align fixed backgrounds to viewport
 for (i= fixed_backgrounds.length; i-->0;) {
 el= fixed_backgrounds[i]; st= el.style;
 viewportX= scrollX;
 viewportY= scrollY;
 while (el.offsetParent) {
 viewportX-= el.offsetLeft+el.clientLeft;
 viewportY-= el.offsetTop +el.clientTop;
 el= el.offsetParent;
 }
 st.backgroundPositionX= (st.fixedBX+viewportX)+'px';
 st.backgroundPositionY= (st.fixedBY+viewportY)+'px';
 }

 // call back again in a tic
 if (!fixed_patching) {
 fixed_patching= true;
 window.setTimeout(fixed_patch, fixed_PATCHDELAY);
 }
}

// Measurement. Load bg-image into an invisible element on the page, when
// loaded write the width/height to an element's style for layout use; detect
// when font size changes

function fixed_measureBack(el) {
 var measure= document.getElementById('fixed-measure');
 var img= document.createElement('img');
 img.setAttribute('src', fixed_parseURL(el.currentStyle.backgroundImage));
 measure.appendChild(img);
 el.style.fixedBImage= img;
 if (img.readyState=='uninitialized')
 img.attachEvent('onreadystatechange', fixed_measureBackImage_ready);
}

function fixed_measureBackImage_ready() {
 var img= event.srcElement;
 if (img && img.readyState!='uninitialized') {
 img.detachEvent('onreadystatechange', fixed_measureBackImage_ready);
 fixed_layout();
 }
}

var fixed_fontsize= 0;
function fixed_measureFont() {
 var fs= document.getElementById('fixed-measure').offsetHeight;
 if (fixed_fontsize!=fs && fixed_fontsize!=0)
 fixed_delayout();
 fixed_fontsize= fs;
 return '5em';
}

// Utility. General-purpose functions

// parse url() to get value inside

function fixed_parseURL(v) {
 v= v.substring(4, v.length-1);
 if (v.charAt(0)=='"' && v.charAt(v.length-1)=='"' ||
 v.charAt(0)=="'" && v.charAt(v.length-1)=="'")
 return v.substring(1, v.length-1);
 else return v;
}

// parse length or auto or background-position keyword into number and unit

var fixed_numberChars= '+-0123456789.';
var fixed_ZERO= new Array(0, 'px');
var fixed_50PC= new Array(50, '%');
var fixed_100PC= new Array(100, '%');
var fixed_AUTO= new Array(0, 'auto');

function fixed_parseLength(v) {
 var num, i;
 if (v=='left' || v=='top') return fixed_ZERO;
 if (v=='right' || v=='bottom') return fixed_100PC;
 if (v=='center') return fixed_50PC;
 if (v=='auto') return fixed_AUTO;
 i= 0;
 while (i<v.length && fixed_numberChars.indexOf(v.charAt(i))!=-1)
 i++;
 num= parseFloat(v.substring(0, i));
 if (num==0) return fixed_ZERO;
 else return new Array(num, v.substring(i));
}

// convert parsed (number, unit) into a number of pixels

function fixed_length(el, l, full) {
 var tmp, x;
 if (l[1]=='px') return l[0];
 if (l[1]=='%') return Math.round(full*l[0]/100);
 // other units - measure by setting position; this is rather inefficient
 // but then these units are used for background-position so seldom...
 tmp= el.currentStyle.left;
 el.style.left= '0';
 x= el.offsetLeft;
 el.style.left= l[0]+l[1];
 x= el.offsetLeft-x;
 el.style.left= tmp;
 return x;
}

// convert stupid IE offsetLeft/Top to page-relative values

function fixed_pageLeft(el) {
 var v= 0;
 while (el.offsetParent) {
 v+= el.offsetLeft;
 el= el.offsetParent;
 }
 return v;
}
function fixed_pageTop(el) {
 var v= 0;
 while (el.offsetParent) {
 v+= el.offsetTop;
 el= el.offsetParent;
 }
 return v;
}

// Scanning. Check document every so often until it has finished loading. Do
// nothing until <body contentEditable="false"> arrives, then call main init. Pass any new elements
// found on each scan to be bound

var fixed_SCANDELAY= 500;

function fixed_scan() {
 if (!document.body) return;
 if (!fixed_viewport) fixed_init();
 var el;
 for (var i= 0; i<document.all.length; i++) {
 el= document.all[i];
 if (!el.fixed_bound) {
 el.fixed_bound= true;
 fixed_bind(el);
 } }
}

var fixed_scanner;
function fixed_stop() {
 window.clearInterval(fixed_scanner);
 fixed_scan();
}

fixed_scan();
fixed_scanner= window.setInterval(fixed_scan, fixed_SCANDELAY);
window.attachEvent('onload', fixed_stop);
window.attachEvent('onresize', fixed_delayout);
window.attachEvent('onscroll', fixed_scroll);

@end @*/
  View user's profile Private Nachricht senden
SimonDerDude
Threadersteller

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Fr 29.01.2010 15:58
Titel

Antworten mit Zitat Zum Seitenanfang

*IE tret*

Vielen Dank!

Hab gerade jedoch schwierigkeiten damit umzugehen.
per <script type="text/javascript" src="technik/position_fixed.js"></script> reagiert nichts.

Muss ich das script direkt in den Head einbinden?
Vielleicht habe ich auch etwas überlesen Au weia!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
itek

Dabei seit: 08.03.2006
Ort: 127.0.0.1
Alter: -
Geschlecht: Männlich
Verfasst Fr 29.01.2010 16:53
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
The requested URL /legatio/portfolio/technik/position_fixed.js was not found on this server.


*bäh*
  View user's profile Private Nachricht senden
SimonDerDude
Threadersteller

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Fr 29.01.2010 17:01
Titel

Antworten mit Zitat Zum Seitenanfang

itek hat geschrieben:
Zitat:
The requested URL /legatio/portfolio/technik/position_fixed.js was not found on this server.


*bäh*


Ist scheiss egal, da es offline schon garnicht funktioniert *bäh*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 29.01.2010 17:07
Titel

Antworten mit Zitat Zum Seitenanfang

Azazael hat geschrieben:
Hab gerade jedoch schwierigkeiten damit umzugehen.
per <script type="text/javascript" src="technik/position_fixed.js"></script> reagiert nichts.
Muss ich das script direkt in den Head einbinden?
Vielleicht habe ich auch etwas überlesen Au weia!


Code:

<html>
<head>
<title usw..... >
<!-- als letztes -->
<script type="text/javascript" src="technik/position_fixed.js"></script>
</head>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [CSS] position:fixed zentrieren?
[CSS] IE8 mit :after und position:fixed nicht wirklich fixed
BG = fixed in Firefox
IE6 und position:fixed
Position fixed
[CSS] position:fixed und der IE
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.