DIVs und Internet Explorer...

[Andreas]

Hallo,

ich suche seit Stunden ein Lösung für mein (an und für sich) recht einfaches Problem. Hab auch schon das Archiv durchwühlt aber nichts passendes gefunden. Keine der gefunden Lösungen wird von allen getesteten Browsern (IE, Opera und FF) ordentlich dargestellt...

PROBLEM:

Ein Div so auszurichten, dass der linke Rand und der rechte Rand des Divs immer 160px vom Bildschirmrand entfernt ist.

Ich habe es mit sämtlichen paddings und margins versucht, aber leider vergebens.

Am ehesten geht es noch so, aber hier macht der IE6 Probleme da er den rechten Rand nicht 160px innerhalb des rechten Browserfenterrandes legt.

.mittig {
 position: absolute;
 left: 160px;
 right: 160px;
 }

<div class="mittig">Text</div>

Wie könnte man das lösen? Danke für eure Hilfe!

[willie.de]

hallö Andreas,

Ein Div so auszurichten, dass der linke Rand und der rechte Rand des Divs immer 160px vom Bildschirmrand entfernt ist.

bei mir funxt das sehr gut:
  body,html { margin:0; padding:0; text-align:center; }
  div { margin:160px; border:solid 1px #000; }

grüße aus Leipzig
willie

[MudGuard]

Hi,

Ein Div so auszurichten, dass der linke Rand und der rechte Rand des Divs immer 160px vom Bildschirmrand entfernt ist.

Das ist von vornherein zum Scheitern verurteilt - der Bildschirmrand ist für CSS nicht greifbar, also sind auch Abstände davon nicht einstellbar.

cu,
Andreas

[Andreas]

Hallo Andreas,

Ein Div so auszurichten, dass der linke Rand und der rechte Rand des Divs immer 160px vom Bildschirmrand entfernt ist.
Das ist von vornherein zum Scheitern verurteilt - der Bildschirmrand ist für CSS nicht greifbar, also sind auch Abstände davon nicht einstellbar.

Im Opera und im Mozilla FireFox ist das ohne Probleme machbar! Wenn man ein Div "absolute" positioniert und es kein übergeordnetes Div gibt dann wird der Browserfensterrand (=Bildschirmrand) genommen.  Man schreibt

div {position: absolute; top: 20px; left: 160px; right: 160px;}

und schon sind die ränder des DIVs genau soweit vom Seitenrand entfernt. Nur der IE ignoriert die Angabe für right...

Aber es muss doch eine Möglichkeit geben dass es auch mit dem IE klappt?

Danke, Andreas!

@Willie: Sorry aber damit habe ich das gleiche Problem.. Der IE macht das Div nicht breit genug, immer nur so breit wie der Inhalt ist. Und der rechte Rand sollte immer 160px  vom rechten Browserfensterrand entfernt sein. Mit anderen Browsern würde deine Lösung aber auch funktioneren!

[MudGuard]

Hi,

der Browserfensterrand (=Bildschirmrand)

Wie kommst Du auf den absurden Gedanken, daß der Browserfensterrand auch nur das mindeste mit dem Bildschirmrand zu tun hat?

cu,
Andreas

[Detlef G.]

Hallo Andreas

Ein Div so auszurichten, dass der linke Rand und der rechte Rand des Divs immer 160px vom Bildschirmrand entfernt ist.

Ja, dass ist ein Problem. Du hast mittels CSS keinen Zugriff auf den
Bildschirmrand, wie dir MudGuard bereits schrieb.
Solltest du nicht den Bildschirmrand sondern Rand deiner Seite bzw. den
Innenrand des, für die Anzeige deiner Seite zur Verfügung stehenden
Browserfensters meinen, ist dies möglich.

Ich habe es mit sämtlichen paddings und margins versucht, aber leider vergebens.

Das wäre der richtige Ansatz, wenn du das Element nicht absolut
positionieren würdest.
Wenn du es absolut positionierst, nimmst du es aus dem Elementefluss,
klebst es praktisch an der angegebenen Position auf die Seite.
Damit bezieht es seine Randabstände nicht mehr auf den Fensterrand.

.mittig {
position: absolute;
left: 160px;
right: 160px;

Ja, dass kann der IE nicht.
Warum muss das Element absolut positioniert sein?
Merke: Absolut positioniert ist sehr oft absolut falsch!

Wenn du dich von der wahrscheinlich sowieso unnötigen, absoluten
Positionierung verabschiedest, richtet dir willies Vorschlag das Element
wie von dir gewünscht aus.

Auf Wiederlesen
Detlef

[Andreas]

Hallo Detlef, vielen Dank, ohne dem "Position: absolute;" klappts einwandfrei. Ich dachte immer man muss einen position-tag angeben... aber gut, man lernt nie aus ;)

Das Problem das ich jetzt allerdings habe ist:
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.

Der Code ist dann folgendermaßen:

.inhalt {
        padding-bottom: 50px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
        margin-top: 155px;
        margin-left: 160px;
        margin-right: 160px;
        margin-bottom: 0px;
        z-index: 98;
        border: 1px solid #00FF00;
        }

.nachoben {
        position: absolute;
        bottom: 0px;
        left: 50%;
        z-index: 99;
        width: 120px;
        height: 30px;
        margin-left: -60px;
        }

...

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

allerdings gibt es hierbei Probleme, das "nachoben"-div ist nicht unten im "inhalt"-div sondern immer unten am Ende des Browser-Fensters. Als ich im "inhalt"-div noch "position: absolute;" stehen hatte wurde das "nachoben"-div immer korrekt unten am "inhalt"-div ausgerichtet.

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

Danke!!

Grüße, Andreas

[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

[Andreas]

Hallo Detlef,

vielen Dank, hat geklappt!

Ich habe es jetzt komplett ohne position-tags geschrieben, es geht tatsächlich so auch ;)

Das untere Div mit dem Link habe ich jetz weggelassen, es war im Grunde genommen nicht nötig. Der "nach-oben"-Link ist jetzt im Inhalts-div integriert.

Danke für deine Beispiele, hat mir sehr geholfen!

Grüße, Andreas