Container schieben sich ungewollt übereinander

jotes · #1 (**permalink**) 26.12.2004, 15:10

Hei Leute,

ich stelle momentan meine Seiten umfangreich auf CSS um und breche mir nun an einer Stelle fast die Ohren. Es geht dabei um Container, die ich statt
Tabellen einsetzen möchte.

Hier ist der HTML-Code:

<html>
<head>
<link rel="stylesheet" href="standard08.css" type="text/css">
<link rel="stylesheet" href="container01.css" type="text/css">
</head>

<div id="navilinks"><?include("navilinks.php")?></div>
<div id="hauptcontainer">
<div id="ueberschrift1"></div>
<div id="navioben"><?include("navioben.php")?></div>
<div id="hauptbild"><?include("hauptbild.php")?></div>
<div id="inhalt"><?include("kunst.php")?></div>
</div>
<div id="fusszeile"><?include("fussleiste.php")?></div>
</body>
</html>

Hier das CSS-Sheet der Container:

#navilinks {
position: absolute;
height: auto;
width: 229;
left: 15px;
top: 15px;}

#hauptcontainer {
background-color: #B7B8C7;
position: relative;
height: auto;
width: 704px;
left: 250px;
top: 15px;}

#ueberschrift1 {
background-image:url('hint-bild7.gif');
position: absolute;
height: 41px;
width: 700px;
left: 2px;
top: 2px;}

#navioben {
background-image:url('line-grau-04-04.gif');
position: absolute;
height: 46px;
width: 700px;
left: 2px;
top: 43px;}

#hauptbild {
background-color: #B7B8C7;
position: absolute;
height: 200px;
width: 700px;
left: 2px;
top: 89px;}

#inhalt {
background-color: white;
position: relative;
height: auto;
width: 700;
left: 2px;
top: 290px;}

#fusszeile {
position: relative;
height: 100px;
width: 702px;
left: 250px;
top: 5;}

Wenn ihr mal einen Entwurf unter http://www.lofoten.pixelsea.com/ schaut, seht ihr unten, dass der Hauptcontainer plötzlich aufhört und die Fusszeile direkt anschließt. Aber eigentlich müsste der Hauptcontainer noch weitergehen, da der Inhalt noch nicht zu Ende ist. So schiebt sich nun der Inhalt über die Fusszeile und hat unten keinen Rahmen mehr.

Wer weiß Rat?

Danke und weihnachtlichen Gruß

Jotes

terrikay · #2 (**permalink**) 26.12.2004, 15:25

Du verschiebst #inhalt um 290px nach unten. Bei position:relative wird der Container von dem Ort aus verschoben, wo er bei statischer Positionierung beginnen würde. Die nachfolgenden Container kümmern sich dann nicht mehr um die Verschiebung, sondern tun so, als sei er statisch positioniert.
Da #fusszeile nur 5px nacht unten verschoben wird, überlappt sich das logischerweise um 285px.

Tipp: sei etwas vorsichtig mit Positionierungsangaben bei position:relative - die sind nicht ganz ohne. Besser mit margin Platz schaffen, ist weniger riskant. Zumal Du ja eigentlich gar nicht positionieren mußt, die Container liegen ohne besondere Positionierung (static) ja ganz brav untereinander.

position:relative brauchst Du eigentlich nur in zwei Fällen:

1. Du willst andere Container daran ausrichten (mit position:absolute)
2. Zur Behebung einiger IE-Bugs - der verlangt leider öfter mal danach.

jotes · #3 (**permalink**) 26.12.2004, 16:27

Hallo Terry,

danke für die schnelle Antwort, aber so richtig habe ich es noch nicht kapiert - sei bitte nachsichtig

Wenn ich das richtig verstanden habe, dann beginnt #inhalt von 290px an nach unten zu laufen.
Ich habe noch vergessen, dass der Inhalt von Seite zu Seite in der Länge variieren kann. Der Text kann eine Zeile lang sein oder wie hier auch recht lange. Von daher kann ich #inhalt keine feste Größe zuordnen. Dei Größe richtet sich nach dem zu ladenden php-Dokument.

Zitat:

Zitat von terrikay

Da #fusszeile nur 5px nacht unten verschoben wird, überlappt sich das logischerweise um 285px.

Was muss ich denn dann wo genau ändern?

Hab Geduld und nochmals Danke!!

Jotes

terrikay · #4 (**permalink**) 26.12.2004, 16:43

Zu den Positionierungen hier mal ein Tutorial von mir: http://home.arcor.de/terrikay/tutori...ionierung.html
Vielleicht wird es dann klarer.

Hier ist das Problem, dass die navigation oben und das #hauptbild absolut positioniert sind. Damit sind sie aus der normalen Positionierung ganz raus.

Damit sich der Inhalt darunter legt, muß man ihm einen Abstand zuweisen. Du hast das mit:

Code:

#inhalt {
position: relative;
left: 2px;
top: 290px;}

gelöst. Damit schiebst Du zwar den Container um 290px nach unten - die Höhe paßt sich auch dem Inhalt an - aber nachfolgende Container wissen nichts von den 290px Positionsverschiebung. Und das ist das Problem.
Einfachste Lösung: bis auf die seitliche Navi gar keine Positionierung (static ist default). Dann legen sich alle untereinander, no problem.

Oder zumindest #inhalt keine top - Angabe geben sondern ein margin-top:290px;
Dann wird der ganze Container runtergeschoben und #fusszeile legt sich dann darunter.

jotes · #5 (**permalink**) 26.12.2004, 18:14

Hallo Terry,

danke für die Erklärung und dein Tutorial - super!!! Ich habe nun die Seite umgebaut und sende dir das Ergebnis mal per eMail, weil es sich im IE und im Morzilla noch etwas unterscheidet!

Tausend "Danke" nochmal

Jotes

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Anfängerfrage: Zentrierung in Galerie und Border-Problem	goldbeere	CSS	3	04.11.2013 19:07
Grid960 Container übereinander schieben	enibas	CSS	2	13.05.2011 10:34
2divs übereinander im container?	.rhavin	CSS	0	06.05.2010 17:26
Ungewollt mitwachsender Container im FF und margin-Problem im IE6	shredder01	CSS	22	23.09.2009 20:20
Div-Container nicht übereinander schieben	david_noh	CSS	2	17.07.2005 21:28