Ergebnis 1 bis 10 von 10
  1. #1
    alex/mitte ist offline Grünschnabel
    registriert
    28-03-2013
    Beiträge
    5

    Question Horizontales Hintergrundbild im Scrollbereich abgeschnitten.

    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>

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Horizontales Hintergrundbild im Scrollbereich abgeschnitten.

    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.

  3. #3
    alex/mitte ist offline Grünschnabel
    registriert
    28-03-2013
    Beiträge
    5

    AW: Horizontales Hintergrundbild im Scrollbereich abgeschnitten.

    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.

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Horizontales Hintergrundbild im Scrollbereich abgeschnitten.

    Also wie ich's probiert hatte - hat das min-width geholfen... welchen Browser verwendest du denn zum Testen?

  5. #5
    alex/mitte ist offline Grünschnabel
    registriert
    28-03-2013
    Beiträge
    5

    AW: Horizontales Hintergrundbild im Scrollbereich abgeschnitten.

    Firefox (aktuell) Mac. Moment, ich probiers nochmal...

  6. #6
    alex/mitte ist offline Grünschnabel
    registriert
    28-03-2013
    Beiträge
    5

    AW: Horizontales Hintergrundbild im Scrollbereich abgeschnitten.

    Zitat Zitat von kkapsner Beitrag anzeigen
    Also wie ich's probiert hatte - hat das min-width geholfen... welchen Browser verwendest du denn zum Testen?
    Zitat Zitat von kkapsner Beitrag anzeigen
    Also wie ich's probiert hatte - hat das min-width geholfen... welchen Browser verwendest du denn zum Testen?
    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>

  7. #7
    alex/mitte ist offline Grünschnabel
    registriert
    28-03-2013
    Beiträge
    5

    AW: Horizontales Hintergrundbild im Scrollbereich abgeschnitten.

    @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 .
    Geändert von alex/mitte (30-03-2013 um 21:29 Uhr)

  8. #8
    Kasalop ist offline Routinier
    registriert
    29-08-2012
    Beiträge
    398

    AW: Horizontales Hintergrundbild im Scrollbereich abgeschnitten.

    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

  9. #9
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Horizontales Hintergrundbild im Scrollbereich abgeschnitten.

    Das mit der festen Pixelangabe hatte ich auch verwendet und gemeint - tut mir leid, wenn das so nicht bei dir angekommen ist...

  10. #10
    dertypdernixkan ist offline Tripel-As
    registriert
    31-05-2013
    Beiträge
    194

    AW: Horizontales Hintergrundbild im Scrollbereich abgeschnitten.

    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;
            width: 100%;
            background: transparent url(images/sea.png) 0px 40px repeat-x !important;
    }
    und 2.
    Code:
    #inner_header        {
            border: 1px solid #000;
            width: 1000px;
            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...
    Geändert von mikdoe (05-06-2013 um 09:31 Uhr) Grund: Code tags gesetzt

Ähnliche Themen

  1. Das untere Menü wird abgeschnitten!
    Von JanBanan im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 30-01-2013, 16:20
  2. Eigene Greybox ignoriert scrollbereich :(
    Von malde1990 im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 27-03-2011, 16:42
  3. Problem bei Auslesen von MS SQL mit PHP - Inhalt abgeschnitten
    Von Gambrius im Forum Serverseitige Programmierung
    Antworten: 4
    Letzter Beitrag: 26-08-2008, 20:58
  4. In scrollbereich mit javascript steuern.
    Von oconner im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 15-06-2007, 20:00
  5. Menuepopup verschoben bzw. abgeschnitten
    Von tiny_imp im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 06-12-2004, 18:06

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •