1. Liebe Forumsgemeinde,

    aufgrund der Bestimmungen, die sich aus der DSGVO ergeben, müssten umfangreiche Anpassungen am Forum vorgenommen werden, die sich für uns nicht wirtschaftlich abbilden lassen. Daher haben wir uns entschlossen, das Forum in seiner aktuellen Form zu archivieren und online bereit zu stellen, jedoch keine Neuanmeldungen oder neuen Kommentare mehr zuzulassen. So ist sichergestellt, dass das gesammelte Wissen nicht verloren geht, und wir die Seite dennoch DSGVO-konform zur Verfügung stellen können.
    Dies wird in den nächsten Tagen umgesetzt.

    Ich danke allen, die sich in den letzten Jahren für Hilfesuchende und auch für das Forum selbst engagiert haben. Ich bin weiterhin für euch erreichbar unter tti(bei)pcwelt.de.
    Dismiss Notice

CSS und position:absolute

Discussion in 'Programmieren' started by pcschröder76, Aug 5, 2005.

Thread Status:
Not open for further replies.
  1. pcschröder76

    pcschröder76 Megabyte

    Hi Leute,

    Folgendes Problem: ich möchte Daten, die aus einer Datenbank ausgelesen werden, mithilfe von CSS am oberen Rand der Seite darstellen. Meine index.php ist bisher folgendermassen aufgebaut:

    Code:
    
    <body>
    
    <INHALT DER SEITE>
    
    <div style="position:absolute; margin-top:10px">
    
    </body>

    Sämtliche Unterseiten werden aus der Index.php sowie der entsprechenden Unterseite.php zusammengesetzt, wodurch sich eine jeweils unterschiedliche Länge der einzelnen Seiten ergibt.

    Stünde der Code zum Darstellen der Daten ganz am Anfang (z.B. direkt nach dem <body>-Tag), so würde ich immer die "alten" Daten angezeigt bekommen, da die Daten bei jedem Seitenaufbau neu berechnet werden.

    Wie kann ich nun, unabhängig von der Länge der gerade dargestellten Unterseite, die Daten an der immer selben Position am oberen Rand darstellen?



    Danke Kalweit,



    mfg

    Michael
     
  2. kalweit

    kalweit Hüter der Glaskugel

    Ohne dich wirklich verstanden zu haben, suchst du vielleicht: "left: xxx px; top: xxx px;"?
     
  3. pcschröder76

    pcschröder76 Megabyte

    Was ist denn der Unterschied zwischen top: und margin-top:?

    Das richtet sich doch beides nach dem übergeordneten Element...

    :confused:



    mfg

    Michael
     
  4. kalweit

    kalweit Hüter der Glaskugel

    "margin" beschreibt den Außenabstand eines Elements zum Elternelement. "position" hat auf diesen Wert keinen Einfluss. "top" hingegen bezeichnet die obere Position eines Elementes. Ob es einen Bezug zum Elternelement gibt, entscheidet sich durch "position" - default ist hier "relative", d.h. das "top" würde zum "top" bzw. "height" (je nach ausgeführten Zeilenumbruch) des Elternelemetes addiert. Bei "position:absolute" bezieht sich "top" aber auf den <body>.
     
  5. kalweit

    kalweit Hüter der Glaskugel

    PS: "margin-top" ist nur ein "einseitiges" margin und hat mit dem alleinstehenden "top" nichts zu tun.
     
  6. pcschröder76

    pcschröder76 Megabyte

    So, jetzt ist es an mir, nix zu verstehen. Aber immer wieder faszinierend, dieses CSS.

    Ich werd mal weiterforschen, und mich bei Bedarf wieder melden.

    Danke für die Hinweise Kalweit,


    mfg

    Michael
     
  7. kalweit

    kalweit Hüter der Glaskugel

    Warum tippst du nicht einfach <div style="position:absolute; top:0px; left:0px"> ein und schaust was passiert...
     
  8. pcschröder76

    pcschröder76 Megabyte

    Hab ich längst. Mir sind hier eine ganze Reihe von Dingen unklar, z.B. weshalb folgende Code-Auszüge sich unterschiedlich verhalten:

    Code:
    <body>
    
    <div style="position:absolute; top:0px; left:0px">
    
    <INHALT DER SEITE>
    
    </body>
    
    und

    Code:
    <body>
    
    <INHALT DER SEITE>
    
    <div style="position:absolute; top:0px; left:0px">
    
    </body>
    

    Der erste Code stellt das Element am oberen Rand dar, ganz wie gewünscht.

    Der zweite Code stellt das Element unterhalb des Inhaltes der Seite dar, obwohl durch das absolute Attribut doch gewährleistet sein müsste, dass sich die Positionierung am übergeordneten Element, meines Erachtens <body>, orientieren müsste...



    mfg

    Michael
     
  9. kalweit

    kalweit Hüter der Glaskugel

    Das Verhalten wird daran liegen, dass der abschließende </div> TAG fehlt - btw: wäre es hilfreich, wenn du mal ein wenig mehr Quellcode posten würdest...
     
  10. pcschröder76

    pcschröder76 Megabyte

    Alles klar, es haut hin.

    Nun muss ich mir deine Ausführungen zum Thema top und margin-top nochmals durchlesen, um auch zu blicken, was ich denn nun genau gemacht habe...


    Dankeschön,



    mfg

    Michael
     
Thread Status:
Not open for further replies.

Share This Page