Gunnar Bittersmann: Div "prozentual" zentriert

Beitrag lesen

SELF-Forum

Div "prozentual" zentriert

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

Hello out there!

PS: Und wie findet ein Nutzer mit schmalem Viewport eine Box mit einer festen Breite von 760px? Da er sehr ungern horizontal scrollt, wohl ziemlich blöd.

Und wie findet es ein Nutzer mit schmalem Viewport, dass die Teile der Box, die durch die relative Positionierung nach links aus dem Viewport herausgeschoben wurden, für ihn gar nicht zu sehen sind, auch nicht durch Scrollen erreichbar? Wohl total blöd.

Meine Lösung eignet sich daher nur für Spezialfälle, wenn du etwas über die Gegebenheiten beim Nutzer weißt. Im Web weißt du darüber i.A. gar nichts.

Also doch JavaScript.

HTML:

<body>  
  <div id="container">  
    <p>Lorem ipsum dolor sit amet.</p>  
  </div>  
</body>

CSS hätte sein können:

#container  
{  
  [ref:self811;css/eigenschaften/positionierung.htm#max_width@title=max-width]: 760px;  
}

Durch die Eigenschaft 'max-width' wäre sichergestellt, dass bei schmalerem Viewport der Inhalt auch ohne horizontales Scrollen lesbar ist.

Dummerweise versteht _I_rgend_E_in Browser[tm] diese Eigenschaft nicht. Deshalb wird das auch im Script gemacht:

unobtrusive JavaScript:

window.onload = setContainerMargin;   // Funktion wird nach Laden der Seite aufgerufen  
  
window.onresize = setContainerMargin; // Funktion wird nach Veränderung der Viewportgröße erneut aufgerufen  
  
function setContainerMargin()  
{  
  var container = document.getElementById("container");  
  var containerWidth = container.[ref:self811;javascript/objekte/all.htm#offset_width@title=offsetWidth];  
  var viewportWidth = document.body.offsetWidth;  
  
  if (containerWidth > viewportWidth)  
  {  
    container.[ref:self811;javascript/objekte/style.htm@title=style].width = viewportWidth + "px";  
    container.style.marginLeft = "0";  
  }  
  else  
  {  
    container.style.marginLeft = ((viewportWidth - containerWidth) / 3) + "px";  
  }  
}

See ya up the road,
Gunnar

--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
Beitrag melden
–
Informationen zu den Bewertungsregeln