nicht angemeldet
fehler bei relativer positionierung?
Hallo,
in meinem main-DIV habe ich 2 andere DIVs, die untereinander, ohne Lücke erscheinen sollen. Das geht so lange gut, bis ich dem oberen DIV sage, es soll bitte mittels top: 10px; zum oberen main-DIV-Rand einen Abstand einhalten. Denn dann gibt es genau diese 10 px breit eine Überschneidung mit dem darunterliegenden DIV, da dieses nicht, wie erhoff, mit nach unten rückt.
Was muss ich tun, dass es dies doch tut? Ich habe auch schon probiert anstatt top: 10px; den Abstand zu oben mit margin-top: 10px zu erreichen. Das ignoriert er aber komplett.
Kann mir da vielelicht jemand weiterhelfen? Unten gibts das XHTML und das CSS dazu...
Vielen Dank schonmal, Aluno
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="test_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="bild"></div>
<div id="angebote_area">
<div id="angebote">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
</div>
</div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
body {
background-color: #E2E2D5;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #6D6D66;
}
img {
border:none;
}
#main {
position:relative;
background-color:#FFFFFF;
margin: 0 auto;
width:700px;
min-height:800px;
margin-top:20px;
margin-bottom:10px;
}
#bild {
background-color:#000000;
width:313px;
height:145px;
position:relative;
top:10px;
left:30px;
margin:0px;
padding:0px;
z-index: 8;
}
#angebote_area {
position:relative;
background-color: #F4E02A;
width:260px;
margin:0px;
padding-top:30px;
padding-bottom:20px;
left: 0px;
top: 0px;
z-index:1;
}
#angebote {
position:relative;
width:75%;
padding:0px;
margin-left:10%;
margin-right: 10%;
z-index:1;
}
-
Hallo,
in meinem main-DIV habe ich 2 andere DIVs, die untereinander, ohne Lücke erscheinen sollen. Das geht so lange gut, bis ich dem oberen DIV sage, es soll bitte mittels top: 10px; zum oberen main-DIV-Rand einen Abstand einhalten. Denn dann gibt es genau diese 10 px breit eine Überschneidung mit dem darunterliegenden DIV, da dieses nicht, wie erhoff, mit nach unten rückt.
position:relative arbeitet wie folgt:
Erstelle das Elemente, als ob es static sei, berücksichtige width und margins etc...
verschiebe dann das Element um die durch top left bottom right angegeben Werte.Um Abstände zu bestimmen ist das eine ungeeignete Methode. Verwende die Eigenschaft margin.
Was muss ich tun, dass es dies doch tut? Ich habe auch schon probiert anstatt top: 10px; den Abstand zu oben mit margin-top: 10px zu erreichen. Das ignoriert er aber komplett.
tatsächlich?
bei margins muss man berücksichtigen, dass sie[1] kollabieren, wenn kein padding und border sie daran hindert.
[1] kürzlich wurde diskutiert was vertical und horizontal in der Spezifikation hierbei meint.
mfg Beat