Positionierung per CSS

Raubmaus · 18.10.2010

Hallo ich habe eine Frage wegen der Positionierung von Div-Elementen.
Wenn ich DIV´,S in meinen Quellcode einfüge und sie dann per ID in meiner seperaten CSS Datei ansteuere (positionierung auf relative) rutschen irgendwann die letzten DIV über mein Contentdiv in welchem alles enthalten ist hinaus. Somit wird dann meine Hintergundgrafik vom Content wieder gekachelt. Wie kann ich das verhindern?

cebito · 18.10.2010

AW: Positionierung per CSS

Das ist sooooo allgemein, kein html, kein css, kein erklärender Screenshot...

Klick mal meine Sig (rote Zeile) und dann stell die Frage noch einmal!

Raubmaus · 18.10.2010

AW: Positionierung per CSS

HTML:

<body>
<div id="content">
 
<a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','tesa1gelb','',1)" onmouseover="MM_nbGroup('over','tesa1gelb','Images/sonstiges/tesa1gelbdown.png','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/sonstiges/tesa1gelb.png" alt="" name="tesa1gelb" width="80" height="145" border="0" id="tesa1gelb" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','tesa2blau','',1)" onmouseover="MM_nbGroup('over','tesa2blau','Images/sonstiges/tesa2blauover.png','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/sonstiges/tesa2blau.png" alt="" name="tesa2blau" width="76" height="145" border="0" id="tesa2blau" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','tesa3rot','',1)" onmouseover="MM_nbGroup('over','tesa3rot','Images/sonstiges/tesa3rotover.png','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/sonstiges/tesa3rot.png" alt="" name="tesa3rot" width="76" height="145" border="0" id="tesa3rot" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','tesa4gruen','',1)" onmouseover="MM_nbGroup('over','tesa4gruen','Images/sonstiges/teas4gruenover.png','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/sonstiges/teas4gruen.png" alt="" name="tesa4gruen" width="76" height="145" border="0" id="tesa4gruen" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','tesa5violett','',1)" onmouseover="MM_nbGroup('over','tesa5violett','Images/sonstiges/tesa5violettover.png','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/sonstiges/teas5violett.png" alt="" name="tesa5violett" width="80" height="145" border="0" id="tesa5violett" onload="" /></a>
<div id="hortgebaeudeklein"></div>
<div id="hortgebaeude"></div>
<div id="kind1"></div>
<div id="kind2"></div>
<div id="schullogo"></div>
<div id="kinderbibel"></div>
</div>
</body>
</html>

meine CSS- Ausschnitt:

Code:

body {
 background-image: url(../Images/sonstiges/bg1.gif);
 margin-left:0px;
 margin-right:0px;
 margin-top:0px;
 margin: 0px;
 text-align:center;
 
}
 
#content {
 margin-top:10px;
 width:1000px;
 height:900px;
 border:0px solid #036;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 background-image: url(../Images/sonstiges/paper.png);
 background-repeat: no-repeat;
 }
#tesa1gelb{
 position: relative;
 background-repeat: no-repeat;
 height: 145px;
 width: 76px;
 left: 0px;
 top: 0px;
 z-index: 5;
}
}

#tesa2blau{
 position: relative;
 background-repeat: no-repeat;
 height: 145px;
 width: 76px;
 left: 100px;
 top: 0px;
 z-index: 4;
}
#tesa3rot{
 position: relative;
 background-repeat: no-repeat;
 height: 145px;
 width: 76px;
 left: -100px;
 top: 0px;
 z-index: 3;
}
#tesa4gruen{
 position: relative;
 background-repeat: no-repeat;
 height: 145px;
 width: 76px;
 left: 45px;
 top: 0px;
 z-index: 2;
}
#tesa5violett{
 position: relative;
 background-repeat: no-repeat;
 height: 145px;
 width: 76px;
 left: 200px;
 top: 0px;
 z-index: 1;
}
#hortgebaeudeklein{
 background-image: url(../Images/sonstiges/foto-hortgebaeude.gif);
 position: relative;
 background-repeat: no-repeat;
 height: 116px;
 width: 203px;
 left: 100px;
 top: 105px;
 z-index: 2;
       }
