Fehler beim anordnen von DIVs

Status
Nicht offen für weitere Antworten.
mille

mille

Erfahrenes Mitglied
Hey!

ICh habe ein relativ großes Template um ein "etwas außergewöhnliches" Menü zu realisieren. Dabei kommt es beim andordnen der Divs aber zu Problemen, ich versuch ersteinmal das Problem vereinfacht zu erklären. Das Template hänge ich für interessierte hinten an *g*

Ich habe ein großes DIV, welches als Pane bezeichnet wird. Dieses beinhaltet 2 große DIVs "Menu" und "Banner_Content", wobei im DIV Menü das ganze Menü enthalten ist (mit der style Eigeneschaft "float: left"). Rechts daneben (exakt rechts daneben) soll das DIV "Banner_Content" angezeigt werden. Dieses beinhaltet einen Banner und ein DIV mit einem I Frame.
Leider wird das ganze nicht nebeneinander angezeigt, sondern untereinander. Ein Menü ist im Regelfall aber links neben dem Inhalt - zumindestens will ich das so haben ;).

Hier die übersichtliche Vereinfachung des Templates:

HTML: 
  <html>
  <!-- Hier folgen der Kopf und CSS Deklerationen -->
  <div class="Pane">
  <div class="menu"> <!-- hat die Styleeigenschaft "float: left", sie wurde im HTML Kopf deklariert-->
  
  			 <!-- Das Menü -->
  
  <div class="Banner_Content">
  
  			<!-- hier folgen der Banner etc pp -->
  
  </div>
  </div>
  </div>

Vollständiges relativ unübersichtliches Smarty Template:

HTML: 
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <title>Tag f&uuml;r Nacht s im Netz!</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  {literal}
  <style type="text/css">
  <!--
  body {
  	font-family: "Times New Roman", Times, serif;
  	margin: 0px;
  	padding: 0px;
  	background-color: #000000;
  }
  a {
  	padding: 0px;
  	margin: 0px;
  	border: 0px;
  }
  .Pane {
  	margin: 0px;
  	padding: 0px;
  	height: 620px;
  	width: 910px;
  }
  .Menu {
  	margin: 0px;
  	padding: 0px;
  	margin-left: 10px;	/* Abstand des Menüs vom linken Seitenrand */
  	float: left;
  	width: 190px;
  	height: 250px;
  }
  .Menu_sub_a {	/* Menu-Bereich für die erste Ebene */
  	margin: 0px;
  	padding: 0px;
  	float: left;
  	width: 169px;
  	height: auto;
  }
  .Banner_Content {
  	margin: 0px;
  	padding: 0px;
  	height: 620px;
  	width: 705px;
  }
  .ContentPane {
  	margin: 0px;
  	padding: 0px;
  	height: 520px;
  	width: 705px;
  }
  .dark_line{
  	margin: 0px;
  	padding: 0px;
  	height: 100%;
  	width: 21px;
  	float: left;
  }
  .Menueabstand{
  	width:		10px;
  	height:		21px;
  	padding: 	0px;
  	margin:		0px;
  	border:		0px;
  }
  .menu_punkt{
  	height:		21px;
  	 max-height:	21px;
  	padding: 	0px;
  	margin:		0px;
  	border:		0px;
  }
  .menu_punkt_plus{
  	height: 	auto;
  	padding: 	0px;
  	margin:		0px;
  	border:		0px;
  }
  -->
  </style>
  <script type="text/javascript">
  <!--
  var anfang = 1;
  var speedup = -3;
  var speedwn = 3;
  
   function runter() {
   gutjetzt = setInterval("window.content.scrollBy(0,speedwn)",10);
   }
   
   function hoch() {
   var y = 0;
    if (window.content.pageYOffset) {
  	y = window.content.pageYOffset;
    } else if (document.body && document.body.scrollTop) {
  	y = document.body.scrollTop;
    }
    while (y > 0) {
  	setTimeout("window.content.scrollBy(0, -1)", 200);
  	y = y - 1;
    }
   }
   
   function anhalten() {
   clearInterval(gutjetzt);
   }
  -->
  </script>
  {/literal}
  </head>
  
  <body>
  <div class="Pane" id="Pane">
    <!-- Das Menu -->
    <div class="Menu" id="Menu">  
  	<div class="menu_banner">
  	  <a href="index.php"><img src="gfx/menu/logo.gif" border="0"></a></div>
  		
  	<div class="menu_line_start">
  	<img src="gfx/menu/linie_start{if $smarty.get.page}_active{/if}.gif" /></div>
  	
  	<div class="menu_punkt" id="menu_philosophie">
 	<img src="gfx/menu/linie{$struktur.philosophie}.gif" /><a href="index.php?page=philosophie"><img src="gfx/menu/philosophie{$punkte.philosophie}.gif" border="0" /></a>{$scrolling_philosophie}</div>
  	
  	<div class="menu_punkt_plus" id="menu_produkte">
  		<div class="menu_punkt" id="menue_produkte_font">
 		<img src="gfx/menu/linie{$struktur.produkte}.gif" /><a href="index.php?page=produkte"><img src="gfx/menu/produkte{$punkte.produkte}.gif" border="0" /></a>{$scrolling_produkte}</div>
  		
  		{* Submenue Produkte *}
  		{if $produkte_sub}
 			<div class="menu_punkt_plus" id="menue_street-elements">
  				<div class="menu_punkt">
 		 	<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$produktstruktur.streetelements}.gif" /><a href="index.php?page=produkte&produkte=streetelements"><img src="gfx/menu/street-elements{$produktpunkte.streetelements}.gif" border="0" /></a></div>
  			
  				{* Submenue street-elements *}
  				{if $streetelements_sub}
 		 		<div class="menu_punkt" id="menue_inhalt">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$streetstruktur.inhalt}.gif" /><a href="index.php?page=produkte&produkte=streetelements&streetelements=inhalt"><img src="gfx/menu/street_inhalt{$streetpunkte.inhalt}.gif" border="0" /></a>{$streetelements_scrolling_inhalt}</div>
 		 		<div class="menu_punkt" id="menu_geschichte">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$streetstruktur.geschichte}.gif" /><a href="index.php?page=produkte&produkte=streetelements&streetelements=geschichte"><img src="gfx/menu/street_geschichte{$streetpunkte.geschichte}.gif" border="0" /></a>{$streetelements_scrolling_geschichte}</div>
 		 		<div class="menu_punkt" id="menu_bilder">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$streetstruktur.bilder}.gif" /><a href="index.php?page=produkte&produkte=streetelements&streetelements=bilder"><img src="gfx/menu/street_bilder{$streetpunkte.bilder}.gif" border="0" /></a>{$streetelements_scrolling_bilder}</div>
 		 		<div class="menu_punkt" id="menu_spieltermine">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$streetstruktur.spieltermine}.gif" /><a href="index.php?page=produkte&produkte=streetelements&streetelements=spieltermine"><img src="gfx/menu/street_spieltermine{$streetpunkte.spieltermine}.gif" border="0" /></a>{$streetelements_scrolling_spieltermine}</div>
 		 		<div class="menu_punkt" id="menu_kartenverkauf">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$streetstruktur.kartenverkauf}.gif" /><a href="index.php?page=produkte&produkte=streetelements&streetelements=kartenverkauf"><img src="gfx/menu/street_kartenverkauf{$streetpunkte.kartenverkauf}.gif" border="0" /></a>{$streetelements_scrolling_kartenverkauf}</div>
 		 		<div class="menu_punkt" id="menu_presse">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$streetstruktur.presse}.gif" /><a href="index.php?page=produkte&produkte=streetelements&streetelements=presse"><img src="gfx/menu/street_presse{$streetpunkte.presse}.gif" border="0" /></a>{$streetelements_scrolling_presse}</div>
 		 		<div class="menu_punkt" id="menu_gaestebuch">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$streetstruktur.gbook}.gif" /><a href="index.php?page=produkte&produkte=streetelements&streetelements=gbook"><img src="gfx/menu/street_gaestebuch{$streetpunkte.gbook}.gif" border="0" /></a>{$streetelements_scrolling_gbook}</div>
 		 		<div class="menu_punkt" id="menu_kontakt">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie_ende{$streetstruktur.kontakt}.gif" /><a href="index.php?page=produkte&produkte=streetelements&streetelements=kontakt"><img src="gfx/menu/street_kontakt{$streetpunkte.kontakt}.gif" border="0" /></a>{$streetelements_scrolling_kontakt}</div>
  				{/if}
  			</div>
  			
 			<div class="menu_punkt_plus" id="menue_oxymoron">	
  				<div class="menu_punkt">
 		 	<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$produktstruktur.oxymoron}.gif" /><a href="index.php?page=produkte&produkte=oxymoron"><img src="gfx/menu/oxymoron{$produktpunkte.oxymoron}.gif" border="0" /></a></div>
  			
  				{* Submenue oxymoron *}
  				{if $oxymoron_sub}
 		 		<div class="menu_punkt" id="menue_inhalt">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$oxymoronstruktur.inhalt}.gif" /><a href="index.php?page=produkte&produkte=oxymoron&oxymoron=inhalt"><img src="gfx/menu/oxymoron_inhalt{$oxymoronpunkte.inhalt}.gif" border="0" /></a>{$oxymoron_scrolling_inhalt}</div>
 		 		<div class="menu_punkt" id="menu_geschichte">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$oxymoronstruktur.geschichte}.gif" /><a href="index.php?page=produkte&produkte=oxymoron&oxymoron=geschichte"><img src="gfx/menu/oxymoron_geschichte{$oxymoronpunkte.geschichte}.gif" border="0" /></a>{$oxymoron_scrolling_geschichte}</div>
 		 		<div class="menu_punkt" id="menu_schauspieler">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$oxymoronstruktur.schauspieler}.gif" /><a href="index.php?page=produkte&produkte=oxymoron&oxymoron=schauspieler"><img src="gfx/menu/oxymoron_schauspieler{$oxymoronpunkte.schauspieler}.gif" border="0" /></a>{$oxymoron_scrolling_schauspieler}</div>
 		 		<div class="menu_punkt" id="menu_bilder">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$oxymoronstruktur.bilder}.gif" /><a href="index.php?page=produkte&produkte=oxymoron&oxymoron=bilder"><img src="gfx/menu/oxymoron_bilder{$oxymoronpunkte.bilder}.gif" border="0" /></a>{$oxymoron_scrolling_bilder}</div>
 		 		<div class="menu_punkt" id="menu_spieltermine">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$oxymoronstruktur.spieltermine}.gif" /><a href="index.php?page=produkte&produkte=oxymoron&oxymoron=spieltermine"><img src="gfx/menu/oxymoron_spieltermine{$oxymoronpunkte.spieltermine}.gif" border="0" /></a>{$oxymoron_scrolling_spieltermine}</div>
 		 		<div class="menu_punkt" id="menu_kartenverkauf">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$oxymoronstruktur.kartenverkauf}.gif" /><a href="index.php?page=produkte&produkte=oxymoron&oxymoron=kartenverkauf"><img src="gfx/menu/oxymoron_kartenverkauf{$oxymoronpunkte.kartenverkauf}.gif" border="0" /></a>{$oxymoron_scrolling_kartenverkauf}</div>
 		 		<div class="menu_punkt" id="menu_presse">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$oxymoronstruktur.presse}.gif" /><a href="index.php?page=produkte&produkte=oxymoron&oxymoron=presse"><img src="gfx/menu/oxymoron_presse{$oxymoronpunkte.presse}.gif" border="0" /></a>{$oxymoron_scrolling_presse}</div>
 		 		<div class="menu_punkt" id="menu_gaestebuch">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie{$oxymoronstruktur.gbook}.gif" /><a href="index.php?page=produkte&produkte=oxymoron&oxymoron=gbook"><img src="gfx/menu/oxymoron_gaestebuch{$oxymoronpunkte.gbook}.gif" border="0" /></a>{$oxymoron_scrolling_gbook}</div>
 		 		<div class="menu_punkt" id="menu_kontakt">
 		 			<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie_ende{$oxymoronstruktur.kontakt}.gif" /><a href="index.php?page=produkte&produkte=oxymoron&oxymoron=kontakt"><img src="gfx/menu/oxymoron_kontakt{$oxymoronpunkte.kontakt}.gif" border="0" /></a>{$oxymoron_scrolling_kontakt}</div>
 		 	{/if}	 	
  			</div>
  		<div class="menu_punkt">
 		<img src="gfx/menu/dark_line.gif" height="21" width="21" style="float: left" /><img src="gfx/menu/linie_plus_ende.gif" /><a href="index.php?page=produkte&produkte="><img src="gfx/menu/oxymoron.gif" border="0" /></a></div>
  	{/if}
  	</div>
  			
  	<div class="menu_punkt" id="menu_referenzen">
 	<img src="gfx/menu/linie{$struktur.referenzen}.gif" /><a href="index.php?page=referenzen"><img src="gfx/menu/referenzen{$punkte.referenzen}.gif" border="0" /></a>{$scrolling_referenzen}</div>
  	
  	<div class="menu_punkt" id="menu_kontakt">
 	<img src="gfx/menu/linie{$struktur.kontakt}.gif" /><a href="index.php?page=kontakt"><img src="gfx/menu/kontakt{$punkte.kontakt}.gif" border="0" /></a>{$scrolling_kontakt}</div>
  	
  	<div class="menu_punkt" id="menu_sitemap">
 	<img src="gfx/menu/linie_ende{$struktur.sitemap}.gif" /><a href="index.php?page=sitemap"><img src="gfx/menu/sitemap{$punkte.sitemap}.gif" border="0" /></a>{$scrolling_sitemap}</div>
    </div>
    <!-- Das Menu -->
  
    <div class="Banner_Content" id="rechts">
  		<img src="gfx/banner/standard.gif" border="0" /><!-- {$Banner} -->
 	<div id="platzhalter" style="height: 3px; padding: 0px; margin: 0px; width: 705px">&nbsp;</div>
  	<div class="ContentPane" id="ContentPane">
 		<iframe scrolling="no" src="content.php{if $smarty.get.page}?page={$smarty.get.page}{/if}" width="705" height="480" frameborder="0" id="content" name="content" style="margin: 0px; padding: 0px;"></iframe>
  	</div>
    </div> 
  
  </div>
 <map name="scrolling"><area shape="rect" coords="0,0,8,7" href="#" onmouseover="hoch()" onmouseout="anhalten()"><area shape="rect" coords="1,14,7,23" href="#" onmouseover="runter()" onmouseout="anhalten()"></map>
  </body>
  </html>
 
