Div Container - Navigation verschoben

Azadeh · #1 (**permalink**) 06.09.2008, 22:03

Hallo ihr,

da ich momentan einen groeßeren Fehler in meinem Design habe, dachte ich, ich wende mich an euch, da ihr, wie es scheint, sehr gut darin seid, anderen zu helfen.

Problembeschreibung
Bei meinem ueber DIV-CONTAINERN gesteuertes dreispaltiges Layout mit Header und Footer habe ich das Problem, dass die Navigation an der linken Seite beim ersten Aufruf in den Hauptcontent verschoben wird. Bisher trat das Problem nur beim IE auf, dort vor allem bei IE 6. Hierzu zwei Screens, um das Problem zu zeigen.

Normalerweise sollte das Layout wie folgt aussehen:

Jedoch schaut es dann unschoenerweise so aus:

Codes
standart.css

Code:

/* Designtechnische Sachen. */

#container {
	width: 				95%;
	padding:				0px;
	margin: 				0px;
	margin-left: 			auto;
	margin-right: 			auto;
} 

#banner {
	background-image: 		url('images/hintergrund.png');
	text-align: 				center;
	background-color: 		#464646;
	padding: 				0px;
	margin: 				0px; 
}

#banner img {
 	padding:				0px 0px;
} 

#outer{ 
	border-left: 			solid 185px #636363; /* linke Menue Spalten Farbe  */ 
	border-right: 			solid 185px #636363; /* rechte Menue Spalten Farbe  */ 
	background-color: 		#D9D9D9; /* Farbe fuer Inhalt Spalten  */
} 

#inner{
 	margin:				0px; 
	width:				100%;
}

#left {
 	width:				185px; 
 	float:					left; 
 	position:				relative; 
 	margin-left:				-185px; 
 	margin-right:			1px;
}
#right {
 	width:				185px; 
 	float:					right; 
 	position:				relative; 
 	margin-right:			-185px; 
 	margin-left:				1px;
}

#content{ 
	position: 				relative; 
	margin: 				0px; 
}

pre{
	font-size: 				12px;
	padding: 				5px 10px;
	margin:				0px;
}

#footer {
	clear:					left;
	padding:				0px;
	margin:				0px;
	text-align: 				right; 
} 


/* ALLGEMEINE ANGABEN */

body {
	background-image: 		url('images/standart/background.png');
	background-attachment: 	fixed;
	font-size: 				11px;
	font-family: 			Verdana, Arial, SunSans-Regular, Sans-Serif;
	color:					#1F1F1F;
	padding:				0px;
	margin:				0px;
}

Auf der index.php weren die DIV CONTAINER wie folgt verwendet:

Code:

<?php
	include('session.php');
	include('db.inc.php');
	include('bbcodes.php');
	
	$styleid	= $_POST['styleid'];
	if ($styleid != '') {
		setcookie("style", $styleid);
	}

	$stylename = $_COOKIE['style'];
	if ($stylename == '') {
		$style	= "standart";
	} else {
		$style	= $stylename;
	}
?>
<!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" xml:lang="en" lang="en">
	<head>
		<title>TITEL HIER</title>
		<meta http-equiv="content-type" content="text/html;charset=iso-8895-15" />
		<link rel="stylesheet" href="<?php echo "$style"; ?>.css" type="text/css" />
		<script language="JavaScript" src="java.js" type="text/javascript"></script>
	</head>
	
	<body onLoad="document.formular.nachricht.value=''">
		<div id="container" >
			<div id="banner" >
 				BANNER HIER
			</div>
			
			<div id="outer">
		 		<div id="inner">
 					<div id="left">
 						NAVIGATION LINKS
					</div>

					<div id="right">
						NAVIGATION RECHTS
					</div>

					<div id="content">
						INHALT
					</div>

				</div>
			</div>
 			<div id="footer">
 				FOOTER HIER
 			</div>

		</div>
	</body>
	
</html>

Und dann schlussendlich noch die Datei, in der die Navigation sitzt (sollte hier ein Fehler vorliegen):

Code:

<h2 class="menu">Allgemeines</h2>
<p class="menu"><a href="index.php?page=home" class="menu">Start</a><br />
<a href="index.php?page=guestbook" class="menu">G&auml;stebuch</a><br />
<a href="index.php?page=kontakt" class="menu">Kontaktformular</a><br />
<a href="index.php?page=impressum" class="menu">Impressum</a><br /></p>
<h2 class="menu">Zum RPG</h2>
<p class="menu"><a href="index.php?page=storyline" class="menu"><b>Geschichte</b></a><br />
<a href="index.php?page=faq" class="menu">Erkl&auml;rung</a><br />
<a href="index.php?page=regeln" class="menu">Regeln</a><br />
<a href="index.php?page=member" class="menu">Mitglieder</a><br />
<a href="index.php?page=registration" class="menu">Anmeldungsformular</a><br />
<a href="index.php?page=login" class="menu">LogIn</a></p>

Sonstiges:
Den Grundcode für das Layout habe ich von intensivstation, habe jedoch die Werte selbstständig angepasst. Heute fiel es meiner Freundin auf, als ich eine neue Klasse hinzugefügt habe. Diese heißt '.box' und wird wie folgt deklariert:

Code:

.box {
	border: 1px solid #000000;
	background-color: #ffffff;
	background-image: url('images/standart/zeitung.png');
	color: #000000;
	font-family: Book Antiqua, Verdana, Arian, SunSans-Regular, Sans-Serif;
	font-size: 13px;
	margin: 1% 3%;
	padding: 5px;
	text-align: justify;
}

Ich hoffe, dass ihr mir helfen könnt und dass ich alles geschrieben habe, was ihr benötigt. Wenn nicht, einfach nachfragen

Und nein, ich unterstuetze den IE 6 nicht - ich moechte nur, dass alle das Design ohne Probleme sehen koennen.

edit: Zudem wollte ich fragen ob es moeglich ist, dass immer die Laenge des laengsten Elementes genommen wird und nicht die des content-Containers. Wenn der nämlich kuerzer ist als die Navigation, dann hat man das Problem, dass die Menues ohne Hintergrund sind.

Crizzo · #2 (**permalink**) 07.09.2008, 13:36

Zitat:

Zitat von Azadeh

Sonstiges:
Den Grundcode für das Layout habe ich von intensivstation, habe jedoch die Werte selbstständig angepasst.

Du hast also ein anderes Markup "geklaut" und kommst jetzt nicht mit klar?

Zitat:

Ich hoffe, dass ihr mir helfen könnt und dass ich alles geschrieben habe, was ihr benötigt. Wenn nicht, einfach nachfragen

Und nein, ich unterstuetze den IE 6 nicht - ich moechte nur, dass alle das Design ohne Probleme sehen koennen.

Wie jetzt, entweder sollen alle deine Websites besuchen können oder du unterstützt den IE6 nicht?

Zitat:

edit: Zudem wollte ich fragen ob es moeglich ist, dass immer die Laenge des laengsten Elementes genommen wird und nicht die des content-Containers. Wenn der nämlich kuerzer ist als die Navigation, dann hat man das Problem, dass die Menues ohne Hintergrund sind.

Nein. Lies dazu bitte FAQ Punkt 1.

heiko_rs · #3 (**permalink**) 07.09.2008, 13:38

Zitat:

Zitat von Azadeh

Und nein, ich unterstuetze den IE 6 nicht

Superidee. WebHits - Web-Barometer: Marktanteile und Marktentwicklung

Azadeh · #4 (**permalink**) 07.09.2008, 13:56

Nein, ich habe es nicht geklaut - sie sind zum Download freigegeben

Und das Thema hat sich erledigt - ich werde mir was anderes einfallen lassen müssen.

fricca · #5 (**permalink**) 07.09.2008, 14:03

Was du da gepostet hast macht das Problem nicht nachvollziehbar. Serverseitiger Code taugt nicht. Poste immer einen Link.
Das Problem der hüpfenden, negativ verschobenen Spalte im IE lässt sich gewöhnlich durch eine relative Positionierung eines umgebenden Elements lösen. edit: Ach halt. Es hat sich eh schon erledigt. Tja, wer zu spät kommt.

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
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18
joomla template entschlüsseln	nieselfriem	CSS	2	18.03.2008 13:12
Container im IE durch Scrollbars verschoben?	ProXy	CSS	4	18.04.2006 19:40
Container mit 2 Container darin -> Hintergrund anzeigen	bendar	CSS	4	05.04.2005 18:18