Position div

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    Position div

    Hallo zusammen,

    meine Seite ist zentriert. Nun habe ich einen div, den ich immer an einer ganz bestimmten Stelle anzeigen möchte (da, wo meine Sprachflagge steht). Wenn ich das Browserfenster vergrößer und verkleiner, dann bekommt die Flagge durch die Zentrierung ja immer ne andere Position. Wie bekomme ich jetzt mein div immer dahin?

    VIELEN DANK!
    strauberry
    Stichworte: -
  • #2

    online-beispiel
    code
    kein position absolute
    glaskugel fragen

    gruß
    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar

    • #3
      Re: Position div

      Original geschrieben von strauberry
      Wie bekomme ich jetzt mein div immer dahin?
      In dem du dich über absolute Positionierung mal informierst - insb., worauf sie Bezug nehmen kann.
      I don't believe in rebirth. Actually, I never did in my whole lives.

      Kommentar

      • #4
        http://www.css4you.de/position.html
        Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

        Kommentar

        • #5
          Hi,

          vielen Dank für den Link! Das mit absolute ist soweit schon klar, nur da gibts ein Problem: das div soll für die Ausrichtung absolute zu einem td sein, also als Elternelement eine td haben. Wenn ich das div jetzt aber da reinschreibe, dann verschiebt es den ganzen Inhalt in der td es soll aber ja darüber liegen. Ist wohl nur noch ein befehl, der da hinmuss, aber welcher :-)?

          DANKE!

          Kommentar

          • #6
            Original geschrieben von strauberry
            Das mit absolute ist soweit schon klar,
            Es ist dir nicht klar - sonst müsstest du die folgende Frage ja gar nicht mehr stellen.
            nur da gibts ein Problem: das div soll für die Ausrichtung absolute zu einem td sein, also als Elternelement eine td haben. Wenn ich das div jetzt aber da reinschreibe, dann verschiebt es den ganzen Inhalt in der td es soll aber ja darüber liegen.
            Wenn du es absolut positionierst, nimmst du es aus dem Fluss - es kann dann also gar nichts mehr "verschieben".


            Du musst lediglich noch beachten, welche Einschränkung bzgl. Positionierung für Tabellenzellen gelten:
            http://www.w3.org/TR/CSS21/visuren.html#choose-position
            I don't believe in rebirth. Actually, I never did in my whole lives.

            Kommentar

            • #7
              Hallo!

              Wenn du den div-container absolut positioniert hast, und angeblich den "Tabelleninhalt" dadurch verschiebst, gehe ich mal davon aus, dass du den Inhalt in der Tabelle auch in das div geschrieben hast oder nicht?

              Wenn der Inhalt also logischerweise in dem div ist, welches du ja verschiebst, dann verschiebt sich der Inhalt also mit. Überprüfe diesen Sachverhalt mal, und dann überlege ob es wirklich der Tabelleninhalt ist der sich verschiebt.

              Außerdem ist noch zu sagen: Du willst das td-element als elternelement haben. Bei Absoluter Positionierung wird ohnehin das Elternelement als Referenz genutzt. Wenn du deinen div-container also im td-element hast, ist es dein elternelement.
              Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

              Kommentar

              • #8
                Hallo,

                anbei meine Test-HTML. Laut DOM-Inspektor vom FF ist das div ein Kindelement des TD und trotzdem bezieht sich das position: absolute des divs nciht auf die td sondern body...

                (Bitte jpg in html umbenennen).

                Wenn ich im td sage "position: absolute" dann gehts, aber das sieht irgendwie unsauber aus... muss ich da evtl. noch einfach so ein div um den ganzen Inhalt der td und hier auch position: absolute setzen?

                Kommentar

                • #9
                  Datei ging nicht... hier der Code:

                  PHP-Code:
                  <!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>Unbenanntes Dokument</title>
                  </                  head>

                  <                  body>
                  <                  table width="528" border="0" align="center" cellpadding="3" cellspacing="3">
                     <                  tr>
                        <                  td width="200">, velit tortor suscipit metus, in sollicitudin tellus nibh nec velit. Donec 
                  ac risus at erat tincidunt mattis                  . Suspendisse dictum eros nec risus. Morbi iaculis venenatis 
                  nibh                  . Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
                  hymenaeos                  . Praesent porta nibh ut arcu. Aliquam ipsum. Curabit</td>
                        <                  td width="328" style="position: absolute;">Lorem ipsum dolor sit amet, consectetuer 
                  adipiscing elit                  . Donec cursus purus sed nisl. Vestibulum eros. Pellentesque vitae arcu. In hac 
                  habitasse platea dictumst                  . Praesent odio mauris, dignissim et, molestie non, viverra at, nisi. 
                  Nullam tincidunt, magna eu porttitor molestie, nibh mauris dapibus elit, ut aliquet pede elit in
                   metus                  . Nullam condimentum felis ut urna. Cum sociis natoque penatibus et magnis dis 
                  parturient montes                  , nascetur ridiculus mus. Suspendisse blandit, leo sit amet blandit lacinia
                                            <div style="position: absolute; top: 20px; left: 20px; background:#0066CC;">Hier
                   steht                   die Box derin</div></td>
                     </                  tr>
                     <                  tr>
                        <                  td>&nbsp;</td>
                        <                  td>, velit tortor suscipit metus, in sollicitudin tellus nibh nec velit. Donec ac risus at erat 
                  tincidunt mattis                  . Suspendisse dictum eros nec risus. Morbi iaculis venenatis nibh. Class aptent 
                  taciti sociosqu ad litora torquent per conubia nostra                  , per inceptos hymenaeos. Praesent porta
                   nibh ut arcu                  . Aliquam ipsum. Curabit</td>
                     </                  tr>
                     <                  tr>
                        <                  td>&nbsp;</td>
                        <                  td>&nbsp;</td>
                     </                  tr>
                     <                  tr>
                        <                  td>&nbsp;</td>
                        <                  td>&nbsp;</td>
                     </                  tr>
                  </                  table>
                  </                  body>
                  </                  html> 

                  Kommentar

                  • #10
                    Original geschrieben von ArSeN
                    Bei Absoluter Positionierung wird ohnehin das Elternelement als Referenz genutzt.
                    Nein.
                    Das nächste Vorfahrenelement, dessen Positionierung vom Default static abweicht.

                    Bei fehlen eines solchen, ist der Bezugspunkt der Viewport.
                    Original geschrieben von strauberry
                    Laut DOM-Inspektor vom FF ist das div ein Kindelement des TD und trotzdem bezieht sich das position: absolute des divs nciht auf die td sondern body...
                    Siehe oben.

                    Verflixt, ich sagte doch, dass du dich darüber mal informieren sollst ...

                    Wenn ich im td sage "position: absolute" dann gehts, aber das sieht irgendwie unsauber aus...
                    Ist ja auch Quark.
                    muss ich da evtl. noch einfach so ein div um den ganzen Inhalt der td und hier auch position: absolute setzen?
                    Nein, kein position:absolute.

                    Und für andere Positionierungsarten das beachten, was ich zuvor schon aus der Spezifikation zitiert habe.
                    I don't believe in rebirth. Actually, I never did in my whole lives.

                    Kommentar

                    • #11
                      Wenn man was kann ist es immer einfach, deswegen bitte ich um ein wenig Geduld mit jemandem, der CSS noch nicht ganz durchstiegen hat...

                      Meine Frage basierte auf

                      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
                      (Zitat css4you)

                      Und der Erklärung unter http://www.css4you.de/elemente.html#parentchild.

                      td ist das Elternelement aber nicht positioniert, also gehts auf body-Ebene. Ein td zu positionieren ist aber "Quark". Was also machen? Einfach nur ein div drumrum? Das hat dann ja den Initialwert "static", ist es damit automatisch positioniert?

                      Hab das getestet und es geht nicht, also das div wird immer noch am body ausgerichtet.

                      Ich informier mich aber estmal, bevor hier noch jemand nen Aussetzer bekommt...

                      Kommentar

                      • #12
                        So, hab jetzt ne Lösung gefunden: ich mache um den ganzen Inhalt der td ein div mit position:relative. Dadurch ist das Elternelement (div) positioniert, es verändert sich aber nichts, weil es beim relative ja eine "Lücke" an der eigentlichen stelle hinterlässt, die es selbst schließt...

                        Kommentar

                        Vorherige template Weiter
                        Lädt...
                        X