Formatierungsproblem

T

the_royal

Mitglied
Hallo Zusammen
Ich kriegs irgendwie nicht hin mir ein Menu so darzustellen wie ich es möchte... =(

Hier der generierte Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>BBC Shop</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="navi">
<a class="navi" href="?pid=0">HOME</a>
<a class="navi" href="?pid=1">INFSHOP</a>
<a class="navi" href="?pid=2">ELOSHOP</a>

<a class="navi" href="?pid=3">LOGIN</a>
</div>
<div id="header"></div><div id="content">
<div id="textcont">
hallo
</div>
</div><div id="footer"></div>
</div>
</body>
</html>

Hier das dazugehörige CSS:
HTML: 
body {
	font-family: Calibri, sans-serif;
	background-color: #ffffff;
}

#container {
	width: 800px;
	min-height: 900px;
	padding-left: 50%;
	margin-left: -400px;
}

#header {
	with: 800px;
	height: 250px;
	background-image: url(images/header.gif);
	background-repeat: no-repeat;
}

#content {
	top: 250px;
	width: 800px;
	min-height: 500px;
	background-image: url(images/middle.gif);
	background-repeat: repeat-y;
}

#middle{
	position: relative;
  width: 800px;
  min-height: 400px;
  overflow-y: auto;
}

#textcont {
	position: relative;
	left: 40px;
	width: 720px;
}

#footer {
	width: 800px;
	height: 25px;
	background-image: url(images/footer.gif);
	background-repeat: no-repeat;
}

#navi{
position:absolute;
top:50px;
left: 60px;
width: 400px;
}

a.navi{
	text-align: center;
	paddign-left: 30px;
	text-decoration: none;
	color: #000000;
}

So siehst aus:
http://de.tinypic.com/r/sypabd/4

Das Problem, wie ihr sehen könnt, ist dass das Menu welches Links, statt im gedachten Menubereich erscheint.
Hoffe jemand sieht den Fehler

Gruss the_royal
 
Da du #navi absolut positionierst, müsste folglich #container mit position:relative formatiert werden, damit sich darin die absoluten Positionsangaben relativ verhalten, und nicht in der Voreinstellung auf <body> beziehen.
 
Hallo spicelab
Danke für deine Antwort.
Kannst du mir das mal in meinem Code erläutern? :confused:
Ich schein heute gar nichts auf die Beine zu kriegen...:(
Habs versucht, aber blende mir dann den Text entweder ganz aus (Ist wahrscheinlich hinterm header) Oder zeigt mir gar nichts mehr an...

Gruss und vielen Dank schonmal

the_royal
 
Setz mal das hier für #container anstelle deines Codes ein:
CSS: 
#container {
        width: 800px;
        min-height: 900px;
        margin: 0 auto; /* dient der horizontalen Zentrierung */
        position: relative; /* relative Positionierung */
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück