zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit sichtbarer Breite des BODY-Elements

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.09.2008, 17:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.01.2007
Beiträge: 25
doolak befindet sich auf einem aufstrebenden Ast
Standard Problem mit sichtbarer Breite des BODY-Elements

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.09.2008, 17:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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


Grundsätzlich: Probleme mit Hintergrundbildern sind ohne Link nicht nachvollziehbar.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.09.2008, 18:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.01.2007
Beiträge: 25
doolak befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 28.09.2008, 18:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Siehe anderer Thread.
Mit Zitat antworten
  #5 (permalink)  
Alt 28.09.2008, 18:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.01.2007
Beiträge: 25
doolak befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 28.09.2008, 18:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.01.2007
Beiträge: 25
doolak befindet sich auf einem aufstrebenden Ast
Standard

Nochmal aus dem anderen Thread:
Zitat:
Zitat von fricca Beitrag anzeigen
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?

Geändert von doolak (28.09.2008 um 18:43 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 28.09.2008, 18:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.

Geändert von fricca (28.09.2008 um 18:47 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 28.09.2008, 18:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.01.2007
Beiträge: 25
doolak befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #9 (permalink)  
Alt 28.09.2008, 18:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von doolak Beitrag anzeigen
bin mir nur noch nicht sicher, auf welchen Wert ich die Mindestbreite setzen soll...
Ach komm jetzt.
904px.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.09.2008, 18:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.01.2007
Beiträge: 25
doolak befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:46 Uhr.