Problem mit sichtbarer Breite des BODY-Elements

doolak · #1 (**permalink**) 28.09.2008, 17:12

Hallo allerseits,

wenn ich dem BODY-Tag eine horizontal wiederholte Grafik zuweise, ergibt sich bei Verwendung einer weiteren Hintergrundfarbe oder -Grafik in einem anderen alles umschliessenden Element (HEAD-Element oder auch bei Nutzung eines extra dafür vorgesehen Containers) folgendes Problem:

1. Ohne Zuweisung der zweiten Hintergrundeigenschaft ist alles einwandfrei.

Im Browserfenster wird der Hauptbereich (grau) zentriert angezeigt, die Kopfgrafik ist links und rechts davon sichtbar:

Auch wenn ich das Fenster horizontal verkleinere und an den rechten Rand scrolle, ist alles in Ordnung. Es wird dann der mit #wrapper definierte Teil angezeigt, die Kopfgrafik ist sichtbar:

2. Bei Zuweisung einer weiteren Hintergrundeigenschaft ergibt sich jedoch folgendes Problem.

Ist das Browserfenster grösser als der #wrapper-Bereich, ist alles ok:

Bei Verkleinerung des Browserfensters wird jedoch beim Scrollen nach rechts die Kopfgrafik nicht mehr angezeigt (links ja):

Hier der Code für das zweite Beispiel:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="test.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<div id="wrapper">
	<div id="page">
		
	</div>
	
</div>
</body>	
</html>

Code:

* {
	margin:0;
	padding:0;
}

html {
	background-color: black;
}

body {
	background: url(images/header_bg.png) repeat-x left top;
}

#wrapper {
	width: 900px;
	margin: auto;
	text-align: center;
	border: 2px dashed red;
}
#page {
	width: 860px;
	height: 600px;
	margin: auto;
	background-color: gray;
}

Hat jemand eine Idee, wie man das Problem lösen könnte?

Liebe Grüße,

Christian

fricca · #2 (**permalink**) 28.09.2008, 17:37

Entferne die Hintergrundfarbe beim HTML-Element. Sonst verliert Body seine Sonderstellung.

Grundsätzlich: Probleme mit Hintergrundbildern sind ohne Link nicht nachvollziehbar.

doolak · #3 (**permalink**) 28.09.2008, 18:18

Ja, das habe ich bereits berücksichtigt. Deshalb habe ich auch darauf hingewiesen, dass das Problem auch auftritt, wenn ich nicht dem HTML-Element, sondern einem Extracontainer die Hintergrund-Eigenschaft zuweise.

Ich habe das hier mal als Beispiel hochgeladen:

Test

Musste dazu natürlich die Grafik dem Extracontainer (#background) zuweisen und dem BODY-Element die Hintergrundfarbe, da im umgekehrten Fall die Hintergrundgrafik ja durch die Farbe überdeckt worden wäre.

fricca · #4 (**permalink**) 28.09.2008, 18:20

Siehe anderer Thread.

doolak · #5 (**permalink**) 28.09.2008, 18:29

Damit es nicht immer zwischen den beiden Threads hin- und hergeht, möchte ich nochmal kurz darauf eingehen, was Du zuletzt dort geschrieben hast:

Zitat:

Du brauchst auch keinen "extra dafür eingesetzten Container". Gib Body Farbe und Bild.

Leider geht das in diesem Fall nicht, da ich zwar für das Beispiel eine Hintergrundfarbe benutzt habe, wirklich aber auch dort eine Grafik nutzen möchte. Und die kann ich ja leider schlecht beide dem BODY-Element zuweisen.

Ich habe gerade mal das hochgeladenen Beispiel dementsprechend geändert: Test

doolak · #6 (**permalink**) 28.09.2008, 18:41

Nochmal aus dem anderen Thread:

Zitat:

Zitat von fricca

Du suchst die min-width-Eigenschaft.

Die habe ich in der weiterführenden Variante des einfachen Beispiels auch eingesetzt, allerdings um den Inhaltsteil skalierbar und dadurch barrierearm zu gestalten. Ich dachte sogar, es würde irgendwie an genau der Geschichte liegen, weshalb ich das Problem nochmal in einem einfachen Beispiel mit festen Breiten testete.

Wie meinst Du denn könnte das funktionieren? Wie könnte ich denn die min-width-Eigenschaft einsetzen, um das oben genannte Problem zu lösen?

fricca · #7 (**permalink**) 28.09.2008, 18:43

Wenn du nicht das zeigst, was du eigentlich willst, kann dir doch niemand helfen.

Dein Problem ist, dass ein Element nur so breit wie der Viewport ist und nicht die Breite deines Inhalts behält. Also gib diesem fraglichen Element eine passende Mindestbreite. In deinen aktualisierten Codebeispiel aus dem anderen Thread (edit: Nein, jetzt ist ja dieser hier. Egal. Blickt eh keiner mehr durch.) heißt dieses Element #background.

doolak · #8 (**permalink**) 28.09.2008, 18:48

Ich habe das Beispiel halt so einfach wie möglich gehalten, um es auf das zu reduzieren, worum es geht.

Ich werde aber gleich mal Deinen Tipp ausprobieren - bin mir nur noch nicht sicher, auf welchen Wert ich die Mindestbreite setzen soll...

fricca · #9 (**permalink**) 28.09.2008, 18:50

Zitat:

Zitat von doolak

bin mir nur noch nicht sicher, auf welchen Wert ich die Mindestbreite setzen soll...

Ach komm jetzt.
904px.

doolak · #10 (**permalink**) 28.09.2008, 18:58

Ich hatte mich gerade - nach reiflichem Überlegen

- für 905px entschieden...

Funktioniert übrigens einwandfrei - danke Dir! Habe mich da echt ziemlich verfranst (ein paar Stunden mehr Schlaf die letzte Nacht wären wohl nicht schlecht gewesen...)

Der Effekt tritt anscheinend auch nicht in allen Browsern auf. Mir ist es im Safari und im Firefox auf Mac aufgefallen, habe es im IE 6 (allerdings nur auf VMWare) getestet, dort funktioniert es auch so einwandfrei. Firefox auf Win/VMWare ebenfalls fehlerhaft.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Höhe und Breite des Dokumentes auslesen	Marlin	Javascript & Ajax	2	28.08.2007 17:14
Zeilenüberlappung bei margin-top mit negativem Wert	c.weber.os	CSS	15	15.10.2005 15:11
Problem mit der grösse des Links	jay	CSS	8	24.10.2004 02:38
problem mit IE Textarea + variable breite	stese	CSS	3	26.07.2004 11:52
Drei-Spalten-Layout: Problem mit fester breite.	Sombreo	CSS	2	01.07.2004 22:59