XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Hilfe 2ter Div Container verschiebt sich (http://xhtmlforum.de/showthread.php?t=66805)

Wild-Wolf 03.02.2012 23:33

Hilfe 2ter Div Container verschiebt sich
 
Liste der Anhänge anzeigen (Anzahl: 2)
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;
}


threadi 04.02.2012 14:22

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.

Wild-Wolf 04.02.2012 21:02

Hi,

verschiebt sich dennoch über die Website :(

threadi 04.02.2012 21:17

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;
}


Wild-Wolf 04.02.2012 22:06

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.

threadi 05.02.2012 02:11

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.

Wild-Wolf 05.02.2012 10:15

Läuft zur Zeit nur bei mir aufn PC.
Ich werde mal n Teil aufn Testserver laden und posten

Praktikant 05.02.2012 16:00

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.


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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019