Positionierungsproblem meiner Boxen

onkel-tom · #1 (**permalink**) 24.05.2008, 05:58

Hallo Leute,

ich habe ein kleines oder für mich größeres Problem mit der Positionierung der Boxen auf meiner Seite.

Mein Boxmodell sieht momentan so aus:
Ich habe einen Container der alles aufnimmt und der auf der Seite zentriert wird. Innerhalb des Containers ist eine Box die den Seiteninhalt darstellt und darin sind zwei floatende Boxen. Nun möchte ich über die line floatende Box noch eine kleinere Box positionieren, die am unteren ende der linken floatenden box stehen soll, aber entweder die box verhält sich normal, also steht unter dem letzten inhalt oder die box verschiebt es, sobald ich den browser größer oder kleiner mache. Ich denke ich hab da noch ein wenig ein verständnisproblem mit den positionierungen und ob ich z-index brauche oder nicht.

Naja, ihr könnt euch ja mal meine Codes anschauen:

Code:

body {
	margin: 0;
	padding: 0;
	color: #000000; 
	background-color: #ffffff;
	font-size: 12px;
	font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
	font-weight: normal;
	text-align: center;
}

/* Design der Seite festlegen */
#container {
	height: 620px;
	width: 910px;
	margin: 30px auto 0 auto;
	padding: 0px;
	text-align: left;
}
#seite {
	height: 600px;
	width: 100%;
	padding: 0px;
	text-align: left;
	background-color: #fef7e8;
	border: 1px solid orange;
	float: left;
}
#banner {
	margin-top: 20px;
	margin-left: 20px;
	width: 242px;
	height: 560px;
	background-color: #fef7e8;
	text-align: left;
	display: inline;
	float: left;
	z-index: 99;
}
#sprachen {
	top: 475px;
	left: 25px;
	height: 100px;
	width: 100px;
	background-color: #fef7e8;
	display:inline;
}
#header {
	top: 20px;
	left: 250px;
	width: 100%;
	height: 150px;
	background-color:#CCFF33;
	display: inline;
}
#inhalt {
	margin-top: 20px;
	margin-right: 20px;
	height: 560px;
	width: 628px;
	text-align: left;
	display: inline;
	float: right;
}
#fusszeile {
	padding-top: 4px;
	height: 16px;
	width: 100%;
	background-color: #ffffff;
	font-size: 12px;
	text-align: right;
	clear: both;
}

/* Links */
a {
	color: #000000;
	text-decoration: underline;
}

/* Textformatierung */
h1 {
	margin: 0px;
	padding-bottom: 10px;
	color: #8d4119;
	font-size: 16px;
	font-weight: bold;
}
p {
	margin: 0px;
	padding: 0px;
	color: #000000;
	font-size: 14px;
	font-weight: normal;
}
sub, sup {
	line-height: 0px; 
	font-size: 0.7em;
}
.thema {
	color: #f2b809;
	font-size: 15px;
	font-weight: bold;
}

.karte {
	border: 1px solid #f2b809;
	margin-top: 4px;
}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-DE" xml:lang="de-DE">
	<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="content-language" content="de" />
	</head>
  <body scroll="auto">
 		<div id="container">
 			<div id="seite">
 				<div id="banner"><?php include($lang.'/banner.inc.php'); ?>
                   	<div id="sprachen"><?php include($lang.'/sprachen.inc.php'); ?></div>
				</div>
 				<div id="inhalt"><?php include($lang.'/'.$seite.'.inc.php'); ?></div>
 			</div>
 			<div id="fusszeile"><?php include($lang.'/fusszeile.inc.php'); ?></div>
 		</div>
  </body>
</html>

Desweiteren habe ich noch ein Problem, daß wenn ich ein menü mit bildern innerhalb meiner main-box mittels tabellen darstelle, dann zeigt es der firefox korrekt an und der ie verschiebt das menü etwas nach unten. ich weiß nicht ob ich das auch mit einer box lösen soll oder wie ich das verschieben im ie verhindern kann.

Hoffe mir kann da jemand weiter helfen.
Danke schon mal im Voraus für eure Hilfe.

Liebe Grüße
Onkel-Tom

RottenRoller · #2 (**permalink**) 24.05.2008, 14:14

wo kann man sich das mal ansehen?

onkel-tom · #3 (**permalink**) 24.05.2008, 14:39

Hallo,

die Seite kannst Du Dir unter nachfolgenden Link anschauen.

meine Testseite

Hier sehr ihr auf der linken Seite die graue Box und dann die Sprachbuttons darunter, diese sollen aber weiter oben positioniert werden, und das funktioniert nicht. Diese werden direkt unter dem inhalt positioniert.

Desweiteren könnt ihr euch mal die Seite im IE und FF anschauen, dabei müsst ihr auf die Menü-Punkte achten, die im IE verschoben werden, auch dafür weiß ich keine lösung.

fricca · #4 (**permalink**) 24.05.2008, 14:53

Zitat:

Zitat von onkel-tom

Hier sehr ihr auf der linken Seite die graue Box und dann die Sprachbuttons darunter, diese sollen aber weiter oben positioniert werden, und das funktioniert nicht. Diese werden direkt unter dem inhalt positioniert.

Definiere "weiter oben".
Lies doch mal nach, auf welche Elemente die Eigenschaften left und top anwendbar sind. Gleiches gilt für z-index.
Visual formatting model
Welches Buch benutzt du, um CSS zu lernen?

Zitat:

Desweiteren könnt ihr euch mal die Seite im IE und FF anschauen, dabei müsst ihr auf die Menü-Punkte achten, die im IE verschoben werden, auch dafür weiß ich keine lösung.

Eine Tabelle und Bildwechsel per JavaScript? Bitte nicht!
In den FAQ findest du einen ausführlichen Artikel von Heiko; dort geht es auch um "grafische Navigationen" wie du sie willst.

onkel-tom · #5 (**permalink**) 24.05.2008, 15:00

@fricca

danke für Deine antwort. Mit weiter oben meine ich einfach über dem text., der in der box drin steht, der text soll später mal durch eine grafik ersetzt werden.

sorry, daß ich noch tabellen und javascript verwende, leider weiß ich mir nicht anders zu helfen und weiß nicht wie es in css geht.

fricca · #6 (**permalink**) 24.05.2008, 15:03

Zitat:

Zitat von onkel-tom

danke für Deine antwort. Mit weiter oben meine ich einfach über dem text., der in der box drin steht, der text soll später mal durch eine grafik ersetzt werden.

Und warum tauschst du dann nicht die Position im Quelltext?

Zitat:

sorry, daß ich noch tabellen und javascript verwende, leider weiß ich mir nicht anders zu helfen und weiß nicht wie es in css geht.

Im Moment betreibst du ein CSS-Ratespiel. Das hilft dir überhaupt nicht weiter und führt zu nichts.
Niemand hier kann dir mal eben schnell erklären, wie CSS funktioniert. Du musst es lernen, das braucht Zeit. Buchtipps findest du im Ressourcen-Bereich.

onkel-tom · #7 (**permalink**) 24.05.2008, 15:06

tja, dann vielen dank für deine antwort, auch wenn sie mich nicht weiter bringt.

und mit "über dem text" meine ich auch "darüber" also der text wird durch die box an der stelle verdeckt, da er darüber steht und nicht über dem eigentlichen text, sonst bräuchte ich ja keine box. Und mit englischen erklärungen kann ich nun mal auch nichts anfagen, da mein englisch nicht sehr gut ist

fricca · #8 (**permalink**) 24.05.2008, 15:14

Was ich verlinkt habe, ist keine "Erklärung", sondern die CSS-Spezifikation. Dort wird aufgelistet, welche Eigenschaften mit welchen Werten auf welche Elemente anwendbar sind.
Applies to: positioned elements
Bei dir ist nichts positioniert, deine Angaben wirkungslos.

Wenn du dir keine Zeit nehmen willst, CSS zu lernen (Buch!), kann ich dir leider wirklich nicht weiterhelfen.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite!	Web4Live	CSS	2	13.07.2011 16:01
Mitwachsende Container: 4 Boxen	Cu Chullain	CSS	1	08.09.2010 18:57
Nebeneinanderliegende gleichhohe Boxen	mantiz	CSS	13	08.02.2010 00:13
Boxen beim Seitenladen zuklappen (ohne "Flackern")	Plasm	Javascript & Ajax	5	08.01.2010 16:42
Gleiche Abstände zwischen Boxen?	Shepstar	CSS	5	29.07.2006 03:37