Also wenn ich das so ändere ist es dann nebeneinander:
Code: 
  .Pane {
   margin: 0px;
   padding: 0px;
   height: 620px;
   width: 984px;
  }
 
Hey!

Also wenn ich die Weite des PANES ändere, dann geht es, sofern ich bei der Class "Banner_Content" das attribut "float: right" einführe.

Aber das is doch blöd, im endeffekt gibt es nur 2 Divs die nebeneinander sind und die sind in der Breite beide zusammenaddiet 895px breit. Wieso muss ich dann noch fast 100 Pixel beim Pane mehr angeben, das ist doch blöd!
Auch ist der Abstand zwischen Menü und Banner_Content zu groß. Wie kann ich es noch lösen, oder denk ich nur falsch?

MfG :)
 
Anmerkung:

  1. die tatsächliche Breite für das DIV.Menu beträgt 257px (gewählt 190px) und resultiert aus der Zeichenlänge dieser Syntax, die das DIV nach rechts ausdehnt:
    {$streetelements_scrolling_kartenverkauf}
    Zum Vergrößern anklicken....
  2. der Abstand zum linken Seiten- / Fensterrand ist um 10px höher, als mit margin-left:10px gewählt.
Folglich geht auch deine Rechnung mit den 895px nicht auf ;-]
 
Das kann aber nicht sein, da

{$streetelements_scrolling_kartenverkauf}

ersetzt wird. Nach dem der PHP Parser das template geparst hat, steht kein "{$streetelements_scrolling_kartenverkauf}" mehr im Quelltex sondern nur noch ein kleines bild mit einer Breite von 10 px (maximal). Insofern geht die Rechnung mit 895 px schon auf :(

Aber vielleicht sollte ich einfach mal die fertige html (nach dem Parsen) zeigen?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück