|
|||
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 © 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® Software">Powered by Contrexx® Software</a></p> <br /> {COUNTER} {LOGIN_CONTENT}</div> </div> </body> 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; } |
Sponsored Links |
|
|||
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; } |
Sponsored Links |
|
|||
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; } |
|
|||
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. |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |