Announcement

Collapse
No announcement yet.

DIV Positionierung (relative - absolute)

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    DIV Positionierung (relative - absolute)

    ich verschachtle absolute und relative divs. wieso ich das mache wuerde den rahmen hier sprengen, es macht in meinem fall aber sinn.

    ungefaehr so (enruecken soll child darstellen):

    A relative div

    B relative div (B und alle childs muessen sich entsprechend der groesse von A nach unten verschieben)

    ---C1 absolute div (mit visible/hidden wird entweder C1 oder C2 gezeigt)
    ---C2 absolute div

    ------D relative div
    ------E relative div
    ------F relative div
    ------...

    Das funktioniert alles relativ gut, bis auf die tatsache, dass D, E und F zwar sauber den inhalt der divs rendert, aber wenn ich rahmen oder background setze, diese ganz oben am rand von C und als ob sie keine childs haetten, dargestellt werden. Der inhalt von D, E und F wird dann aber schoen untereinander angezeigt.

    Gibts da einen weg, die verschachtelung mit relative und absolute beizubehalten aber so dass die D,E und F... divs normal mit rahmen und background untereinander dargestellt werden?

    Versteht man meine frage...?
    Tags: None
  • #2
    Originally posted by dudel View Post
    ...Versteht man meine frage...?
    Nein, ich nicht.
    Wenn du denkst du hast alle Bugs gefunden, dann ist das ein Bug in deiner Denksoftware.

    Quellcode ohne ein Mindestmaß an Formatierung sehe ich mir nicht an! Ich leiste keinen Privatsupport per Mail oder PN!

    Comment

    • #3
      Ich wollte kurz an einem Beispiel zeigen was ich meine. Das Problem ist, das Beispiel stellt alles wie erwartet dar. Es kann also nicht an den absolute/relative positionierungen liegen.
      An was kann es sonst liegen, dass die Rahmen der DEF-divs alle eng zusammen oben am oberen Rande des C-divs sind, die Inhalte dieser divs aber normal dargestellt werden.

      Hier noch das Beispiel, das aber zu meiner Ueberraschung richtig dargestellt wird:

      <html>

      <style type="text/css">
      #main {
      position: relative;
      top: 99px;
      left: 118px;
      width: 660px;
      }
      #A {
      position: relative;
      top: 0px;
      left: 0px;
      width: 648px;

      }
      #B {
      position: relative;
      top: 10px;
      left: 0px;
      width: 660px;
      }
      #BB {
      position: absolute;
      }
      #C {
      position: absolute;
      }


      .DEF {
      position: relative;
      border: solid green;
      }

      </style>
      </html>

      <body>
      <div id="main">
      <div id="A">
      AAAAAAA<br>AAAAAAAAA

      </div>

      <div id="B">
      <div id="BB">
      <p>BB BB BB BB</p> <p>BB BB BB BB</p>
      </div>

      <div id="C">
      <div id="D" class="DEF">
      DDDDDDD<br>DDDDDD
      </div>
      <div id="E" class="DEF">
      EEEEEEEE<br>EEEEEEEE
      </div>
      <div id="F" class="DEF">
      FFFFFFFFF<br>FFFFFFFF
      </div>
      </div>

      </div>
      </div>
      </body>

      Comment

      • #4
        Hallo dudel,

        bestehen die "Inhalte" der DEF-divs mglws. wiederum aus div-Containern die mit float formatiert sind und damit keine Block-Elemente mehr sind?
        Wenn du denkst du hast alle Bugs gefunden, dann ist das ein Bug in deiner Denksoftware.

        Quellcode ohne ein Mindestmaß an Formatierung sehe ich mir nicht an! Ich leiste keinen Privatsupport per Mail oder PN!

        Comment

        • #5
          Hallo Falk,
          Ich (resp. Du) haben das Problem geloest:
          Dein Hinweis oben hat mich darauf gebracht, die styles der Tabellen in den DEF-divs zu reviewen. Das align=left der Tabelle hat das problem verursacht. Wieso verstehe ich nicht, ich kann aber darauf verzichten.
          Hier noch mein Beispiel mit der Fehlfunktion:

          <html>

          <style type="text/css">
          #main {
          position: relative;
          top: 99px;
          left: 118px;
          width: 660px;
          }
          #A {
          position: relative;
          top: 0px;
          left: 0px;
          width: 648px;

          }
          #B {
          position: relative;
          top: 10px;
          left: 0px;
          width: 660px;
          }
          #BB {
          position: absolute;
          }
          #C {
          position: absolute;
          }


          .DEF {
          position: relative;
          border: solid green;
          }

          </style>
          </html>

          <body>
          <div id="main">
          <div id="A">
          AAAAAAA<br>AAAAAAAAA

          </div>

          <div id="B">
          <div id="BB">
          <p>BB BB BB BB</p> <p>BB BB BB BB</p>
          </div>

          <div id="C">
          <div id="D" class="DEF">
          <table align="left"><tr><td>DDDDDDD<br>DDDDDD</td></tr></table>
          </div>
          <div id="E" class="DEF">
          <table align="left"><tr><td>EEEEEEE<br>EEEEEE</td></tr></table>
          </div>
          <div id="F" class="DEF">
          <table align="left"><tr><td>EEEEEEE<br>FFFFFFF</td></tr></table>
          </div>
          </div>

          </div>
          </div>
          </body>


          Wenn Du eine Erklaerung hast, waere das natuerlich interessant fuer den Lerneffekt.

          Vielen Dank fuer die richtige Faehrte.
          Zuletzt editiert von dudel; 14.02.2008, 03:58.

          Comment

          • #6
            Originally posted by dudel View Post
            Das align=left der Tabelle hat das problem verursacht. Wieso verstehe ich nicht
            Warum mischst Du old-fashioned HTML-Attribute, die Layout-Zwecken dienen mit modernem CSS? Sagt Dir "Trennung von Inhalt und Layout" etwas? HTML nur für die Struktur (Dein Beispielinhalt war nicht sehr gehaltvoll, aber ließ befürchten, dass da auch was im Argen ist, Stichwort "Layout-Tabellen") und CSS für Design/Layout. Kein Mischmasch. Sonst endet das so übel wie bei Dir.

            Gruß,
            -Efchen

            Comment

            • #7
              Hallo,

              ich kann mich meinem Vorredner nur anschließen, auch wenn ich kein ganz so konsequenter Streiter für "Reines HTML" bin wie Efchen
              Man sollte es eben vermeiden CSS als "zusätzliches" Formatierungswerkzeug neben althergebrachten Attributen zu verwenden. Dann sollte man sauberen HTML-Quellcode schreiben - zur Prüfung kann man ihn bei validator.w3.org validieren lassen. Für den Firefox gibt es auch einige Plugins, die dies On-the-Fly machen.
              Erst wenn das OK ist, also Nebeneffekte ausgeschlossen sind, kann man versuchen zu erklären warum bestimmte Dinge nicht wie erwartet angezeigt werden.

              Gruß Falk
              Wenn du denkst du hast alle Bugs gefunden, dann ist das ein Bug in deiner Denksoftware.

              Quellcode ohne ein Mindestmaß an Formatierung sehe ich mir nicht an! Ich leiste keinen Privatsupport per Mail oder PN!

              Comment

              • #8
                ...ich habe saemtliche <tables> aus meinem Projekt eliminiert und das Leben macht wieder Spass...
                Nein, im Ernst, bevor ich Eure Antworten gelesen habe, hatte ich ein paar Stunden damit verschwendet, tables in den divs zu designen. Ich verstehe jetzt, dass dies ein grosser Fehler ist.

                Danke fuer die "Hirnwaesche".

                Gruss dudel

                Comment

                • #9
                  Originally posted by dudel View Post
                  Nein, im Ernst, bevor ich Eure Antworten gelesen habe, hatte ich ein paar Stunden damit verschwendet, tables in den divs zu designen. Ich verstehe jetzt, dass dies ein grosser Fehler ist.
                  Ich bin mir nicht sicher, ob Du das verstanden hast.

                  Tabellen sind nicht böse. Tabellen haben weiterhin ihren Zweck bei der Auszeichnung Deines Inhalts. Um tabellarische Daten auszuzeichnen, verwendet man weiterhin natürlich Tabellen und nichts anderes!

                  Nur, Tabellen zu Layoutzwecken zu benutzen, ist Unfug. Siehe dazu vielleicht auch: http://seybold.jan-andresen.de/

                  Genauso ist es Unfug, überall divs hin zu packen. Auch diese sollte man sparsam einsetzen und nur dafür verwenden, wozu sie gedacht sind: zum Gruppieren mehrerer Elemente.

                  Gruß,
                  -Efchen

                  Comment

                  • #10
                    ..ich hab das schon verstanden...

                    Aber vielen Dank nochmals fuer die Tips.
                    Zuletzt editiert von dudel; 14.02.2008, 17:57.

                    Comment

                    Previous template Next
                    Working...
                    X