Anzeige:
Ergebnis 1 bis 8 von 8

Thema: Absolute Positionierung aber Auflösungsunabhängig

  1. #1
    Registrierter Benutzer Avatar von Qudus
    Registriert seit
    14.03.2005
    Beiträge
    101

    Question Absolute Positionierung aber Auflösungsunabhängig

    hi

    Folgende Situation: Ich habe eine Tabelle mit vier Zellen, je zwei in einer Zeile. Die Tabelle nimmt 100% Breite und Höhe ein. Die linken Zellen haben eine feste Breite und die oberen eine feste Höhe. Die Zelle rechts unten soll einfach nur den Rest des Platzes einnehmen.

    Mit der Tabelle funktioniert das auch ganz gut. Wenn ich das jetzt aber mit absolut positionierten divs machen will, habe ich das Problem, dass ich nicht sagen kann: "Du nimmst 100 Pixel der Breite ein und Du den Rest." Das mit dem Rest ist das Problem.

    Analog äußert sich das Problem für die Höhe.

    Mein Lösungsansatz war, ein div mit 100% Breite (Höhe) in den Hintergrund zu legen, ein padding-left (-top) in der selben Breite (Höhe) wie die linken (oberen) Zellen zu setzen und darin dann ein weiteres relativ positioniertes div mit 100% Breite (Höhe) zu platzieren. Bis dahin alles tutti.

    Aber wenn ich jetzt darin weitere absolut positionierte divs setzen will, kann ich nicht mehr mit relativen Größen arbeiten, weil der parent nicht absolut positioniert ist.

    Ich habe einfach keine Idee mehr, wie ich den W3C da austricksen oder im Sinne des W3C eine Lösung finden kann.

    Bitte helft mir.

    Gruß, Qudus
    Geändert von Qudus (25-02-2006 um 19:14 Uhr)

  2. #2
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    Also ich weiß nicht wer das Gerücht in die Welt gesetzt hat das man div einer Tabelle vorziehen soll - das erinnert mich immer an dieses Gerücht das Cookies Viren verbreitet oder Firefox ist Geil - kann Tabbet Browsing Auf den Seiten von W3C steht auf jeden fall ganz bestimmt nichts davon, die kenne ich fast Auswendig
    Aber mal im ernst. Das was du möchtest kannst du mit div so gut wie garnicht Realisieren.
    Weil..
    1) Nicht jeder Browser Interpretiert 100% Höhe ( egal ob Tabelle oder div)
    2) Ein DIV ist Eigentlich mehr zum Positionieren von Blöcken auf Verschiedenen Ebenen (index) gedacht.
    3) Rechne mal die Zeit in Relation zum Ergebnis
    4) Unterschiedliche Schriften Größen und div bekommst du so gut wie nie hin es wird immer wieder zu so genananten Frame Sprengungen kommen.

    Wenn du dich dennoch nicht davon abbringen lassen möchtest. Dann hier ein Tip - die Reihenfolge machts
    http://www.edition-w3c.de/TR/1998/RE...l#heading-9.4*
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  3. #3
    Registrierter Benutzer Avatar von Qudus
    Registriert seit
    14.03.2005
    Beiträge
    101
    Zitat Zitat von undefined
    Also ich weiß nicht wer das Gerücht in die Welt gesetzt hat das man div einer Tabelle vorziehen soll - das erinnert mich immer an dieses Gerücht das Cookies Viren verbreitet oder Firefox ist Geil - kann Tabbet Browsing
    Das ist kein Gerücht, sondern eine Frage der Philosophie. Entweder hat man den vergleichsweise aufwendigen Code im HTML oder im CSS. Bei ersterer Variante hat man den Vorteil, dass man direkt aus dem HTML-Code erkennen kann, wie die Dinge angeordnet sind, ohne dass man den gesamten Code kennt. Bei letzterer ist man flexibler kann aber auch nicht ohne Weiteres und Kopfstände aus dem vorgesehenen Layout ausbrechen, ohne den HTML-Code zu verändern.

    Und Firefox ist geil. Er ist viel mächtiger als der IE und hält sich an die Standards. Tabbed Browsing ist nur einer der zahlreichen Mehrwerte gegenüber dem IE. In einigen wenigen Fällen finde ich die W3C-Standards aber auch nicht immer gut. Beispielsweise kann ich nicht verstehen, wieso es über CSS keine vernünftige Möglichkeit gibt, die nicht-inline-Kinder eines Elternelements vertikal anzuordnen. Das HTML-Attribut valign konnte (und kann) das. Es ist aber auf keinen Fall ein Gerücht, und außerdem absolut sinnvoll, eine solche formatierung ins CSS auszulagern.

    Zitat Zitat von undefined
    Auf den Seiten von W3C steht auf jeden fall ganz bestimmt nichts davon, die kenne ich fast Auswendig
    Das mag sein. Ich gehe in den meisten Fällen auf selfhtml, um solche Informationen zu bekommen und sehe nur selten direkt beim W3C nach. Bei selfhtml steht auch noch direkt, welcher Browser was wie unterstützt. Das finde ich sehr hilfreich. Außerdem ist selfhtml bedeutend intuitiver aufgebaut als die Seiten des W3C.

    Es ärgert mich aber immer wieder maßlos, dass der IE einige Dinge einfach nicht kann. Ich habe mir Opera noch nicht angesehen aber ich bin immer wieder begeistert, dass der Firefox alles genauso anzeigt, wie vom Standard vorgesehen. Und genau dazu sind Standards ja da. Nur allzu oft muss ich Sunden damit verbringen, die zahllosen IE-Bugs zu umschiffen, die auch noch von M$ so gewollt sind, um die Leute so abzufucken, dass sie beim IE bleiben und den Firefox dafür verantwortlich machen, dass verschiedene Seiten nicht ordentlich angezeigt werden, auf denen brave Entwickler sich an den Standard gehalten und sich nicht die Mühe gemacht haben, IE-Bugs zu umschiffen oder gar für den IE entwickelt haben. Dieser kontroverse Effekt funktioniert nur aufgrund der gewaltigen Marktmacht von M$ und der bedauerlich großen Verbreitung des IE.

    Zitat Zitat von undefined
    Aber mal im ernst. Das was du möchtest kannst du mit div so gut wie garnicht Realisieren.
    Doch! Auf der Seite, die Du mir freudlicherweise verlinkt hast, habe ich die Lösung gefunden. Ich dachte bisher immer, dass left- und right-Angaben, bzw. top- und left- zusammen keinen Sinn machen würden. Dem ist aber nicht so. Statt dessen stellt genau das die Lösung für mein Problem dar. Bedauerlicherweise unterstützt der IE das mal wieder nicht.

    Vielleicht hast Du ja zufällig eine Lösung dafür parat. Ich habe also einen (abs.pos.) DIV, der irgendeine Breite hat. Darin habe ich einen weiteren (abs.pos.) DIV (nicht leerer Inhalt), der left und top jeweils nicht 0 hat (width: auto). Der IE schrumpft den DIV jetzt auf Minimalbreite zusammen. Im Firefox wird das Ganze korrekt dargestellt.

    Zitat Zitat von undefined
    Weil..
    1) Nicht jeder Browser Interpretiert 100% Höhe ( egal ob Tabelle oder div)
    Es reicht mir zunächst mal, dass der Firefox und IE das anzeigen. Und die beiden können das schonmal, wenn ich absolut positioniere. Wenn man <HTML> und <BODY> jeweils über CSS eine Höhe von 100% gibt, klappt es übrigens auch ohne absolute Positionierung. Aber das ist nicht die Art, die ich hier brauche.

    Zitat Zitat von undefined
    2) Ein DIV ist Eigentlich mehr zum Positionieren von Blöcken auf Verschiedenen Ebenen (index) gedacht.
    Eigentlich ist ein DIV nur eine Hülse für Inhalt, der einheitlich über CSS formatioert werden muss.

    Zitat Zitat von undefined
    3) Rechne mal die Zeit in Relation zum Ergebnis
    In meinem aktuellen Fall bin ich zwar noch bei der Recherche. Aber nach meiner Erfahrung ist ein CSS-Layout später leichter zu warten und anzupassen. Und wenn ich erstmal eine Lösung gefunden habe, ist die Zeit bei keiner der beiden Strategien wesentlich länger oder kürzer. Das know-how muss eben erstmal aufgebaut werden.

    [QUOTE=undefined] 4)Unterschiedliche Schriften Größen und div bekommst du so gut wie nie hin es wird immer wieder zu so genananten Frame Sprengungen kommen.[/QUTOE]

    Das mit den unterschiedlichen Schriften ist gerade bei Tabellen ein Problem. Da werden nämlich laut W3C-Standard blöderweise aufgrund irgendwelcher Abwärtskompatiblitäten einige Schriftformatierungen nicht vererbt. Man kann das zwar mit "font-size: inherit" (etc.) wieder regeln aber da spielt der IE wieder nicht mit. Tja, das alte Dilemma...

    Zitat Zitat von undefined
    Wenn du dich dennoch nicht davon abbringen lassen möchtest. Dann hier ein Tip - die Reihenfolge machts
    Was meinst Du mit der Reichenfolge? Wie gesagt, ich denke, das mit top+bottom und left+right ist die Lösung. Aber wenn ich da etwas übersehen habe, klär mich doch bitte auf. Ich habe ja immernoch keine "allgemeingültige" Lösung.

    Gruß, Qudus
    Geändert von Qudus (26-02-2006 um 18:09 Uhr)

  4. #4
    Registrierter Benutzer
    Registriert seit
    15.10.2005
    Ort
    Franken
    Beiträge
    362
    Kurz zum Thema Firefox: IE7 hält sich hervorragend an CSS-Anweisungen. Wenn dieser weit genug verbreitet ist, steige ich auch auf DIVs um.
    Eigentlich ist ein DIV nur eine Hülse für Inhalt, der einheitlich über CSS formatioert werden muss.
    DIV ist ein Container, der beliebige Elemente beinhaltet. Dieser Inhalt kann aus HTML oder Text bestehen (W3C - frei übersetzt).
    Dank der Rekursion kann ich IF-Schleifen bauen.

    In neuem Glanz: www.turbohummel.de

  5. #5
    Registrierter Benutzer Avatar von Qudus
    Registriert seit
    14.03.2005
    Beiträge
    101
    Zitat Zitat von Turbohummel
    Kurz zum Thema Firefox: IE7 hält sich hervorragend an CSS-Anweisungen. Wenn dieser weit genug verbreitet ist, steige ich auch auf DIVs um.
    Nach dem, was ich gehört und gelesen habe, hält sich der IE7 keineswegs hervorragend an den CSS2 Standard. Er geht ein wenig weiter in Richtung Kompatiblität aber eben nicht bis zum Letzten. Aber das ist ja auch schonmal was. Schaun wir mal, wie Billy Boy weiter mit dem wachsenden Druck seitens Firefox umgeht...

    Zitat Zitat von Turbohummel
    DIV ist ein Container, der beliebige Elemente beinhaltet. Dieser Inhalt kann aus HTML oder Text bestehen (W3C - frei übersetzt).
    Das widerspricht nicht meiner Aussage, ist allerdings schöner formuliert. Der Inhalt eines DIV-Containers wird im Container ausgerichtet und erhält über Vererbung CSS-Eigenschaften vom Container.

  6. #6
    Registrierter Benutzer Avatar von Qudus
    Registriert seit
    14.03.2005
    Beiträge
    101

    Thumbs up

    Ich habe eine Lösung gefunden!

    Code:
    position: absolute;
    width: auto;
    width: expression(this.parentNode.clientWidth - 300);
    left: 200px;
    right: 100px;
    height: auto;
    height: expression(this.parentNode.clientHeight - 70);
    top: 20px;
    bottom: 50px;
    Die width- und height-Angaben mit der expression werden im Firefox oder anderen Standard-konformen Browsern ignoriert und stellen im IE das gewünschte Verhalten sicher.

    Das einzige Problem, das ich jetzt noch habe ist, dass diese beiden Zeilen im Firefox in der Java-Script-Console als CSS-Fehler protokolliert werden. Was nicht schön ist. Es wäre also noch hilfreich eine Kommentar-Art zu finden, die der Firefox ignoriert, der IE aber entsprechend auswertet. Das ist direkt im HTML-Dodukment im HEAD möglich. Mir ist aber bisher keine Möglichkeit für externe CSS-files bekannt. Ich werde aber weiter suchen. Vielleicht kennt ja einer von Euch so eine Möglichkeit. Ich bin weiterhin für Hilfe dankbar.

    Qudus

  7. #7
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    Zitat Zitat von Qudus
    Und Firefox ist geil. Er ist viel mächtiger als der IE und hält sich an die Standards. Tabbed Browsing ist nur einer der zahlreichen Mehrwerte gegenüber dem IE. In einigen wenigen Fällen finde ich die W3C-Standards aber auch nicht immer gut. Beispielsweise kann ich nicht verstehen, wieso es über CSS keine vernünftige Möglichkeit gibt, die nicht-inline-Kinder eines Elternelements vertikal anzuordnen. Das HTML-Attribut valign konnte (und kann) das. Es ist aber auf keinen Fall ein Gerücht, und außerdem absolut sinnvoll, eine solche formatierung ins CSS auszulagern.
    Firefox ist nichst anderes als eine Abgespeckte Version oder neu Überarbeitete Version des Mozilla, es wurde einfach zu unübersichtlich, mach mal ein cvs checkout auf Mozilla dann weist du was ich meine
    Defakto kann der Firefox nicht mehr oder weniger als Mozilla weil sie beide auf der gleichen Engine aufbauen. Daher finde ich diesen Heip um Firefox mit Tapped Browsing (gibts bei Mozilla/Opera und Konqueror schon seit jahren) etc. einfach nur zum lachen. Aber um zum Eigentlichen Punkt dieses QUOTES es gibt eine Vertikale Ausrichtung mit CSS2: vertical-align: middle; Was die W3C seiten betreffen muss ich dir zustimmen, sie sind nicht einfach zu lesen und oft mer als unübersichtlich.
    Ich habe mir in den jahren deshalb einen eigen Lesezeichen baum angelegt damit ich nicht immer suchen muss.
    SelfHtml ist das schon wesentlich Komfortabler.


    Zitat Zitat von Qudus
    Es ärgert mich aber immer wieder maßlos, dass der IE einige Dinge einfach nicht kann. Ich habe mir Opera noch nicht angesehen aber ich bin immer wieder begeistert, dass der Firefox alles genauso anzeigt, wie vom Standard vorgesehen. Und genau dazu sind Standards ja da. Nur allzu oft muss ich Sunden damit verbringen, die zahllosen IE-Bugs zu umschiffen, die auch noch von M$ so gewollt sind, um die Leute so abzufucken, dass sie beim IE bleiben und den Firefox dafür verantwortlich machen, dass verschiedene Seiten nicht ordentlich angezeigt werden, auf denen brave Entwickler sich an den Standard gehalten und sich nicht die Mühe gemacht haben, IE-Bugs zu umschiffen oder gar für den IE entwickelt haben. Dieser kontroverse Effekt funktioniert nur aufgrund der gewaltigen Marktmacht von M$ und der bedauerlich großen Verbreitung des IE.
    Da kann ich dir nur zustimmen, weil ich rein auf Linux Arbeite habe ich zum Glück dieses Problem ganz am Ende.
    Wenn du Seiten auf Konqueror und FIrefox gut sehen kannst liegts du schon mal gut drinne. Opera lehnt stark an IE an und bietet daher unter Linux eine gute Lösung zum Testen.

    Zitat Zitat von Qudus
    Das mit den unterschiedlichen Schriften ist gerade bei Tabellen ein Problem. Da werden nämlich laut W3C-Standard blöderweise aufgrund irgendwelcher Abwärtskompatiblitäten einige Schriftformatierungen nicht vererbt. Man kann das zwar mit "font-size: inherit" (etc.) wieder regeln aber da spielt der IE wieder nicht mit. Tja, das alte Dilemma...
    Das ist eine IE/Opera Problem kein KHTML oder Mozilla problem
    Opera und IE vererben aber leider Textausrichtung in Tabellen das machen die anderen zum glück nicht.

    Zitat Zitat von Qudus
    Was meinst Du mit der Reichenfolge? Wie gesagt, ich denke, das mit top+bottom und left+right ist die Lösung. Aber wenn ich da etwas übersehen habe, klär mich doch bitte auf. Ich habe ja immernoch keine "allgemeingültige" Lösung.
    Damit meine ich das du von der Logig bei Container nicht wie bei Tabellen ausgehen kannst.
    Beispiel 3 DIV Container 1. FirstChild 2. nextSibling
    firstChild 100% breit und 100% hoch. Die beiden Kinder Elemente sollen fliessend sein wobei eines der Element ein Bild enthält das rechts oben liegen soll. Am besten das ganze mal als Beispiel:
    PHP-Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!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>
      <title>Floaten</title>
      <meta name="GENERATOR" content="Quanta Plus" />
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css">
      /* <![CDATA[ */
       body { margin: 0; }
       div.firstChild {
          position: absolute;
          width: 99%;
          height: 99%;
          padding: 5px 3px 0px 3px;
       }
       div.IMGTAG {
          position: relative;
          float: right;
          height: 200px;
          width: 150px;
          padding: 0px 0px 2px 5px;
       }
       div.FLIESSEND {
          position: relative;
          text-align: justify;
       }
       img.posright {
          border: 1px dotted #000000;
          height: 200px;
          width: 150px;
       }
      /* ]]> */
      </style>
    </head>
    <body>
    <div class="firstChild">
       <div class="IMGTAG">
          <img src="#" alt="BITV" class="posright" />
       </div>
       <div class="FLIESSEND">
          <?php foreach( range01000 ) AS $i ) { echo $i " "; } ?>
       </div>
    </div>
    </body>
    </html>
    Vertausche die Container in ihrer Reihenfolge dann weist du was ich meine.
    mfg undefined
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  8. #8
    Registrierter Benutzer Avatar von Qudus
    Registriert seit
    14.03.2005
    Beiträge
    101
    Zitat Zitat von undefined
    Firefox ist nichst anderes als eine Abgespeckte Version oder neu Überarbeitete Version des Mozilla, es wurde einfach zu unübersichtlich, mach mal ein cvs checkout auf Mozilla dann weist du was ich meine
    Das stimmt nicht ganz. Firefox ist das, was der Mozilla eigentlich werden sollte. Der Mozilla basiert zunächst mal auf dem Nescape. Und da war nunmal alles in einem. Sinnvoller Weise hat man dann irgendwann mal den Firefox als eigenständigen Browser herausgeschnitten. Natürlich kann so ein großes Projekt auch schnell unübersichtlich werden. Aber hauptsächlich war es unübersichtlich, weil der Nescape Code scheiße war, was seine Struktur betrifft.

    Zitat Zitat von undefined
    Defakto kann der Firefox nicht mehr oder weniger als Mozilla weil sie beide auf der gleichen Engine aufbauen. Daher finde ich diesen Heip um Firefox mit Tapped Browsing (gibts bei Mozilla/Opera und Konqueror schon seit jahren) etc. einfach nur zum lachen.
    Mit dem Firefox wurde dieses Feature aber zum ersten mal ordentlich bekannt. Und es war der erste freie Browser mit einem vernünftigen DAU-tauglichen Setup für Windows.

    Zitat Zitat von undefined
    Aber um zum Eigentlichen Punkt dieses QUOTES es gibt eine Vertikale Ausrichtung mit CSS2: vertical-align: middle;
    vertical-align wirkt einerseits nur bei table-cells und außerdem nur auf inline-Elemente. Das finde ich unsinnig mangels einer Eigenschaft, die auch auf Block-Elemente wirkt. Das wollte ich damit sagen. (Der IE verhält sich in diesem Punkt vernünftig und wirkt diese Eigenschaft auch auf block-Elemente aus. Aber da das nicht dem Standard entspricht, ist das nicht zu unterstützen!)

    Zitat Zitat von undefined
    Da kann ich dir nur zustimmen, weil ich rein auf Linux Arbeite habe ich zum Glück dieses Problem ganz am Ende.
    Ich weiß zwar nicht, was Du mir mit dem letzten Teil des Satzes sagen willst, aber dito. Ich arbeite auch auf Linux (nur zum Spielen Win), verwende Quanta und Firefox (manchmal zum Testen Konqueror). Letztendlich teste ich aber meine Seiten auch immer auf dem IE, da jeder meine Seiten möglichst gleich sehen können soll. Leider haben ja einfach zu viele diesen scheiß IE als dass man sie ignorieren könnte. Aber eines schönen Tages...

    Zitat Zitat von undefined
    Vertausche die Container in ihrer Reihenfolge dann weist du was ich meine.
    Hmm... Ich habe nicht wirklich eine Idee, was Du meinst. Ich glaube, Du hast mich da missverstanden. Ich wollte (z.B.) ein Frame-Design ohne Frames herstellen. Aber wie ich in meinem letzten Posting schon geschrieben habe, habe ich eine passable Lösung gefunden, die ich noch ausbauen werde.

    Naja, vielen Dank für Deine Bemühungen.

    Qudus

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •