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

Weiße Fläche an rechter Seite beim Scrollen

berl1n

Neues Mitglied
Hallo,

ich bin es schon wieder. Irgendwie haben meine Probleme immer mit unerwünschten, weißen Flächen zu tun. In folgenden Youtube-Video seht ihr das Problem:

https://www.youtube.com/watch?v=iK5WIUZDXA4&feature=youtu.be

Diesmal handelt es sich um einen Textbox (<div id="contenttext">), die das Problem hervorruft. Es tritt, wenn man runterscrollt, ein unerwünschter, weißer Balken an der rechten Seite über dem Hintergrundbild auf, der mit dem Text in dieser Box hochscrollt. Ich habe schon durch auskommentieren herausgefunden in welcher Zeile das Problem ist, allerdings verstehe ich nicht wieso dadurch dieses Problem auftritt. Der CSS-Code für die Textbox sieht folgendermaßen aus:

Code:
#contenttext {    width: 680px;
    position: absolute;
    top: 100px;
    bottom: 0;
    right: 50%;
    margin-right: -630px;
    padding: 102px 530px 50px 50px;
    z-index:2;
}

Das Problem entsteht durch die Zeile "position: absolute;". Wie gesagt verstehe ich aber nicht wieso.

Ich hoffe ihr könnt mir weiterhelfen oder eine alternative für diese Zeile oder den ganzen CSS-Code nennen.

Falls ihr noch weitere Codeschnipsel braucht kann ich die natürlich auch gerne posten.

Danke schonmal für eure Hilfe.
 
Die Seite ist noch nicht online. Wie gesagt ich könnte mehr vom Code posten. Dann wäre aber auch gut zu wissen was genau. Die HTML-Datei ist wie folgt aufgebaut:

Code:
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>...</title>
 <link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
  <div id="main">
    <div id="header">
      <div id="login">Definiert den Loginbereich mit Input Feldern für Username und Passwort, sowie Buttons um zum Registrieren bzw. Passwort vergessen Bereich zu gelangen.</div>
      <div id="search">Definiert die Suchleiste</div>
      <div id="nav">Definiert das Menü, sowie Untermenüs, mit Links zu den entsprechenden Bereichen</div>
    </div>
    <div id="content">
      <div id="contentbox">Box die bis zum Boden der Seite geht, fixiert ist und als Hintergrund für den Haupttext der Seite dient.</div>
      <div id="contenttext">Box mit transparentem Hintergrund, in der der Haupttext steht.</div>
      <div id="newsbox">Box an der Seite mit anderen Infos (Text).</div>
      <div id="anniversarybox">Box an der Seite mit andern Infos (Text).</div>
    </div>
    <div id="footer">
    </div>
  </div>
</body>
</html>

Um dir den Aufbau nochmal genauer vor Augen führen zu können, kannst du ja das Video nochmal angucken.
 
Man bräuchte schon den gesamten Quellcode, also nicht nur HTML (inkl. Doctype) sondern auch CSS und JavaScript, falls Du das nutzt um irgendwas am Layout einzustellen. Daher wäre ein Link zur Seite immer besser geeignet, auch weil man sich die Seite direkt im Browser anschauen kann und auch die von dir verwendeten Grafiken hat. Wenn Du die Seite bisher nicht online hast, such dir einen kostenfreien Webspace und lade sie dort hoch.
 
Das hier ist schon mal eine potenzielle Fehlerquelle: position:absolute in Kombination mit Pixel- und Prozentwerten, sowie dem offensichtlichen Versuch, den Container #contenttext an einer bestimmten Bildschirmposition pixelgenau festnageln zu wollen. Klassischer Anfängerfehler.

Code:
#contenttext {    width: 680px;
    position: absolute;
    top: 100px;
    bottom: 0;
    right: 50%;
    margin-right: -630px;
    padding: 102px 530px 50px 50px;
    z-index:2;
}

Versuche mal, komplett ohne position und z-index auszukommen. Wähle entweder Prozentwerte oder Pixel für margin/padding und letztere nur in Schritten von 5px.
 
Danke schonmal für die Antworten. Ich versuche mal den Aufbau meiner Seite etwas zu erklären. Zum einen gibt es auf der linken und rechten Seite zwei Hintergrundbilder, die beide an der jeweiligen Seite fest am Rand verankert sind. Das alles in der niedrigsten Ebene. Darüber sind dann in der Mitte (immer genau mittig im Browserfenster) und mit einer festen Breite der ganze Bereich der bei mir main heißt. Mit dem ganzen Menü, Loginbereich, Suchleiste und darunter dem Contentbereich. Das was also am wichtigsten ist, ist das alles (außer die zwei Hintergrundbilder) mittig im Browserfenster platziert ist und eine feste Breite hat.

Ist es wirklich möglich das alles ohne position und z-index zu realisieren? Wie soll man denn ohne z-index festlegen auf welcher Ebene welches Element ist?

EDIT: Ich habe gerade noch festgestellt, dass das padding beim contenttext nicht richtig funktioniert. Der Text geht trotz "padding-bottom: 50px" bis zum Boden der Seite. Habt ihr da irgendwelche Ideen.
 
So wie es für mich klingt liegen bei dir keine Ebenen aufeinander. Hintergründe kann man zudem als Hintergrundbild definieren und erfordern auch keine absolute Positionierung. Normalerweise baut man Webseiten auch ohne absolute Positionierung auf. Solange wir deinen gesamten Quellcode oder besser einen Link zur Seite aber nicht haben, ist das alles nur Herumdeuterei ..

Dein padding-"Phänomen" hängt imho auch mit der absoluten Positionierung zusammen.
 
Ok. Danke erstmal. Ich werde jetzt erstmal probieren die Seite ohne absolute Positionierung aufzubauen. Wenn es dann noch Probleme gibt oder ich nicht weiterkomme, melde ich mich nochmal.
 
Zurück
Oben