#kind1{
 background-image: url(../Images/sonstiges/malte.gif);
 position: relative;
 background-repeat: no-repeat;
 height: 154px;
 width: 151px;
 top: 0px;
 left: -10px;
       
       }
#kind2{
 background-image: url(../Images/sonstiges/Thomas.png);
 position: relative;
 background-repeat: no-repeat;
 height: 137px;
 width: 137px;
 left: 10px;
 top: -10px;
       }
#schullogo{
 background-image: url(../Images/sonstiges/Schullogo.png);
 position: relative;
 background-repeat: no-repeat;
 height: 70px;
 width: 139px;
 left: 670px;
 top: 0px;
       }
 
     

#kinderbibel{
 position: relative;
 background-repeat: no-repeat;
 height: 148px;
 width: 116px;
 left: 750px;
 top: -10px;
 background-image: url(../Images/sonstiges/Kinderbibel.png);
 z-index: 1;
}
#kerze{
 position: relative;
 background-repeat: no-repeat;
 height: 133px;
 width: 119px;
 left: 780px;
 top: 200px;
 background-image: url(../Images/sonstiges/Kerze.png);
 z-index: 1;
}
#hortgebaeude{
 position: relative;
 background-repeat: no-repeat;
 height: 253px;
 width: 535px;
 left: 100px;
 top: 0px;
 background-image: url(../Images/sonstiges/hort%20ohne.png);
 z-index: 1;
}

}
#h1 {
 position: relative;
 font-family: "Comic Sans MS", cursive;
 font-size: 30px;
 top: -1250px;
 height: 200px;
 width: 500px;
 left: 200px;
 color: #24384f;
 font-weight: bold;
}

sokie · 18.10.2010

AW: Positionierung per CSS

wenn du nicht willst, dass Inhalte grösser werden als ihr container, kannst du das mit oveflow regeln. zB

Code:

#content {
 margin-top:10px;
 width:1000px;
 height:900px;[COLOR=DarkRed][B]
overflow:auto;[/B][/COLOR]
 border:0px solid #036;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 background-image: url(../Images/sonstiges/paper.png);
 background-repeat: no-repeat;
 }

was dann allerdings dazu führt, dass es eine weitere scrollbar (am content) gibt, wenn der Inhalte tatsächlich grösser ist.

Raubmaus · 18.10.2010

Danke für deine Antwort; ich weis aber nicht ob du mich richtig verstanden hast, wenn ich jezt noch mehr div`s einfüge (position relative)
top ,left alles auf 0px,-rutschen sie unter den Content, verschiebe ich sie nach oben mit top bleibt der gekachelte Content erhalten obwohl das Bild nach oben rutscht. Mir ist nicht klar wenn ich alle DIv;S relative positioniere (mit top und auf left 0) warum sie nicht alle an der selben Stelle liegen und ich sie dann verschieben kann

gibt es noch andere Möglichkeiten?

Es muss doch möglich sein per CSS unzählige DIV`s in einen Content zu packen, solange sie nicht größer sind als dieser,oder?

Hast du noch eine Idee

Das bringt mich auch nicht richtig weiter.
overflow:auto;

sokie · 18.10.2010

AW: Positionierung per CSS

ja, das ist auch möglich.
wenn der content die eigenschaft position:relative; hat und die darin liegenden DIVs (oder welche container auch immer) mit position:absolute;(und zB top: und left: ) positioniert sind.

übrigens:

Code:

body {  
  background-image: url(../Images/sonstiges/bg1.gif);  
  margin-left:0px;  
  margin-right:0px;  
  margin-top:0px;  
  margin: 0px;  
  text-align:center;   
}

es macht überhaupt keinen Sinn erst jedes margin einzeln (also margin-left,margin-right usw) zu setzen, wenn man später für das selbe element alle margins (per margin

auf 0 setzt, das ist einfach codemüll

Raubmaus · 18.10.2010

AW: Positionierung per CSS

Meine Frage ist für mich immer noch nicht ganz beantwortet:Wenn du meinen Quellcod betrachtetst, siehst du das ich ein Content angelegt habe in dem alle anderen Elemente (div`s`)enthalten sind. Alle Div`s habe ich auf positon relative gestellt um sie völlig frei zu positionieren. Wenn ich aber z.B ein Div eingefügt habe- alle Parameter top usw auf 0 stelle werden sie untereinader angeordnet- bis irgendwann der Content zu klein wird. Warum ist es nicht möglich alle div`s` in den Content zu legen- meinetwegen auch übereinader und sie dann zu veteilen-verstehst du mich?

Mit dem Codemüll gebe ich dir recht. Ich habe einfach schon ewig daran herangebaut.

sokie · 18.10.2010

AW: Positionierung per CSS

Raubmaus schrieb:
Alle Div`s habe ich auf positon relative gestellt um sie völlig frei zu positionieren.

RELATIVE und top:0, left:0 sagt nichts anderes als dass diese elemente NICHT von der Position 'weggerückt' werden sollen, die sie ohne position:relative im Dokumentenfluss auch hätten.

ich hab das mal etwas hervorgehoben, bitte auf die Schlüsselworte relative und absolute achten.

Raubmaus · 18.10.2010

AW: Positionierung per CSS

Danke Sokie, ich werde es porbieren, ich hoffe ich stelle nicht zu blöde Fragen?

cebito · 19.10.2010

AW: Positionierung per CSS

Wenn du relativ positionierst, muss der folgende Container, um auf denselben Koordinaten zu liegen schon ein "-(minus)Größe des vorhergehenden Containers" haben, sofern du diese überhaupt kennst. Mit jedem folgenden summiert sich das dann. Einfacher ist es, wie sokie bereits sagte, mit position:absolute.

hubspe · 19.10.2010

AW: Positionierung per CSS

Raubmaus schrieb:
Meine Frage ist für mich immer noch nicht ganz beantwortet:Wenn du meinen Quellcod betrachtetst, siehst du das ich ein Content angelegt habe in dem alle anderen Elemente (div`s`)enthalten sind. Alle Div`s habe ich auf positon relative gestellt um sie völlig frei zu positionieren.

Wenn du wie wild posit. absolute und relative verteilst ist das nicht gut sondern eher ein Anfängerfehler.
Außerdem hast du das mit der Stapelung nicht verstanden.

Lass die Dinge im Fluß, arbeite besser mit Float/Clear.

Raubmaus · 19.10.2010

AW: Positionierung per CSS

Wenn ich die Positionierungen verteile spriche Content-relative und alle darin liegenden DIV`s`auf absolute verschieben sich die absoluten DIV´S`(anordnung am Bildschirm) wenn iich das Browserfenster verkleinere.

Das ist ach nicht so gut.

sokie · 19.10.2010

AW: Positionierung per CSS

Da muss etwas schief gelaufen sein. wenn der container 'content' relative positioniert ist, und die container darin absolute, dann sind sie unabhängig von der skalierung des Browserfensers und sollten sich nicht verschieben. der container content hat ja (nach dem Code oben) feste angaben für höhe und breite.
Vielleicht postest du einfach nochmal den Code, wie er jetzt ist. (besser Seite hochladen und verlinken)

nostra87 · 22.10.2010

AW: Positionierung per CSS

Mach doch folgendes. Setze alle Div Elemente auf Position:absolute.
Innerhalb eines bestimmten Divs, kannst du ein weiteres erstellen,
dieses jedoch kannst du dynamisch auf relative einstellen.

Damit besteht keinerlei Gefahr, dass deine anderen Elemente sich
verschieben.

Achte noch auf das Reseten der Margins und Padding für die
Browserkompatibilität.

HTML:

div    {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px}
body {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px}

Gruß