MARK: div wird nicht angezeigt

Hallo,

ich möchte meine Homepage komplett auf css-Definitionen aufsetzen, habe aber
Probleme mit der Umsetzung des "floating":

#Anzeige
  {
   width:    auto;
   height:    auto;
   position:   absolute;
   background-color: #ffffff;
   margin:    50px 50px 50px 50px;
   z-index:   255;
  }

Dieser div-Bereich soll, jeweils mit 50px Abstand zur Anzeigefläche des Monitors,
die verbleibende Fläche komplett einnehmen, aber leider wird er mir nicht angezeigt.

Wenn ich die "position"-Angabe weglasse, dann bekomme ich rechts nur einen Scroll-
balken, aber eben wieder ohne dass mir der div-Bereich angezeigt wird.

Den div-Bereich habe ich wie folgt als allerletzten, anzuzeigenden div eingebunden,
um sicherzustellen, dass er auch wirklich alle anderen überlagert:

<div id="Anzeige"></div>

Was muß ich an meiner css-Definition ändern, damit er mir angezeigt wird?

Vielen Dank für Eure Anregungen/Tips/Tricks/Lösungsvorschläge...

VG
MARK

  1. hallo,

    ich möchte meine Homepage komplett auf css-Definitionen aufsetzen, habe aber
    Probleme mit der Umsetzung des "floating"

    Eichtig, bei dem von dir angegebenen Beispiel kommt gar keins vor ;-)

    #Anzeige
      {
       width:    auto;
       height:    auto;

    Das widerspriht deinem Wunsch "Dieser div-Bereich soll, jeweils mit 50px Abstand zur Anzeigefläche des Monitors, die verbleibende Fläche komplett einnehmen". Wenn du das möchtest, brauchst du eine Höhen- und Breitenangabe - beispielsweise in Prozent.

    position:   absolute;

    Ist überflüssig.

    margin:    50px 50px 50px 50px;

    Warum "margin", also einen Außenabstand?

    z-index:   255;

    Ist überflüssig.

    Den div-Bereich habe ich wie folgt als allerletzten, anzuzeigenden div eingebunden,
      <div id="Anzeige"></div>

    Und in welchem Browser hast du dir das gute Stück angeschaut? Der IE zeigt beispielsweise deswegen gar nichts, weil deinem DIV jeglicher Inhalt fehlt. Schreib irgendwas hinein und schau nach, was dann passiert.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    1. Hallo Christoph,

      obiger div soll auf der obersten Ebene angezeigt werden und alle
      darunter liegenden div-Bereiche, die das Layout erzeugen bzw.
      anzeigen, überlagern.

      Warum "margin", also einen Außenabstand?

      Ich hatte mir das so vorgestellt, dass dieser div die verbleibende
      Bildschirmgröße ausfüllt, deswegen der Außenabstand.

      Die Inhalte variieren, so dass es - ohne Ausnutzung der verbleibenden
      Bildschirmgröße - sehr unschön aussehen würde, wenn der div mal
      schmäler und kürzer, mal breiter und höher ist.

      Und in welchem Browser hast du dir das gute Stück angeschaut?

      Ich benutze Mozilla Firefox.

      Schreib irgendwas hinein und schau nach, was dann passiert

      Auch bei einem Inhalt wird der div nicht angezeigt.

      Gruß,
      MARK

    2. Eichtig, bei dem von dir angegebenen Beispiel kommt gar keins vor ;-)

      #Anzeige
        {
         width:    auto;
         height:    auto;

      Das widerspriht deinem Wunsch "Dieser div-Bereich soll, jeweils mit 50px Abstand zur Anzeigefläche des Monitors, die verbleibende Fläche komplett einnehmen". Wenn du das möchtest, brauchst du eine Höhen- und Breitenangabe - beispielsweise in Prozent.

      nein, auch breite und höhe mit auto zu definieren muss hier sein - allerdings ist das ohnehin voreinstellung des browses (somit überflüssig)

      position:   absolute;
      Ist überflüssig.

      nein, das ist für das gewünschte wichtig

      margin:    50px 50px 50px 50px;

      Warum "margin", also einen Außenabstand?

      das ist widerum überflüssig
      richtig ist:
      top: 20px;
      right: 20px;
      bottom: 20px;
      left: 20px;

      z-index:   255;
      Ist überflüssig.

      naja, vielleicht snid 254 elemente nachher im quelltext die in umgekehrter reihenfolge übereinander positioniert werden :D

      allerdings wird man mit oben genannter methodik ein problem mit dem internet explorer < 6 bekommen, aber auch dafür gibst eine lösung:

      http://www.alistapart.com/articles/conflictingabsolutepositions/

      1. top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;

        nachtrag: natürlich jeweils 50px ;)

        1. Perfekt, das war's, jetzt klappt's, perfekt... :-)))

          Besten Dank :-))

          Gruß
          MARK