• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Horizontales Hintergrundbild im Scrollbereich abgeschnitten.

A

alex/mitte

New member
Hallo,

wie schon im Titel beschrieben: eine sich horizontal wiederholende Hintergrundgrafik (Kopfbereich)
wird ausserhalb des Viewports abgeschnitten wenn man das Fenster zusammenschiebt
und in den Aussenbereich scrollt. Bei Reload tut sich auch nichts, erst wenn das Fenster horiz. wieder
weiter aufgezogen 'springt' auch die Grafik wieder weiter auf. Komisch, oder?
Hier kann man's ansehen (Fenster muss auf unter 1000px zusammengeschoben werden):
http://ud02_417.ud02.udmedia.de/test2/

Hier der Quelltext:

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" xml:lang="de">
<head>
<title>Dokumenttitel</title>
<style type="text/css">
/*<![CDATA[*/
html,body	{
	height: 100%;
}
body	{
	width: 100% !important;
	margin:0;
	padding:0;
	font-family: verdana,arial,helvetica,sans-serif;
	behavior:url("csshover3.htc");
	background: transparent url(images/bg_body.gif) center 0 no-repeat;
}
#outer_header	{
	height: 136px;
	width: 100%;
	background: transparent url(images/sea.png) 0px 40px repeat-x !important;	
}
#inner_header	{
	border: 1px solid #000;
	width: 1000px;
	height:136px;
	margin: 0 auto;
}

#footer	{
	position:fixed;
	bottom:0px;
	background:#efefef;
	text-align:center;
	padding: 0px;
	height: 50px !important;
	width:100%;
	box-shadow: 5px 4px 11px #888;
	-webkit-box-shadow: 5px 4px 11px #888;
	-moz-box-shadow: 5px 4px 11px #888;
	behavior: url(PIE.htc);
	background-color: #e3e4e5;
}
.footer_strich	{
	position: absolute;
	left: 50%;
	width: 1000px;
	height: 100%;
	background: transparent url(images/strich_fuss.png) top left no-repeat;
	margin-left: -500px;
	text-align: left;
}  
/*]]>*/
</style>
</head>
<body>
<div id="outer_header">
<div id="inner_header"><img src="images/kreidepanorama.jpg" alt="" /></div>
</div>


</body>
</html>
 
Gib' deinem <html> doch mal ein "min-width", das der Mindestbreite, die deine Seite braucht, entspricht - sollte in den Browsern, die min-width unterstützen (alle modernen), das Problem beheben.

Wie man das eleganter/allgemeiner löst, ist mir noch nicht eingefallen.
 
Hab ich probiert, ohne Ergebnis. Hatte die Seite auch schon mal auf's wesentliche reduziert, Kopf weg, Fuss weg, reset.css weg, mit nur einem 1000er div
um einen Scrollbereich zu erzeugen. Tztztz... Danke dir für's draufschauen.
 
Also wie ich's probiert hatte - hat das min-width geholfen... welchen Browser verwendest du denn zum Testen?
 
kkapsner schrieb:
Also wie ich's probiert hatte - hat das min-width geholfen... welchen Browser verwendest du denn zum Testen?
Zum Vergrößern anklicken....

kkapsner schrieb:
Also wie ich's probiert hatte - hat das min-width geholfen... welchen Browser verwendest du denn zum Testen?
Zum Vergrößern anklicken....

Nee, das klappt auch mit 'html {min-width: 100%;}' nicht. Mit 150% schon, aber dann hab ich natürlich einen permanenten horiz. Scrollbalken.
(Firefox, Safari, Opera, Chrome, alle aktuell)

Hier nochmal ein abgespeckter Quelltext mit dem ich gerade teste:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<link rel="Stylesheet" media="all" type="text/css" href="css/reset.css"/>
<style type="text/css">
<!--
html,body {
height: 100%;
}

html {
min-width: 100%;
background: transparent url(images/bg_body.gif) center 0 no-repeat;
}

body {
min-width: 100%;
margin:0;
padding:0;
font-family: verdana,arial,helvetica,sans-serif;
behavior:url("csshover3.htc");
background: url(images/sea.jpg) repeat-x 0 40px;
}

-->
</style>
</head>
<body>




<p style="width: 1000px; border: 1px dashed #666;">HiLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis</p>


</body>
</html>
 
@kkapsner

Du hattest recht, min-width für body ist die Lösung. Allerdings nicht wie ich's probiert hatte mit body {min-width: 100%;}.
Auf die Lösung hingewiesen hat mich "plastico" im xhtmlforum.de. Ich zitiere:
"Du kannst body eine mindestbreite geben, die der grössten Breite deines Inhalts entspricht.
Auf deiner Seite ist das #content mit einer Breite von 1000px. So währe min-width: 1000px; für body passend."

Nachverfolgen kann Mensch das falls gewünschtunter:
Horizontales Hintergrundbild im Scrollbereich abgeschnitten. - XHTMLforum .
 
Zuletzt bearbeitet:
Hättest du einen vernünftigen Wrapper statt des bodys für die Angaben verwendet wäre das Problem gar nicht erst aufgetreten!

Lg Kasalop
 
Das mit der festen Pixelangabe hatte ich auch verwendet und gemeint - tut mir leid, wenn das so nicht bei dir angekommen ist...
 
Min-width für den Body KANN NICHT die Lösung sein. Du hast schonmal 2 Probleme in der CSS

1.
Code: 
#outer_header        {
        height: 136px;
        [b]width: 100%;[/b]
        background: transparent url(images/sea.png) 0px 40px repeat-x !important;
}

und 2.
Code: 
#inner_header        {
        border: 1px solid #000;
        [b]width: 1000px;[/b]
        height:136px;
        margin: 0 auto;
}

outer_header hat die Weitenangabe 100% und der inner_header, welcher IM outer liegt, hat eine absolute Weitenangabe in px.... Jetzt vom logischen her, macht das Sinn???? ^^

Leider ist die verlinkte Seite nicht mehr aufrufbar um das "richtig" zu lösen...
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben