nicht angemeldet
div-Box mit 10px Abstand zum Bildschirmrand herstellen
0 0 0 
MudGuard
div-Box mit 10px Abstand zum Bildschirmrand herstellen
Hallo,
ich versuche mir gerade ein auf CSS basiertes Layout zu basteln. Leider verzweifle ich gerade schon an der ersten Hürde. Ich will einfach den Inhalt der Website in einer Box haben, die nach allen Seiten zum Rand einen Abstand von 10px hat.
Dies habe ich mit body { margin:10px; padding:0px; } versucht. Im Firefox ist aber am rechten Rand kein Abstand zu sehen. Erhöhe ich den Abstand von 10px auf 20px ist dort ein etwa halb so breiter Rand wie Links und oben zu sehen. Ich glaube also, dass die Scrollleiste einen Teil der Website verdeckt.
Natürlich könnte ich es mit margin-right:20px; schaffen, dass recht ein genügend breiter Rand bleibt, aber dann würde das ja im Opera schlecht aussehen.
OK, das wars dann, vielen Dank schonmal für eure Hilfe,
brockerdocker
Hier ein Beispiel:
<html>
<head>
<title></title>
<style type="text/css">
<!--
[code lang=css]
#gr { width:100%; background-color:green; padding:5px; margin:0px; text-align:center; }
body { margin:10px; padding:0px; }
-->
</style>
</head>
<body>
<center>
<div id="gr">
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
Inhalt<br>
</div>
</center>
</body>
</html>
[/code]
-
Hell-O!
ich versuche mir gerade ein auf CSS basiertes Layout zu basteln. Leider verzweifle ich gerade schon an der ersten Hürde. Ich will einfach den Inhalt der Website in einer Box haben, die nach allen Seiten zum Rand einen Abstand von 10px hat.
Das dürfte für den unteren Rand schwierig werden.
Dies habe ich mit
body { margin:10px; padding:0px; }versucht.Ähm, warum soll der Body einen *Außen*abstand von 10px haben? Am Einfachsten scheint mir, zunächst den von mir genannten Ansatz zu verfolgen. Sodann weise dem Container den gewünschten Außenabstand zu und eliminiere die Breitenangabe. Damit hättest du das gewünschte Ergebnis. Die center-Tags sind übrigens überflüssig.
Ein Problemfall ist der untere Rand, den man m.W. in Nicht-IEs nur mit einem leeren Fußzeilencontainer der entsprechenden Höhe erzeugen kann. Aber sicher gibt's dafür eine bessere Lösung.
Siechfred
--
Hier könnte Ihre Werbung stehen.
Räucherofen selber gebaut || Das Steuerblog || RT 221 Erfurt-Altstadt i.V. -
versuch es mal so:
body { margin:10px; padding:0px; }
Margin ist der Aussenabstand, padding der Innenanstand. Du möchtest das Div vom Viewport fernhalten und nicht dem Body vom Universum.
Also: margin:0px; padding 10px;
(evtl. das Div 100% Höhe und Breite).<center>
</center>Was ist das? Bitte löschen!
-
Hi,
#gr { width:100%; background-color:green; padding:5px; margin:0px; text-align:center; }
Der Inhaltsbereich Deines div-Elements ist also so breit wie der zur Verfügung stehende Platz.
Dazu hat das div an allen Seiten noch 5px padding ...Da Du im body zu overflow nichts angegeben hast, gilt "visible". Dein div läuft also nach rechts raus aus dem body ...
Warum machst Du die Vorgabe width:100%?
Vermutlich ist doch width:auto (also der default-Wert) doch das, was Du haben willst.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.