Knut: DIV soll (100% - Ränder) breit sein

SELF-Forum

DIV soll (100% - Ränder) breit sein

Knut
– Informationen zu den Bewertungsregeln

Guten Abend,

ich habe einen großen DIV-Block, der im Hintergrund der Seite erscheinen soll. Das Problem habe ich bei den margins. Ich möchte soz. den gesamten Bildschirm mit einem weißen DIV füllen, aber außenherum soll ein 29px breiter grauer Rahmen sein. Folgenden CSS-Code habe ich jetzt:

/* Tag-Eigenschaften */
body {
 background-color: #9B9B9B;
 cursor:default;
 margin: 29px 29px 29px 29px;
}
...
/*Formatierung der Boxen */
#weiss {
 position: absolute;
 width: 100%;
 height: 100%;

border: 1px solid;
 background-color: #FFFFFF;
}

--

Der Doctype ist http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd

Firefox "scheint" die Gesamtbreite d. Bildschirms "gemessen" und dann an den linken margin gesetzt zu haben. Bin also am rechten Rand 29px zu breit, so dass 1. Scrollbalken erscheinen und 2. man den rechten grauen Rand nicht sehen kann. Sonst passt es. Der IE zeigt lediglich einen eine Zeile hohen, aber ebenfalls nach rechts verlängerten Balken an.

Ich würde gern - so wie bspw. in Tabellen - erreichen, dass ein untergeordnetes Element (so wie #weiss dem body) 100% als "den Rest" ansieht und nicht als die gesamte Bildschirmbreite.

Habt ihr einen Tipp für mich? Schonmal danke!!

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. DIV soll (100% - Ränder) breit sein

    Detlef G.
    – Informationen zu den Bewertungsregeln

    Hallo Knut

    Der Doctype ist http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd

    Das ist die URI zum Doctype.
    Warum überhaupt gerade dieser Doctype?
    Soll es inkompatibel zu den meist verwendeten Browsern werden?
    Ich würde eher
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> verwenden.

    Firefox "scheint" die Gesamtbreite d. Bildschirms "gemessen" ...

    Du meinst sicher des Viewports (Anzeigebereich des Browserfensters).

    ... und dann an den linken margin gesetzt zu haben. Bin also am rechten Rand 29px zu breit, so dass 1. Scrollbalken erscheinen und 2. man den rechten grauen Rand nicht sehen kann.

    Selbstverständlich, denn width enthält auch margin, border und padding.

    Ich würde gern - so wie bspw. in Tabellen - erreichen, dass ein untergeordnetes Element (so wie #weiss dem body) 100% als "den Rest" ansieht und nicht als die gesamte Bildschirmbreite.

    Das wirst du wohl nicht erreichen.

    Habt ihr einen Tipp für mich? Schonmal danke!!

    Eventuell so:

    <?xml version="1.0"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
  <head>  
    <title>New Document</title>  
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  
    <style type="text/css">  
<!--  
[code lang=css]html, body{  
 margin:0;  
 padding:0;  
 height:100%;  
}  
div{  
 position:absolute;  
 top:0;  
 right:0;  
 bottom:0;  
 left:0;  
 border:29px solid #aaa;  
}  
* html div{  
 height:100%;  
 width:100%;  
}  

~~~//-->  
</style>  
  </head>  
  <body>  
    <div>  
      Inhalt  
    </div>  
  </body>  
</html>  
[/code]  
  
  
Auf Wiederlesen  
Detlef  

-- 
- Wissen ist gut  
- Können ist besser  
  
- aber das Beste und Interessanteste ist der Weg dahin!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Berichtigung

      Detlef G.
      – Informationen zu den Bewertungsregeln

      Hallo Knut

      Falsch:

      Selbstverständlich, denn width enthält auch margin, border und padding.

      Richtig:
      Selbstverständlich, denn zu widht kommmt margin, border und padding hinzu.

      Gesamtbreite eines Elements:
      margin + border + padding + widht + padding + border + margin

      Auf Wiederlesen
      Detlef

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln