zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Darstellungsfehler auf Tablet… Rand um Bild

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.01.2015, 23:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.01.2015
Beiträge: 7
Hans befindet sich auf einem aufstrebenden Ast
Standard Darstellungsfehler auf Tablet… Rand um Bild

Hatte gerade auf einen acer Tablet (Android - Chrome/Firefox) eine Site getestet und festgestellt das da um ein Bild (WelleUnten) ein transparenter Streifen oben und ein farbiger Streifen unten ist (siehe Bild).



Auf meinen MacBook in Safari/Chrome/Firefox ist der Fehler nicht zu sehen.

Hat jemand eine Idee wie man das lösen kann oder wo der Fehler ist?

Danke!



HTML-Code:
<!DOCTYPE html>
<html>
    <body>
        <link rel="stylesheet" href="design.css">

        <div id="Box">
        </div>
        <div id="zwischenbild1">
            <div id="WelleUnten">
            </div>
        </div>
    </body>
</html>

PHP-Code:
body {
    
margin0px;
}

#Box {
    
floatnone;
    
height360px;
    
margin-leftauto;
    
margin-rightauto;
    
margin-top0px;
    
width100%;
    
displayblock;
    
background-image:url("http://emkw.de/test/Palmen.png"),url("http://emkw.de/test/seamless_paper_texture.png");
    
background-attachmentscroll;
    -
webkit-background-sizeauto;
    
background-sizeauto;
    
background-colorrgb(228225217);
    
background-position500%, 00%;
    
background-repeatno-repeatrepeat;
}

#zwischenbild1 {
    
floatleft;
    
height150px;
    
margin0px;
    
width100%;
    
displayblock;
    
background-colorrgb(202536);
    
background-image:url("http://blog.igopost.de/files/2012/04/strand.jpg");
    
background-attachmentfixed;
    -
webkit-background-sizecover;
    
background-sizecover;
    
background-position050%;
    
background-repeatrepeat repeat;
    
display:block;
}

#WelleUnten {
    
floatleft;
    
height10px;
    
margin0px;
    
width100%;
    
background-image:url("http://emkw.de/test/WelleOben.png");
    
background-attachmentscroll;
    -
webkit-background-sizeauto;
    
background-sizecontain;
    
background-position00%;
    
background-repeatrepeat no-repeat;

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.01.2015, 23:55
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2009
Beiträge: 433
Austen sorgt für eine eindrucksvolle AtmosphäreAusten sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo,
hier hat niemand deine Bilder. Bau die Seite so zusammen, dass man das Problem erkennt.
Für Fragende und Antwortende
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.01.2015, 00:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.01.2015
Beiträge: 7
Hans befindet sich auf einem aufstrebenden Ast
Standard Link

hier der Link zum Problembeispiel
Mit Zitat antworten
  #4 (permalink)  
Alt 16.01.2015, 00:14
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von Austen Beitrag anzeigen
Hallo,
hier hat niemand deine Bilder. Bau die Seite so zusammen, dass man das Problem erkennt.
Die Bilder werden geliefert, bloß der Testcase ist nicht ganz fertig zum kopieren.
Oder meinst Du, Du hättest auch gern den Acer Tablet geliefert bekommen?
Dann bin ich auch dabei, wenn es dem OP nicht zu teuer wird.

Edit: oops, zu spät.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #5 (permalink)  
Alt 16.01.2015, 03:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.01.2015
Beiträge: 7
Hans befindet sich auf einem aufstrebenden Ast
Standard



die Welle (ist eine kleine Halbkugel 30px breit im png Format) soll sich auf der X Achse wiederholen aber auf der Y Achse nicht also background-repeat: repeat no-repeat;

Der Obere Streifen ist bei margin: -1px; weg

Der untere Streifen ist weg wenn ich bei background-repeat: no-repeat; schreibe aber dann wiederholt sich natürlich die Welle nicht ???

hat jemand eine Idee?
Mit Zitat antworten
  #6 (permalink)  
Alt 16.01.2015, 09:53
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von Hans Beitrag anzeigen
... hat jemand eine Idee?
Das Halbkugel-Bild genauer untersuchen – Format, dpi, Transparenz, etc. Auf die Schnelle sehe ich oben einen transparenten Streifen (1px hoch).

Für die Welle bräuchtest Du eigentlich kein extra Bild – die könntest Du im Bild unten „einbauen“.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (16.01.2015 um 09:58 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 16.01.2015, 13:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.01.2015
Beiträge: 7
Hans befindet sich auf einem aufstrebenden Ast
Standard

Das Hintergrundbild (zwischenbild1) ist fixed und die Box und die Welle zum scrollen also ich kann die Welle nicht in das Hintergrundbild einbauen da sich die Welle mit der Box beim scrollen bewegen soll.

Das Bild ist auch OK!
Format: png24
Auflösung: 72dpi
Transparenz stimmt auch

hier das Beispiel
Mit Zitat antworten
  #8 (permalink)  
Alt 16.01.2015, 15:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.01.2015
Beiträge: 7
Hans befindet sich auf einem aufstrebenden Ast
Standard

Es hat auf jeden Fall etwas mit background-repeat: repeat; zu tun

das Bild mit der Halbkugel (die Welle) das sich repeat'n soll ist 30px breit.
Ich habe das Bild mal in Photoshop auf 1440px (meine max-width) breit gemacht und bei background-repeat: no-repeat; dann gibt es den Fehler nicht
Mit Zitat antworten
  #9 (permalink)  
Alt 16.01.2015, 17:10
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Wenn man richtig mit der Wiederholung umgeht, kann es auch funktionieren.
background: transparent url('http://emkw.de/test/WelleOben.png') repeat-x 0 0;
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.01.2015, 17:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.01.2015
Beiträge: 7
Hans befindet sich auf einem aufstrebenden Ast
Standard

Hallo Thilo, das hat das Problem leider nicht gelöst.

ich hab jetzt die Welle in Illustrator auf 1440 px breite erstellt und als svg gespeichert und bei background-repeat: no-repeat; und bei background-size: cover; und bei margin-top: -1px; nur so konnte ich es jetzt lösen.

Aber es sollte doch auch eine einfachere und bessere Lösung geben
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
Zwei Bilder nebeneinander, sollen kleiner werden! cecyle CSS 1 12.01.2014 19:20
3 divs nebeneinander anordnen Schokokrapfen CSS 5 28.09.2011 19:15
Onmouseover-Effekt - Wenn Maus auf Bild1 soll Bild 2 zu Bild 3 wechseln. Andreas91 Grafik, Design, Typografie 1 06.09.2011 23:41
Bild durch Bild ersetzten! (a:hover) Prof. Awesome CSS 11 16.03.2011 15:33
Bild über Bild rafa CSS 2 24.01.2010 19:46


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:10 Uhr.