Hintergrundbild overflow: hidden

tobimo · 21.04.2011

Riesen Problem: Hintergrund overflow: hidden

Guten Tag zusammen!

Ich habe eine Sache, die ich egal wie ich es auch versucht habe, nicht lösen konnte.

Das Problem hört sich banal an:
Ich habe ein Page-Layout, das ist 1000px breit.
Links und Rechts von der Page brauche ich jeweils eine Hintergrundgrafik.
Um eine Grafik zu vermeiden, habe ich kein Hintergrundbild mit weißem Platz in der Mitte, sondern einen <div id="right"> und einen <div id="left">. Beide positioniere ich absolut. Das ist kein Problem.

Normalerweise würde man ja overflow-x: hidden; für den body-Tag setzen, doch dann wird, je nachdem wie klein die Auflösung auf z.B. einem Laptop ist, auch die Page abgeschnitten.

Wie schaffe ich es nun also, dass mindestens immer das Page-Layout angezeigt wird (es ist übrigens mittig ausgerichtet, und wie gesagt 1000px breit), und darüber hinaus, wenn Platz ist, auch der Hintergrund angezeigt wird.

Das Hintergrundbild ist nach links bzw rechts so groß, dass auch bei einem Widescreen horizontale Scrollbalken entstehen, doch genau dies möchte ich verhindern, da es doch sehr unschön ist.

Ich bin gespannt ob jemand für dieses Problem eine Lösung gefunden hat.
Ich würde eine Lösung mit reinem HTML/CSS bevorzugen, eine Lösung mit PHP/Java(script) aber auch nicht ausschließen...

Ich hoffe ihr versteht was ich meine, und nun bin ich auf Antworten gespannt, ich konnte es nämlich bisher nicht lösen.

adomait · 22.04.2011

AW: Hintergrundbild overflow: hidden

Hallöchen!

Ich hoffe, ich habe das jetzt richtig verstanden:
Du möchtest, dass der zentrierte Content-Bereich Deiner Seite immer horizontal-mittig im Browser dargestellt wird, egal ob Vollbild- oder Fenster-Darstellung, damit Du den horizontalen Scrollbalken verstecken kannst, richtig?

Da ich ein absoluter CSS-Noob bin kann ich Dir da jetzt keinen passenden Code zu bieten, aber ich würde mal nach Sliding Doors suchen. Damit werden Divs (mit entsprechenden Hintergründen) so überlagert, dass diese - wie der Name schon sagt - eine Schiebetür ergeben und mit der Fensterbreite "skalieren".
Du müsstest also theoretisch mit einem zentrierten Div für die linke Grafik (als Hintergrund mit TOP LEFT) beginnen, darin einen Div für die rechte Grafik aufrufen (TOP RIGHT) und darin dann Deinen Div für das eigentliche Layout platzieren. Da das eigentliche Layout mit einer festen Breite zentriert ist. sollten die Hintergrundgrafiken nur sichtbar werden, wenn das Browserfenster breiter ist, als Dein Content...

Falls ich damit völlig daneben liege, bitte ich ausdrücklich darum, das einer der Profis hier im Forum das richtig stellt und/oder vielleicht auch einen kleinen Beispiel-Code hinzufügt. Danke dafür!!!

Grüße,

Boris.

Kerstin77 · 22.04.2011

AW: Hintergrundbild overflow: hidden

Hallo,

wenn Du die Scrollbalken nur aus den äußeren Div's raushaben möchtest, müsste das so funktionieren:

PHP:

#left, #right {
   overflow:hidden;
}

Aber warum nimmst Du nicht ein großes Hintergrundbild?

Grüße,
Kerstin

tr4ze · 22.04.2011

AW: Hintergrundbild overflow: hidden

So gehts, so hast du deinen Zentrierten Content-Bereich und Links und Rechts jeweils einen Div der sich automatisch an die Seitenbreite anpasst.
Neuere Browser sollten das anstandslos darstellen, ältere musst du testen.

HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
    }
html {
    height: 100%;
    }
body {
    height: 100%;    
    }
#page {
    height: 100%;
    display: block;
    }
#left {
    float: left;
    width: 50%;
    background: #CCC;
    height: 100%;
    text-align: left;
}
#right {
    float: right;
    width: 50%;
    background: #999;
    height: 100%;
    text-align: right;
}
#main {
    width: 100%;
    height: 100%;
    position: absolute;
    }
#site {
    display: relative;
    background: #FFF;
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    overflow: auto;
    } 
.clear {
    clear: both;    
    }

-->
</style>
</head>

<body>
<div id="page">
    <div id="left">left</div>
    <div id="right">right</div>
        <div id="main">
            <div id="site">Hier der Content:</div>
        </div>
</div>
</body>
</html>

adomait · 22.04.2011

AW: Hintergrundbild overflow: hidden

Danke tr4ze!

hab´ ich mir dann doch komplizierter vorgestellt...
Bin zwar nicht der TE, ich werd´ aber mal versuchen das umzusetzen

