• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Untergeordnetes div wird nicht von übergeordnetem eingeschlossen

D

DeadPrank

Neues Mitglied
Liebe Community ich habe ein Problem. Die letzten 2 Div Elemente kleben am rand der Website, obwohl sie doch eigentlich unterhalb des 1. Angezeigt werden müssten. Ich bin verzweifelt...
HTML: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://3lit3.de/static/standard.css">
 <link rel="stylesheet" type="text/css" href="http://3lit3.de/ClanStylesheet.css">
 <script type="text/javascript" src="myclan.js"></script>
 <script type="text/javascript" src="jshelp.js"></script>
     <title>3lit3.de Clan</title>
</head>
<body onload="initmyclan()">
<div style="margin-left: auto; margin-right">
     <div id="Pagetitle" class="MainSurrounder" style="width:972px; margin-left: auto; margin-right: auto;">
            <h1 class="DEFAULTMainTitle"> 3lit3.de Clan</h1>
            <p class="DEFAULTTicker"> <marquee>            ++++ Es herrscht (noch) FRIEDEN ++++ Das ist der 3lit3.de Clan ++++ Noch mehr getickere ++++ Hat weder Hand noch Fuß: Torso ++++         </marquee> </p> 
            <hr class="GrayHr">
                 <span class="SuperButton"><a href="http://3lit3.de">Home</a></span>
                 <span class="SuperButton"><a href="http://3lit3.de/blog/">Blog</a></span>
                 <span class="SuperButton"><a href="http://3lit3.de/impressum.html">Impressum</a></span>
     </div>
<div class="SidebarSurrounder" style="position: fixed">
      <div class="SidebarButton"><p align="center"><a href="index.php?w=news">News</a></p></div>
      <div class="SidebarButton"><p align="center"><a href="index.php?w=servers">Clan-Server</a></p></div>
      <div class="SidebarButton">
            <form action="index.php?w=login" method="POST">
                  <input type="text" name="fuser" value="User" size="10"><br>
                  <input type="password" name="fpassword" value="XXXXX" size="10"><br>
                  <button type="submit"  value="Login">Login</button>
            </form>
      </div>
</div>
<div class="ContentBox" style="position: fixed">
      <p class="NewsFace">
            Herzlich Willkommen beim 3lit3.de Clan,<br>wir freuen uns dich in unserer Mitte zu begrüßen und wünschen dir viel Spass auf unserer Seite<br>viel wichtiger noch: ein paar Good Games heute.<br>
            <br>Euer 3lit3-Team
      </p>
      <hr class="GrayHr">
      <p class="NewsFace">
            Proudly powered by:</p><br><img src="debian.png" alt="Debian"><p class="NewsFace">Dies ist eine HD Website. Keine Beschwerden &uuml;ber Darstellungsfehler bei Monitoren unter 1920x1080 Pixeln.</p>
</div>
</div>
</body>
</html>

Bitte antwortet mir;

DeadPrank
 
Zuletzt bearbeitet:
bring erst mal ne Sturktur in deinen Code. So wird sich das keiner antun da durch zu kucken. Außerdem fehlt dein Doctype.
 
Ist das die Seite unter 3lit3.de Clan ? Wenn ja, dann musst Du erstmal für vernünftigen HTML-Code sorgen:
[Invalid] Markup Validation of http://3lit3.de/ - W3C Markup Validator

Dein Problem hat sicherlich damit zu tun, dass Du den Kopfbereich mit anderen CSS-Eigenschaften versiehst als den unteren Bereich. Momentan schiebst Du beide künstlich mit einem riesen Abstand nach links weit nach rechts. Auf meinem Viewport sieht das ziemlich bescheiden aus, da ich auch noch weit nach rechts scrollen muss um überhaupt etwas zu sehen. Ich kann nur raten, dass es dir darum geht die gesamte Seite zu zentrieren. Wenn das so ist, nimm die margins (Außenabstände) raus und gib dem body folgende Eigenschaften:

Code: 
body { width: 1088px;margin: 0 auto; }

Wichtig: damit das funktioniert (und alles andere auch) musst Du erstmal den HTML-Code säubern.
 
Jetzt ist der Code Schöner :D Sorry leute
UND: auf der website ist zur zeit noch das alte design, das neue wird den doctype enthalten, weil ich den redesign aber noch nicht fertig habe, ist er noch nicht "Live"
 
Deinem HTML-Code fehlt immernoch ein Doctype.

Und solche Angaben sind fehlerhaft:
HTML: 
 style="margin-left: auto; margin-right"

Die anderen beiden <div>'s hast Du fixiert Positioniert. Dadurch nimmst Du sie aus dem Fluss und musst sie dann auch entsprechend positionieren. Ich würde dir raten darauf zu verzichten.
 
ok, vielen dank für den tipp, dass ich dem body ja eine width zuweisen kann :D
jetzt hab ich nur noch ein winziges Problem. Die seite sieht nun so aus:
websiteproblem.jpg
 
Dann hast Du dem body eine geringere Breite gegeben als dein Content tatsächlich einnehmen will. Vergleiche die Werte. Setze die Breite so wie Du sie brauchst.
 
Ok, bin auf die alte Lösung mit Position absolute zurückgegangen aber die width umgestellt vom Body. Passt Perfekt so :D

Vieeelen Dank für die schnellen und perfekten Antworten

Euer DeadPrank
 
Absolute Positionierung passt hier sicher nicht perfekt. Es mag bei dir wohl gut aussehen, aber jemand mit einem anderen Viewport, anderem Browser, wird damit keine Freude haben. Verzichte auf absolute Positionierung.
 
Ich habs jetzt mal gegengetestet und es funktioniert in IE9, Firefox und Chrome 15 ich schaue aber noch mal nach einem besseren weg.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben