Probleme bei Formatierung

the_royal

Mitglied
Hallo Zusammen
Ich habe mal wieder ein kleines Problem mit meiner Formatierung.
Hier ein Bild wie es im Moment aussieht:
http://yfrog.com/4240158124g

Und hier ein Bild wie ich es gerne hätte:
http://yfrog.com/2i45793043g

Dabei geht es eignelich nur um die Navigation Links.
Ich hätte gerne, dass diese links von meinem Content angezeigt wird.

Hier das CSS:

HTML:
#center {
	position: absolute;
	width: 780px;
	top: 0px;
	left: 50%;
	margin: 0 0 0 -395px;
}

#banner {
	position: absolute;
	margin-top: 15px;
	height: 150px;
	width: 680px;
}

#inhalt {
	position: absolute;
	overflow: auto;
	top: 165px;
	z-index: 3;
	width: 680px;
	height: 440px;
	margin-top: 10px;
	background-image: url("Bilder/bg.gif");
}

#subnavCont{
	position: absolute;
	margin-left: 150px;
	}

#navitop {
	position: absolute;
	top: 80px;
	width: 680px;
	height: 55px;
	background: grey;
	filter: Alpha(opacity = 70);
	opacity: 0.6;
	-moz-opacity: 0.6;
}

#navi {
	position: absolute;
	top: 150px;
	z-index: 3;
	width: 150px;
	height: 450px;
	margin-top: 10px;
}

#right {
	position: absolute;
	left: 680px;
	width: 150px;
	margin-top: 15px;
	height: 600px;
}

#login {
	position: absolute;
	top: 57px;
	right: 10px;
}
-->

und hier der geparste Code:

HTML:
		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		<html>
		<head>
		

		
		<title>Biel-Magglingen -- Bienne-Macolin</title>
		
		<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
		<link rel="stylesheet" type="text/css" href="style.css" />
		
		</head>

	<body>
	
	<div id="center">

		<div id="banner">	
		<div id="navitop">
			<div id="login">
		<form action="?pid=21" method="post">
	<input type="submit" name="logout" value="Logout"></input>
	</form>
		</div>

		
	<table>
	<tr>
		<td width="10"></td>
		<td width="80">
		<h3><a href="?pid=0">Home</a></h3>
		</td>
		<td width="120">
		<h3><a href="?pid=1">Neuigkeiten</a></h3>

		</td>
		<td width="80">
		<h3><a href="?pid=3">Infos</a></h3>
		</td>
		<td width="120">
		<h3><a href="?pid=5">Rangliste</a></h3>
		</td>
		<td width="120">

		<h3><a href="?pid=7">Anmeldung</a></h3>
		</td>
		<td width="80">
		<h3><a href="?pid=9">Kontakt</a></h3>
		</td>
	</tr>
	<tr>
		<td width="10"></td>

		<td width="80">
		<h3><a href="?pid=0">Home</a></h3>
		</td>
		<td width="120">
		<h3><a href="?pid=2">Nouvelles</a></h3>
		</td>
		<td width="80">
		<h3><a href="?pid=4">Info</a></h3>

		</td>
		<td width="120">
		<h3><a href="?pid=6">Classements</a></h3>
		</td>
		<td width="120">
		<h3><a href="?pid=8">Inscription</a></h3>
		</td>
		<td width="80">

		<h3><a href="?pid=10">Contact</a></h3>
		</td>
	</tr>
</table>
		</div>
	<img src="Bilder/rad.jpg" width="680" />
				</div>
		<div id="navi">
		<br /><br />

	<table><tr><td width="10"></td><td>
	<table><tr><td>
	<a href="?pid=4&navi=6">générales</a></td></tr><tr><td>
	<a href="?pid=4&navi=7">carte de cours</a></td></tr><tr><td>
	<a href="?pid=4&navi=8">frais</a></td></tr><tr><td>
	<a href="?pid=4&navi=9">règles</a></td></tr><tr><td>
	<a href="?pid=4&navi=10">catégories</a></td></tr><tr><td>

	<a href="?pid=4&navi=11">records</a>
	</td></tr></table>
	</td></tr></table>
			</div>
			<div id="inhalt">
	
<h2>AllgemeinesFr bearbeiten</h2>
<form name="formular" action="?pid=25&&kategorie=AllgemeinesFr" method="post">
	<textarea rows="20" cols="105"name="Eintrag"></textarea> 
	<script type="text/javascript">
				CKEDITOR.replace( "Eintrag" );
	</script> <br>

<br>
<input type="submit" name="formaction" value="Speichern" />
</form>	
		</div>
		
		<div id="right">
	<img src="Bilder/laufer.jpg" height="600" />
			
		</div>
	</div>

	</body>
</html>

Besten Dank im Voraus für eure Hilfe!
Gruss the_royal
 
M

Maik

Hi,

ich vermisse beim Überfliegen deines Stylesheets bei den absoluten Positionierungen zumindest eine Angabe zu left für den Inhalt, damit dieser Block nach rechts verrückt wird, um den Platz für die Navigation frei zu machen.

mfg Maik
 

the_royal

Mitglied
Hallo Maik
Was ich vergessen habe zu erwähnen:
Dieses Menu ist nur ein SubMenu, welches nur bei manchen Seiten angezeigt werden soll.
Falls dieses also nicht der Fall sein sollte, sollte der Content ganz normal links sein.
Deshalb denke ich nicht, dass die left-Anweisung mir in diesem Fall helfen kann, da der Content so ja permanent eingerückt würde, oder?
Ich hätte eher so gedacht, dass sich der Content am navi div orientiert, jedoch ganz links bleibt, falls das navi nicht da ist..?
 
M

Maik

Tja, schön dass du diesen entscheidenden Umstand auch mal erwähnst :rolleyes:

In diesem Fall musst du eben auch per PHP das entsprechende CSS laden, ansonsten rückt der Inhalt nicht automatisch nach rechts. Zumal seine Breite dann auch um das Breitenmaß der Navigation verringert werden muß.

mfg Maik
 

the_royal

Mitglied
sorry :)
Habe eigentlich schon sowas versucht.. habe einen contentRight gemacht, dort dann zusätlich noch das left reingeschrieben und dann diesen anstelle des normalen contents geladen, falls die entsprechende pid aufgerufen wurde.
Jedoch verschiebt sich dann der ganze Rahmen, inkl. Hintergrund und gesamter breite nach rechts..
Der Witz ist, der Vorgänger welcher diese Seite gemacht hat, hat dies hingekriegt...
Hier ansonsten mal der Link der alten Seite:
http://www.bbcpost.ch/biel-magglingen/

Die betroffene Seite ist die Infos.

Meine Seite läuft bisher nur auf dem localhost, deshalb kann ich dir diese nicht verlinken. Hoffe du kommst da mit dem bisher geposteten Quellcode zurecht.
 

the_royal

Mitglied
und wie mach ich das dann mit dem Hintergrundbild? Wird ja wahrscheinlich nicht genau die gleiche schnittstelle haben..
 
M

Maik

Tja, wenn das Hintergrundbild für #inhalt derzeit 680px breit ist, benötigst du eben ein Zweites mit entsprechend geringerer Breite.

Eigentlich logisch, oder?

mfg Maik
 

the_royal

Mitglied
ja das ist mir klar =)
aber das problem ist das Background-Bild:
http://yfrog.com/5c12891107g

Aber naja, ich werds dann mal irgendwie versuchen =) Am liebsten wäre mir eigenlich die Lösung meines Vorgängers irgendwie einzubauen, aber da muss ich wohl selber noch länger dran rumsuchen :)
Dank trotzdem für deine Hilfe!

Gruss the_royal
 
M

Maik

Der Witz ist, der Vorgänger welcher diese Seite gemacht hat, hat dies hingekriegt...
Hier ansonsten mal der Link der alten Seite:
http://www.bbcpost.ch/biel-magglingen/

Die betroffene Seite ist die Infos.
Am liebsten wäre mir eigenlich die Lösung meines Vorgängers irgendwie einzubauen, aber da muss ich wohl selber noch länger dran rumsuchen
Entweder hast du den Quellcode nicht genauer studiert, oder darin die Zusammenhänge nicht verstanden, die sich durch die absolute Positionierung der einzelnen DIV-Blöcke ergeben.

Ich bin heute Morgen dem Link aus Zeitmangel nicht gefolgt, was ich eben nachgeholt habe.

In allen Seiten kommt innerhalb von #inhalt eine mehrspaltige Tabelle zum Einsatz, deren erstes (linkes) <td>-Element inhaltsleer ist, und in der "Infos"-Seite mit dem HTML-Attribut width="160" die entsprechende Breite erhält, um die benachbarte Tabellenzelle, in der der Inhalt eingebettet ist, soweit nach rechts zu rücken, damit er nicht von der Navigation überdeckt wird. Wo keine Navigation existiert, schwankt dieser Wert zwischen "10" und "20".

Gleiches gilt in diesem Zusammenhang für die "Anmeldung"-Seite, wo ebenfalls ein vertikales Navigationsmenü enthalten ist.

mfg Maik