Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Positionierung per CSS“

Raubmaus

Noch nicht viel geschrieben

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

undefined

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

Noch nicht viel geschrieben

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;
}
 
Zuletzt bearbeitet von einem Moderator:

sokie

Mod | Web

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

Noch nicht viel geschrieben

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;
 
Zuletzt bearbeitet von einem Moderator:

sokie

Mod | Web

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
 
Zuletzt bearbeitet:

Raubmaus

Noch nicht viel geschrieben

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.
 
Zuletzt bearbeitet von einem Moderator:

sokie

Mod | Web

AW: Positionierung per CSS

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.
 

cebito

undefined

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

display:schwarzgelb;

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 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

Noch nicht viel geschrieben

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

Mod | Web

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

Nicht mehr ganz neu hier

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ß
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.872
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben