zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe 2ter Div Container verschiebt sich

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.02.2012, 23:33
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
  #2 (permalink)  
Alt 04.02.2012, 14:22
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Positioniere #affi_right absolut rechts innerhalb von #page.

Code:
#page { position: relative; }
#affi_right {
 width: 150px;
 position: absolute;
 right: 0;
 top: 0;
 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;
}
Ggfs. noch z-index setzen um sicherzugehen das nichts überdeckt wird.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.02.2012, 21:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.01.2012
Beiträge: 14
Wild-Wolf befindet sich auf einem aufstrebenden Ast
Standard

Hi,

verschiebt sich dennoch über die Website
Mit Zitat antworten
  #4 (permalink)  
Alt 04.02.2012, 21:17
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Halt, ein Fehler hatte sich bei mir eingeschlichen. Nicht right sondern left muss gesetzt werden.

Code:
#page { position: relative; }
#affi_right {
 width: 150px;
 position: absolute;
 left: 100%;
 top: 0;
 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;
}
Mit Zitat antworten
  #5 (permalink)  
Alt 04.02.2012, 22:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.01.2012
Beiträge: 14
Wild-Wolf befindet sich auf einem aufstrebenden Ast
Standard

jetzt sitzt es ganz rechts außerhalb des Bildes, schiebt sich aber dennoch über das Layout beim verkleinern.

Soll so sein wie hier ganz rechts der Banner:
GameStar.de: Tests, Previews, Videos, News, Spieletipps, Cheats und Downloads für PC-Spiele.
Mit Zitat antworten
  #6 (permalink)  
Alt 05.02.2012, 02:11
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Kannst Du nicht deine Seite zeigen so, dass man da direkt nachschauen kann? Bei deinem Beispiel sehe ich kein Banner an der Stelle die ich denke, dass du die meinst.
Mit Zitat antworten
  #7 (permalink)  
Alt 05.02.2012, 10:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.01.2012
Beiträge: 14
Wild-Wolf befindet sich auf einem aufstrebenden Ast
Standard

Läuft zur Zeit nur bei mir aufn PC.
Ich werde mal n Teil aufn Testserver laden und posten
Mit Zitat antworten
  #8 (permalink)  
Alt 05.02.2012, 16:00
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.990
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Klar verschiebt sich das über die Seite. #page umfasst die Seite. Wenn du daran etwas absolut ausrichtest, dann schiebt es sich entweder aus dem Viewport oder über die Seite. Je nachdem wie das "festgetackert" wird.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Website Konstrukt - Div Container polest (X)HTML 2 27.06.2010 18:55
2 DIV container neben einander immer verschachtelt compcasper CSS 2 19.02.2009 15:28
Container überlappen sich trotz clearing Klaus_Hansen CSS 3 22.11.2008 19:29
div Container verschiebt sich beim Internet Explorer 6 sandmanyz CSS 3 20.07.2007 20:43
2 Div Container, unten anordnen, keine feste Höhe Hausmeista (X)HTML 0 06.06.2006 18:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:42 Uhr.