Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Rahmen am Browserfensterrand ?





Frage

Hi Leute wie kann man es bewerkstelligen, dass ein Rahmen (border) immer am Rand des Browserbildschirmes liegt (mit einem definierten Abstand (margin) zum Rand natürlich), unabhängig vom Inhalt der Webseite? Wenn ich einen äusseren Rahmen definiere, spannt er sich ja zunächst nur um den Inhalt auf, es soll aber ein sichtbarer Rahmen um die ganze Seite bleiben, egal, wieviel Inhalt auf einer Einzelseite steht, und egal, ob das Browserfenster maximiert oder auf einen Teil minimiert ist. Verständlich? Danke und Gruss Heiko

Antwort 1 von derpfleger

OK, habs jetzt erst mal so gelöst:


<html>
<head>

<style type="text/css">
<!--
body {
 margin: 0px 0px 0px 0px;
}
#aussenrand {
 position: absolute;
 width: 96%;
 height: 95%;
 left: 0px;
 top: 0px;
 border: 3px solid #000000;
 margin:20px;
}
-->
</style>

<title>Aussenrahmen</title>
</head>

<body>
<div id="aussenrand">
</div>
</body>
</html>



Aber was ich nicht verstehe:
warum kann ich die Angaben width und height nicht auf 100% setzen und mit margin einen definierten Abstand zum Rand erzeugen? bei 100% rutscht trotz margin der rechte un untere Rand aus dem Fenster heraus, scrollbalken entstehen.
<getestet mit IE6.0 und Firefox1.0>

Gruss Heiko

Antwort 2 von Nicolas

das ist normal [1], du sagst das du 100% Fensterhöhe und Breite für den content haben möchtest, die werte von padding, border und margin kommen da natürlich noch dazu.

Wenn du einen farbigen Aussenrand Zeichen möchtest der 20px vom Fensterrand weg ist dann stell deinen #aussenrand wieder auf 100% aber margin und padding auf 0. den abstand vom Rand erzeugst du dann mit einer padding Angabe für den body. Aber ich sehe nicht was du damit machen möchtest, wenn der Content länger ist als dieser Bereich hängt der dann ja aus dem Rand raus (deswegen würd ich ja nie die Höhe festlegen wenn ich nicht 100% sagen kann das der Content nicht raus wächst).


[1] http://www.w3.org/TR/REC-CSS1#formatting-model

Antwort 3 von sTk

Versuche doch mal folgendes

<html> 
<head> 

<title>Aussenrahmen</title> 
</head> 

<body style="margin: 20px">

<table cellpadding="0" cellspacing="0" width="100%" height="100%" style="border: 10px solid #FF8000;">
<tr><td></td></tr>
</table>

</body> 
</html> 


Gruß, Steffen

Antwort 4 von derpfleger

@all:

danke für die Antworten. Tja, auf die Boxmodell-Probleme hätte ich auch selbst kommen können, mal wieder nicht nachgedacht. Auf Tabellendesign wollte ich eigentlich absichtlich nicht zurückgreifen.
Naja, das Ganze sollte für ein Fliesenlegergeschäft eine Seite werden, wobei der Bildschirm eben den Eindruck einer Fliese vermittelt und der Inhalt der Seite sozusagen das Fliesendesign ist. Aber stimmt schon, bei kleineren Fenstergrössen rutscht dann der Inhalt über den "Fliesenrand" hinaus. Muss darüber wohl noch ein bischen nachdenken.

Danke erst mal und Gruss
Heiko

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: