Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
SimonDerDude
Threadersteller
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Fr 29.01.2010 15:19
Titel Zentrieren & Fixed im IE |
|
|
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
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
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 29.01.2010 15:25
Titel
|
|
|
Was willst Du denn erreichen?
|
|
|
|
|
Anzeige
|
|
|
SimonDerDude
Threadersteller
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Fr 29.01.2010 15:31
Titel
|
|
|
Richtig, hatte ich vergessen zu erwähnen:
Das weisse Feld soll im Internet-Explorer so angezeigt werden wie im Firefox
Zentriert
Fixed
Passt sich dem Fenster an
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 29.01.2010 15:37
Titel
|
|
|
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 @*/ |
|
|
|
|
|
SimonDerDude
Threadersteller
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Fr 29.01.2010 15:58
Titel
|
|
|
*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
|
|
|
|
|
itek
Dabei seit: 08.03.2006
Ort: 127.0.0.1
Alter: -
Geschlecht:
|
Verfasst Fr 29.01.2010 16:53
Titel
|
|
|
Zitat: | The requested URL /legatio/portfolio/technik/position_fixed.js was not found on this server. |
|
|
|
|
|
SimonDerDude
Threadersteller
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Fr 29.01.2010 17:01
Titel
|
|
|
itek hat geschrieben: | Zitat: | The requested URL /legatio/portfolio/technik/position_fixed.js was not found on this server. |
|
Ist scheiss egal, da es offline schon garnicht funktioniert
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 29.01.2010 17:07
Titel
|
|
|
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 |
Code: |
<html>
<head>
<title usw..... >
<!-- als letztes -->
<script type="text/javascript" src="technik/position_fixed.js"></script>
</head>
|
|
|
|
|
|
|
|
|
Ä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
|
|
|
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.
|
|