nicht angemeldet
div-positionierung
hi,
ich bin gerade dabei von tables auf divs fürs layout umzusteigen und habe folgende frage:
wenn man ein 100% hohes oder breites div mit margin in eine richtung verschiebt wird es über den im browser sichtbaren bereich rausgeschoben(siehe skizze unten). wie verhindert man, dass das passiert? (width:100%-20px gibt's ja leider nicht)
.----------.
| xxxxxxxx|x
| x |x
| x |x
.----------.x
ich hab das jetzt so umgangen, dass ich 2 divs über das 1. lege und so ein verschieben simuliere.
gibt's dafür noch andere lösungsmöglichkeiten in css?
mfg
hari
-
Hallo,
hmm, bei Blockelementen, also auch beim DIV-Element, ist eine Breite von 100% die Standardeinstellung.
Insofern funktioniert grundsätzlich so etwas:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="background:yellow; width:auto; height:400px;margin-left:50px;">sdgfsdg</div>
</body>
</html>Im IE 6, im Firefox 1.5 und in Opera 8.54 erreiche ich damit jedenfalls genau den von Dir gewünschten Effekt.
So long,
Mr. Horse--
"No, Sir, I don't like it."-
stimmt, nur wenn man body style="height:100%; width:100%;" geht das ganze nicht mehr (height:100% bei nem div würde ohne dem sowieso nicht gehen).
-
Hallo,
stimmt, nur wenn man body style="height:100%; width:100%;" geht das ganze nicht mehr (height:100% bei nem div würde ohne dem sowieso nicht gehen).
dann müßtest Du für das BODY-Element den Außenabstand, also margin, auf 0 setzen. Dann klappt's.
So long,
Mr. Horse--
"No, Sir, I don't like it."-
das geht aber nur wenn ich nicht width:100% für die div angebe. ok, find ich etwas seltsam. aber bei height:100% hab ich aber immer noch das problem. und die height ist nicht autom. auf 100%.
-
Hallo,
das geht aber nur wenn ich nicht width:100% für die div angebe. ok, find ich etwas seltsam. aber bei height:100% hab ich aber immer noch das problem. und die height ist nicht autom. auf 100%.
für die Höhe ist es (bei Mozilla) entscheidend, auch dem HTML-Element eine Höhe von 100% zu geben:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;">
<head>
<title>Test</title>
</head>
<body style="width:100%; height:100%; margin:0;">
<div id="box7" style="background:yellow; width:auto; height:100%; margin-left:50px;">
viiiel Text
</div>
</body>
</html>Ist das das, was Du benötigst?
So long,
Mr. Horse--
"No, Sir, I don't like it."-
jein, nur solang ich margin-top nicht ändere. verschieb jetzt mal die div mit margin-top:50px und du hast wieder das alte problem.
-
hier der code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body { height:100%; width:100%; margin:0; }
</style>
<title>Test</title>
</head>
<body>
<div id="box7" style="background:yellow; width:auto; height:100%; margin-left:50px; margin-top:50px;">
viiiel Text
</div>
</body>
</html>-
Hallo,
hier der code:
[...]ach so, und nun stört Dich, daß rechts _immer_ ein Scrollbalken ist?
Also, den bekommst Du meines Wissens nicht weg, solange Du die Höhe des DIVs auf 100% setzt.
Jedenfalls muß _ich_ da passen. Sorry.So long,
Mr. Horse--
"No, Sir, I don't like it."
-
-
-
-
-
-
-
-
Yerf!
gibt's dafür noch andere lösungsmöglichkeiten in css?
Evtl. mit absoluter Positionierung. Allerdings hat der IE ein Problem damit, wenn man die Position 2er gegenüberliegender Kanten angibt und sich damit die Höhe/Breite automatisch ergibt. Das lässt sich zwar mit Expressions lösen, ist aber auch nicht seher elegant, da JavaScript.
Gruß,
Harlequin