Scrollbalken - aber nur teilweise. Warum?

[Tinchen]

Ich glaub ich steh auf dem Schlauch...

Meine Seite:
Nelly's Stallgewieher

Ich habe für den Rahmen eine feste Breite von 1000px definiert.
Rahmen ist unterteilt in #navigation = 130px breit und #inhalt = 800 px breit.
Nach Adam Riese macht das doch 930px.

Warum erscheinen auf diesen Unterseiten scrollbalken, aber auf der Impressum -Seite und den Unterseiten bei Nelly's Erlebnisse nicht?

Nelly's Stallgewieher
Nelly's Stallgewieher

Ich hatte die Vermutung, dass es etwas mit dem facebook-button zu tun hat. Aber ich habe jede Seite gleich aufgebaut. Und auf dieser hier -> Nelly's Stallgewieher habe ich sogar unter #inhalt zwei Bilder nebeneinander angeordnet, wobei jedes Bild 400px breit ist. Macht insgesamt ja auch 800px. Was überseh ich denn blos?? :sad:

 

[T4k3C4r3]

Ich erkenn dein Problem zwar nicht auf der Website (Da die Werbung nicht verschwindet!), aber ich gebe dir den Rat anstatt mit px mit % zu arbeiten.

Bspl.
width="1000px" <-- in dem Fall falsch

width="100%" <-- Breite der Website Passt sich dem Browserfenster an

 

[Tinchen]

Wenn ich aber der Box eine Breite von 100% gebe, würde sie sich auf die gesamte Fenster-Breite erstrecken, das will ich in diesem Fall nicht, da der Hintergrund sichtbar bleiben soll.
Ok, ich könnte versuchen, wie es sich auswirkt, wenn ich statt 100% z.B. 80% verwende. Diese 80% beziehen sich ja dann auf das Elternelement -in diesem Fall Body- und der Hintergrund würde trotzdem noch sichtbar bleiben.

EDIT: die Werbung verschwindet, wenn man in die Ecke oben rechts geht, dann erscheint das x schließen.
Ist doof, ich weiß. Ist auch nur vorübergehend, wenn ich alle Daten übernommen habe, geht die HP auf eine Werbefreie Seite.

 

[T4k3C4r3]

Meine EMpfehlung ist es dennoch, alles (das meiste) in % anzugeben. Weil sonst jeder deine Website anders sieht.

Der eine sieht vor so einer Kleinen Box den Text nicht mehr.

Der andere sieht von einer so großen box den hintergrund nicht mehr.

Wenn du also willst, dass jeder user deine seite in gleichen dimensionen gleich sehen sollen, dann bleibt dir nur die Lösung --> %


Zur Werbung: Ich klicke auf das X --> es öffnet sich ein popup --> den schließe ich --> Die werbung bleibt --> vorgänge wiederholen --> endlos.

Grüße

 

[prm]

Das Scrollbalkenproblem resultiert aus unterschiedlichen Seitenlängen:
Wenig Inhalt: kein Scrollbalken
viel Inhalt: Scrollbalken

Du kannst es lösen, indem du generell für einen Scrollbalken sorgst: Seiten springen

Von prozentualen Breiten rate ich persönlich ab, da dies zu sehr unerwünschten Effekten führen kann. So verändern sich insbesondere je nach Fenstergröße die Relationen Text zu Grafiken.

 

[Tinchen]

Nur dass wir auch von den gleichen scrollbalken sprechen...ich meine nicht die, die im Browserfenster erscheinen. Die sind ok.
Die, die mich stören, sind auf der Seite "Gebet der Pferde" und erscheinen innerhalb des #rahmen-divs. Ich weiß nicht, ob sie bei jeder Auflösung sichtbar sind. Ich schaue mir die Seite im Moment auf dem Laptop an und da sehe ich eben diese Balken.
Was mich an der Sache wundert ist, dass auf der Impressum-Seite die html-Struktur identisch ist, und dort die Darstellung ganz anders ist. Ich häng mal Bilder mit an...

 

[threadi]

Dieser Scrollbalken entsteht durch die Eigenschaft

overflow: auto;

in #rahmen. Entferne die Eigenschaft, dann passiert das auch nicht mehr.

Im übrigen braucht man dafür nur einen Viewport mit geringer Höhe - die Auflösung ist dafür völlig irrelevant.

 

[Tinchen]

Wenn ich

 overflow: auto;

entferne, dann hab ich aber wieder das Footer-Problem --> http://www.html.de/css/45305-div-height-100-a.html

 

[Tinchen]

Hab's jetzt ganz anders gelöst:

    html, body{
    font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background: url(../images/background2.jpg);
    background-repeat: repeat-x;
    width: 100%;
    height: 100%;
    margin: 0;
    }
     
    #rahmen{
    border: solid #000000 1px;
    width: 1000px;
    margin: auto !important;
    margin-bottom: 10px !important;
    background-color: #FAF9F3;
    -ms-webkit-box-shadow: 5px 5px 15px #0D030C;
    -moz-box-shadow: 5px 5px 15px #0D030C;
    box-shadow: 5px 5px 15px #0D030C;
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
     
    }
     
    #logo{
    border-bottom: solid #000000 1px;
    height: 232px;
    width: 1000px;
    float: left;
    margin: 0px auto;
    }
     
    #navigation{
    float: left;
    width: 130px;
    margin: 0px 0px 30px 0px;    
    display: inline;
    padding-top: 30px;
    padding-left: 20px;
    }
     
    #inhalt{
    background-color: #FAF9F3;
    width: 760px;
    padding: 20px;
    float: left;
    }
     
    #pagebrake{
    height: 20px;
    clear: both;
    }
     
     
    #footer{
    background-color: #aa55ff;
    position: absolute;
    bottom: 5px;
    text-align: right;
    height: 15px;
    width: 1000px;
    }
     
    .facebook{
     position: relative;
     top: 40px;
     left: 8px;
    }
     
    A.navnormal{
    color: #000000;
    font-size: 10px;
    text-decoration: none;
    }
     
    .center{
    font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
    color: #000000;
    text-align: center;
    line-height: 1.5;
    }
     
    .left{
    font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
    color: #000000;
    text-align: left;
    line-height: 1.5;
    }
     
    .justify{
    font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
    color: #000000;
    text-align: justify;
    line-height: 1.5;
    }
     
    h1 {
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    }
     
    h2 {
    color: #000000;
    font-size: 13px;
    }

<body>
<div id="rahmen">

    <div id="logo">
    </div>

<div id="navigation">[INDENT]<div class="facebook">
</div>
[/INDENT]
</div>


<div id="inhalt">[INDENT]<div class="center">
</div>
[/INDENT]
</div>

<div id="pagebrake">
</div>

<div id="footer">
</div>

</div>
</body>
</html>