DIVs und Internet Explorer...

[Detlef G.]

Hallo Andreas

...Ich dachte immer man muss einen position-tag angeben... aber gut, man lernt nie aus ;)

Warum sind nur so viele der irrigen Annahme, dass bei einem CSS-Layout alles
in Divs gepackt und positioniert werden müsse?

Meine Herangehensweise ist folgene:

1.
HTML schreiben, dabei dem Inhalt entsprechende logische Auszeichnungen
verwenden (h1, h2, ..., p, ul, li, strong, em, usw.)

2.
Wie sieht es jetzt aus?
Welche Elemente sollten gemeinsam formatiert und dazu mit einem Div
zusammengefasst werden?
Was muss ich mittels CSS einstellen?
(Schriftfarbe, Schriftart, Schriftgröße, Hintergrund, Rahmen, Margin,
Padding)

3.
Dann bekommen die Elemente selbst im CSS die notwendigen Eigenschaften.
Nur, wo dies nicht möglich oder unübersichtlich ist, werden Klassen oder
IDs dazu eingefügt und verwendet.

Nur dort, wo Elemente aus dem Fluss entfernt werden müssen (z.B.
Aufklebereffekt), verwende ich position:absolute.

Statt, die Möglichkeiten von HTML und CSS sinnvoll zu verwenden, versuchen
viele mit wahren Positionierungsorgien ein Drucklayout im Browser zu
erzeugen.

Ich habe innerhalb des Divs noch ein untergeordnetes, das immer direkt unten innerhalb des übergeordneten Divs am Rand klebt. Dort ist ein "nach oben"-Link.

Wo würde es denn ohne position:absolute angezeigt?

.inhalt {
        padding-bottom: 50px;

um Platz für .nachoben zu schaffen, den es sich selbst nehmen würde,
wenn es nicht absolut positioniert wäre?

padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;

Das geht einfacher padding: 0;

margin-top: 155px;
        margin-left: 160px;
        margin-right: 160px;
        margin-bottom: 0px;

Das geht einfacher margin: 155px 160px 0 160px;

z-index: 98;

Nur sinnvoll, wenn das Element absolut positioniert wäre und sonst von einem
anderen überlappt würde.

border: 1px solid #00FF00;
        }

.nachoben {
        position: absolute;

Wozu? Ist es nicht das letzte Element in .inhalt?

...
        }

<div class="inhalt">Inhalt.. Text

Gibt es im Inhalt keine Überschriften, Absätze, usw.?

<div class="nachoben"><a href="#top">nachoben</a></div>

Warum ist ein einzelner Link in einem extra Div verpackt?

Weiß jemand wie ich das nachoben-div OHNE position: absolute; im inhalts-div an dessen Ende bekomme? Dann wären all meine Probleme gelöst :P

Indem du dein position:absolute weglässt (bzw. nur dort verwendest, wo dieses wirklich nötig ist, und stattdessen sinnvoll mit margin, padding und
text-align arbeitest.

z.B. so:

.inhalt {
        padding:0;
        margin: 155px 160px 0 160px;
        border: 1px solid #0F0;
        /* für IE */
        text-align:center;
        }
      .inhalt p {
        margin:0;
        padding:0;
        text-align:left;
        }
      .nachoben {
        display: block;
        width: 120px;
        height: 30px;
        margin: 20px auto 0 auto;
        /* damit es zu sehen ist */
        background-color: #bfb;
        }

<div class="inhalt">
      <p>Inhalt.. Text</p>
      <a href="#top" class="nachoben">nachoben</a>
    </div>

Auf Wiederlesen
Detlef