Scrollbereich nur rechts des Contents @ tutorials.de: Tutorials, Forum & Hilfe

hooligan29 · 15.12.11 15:15

Hallo,

folgendes Problem: Habe einen Contentbereich mit 980px der je nach Bedarf links oder rechts einen Banner erhält. Sobald der Bannerbereich rechts gefüllt ist bekomme ich eine horizontalen Scrollbalken wenn das Browserfenster in den Bannerbereich kommt. Fülle ich den linken Bereich scrollt die Seite erst wenn ich in den Contentbereich komme - der Banner links wird quasi ignoriert.
Da mit dem Codeschnipsel unten die leeren div's nicht ausgeblendet werden muss man tum testen einmal das linke und einmal das rechte Banner-div entfernen und man sieht den Unterschied.

CSS:

Code :

1
2
3

.content {width:980px; margin:auto; padding: 0px; position: relative;}
.banner_left {position: absolute; right: 50%; margin-right: 500px; width: 50px;}
.banner_right {position: absolute; left: 50%; margin-left: 500px; width: 50px}

Codeauschnitt:

HTML-Code:

<div class="content">Inhalt der Seite</div>
<div class="banner_left" id="divbanner2">linker Banner</div>
<div class="banner_right" id="divbanner3">rechter Banner</div>

OpaBenno · 15.12.11 16:39

Ich sehe hier keine Frage (in meinem Alter darf man das!).
Beim Codeausschnitt wird der div (Zeile 1) zu früh geschlossen?
Oder in Zeile 3 wird der div nicht geschlossen, sondern ein neuer div geöffnet.
Tut mir leid, aber da hat niemand Lust zu antworten.

hooligan29 · 16.12.11 10:20

@OpaBenno

Wo ist das Problem mit der Fragestellung?

Zeile 1: wird nicht zu früh geschlossen!

Zeile 3: sorry Tippfehler, in meinem Code ist das div natürlich geschlossen!

Problem bleibt bestehen, dass linker Banner aus dem Browserfenster geschoben wird wenn rechter Banner nicht gefüllt ist und erst beim Content dann der Scrollbalken kommt.

Joe · 16.12.11 14:28

Es gibt keine Fragestellung.
Man ist gezwungen zu raten was du willst. Ich tippe mal bunt auf du willst einen Scrollbalken sobald dein linker Banner (variabel? Mal keiner, mal einer da?) erscheint.

Die Leute sollen also nun deinen Code testen? Da ergibt sich das Problem das man nicht weiss welche Grössen die Bilder haben. Zumal ich für meinen Teil da voll Unlust habe das zu testen. Auserdem ist es möglich das deine Bilder transparente Bereiche haben, was durchaus ein wichtiger Faktor zum Rätsel darstellt.

Wäre vieleicht ein Screen hilfreich? Auf jedenfall wäre eine Frage (mit Fragezeichen am Ende) für dich zielführender. Man könnte dir gezielt antworten.

hooligan29 · 16.12.11 15:44

ok, dann versuche ich es mal so zu erklären:

Neben dem Content wird je nach Bedarf ein Banner eingebunden.
Zieht man den Browser horizontal zusammen erscheint ein Scrollbalken sobald man in den Bereich des rechten Banners kommt.
Entferne ich das kpl. rechte div scollt der Browser erst wenn man den Bereich des Contents erreicht, der linke Banner wird herausgeschoben ohne das ein Scrollbalken kommt.

Zum testen am besten mal code unten öffen und horizontal verkleinern bis der Scrollbalken kommt. Dann das rechte div entfernen und den Browser aktualisieren.

Dann verschwindet der Scrollbalken obwohl das linke div genau wie das rechte durch die gleiche Formatierung schon (z.T.) außerhalb des sichtbaren Bereichs liegt.

