Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 06.09.2008, 23:03
Azadeh Azadeh ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.09.2008
Beiträge: 9
Azadeh befindet sich auf einem aufstrebenden Ast
Standard Div Container - Navigation verschoben // ERLEDIGT

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.

Geändert von Azadeh (07.09.2008 um 14:56 Uhr)
Mit Zitat antworten
Sponsored Links