Steve: Seite einrahmen

Hallo,

kennt jemand einen Trick mit dem man Mozilla/Firebird dazu bringt, einen äusseren Rahmen um die Seite darzustellen. Der untere Rahmen wird leider falsch positioniert. Aber schon einiges getestet, aber Fehlanzeige. Beim IE geht's, so wie ich will

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>

<body style="height:100%; margin:0; padding:15px;border:10px solid #E85500;border-top-width:10px; border-left-width:20px; border-right-width:25px;">

</body>
</html>

Eine Abhilfe wär wohl ne Tabelle, aber man soll ja Tabellen nicht mißbrauchen :-)

Thx
Steve

  1. Hallo,

    html{
      height:100%;
      width:100%;
      border:5px solid red;
    }

    Mit freundlichen Grüßen,
    Andreas Waidelich

    --
    signatures eat bandwidth
    1. Hi Andreas,

      danke für die schnelle Antwort. Wenn ich statt height:100%; height:95%; nehme, dann geht's!

      Mein Code war doch auch fast so! Nur hast du HTML die CSS-Anweisung zugewiesen, ich dem BODY-Tag

      Was bewirkt eine Zuweisung an den Tag HTML denn?

      Ich definiere nur z.B.:

      body {margin:0px;padding:10px;padding-top:10px;
            background:#005b80; color:#FFFFFF;}

      nie weise ich HTML etwas zu.

      Bye,
      Steve

      html{
        height:100%;
        width:100%;
        border:5px solid red;
      }

  2. Hi Steve,

    <body style="height:100%; border:10px [...]

    das Box Model [1] besagt, dass ein Rahmen *außen* angefügt wird, er wird also in Browsern, die die Seite korrekt darstellen am unteren (sichtbaren) Ende der Seite nicht zu sehen sein, sondern 10px unterhalb beginnen und 20px unterhalb enden.

    -------10px------
     |                 |
     |                 |
    10px  100% Höhe  10px
     |                 |
     |                 |
      ------10px-------

    Ein Rahmen um ein, auf den Viewport bezogen, 100% hohes/breites Element wird daher an zwei Seiten nicht sichtbar sein (naja, bei Tabellen).

    Weiters bewirkt die XML-Deklaration am Beginn des Quelltexts, dass der M$IE6 in den Box Model Bug (Suchmaschinen geben Auskunft) läuft und wie Version 5 rendert -- nämlich falsch.

    Grüße,
     Roland

    [1] http://www.w3.org/TR/CSS21/box.html#box-dimensions

    --
    http://my.opera.com/dev/articles/20030519/
    http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm
    selfcode = ss:| zu:} ls:} fo:} de:> va:} ch:| sh:) n4:& rl:| br:< js:{ ie:{ fl:{ mo:|
    1. Hi,

      dann kann man mit reinen CSS-Anweisungen also keine Seiten einrahmen oder ?

      Wie gesagt der Code klappt beim IE (frisst leider halt alles) und der "strengere" Mozilla stellt also den Code konform da.

      Bye,
      Steve

      das Box Model [1] besagt, dass ein Rahmen *außen* angefügt wird, er wird also in Browsern, die die Seite korrekt darstellen am unteren (sichtbaren) Ende der Seite nicht zu sehen sein, sondern 10px unterhalb beginnen und 20px unterhalb enden.

      1. Hi Steve,

        dann kann man mit reinen CSS-Anweisungen also keine Seiten einrahmen oder ?

        Version 1: Du verpasst <body> einen Rahmen, außerdem noch margin:0 und padding:0. Somit stimmt die Breite. Mit der Höhe wirst du *immer* ein Problem haben. Du wirst nämlich nie wissen, wie hoch das Browserfenster ist. Bei kleinem Fenster muss eine Höhe von 100% nicht unbedingt ausreichen, den gesamten Inhalt darzustellen.

        Version 2: Oben, sowie rechts und links definierst du einen Rahmen, unten ein fix positioniertes Hintergrundbild, das aussieht, wie ein Rahmen. So umgehst du das Problem mit der Höhe und musst nur noch sicherstellen, dass der Rahmen rechts und links bis nach unten reicht. S. oben...

        Wie gesagt der Code klappt beim IE (frisst leider halt alles) und der "strengere" Mozilla stellt also den Code konform da.

        Korrekt.

        Grüße,
         Roland

        --
        http://my.opera.com/dev/articles/20030519/
        http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm
        selfcode = ss:| zu:} ls:} fo:} de:> va:} ch:| sh:) n4:& rl:| br:< js:{ ie:{ fl:{ mo:|