Grüße,

Boris.

cebito · 22.04.2011

AW: Riesen Problem: Hintergrund overflow: hidden

tobimo schrieb:
Um eine Grafik zu vermeiden, habe ich kein Hintergrundbild mit weißem Platz in der Mitte, sondern einen <div id="right"> und einen <div id="left">. Beide positioniere ich absolut. Das ist kein Problem.

Warum einfach, wenn es auch kompliziert geht. Um wie viel kb größer wäre eine Hintergrundgrafik mit weißer Mitte gegenüber den zweien? Doch eher unwesentlich. Dafür braucht die aber nur einen HTTP-Request und auch kein zusätzliches Markup, welches eigentlich der inhaltlichen Strukturierung der Seite dienen sollte. Also spar dir den ganzen Sch*** und mach ein zentriertes Hintergrundbild.

tr4ze · 22.04.2011

AW: Hintergrundbild overflow: hidden

cebito schrieb:
Warum einfach, wenn es auch kompliziert geht. Um wie viel kb größer wäre eine Hintergrundgrafik mit weißer Mitte gegenüber den zweien? Doch eher unwesentlich. Dafür braucht die aber nur einen HTTP-Request und auch kein zusätzliches Markup, welches eigentlich der inhaltlichen Strukturierung der Seite dienen sollte. Also spar dir den ganzen Sch*** und mach ein zentriertes Hintergrundbild.

Wo du recht hast, hast du natürlich recht

Ich fand es trotzdem ein interessantes Problem, perfekt um mal wieder ein wenig Float Theorie aufzufrischen und Div-Suppe zu kochen.

tobimo · 22.04.2011

AW: Hintergrundbild overflow: hidden

Guten Tag,
ich glaube es dauert wesentlich länger, ein Bild zu laden welches ca. 2500px breit ist und 800px hoch, als zwei Bilder à 350*800px, oder etwa nicht? Aber vielen Dank für den Hinweis, ich kann nur nicht einschätzen, ob das tatsächlich so ist. Hast Du es schonmal verglichen bezüglich der Ladezeit?

@ tr4ze: das würde generell natürlich klappen, aber der Hintergrund ist an das Design angelehnt und wird "eins" mit dem Hintergrundbild. Left und Right teilt den Bildschirm ja in zwei Teile, diese Teile würden dann aber natürlich nicht am Rand des Layouts (width: 1000px) anfangen, sondern in der Mitte, sodass letztendlich das Design des Hintergrundes nicht mehr zum Design des Layoutes passt. Oder sehe ich das falsch? Dann müsste ich ja wieder 500px weißes Bild in die Grafiken einsetzen, oder den Inhalt um 500px nach links/rechts verschieben. Das ginge dann tatsächlich doch oder habe ich einen Fehler gemacht?
Vielen, vielen Dank für deine Hilfe und Mühe!

Die Frage nun ist, ob die eine Grafik, die extrem groß ist (dank Widescreens und hohen Auflösungen), schneller geladen werden kann als zwei kleinere Grafiken... Hat da schon jemand Erfahrung?

charmin7 · 22.04.2011

AW: Hintergrundbild overflow: hidden

prinzipiell sollte sich die Ladezeit nicht unterscheiden, sofern die zwei kleinen Dateien zusammen die gleiche Dateigröße haben wie die einzelne Datei. Auch wenn sich die Größe um einige kb unterscheidet sollte das bei heutigen Geschwindigkeiten eher weniger relevant sein.

Edit:

Von mir auch ein Danke für den Codeauszug mit den Divs, an etwas ähnlichem sitzte ich auch gerade und jetzt weiß ich wie ich es realisieren muss!

tr4ze · 22.04.2011

AW: Hintergrundbild overflow: hidden

wenn du das Hintergrundbild als <img> lädst könntest du es positionieren.Oder du nimmst einen weiteren Div und verpasst dem ein margin, egal wie, den Abstand kennst du ja nun:1000px/2

Das mit denn 50% ist nun einmal dem Parser geschuldet, der braucht ein festen Ankerpunkt.

btw: Wichtig ist nicht alleine die Dateigröße, sondern auch die Anzahl der Requests, da hat Cebito völlig recht.Mit so einem Konstukt bastelst du dir ganz schnell einen Overhead.

sokie · 22.04.2011

AW: Hintergrundbild overflow: hidden

interessant wäre, wie die Seite in etwa aussehen soll, bzw. was dein ca 2500x800px grosses Hintergrundbild enhält. Es gibt eine reihe von Möglichkeiten - letztlich entscheidet das Ergebnis über die Vorgehensweise.

tobimo · 22.04.2011

AW: Hintergrundbild overflow: hidden

Also ihr würdet empfehlen, dem <body> ein Hintergrundbil zugeben mit weißem Platz in der Mitte? Ich habe es ausgerechnet, es sind ca. 490KB zu 550KB.

Geht es mit Ladezeit dann schneller, da es weniger Code ist?