HTML & CSS
Von: nіеmаnd, 19.11.2010 07:44 Uhr
liebe wissende
es ist mir schon ein paar mal aufgefallen, dass wenn man eine webseite hat, die ein zentriertes element hat (margin-right:auto;margin-left:auto;) das einen relativen abstand zur oberen fensterrand hat (margin-top:10%;) nach oben rutscht, sobald man auch nur die breite des fensters verstellt. (jedenfalls im firefox)
bisher dachte ich immer, dass sich die relativen angaben auf die jeweilige richtung beziehen. es sieht aber ganz so aus, dass sich diese angaben nur auf die breite beziehen. stimmt das?
besonders unangenehm finde ich diesen effekt auf zentrierten webseiten, deren inhalt nicht bei jeder eigenen seite gleich gross ist. so kann es sein, dass manchmal ein scrollbalken eingeblendet wird, der die fensterbreite vermindert und somit die ganze seite ein wenig nach obenlinks fahren lässt. gibt es eine möglichkeit dies zu vermeiden trotz relativen angaben?
hier ein link zu einem beispiel:
hier ein beispiel (einfach in der urlbar eines neuen tabs eingeben)
javascript:document.write('<?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>test</title><style type="text/css">div {margin-top:10%;margin-right:auto;margin-left:auto;width:500px;height:500px;border-width:2px;border-style:solid;border-color:black;}</style></head><body><div>hallo ich bin ein div<br/>verschiebe einmal den fensterrand rechts<br/>und einmal den unten</div></body></html>');

lg und danke im voraus
niemand



  1. Re: margin in prozent, prozent nur abhänig von bre
    Hallo niemand,

    die Antwort ist leider nein (soweit ich weiß) da du die breite durch das einblenden eines Scrollbar verkleinerst wird deine div auch um die hälfte der Breite des Scrollbar verschoben !

    einzige Möglichkeit die ich kenne, ist das ding immer einzublenden

    mittels
    html {
      overflow-y: scroll;
    }  


    Cu Stefan
    3 Kommentare
    • Re^2: margin in prozent, prozent nur abhänig von b
      danke für deine antwort! da du die breite
      durch das einblenden eines Scrollbar verkleinerst wird deine
      div auch um die hälfte der Breite des Scrollbar verschoben !
      (...)einzige Möglichkeit die ich kenne, ist das ding immer
      einzublenden (...)
      overflow-y: scroll;
      ja die möglickeit kenne ich, auch algemein die overflow-propriety könnte verwendet werden (dann eifnach noch mit horizontalem scrollbalken). leider ist overflow-y noch nicht w3c standart und wird voraussichtlich erst in css3 eingesetzt werden können. natürlich gibts einige browser dies unterstützen, aber ich möchte mich an diese standarts halten.
      weiss jetz also jemand, wie sich die relativen (%) angaben im firefox verhalten, oder wie man dieses (fehl-?) verhalten sich allenfalls korrigieren lässt?
      lg niemand
    • Re^4: margin in prozent, prozent nur abhänig von b
      ja die möglichkeit für die unterscheidung zwischen ie und anderen browsern kenne ich auch, es nimmt mich aber die ursache für den beschriebenen effekt wunder.
      lg niemand