Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 03.02.2012, 23:33
Wild-Wolf Wild-Wolf ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.01.2012
Beiträge: 14
Wild-Wolf befindet sich auf einem aufstrebenden Ast
Frage Hilfe 2ter Div Container verschiebt sich

Hallo zusammen. Ich habe ein kelines Problem mit meinem Div Layout.
Ich möchte gerne wie auf dem Bild zu sehen ist, das naben der Website (allerdings nicht soweit am Rand) ein Bereich für z.B. Werbung oder sonstige Banner plazieren. Klappt auch soweit.

Jetzt das Problem. Wenn ich mit einer kleineren Auflösung die Website checke, rutscht mein div über die Website (Bild 2). Allerdings möchte ich das der Container auf der selben höhe bleibt, auch wenn ich mit einer anderen Auflösung die Website besuche.

Hier mal der code:
HTML-Code:
<body>
<div id="network">
<a href="index.php?section=newsletter">Newsletter</a> | <a href="http://forum.anime-thunder.de" target="_blank">Forum</a> | <a href="" target="_blank">Fan-Shop</a> | <div id="network_fehler"><a href="#">Fehler Melden</a></div></div>
<div id="page">
<div id="affi_right">
Hier soll ein Banner rein.<br />
Nur bleit die Position nicht
</div>
<div id="header">
<div id="search">
<form action="index.php" method="get" id="form-globalsearch">
<input value="search" name="section" type="hidden"/>
<input name="term" onfocus="this.value=''" id="term" value="Suche" type="text"/>
<input type="image" alt="suchen" src="themes/at/images/search.jpg" />
</form>
</div> 
<img name="header" src="themes/at/header/header.jpg" width="830" height="136" border="0"  usemap="#m_header" alt="" /><map name="m_header" id="m_header">
<area shape="rect" coords="0,12,409,96" href="index.php" title="Main" alt="Main" />
<area shape="rect" coords="800,6,827,38" href="http://www.youtube.com/user/AnimeThunderde" target="_blank" title="Youtube" alt="Youtube" />
<area shape="rect" coords="761,6,794,38" href="https://www.facebook.com/AnimeThunder.de" target="_blank" title="Facebook" alt="Facebook" />
<area shape="rect" coords="722,6,757,38" href="https://twitter.com/AnimeThunder" target="_blank" title="Twitter" alt="Twitter" />
<area shape="rect" coords="685,6,718,38" href="https://plus.google.com/u/0/110632930299910608663" target="_blank" title="Google+" alt="Google+" />
</map>
				<div id="navigation" >
						<ul class="mainNavigation">
							{NAVBAR_FILE}
						</ul>
						
	</div>
  </div>

<div id="container" class="group">
<div id="content-wrap" class="group">
{CONTENT_FILE}
<div id="footer" class="group">
<p id="copyright">Copyright &copy; 2000 - {DATE_YEAR} Anime Thunder.de</p>
<div id="footer_right">
           <ul>
    <li><a href="{PRINT_URL}">Druckansicht</a></li>
    <li><a href="index.php?page=593">Disclaimer</a></li>
    <li><a href="datenschutz">Datenschutz</a></li>
    <li><a href="index.php?section=imprint">Impressum</a></li>
    <li><a href="index.php?section=contact&cmd=4">Kontakt</a></li>
    <li><a href="team">Team</a></li>
<br />
    <li><a href="http://anime-thunder.spreadshirt.de" target="_blank">Fan-Shop</a></li>
    <li><a href="index.php?section=recommend">Seite weiterempfehlen</a></li>
    <li><a href="index.php?section=login">Login</a></li>
    <li id="totop"><a href="#page">Seitenanfang</a></li>
</ul>
</div>
</div>
</div></div>

<div><p id="powered"><a href="http://www.contrexx.com/" title="Powered by Contrexx&reg; Software">Powered by Contrexx&reg; Software</a></p>
<br />
{COUNTER}
{LOGIN_CONTENT}</div>
</div>

</body>
Und die CSS vom oberen Bereich
Code:
#network {
  margin-top:0;
  padding: 5px 330px;
  font-family: Arial,Helvetica,sans-serif;
  color: #fff;
  font-size:10pt;
  width:100%;
  background: url(images/page.jpg) repeat-x;
  position:fixed;
  z-index:1000;
  }

#network a {
  text-decoration: underline;
  color: #fff;
  }

#network a:hover {
  color: #e9e9e9;
  text-decoration: none;
  }
  
#network_fehler {
	margin-top:-20px; 
	margin-left:670px;
	z-index:1001;
}
  
#network_fehler a:link
  {
	color:#F00;
	font-weight:bold;   
  }
  
#network_fehler a:visited
  {
	color:#F00;
	font-weight:bold;   
  }
   
#search {
  margin: 0 auto;
  padding: 25px 12px 15px;
  width: 150px;
  height: 14px;
  position:relative; top:83px; left:348px;;
  z-index:999;
}

#affi_right {
 width: 150px;
 margin-top:300px;
 float:right;
 position:relative;
 background-color:#666;
 border: 2px solid #000;
 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}
Angehängte Grafiken
Dateityp: jpg frage.jpg (140,9 KB, 8x aufgerufen)
Dateityp: jpg Bild2.jpg (25,2 KB, 11x aufgerufen)
Mit Zitat antworten
Sponsored Links