| Autor |
Nachricht |
Scoon
Threadersteller
Dabei seit: 07.12.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 19.06.2007 16:50
Titel body {padding} und body{height:100%} möglich |
  |
|
Hallo,
ich möchte gerne ein blaues Viereck im Browser haben (DIV) das vom Rand des Browserfensters um jeweils 20px entfernt ist. Dabei sollen bei wenig Inhalt keine Scrollbalken entstehen. Ich habe es mit padding:20px im bodytag versucht, aber das führt zu Scrollbalken. Wie kann ich das Problem lösen?
Scoon
|
|
| |
  |
 |
rob
Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht: 
|
Verfasst Di 19.06.2007 17:01
Titel
|
|
|
In welchem Browser hast du die Scrollbars? In jedem?
Browser per Doctype-Switch in den standardkonformen Modus geschaltet?
Zeig mal einfach deinen Code.
Würde gerne mal sehen, wie du das versucht hat...
Sollte eigentlich nicht so schwer sein, dieses Problem zu lösen.
|
|
| |
|
|
|
Anzeige
|
|
|
Scoon
Threadersteller
Dabei seit: 07.12.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 19.06.2007 17:18
Titel
|
|
|
CSS
| Code: |
body {
background-color:#ffffff;
margin:20px;
padding:0px;
height:100%;
border:0px solid #4A79B3;
}
#all {
margin:0px;
width:100%;
min-height:80%;
height:auto !important;
height:100%;
border:1px solid #4A79B3;
background-color:#D8E5F5;
} |
HTML
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Grundplattenwahl</title>
<link href="../vicom3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="all">
</div>
</body>
</html> |
|
|
| |
|
|
EnterYourName
Dabei seit: 14.06.2007
Ort: Hamburg
Alter: 36
Geschlecht: 
|
Verfasst Mi 20.06.2007 01:08
Titel
|
|
|
Korrigiert mich bitte, wenn ich falsch liege (zu dieser späten Stunde... ich sollte längst schlafen >.<)...
Aber height:100% erzeugt das Elemtn in einer Höhe, die dem Browserfenster entspricht.
Wenn du dazu Positionierung durch padding nach unten korrigierst, MUSS logischerweise der Inhalt größer als das Browserfenster sein, denn das element ist schon so groß wie das Browserfenster und dazukommen die 20 pixel abstand...
Also entweder den Abstand rausnehmen oder die Höhe unter 100% korrigiren.
Möglicherweise solltest du den Abstand auch in Prozent angeben, damit der Abstand auch bei jeder Auflösung und jeder Fenstergröße zu einem scrollbalken-losem Ergebnis führt...
|
|
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 20.06.2007 07:51
Titel
|
|
|
Für die modernen Browser ginge das recht easy,
für die alten IEs kann man das afaik nur annähernd
hinfaken. Z.B. so:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>bluebox</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
BODY {
margin:0;
padding:0;
}
DIV#container {
position:absolute;
top:20px;
left:20px;
bottom:20px;
right:20px;
background:blue;
}
-->
</style>
<!--[if lt IE 7]>
<style type="text/css">
BODY {
height:100%;
}
DIV#container {
position:relative;
top:5%;
left:5%;
background:red;
height:90%;
width:90%;
}
</style>
<script type="text/javascript">
var init = function(){
var rand = 20;
var id = 'container';
var availW = (document.body.clientWidth)?document.body.clientWidth:false;
var availH = (document.body.clientHeight)?document.body.clientHeight:false;
if(availH > (rand * 2) && availW > (rand * 2)) {
with(document.getElementById(id).style){
position = 'absolute';
top = rand + 'px';
left = rand + 'px';
width = availW - (rand * 2) + 'px';
height = availH - (rand * 2) + 'px';
}
}
}
window.onload = init;
window.onresize = init;
</script>
<![endif]-->
</head>
<body>
<div id="container">
</div>
</body>
</html>
|
// edith: oder einfach noch ein wenig javascript für die oiden IEs 
Zuletzt bearbeitet von Raumwurm am Mi 20.06.2007 08:19, insgesamt 2-mal bearbeitet
|
|
| |
|
|
Scoon
Threadersteller
Dabei seit: 07.12.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 20.06.2007 09:41
Titel
|
|
|
@EnterYourName
Ja, genau so ist es, aber wie löst man es? Die Prozentangabe hilft nicht wirklich, das sie das Layout verzerrt. Aber es muss doch möglich sein ein DIV über das ganze Browserfenster zu ziehen und nur am Rand einen Abstand zu lassen. Von Javascript muss ich leider Abstand nehmen.
@Raumwurm
Wie würdest Du es denn für die neuen Browser machen?
Zuletzt bearbeitet von Scoon am Mi 20.06.2007 09:42, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 20.06.2007 10:13
Titel
|
|
|
| Scoon hat geschrieben: |
@Raumwurm
Wie würdest Du es denn für die neuen Browser machen? |
Na so wie oben gepostet, einfach absolut festnageln (top:20px,
right:20px, bottom:20px, left:20px).
|
|
| |
|
|
Scoon
Threadersteller
Dabei seit: 07.12.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 21.06.2007 10:47
Titel
|
|
|
Das funktioniert leider auch nicht. Bei padding auf html habe ich zumindest keinen horizontalen Scroolbalken. Da scheint zes zu funktionieren. Wenn es gar nicht anders geht, muss ich halt wieder auf Tabellen zurück gehen.
EDIT:
Ahhhhhhhhhhh jetzt funktioniert das nicht einmal mehr mit Tabellen, obwohl das vorher definitiv ging. Ich verstehs einfach nicht. Was mache ich nur falsch?
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
CSS Frage : Body div /div div ?
CSS Angaben im Body
conditional body tag
js im body mit popup
<html> größer als <body>?
css gesamten body zentrieren
|
|
Willkommen auf dem Portal für Mediengestalter
