positionierung von boxen

  • es heißt immer css sei ja so toll, weil weniger aufwand. jedoch steh ich schon kurz davor wieder auf das "alte" tabellenlayout zurückzugreifen, weil die positionierung von boxen mit css mir viele probleme bereitet. vor allem ist da das problem mit der browserkompatibilität. ich hab meine boxen (head,
    navi, inhalt, news-box und fußzeile) z.t. absolut und fixed positioniert aber der browser setzt es nicht so um wie ich es haben will. jetzt hab ich auch noch erfahren, dass der ie fixed garnicht umsetzt. es besteht auch noch die möglichkeit float einzusetzen. was empfehlt ihr mir? soll ich absolute und fixed lassen und es halt auf den ie abstimmen oder float benutzen?

  • hallo,


    klar werden diese CSS-Container heute sehr vielfach eingesetzt - wenn von mir auch stets nur als "abolute"
    Probleme dabei spielen natürlich die unterschiedlichen Umsetzungsmöglichkeiten der einzelnen Browser, wobei gerade IE meist recht schlecht abschneidet.


    Schon ein wesentliches Problem zwischen IE und FF zum Beispiel, die nämlich den Abstand zwischen Box-Border und Fensterrand sehr unterschiedlich interpretieren.


    Willst du einen Container rechts ausgerichtet haben, empfehle ich die Positionierung in %-Angaben vorzunehmen, was wenigsten ein bischen die Darstellung unter verschiedenen Auflösungen optimiert.


    Daher denke ich mal, dass die gute alte Tabelle immer noch ihre Berechtigung hat... ein gesunder Mix sollte es eigentlich bringen

  • kannst du doch über die Monitoransicht verfolgen, und dann entsprechend über die margin-Befehle anpassen.


    Aber Achtung:
    hauptsächlich der IE wird immer etwas in der Anzeige abweichen - wogegen Firefox und Opera recht identisch in ihren Ausführungen sind

  • aber komischerweise nimmt eine box, die NICHT absolut positioniert ist (die inhaltsbox), nicht den margin-top-befehl an. ich hab jetzt den bottom-margin von dem kopfbereich auf 0 gesetzt um sogenannte "collapsing margins" zu vermeiden. außerdem hab ich die gesamte höhe (mit margin etc) des kopfbereichs ausgerechnet um absolute höhe von navi und news-box und der inhaltsbox aufeinander abzustimmen. aber trotzdem haben alle 3 boxen unterschiedliche höhen.

  • ja sorry,
    diese Formatierung bezog sich jetzt auch nur auf die Positionierung von absolute :!:


    du müsstest das als Beispiel dort dann so eingeben:


    Code
    <div style="position:absolute;left:75%;top:190pt;">


    Also in diesem Fall OHNE "margin" :wink:

  • ja, ich meinte ja auch dass die box die nicht absolut positioniert ist, den margin befehl nicht annimmt.
    aber ich dachte dass die angaben zu der absoluten box den abstand vom rand ausdrücken und nicht die breite des bereichs. :?:

  • richtig -


    also das sagt mal <!-- w --><a class="postlink" href="http://www.css4you.de">http://www.css4you.de</a><!-- w --> dazu:

      Initialwert: static
      Vererbbar: Nein
      Anwendbar auf: Alle Elemente
      Medium: Visual
      Werte:


      absolute
      Absolute Positionierung durch die Angaben left, top, right, bottom. Absolut positionierte Elemente sind außerhalb des normalen Textfluß, sie liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout. Die absolute Position wird relativ zu den Rändern des Eltern-Elements berechnet, wenn dieses ebenfalls positioniert ist, oder wenn es der Seiteninhalt (<body>) ist. Da sich der Seiteninhalt scrollen lässt, werden absolut positionierte Elemente mitgescrollt.


      relative
      Relative Positionierung vom normalem Fluß. Die normale Position ist wie bei static im normalem Textfluß. Die Positionierungsangaben left, top, right, bottom verschieben das Element aus dieser Position. Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben


      fixed
      Wie absolute, jedoch bleibt das Element beim Scrollen stehen.


      static
      Positionierung im Textfluss. Die Angaben left, top, right, bottom sind

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!