Meine Frage(n):
Warum wird das rechte div in den Scrollbereich mit eingerechnet und das linke nicht?
Wie kann man das lösen, dass der Content zentriert bleibt, und egal ob linker und/oder rechter Banner eingebaut sind ein Scrollbalken erscheint sobald man ein Banner-div aus dem sichtbaren Bereich des Browserfensters geschoben wird?

Hier nochmal der kpl. (vereinfachte) Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.content {width:980px; height:500px; background:red; margin:auto; padding: 0px; }
.banner_left {position: absolute; top:10px; right: 50%; margin-right: 500px; width:111px; background:green;}
.banner_right {position: absolute; top:10px; left: 50%; margin-left: 500px; width:111px; background:green;}
</style>
</head>
<body>
<div class="content">Inhalt der Seite</div>
<div class="banner_left">linker Banner</div>
<div class="banner_right">rechter Banner</div>
</body>
</html>

Danke und Gruß.

Joe · 16.12.11 16:07

Zum zentrieren kannst du dem Content
background-position:top center;
mitgeben.

Und dann würde ich mit float arbeiten. Also den linken Banner float: left; und den rechten foat: right; geben. Dann sollte der Scrollbalken so wie gewünscht funktionieren. Einfach das position: absolute; ersetzen mit dem float.

Warum sich das mit dem Scrolling so bei dir verhält weiss ich allerdings nicht.

Gruss Joe.

***hela*** · 16.12.11 17:05

Zitat von hooligan29

... Warum wird das rechte div in den Scrollbereich mit eingerechnet und das linke nicht?
Wie kann man das lösen, dass der Content zentriert bleibt, und egal ob linker und/oder rechter Banner eingebaut sind ein Scrollbalken erscheint sobald man ein Banner-div aus dem sichtbaren Bereich des Browserfensters geschoben wird?
...

Hallo,
sobald das Browserfenster in der Breite kleiner als 1222px wird schiebst du den "banner_left"-Block links aus dem Viewport. Alle Elemente, die sich oberhalb oder links außerhalb des Browserfensters befinden, sind nicht darstellbar. Das ist normales Browserverhalten, das man ggf. auch ausnutzen kann.

Du müsstest also deine drei DIV-Blöcke in einen Hüllenblock (id="wrapper") stecken, der 1222px breit ist und im Viewport zentriert wird:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
      #wrapper {
        position: relative;
        width: 1222px;
        margin: 10px auto 0;
      }
      .content {
        width: 980px;
        height: 300px;
        background: red;
        margin: 0 auto;
      }
      .banner_left {
        position: absolute;
        top: 0;
        left: 0;
        width: 111px;
        background: green;
      }
      .banner_right {
        position: absolute;
        top: 0;
        right: 0;
        width: 111px;
        background: green;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div class="content">Inhalt der Seite</div>
      <div class="banner_left">linker Banner</div>
      <div class="banner_right">rechter Banner</div>
    </div>
  </body>
</html>

hooligan29 · 19.12.11 09:35

Danke für die Antwort. Würde pinzipiell natürlich funktionieren. Problem ist nur, dass die Banner dynamisch ein- und ausgeblendet werden, was ich dann mit dem wrapper auch machen müsste um nicht bei leeren Bannern einen Scrollbalken zu haben, der dann nicht nötig wäre.

Eine Lösung, dass der Browser auch ohne den wrapper den linken Banner erkennt gibt es nicht?

djheke · 21.12.11 20:06

Das Scrollproblem ist zwar mit folgendem Beispiel nicht gelöst, aber wenn es dir nur darum geht, dass bei fehlender Werbung die Spalten verschwinden und nur der Contentbereich sichtbar ist, dann könntest du ja auf display:table zurückgreifen. Wenn nicht dann vergiss dieses Beispiel.
Demo
mfg

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Nur contents neu laden mit asp

Eclipse Help Contents

waagerechter scrollbereich

If Contents

Frage zu GUI & contents

E-Mail:

Abonnieren Abbestellen