zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Grafik, Design, Typografie
Seite neu laden Layout wird auf iPad / iPhone falsch dargestellt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.02.2013, 17:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2010
Beiträge: 70
Bubble befindet sich auf einem aufstrebenden Ast
Frage Layout wird auf iPad / iPhone falsch dargestellt

Hallo zusammen,

ich habe ein Problem mit der Darstellung meines Shops auf dem iPhone / iPad.

Im Safari auf dem PC wird wie im Firefox und Explorer alles richtig angezeigt.


Der Background besteht aus einem Bild. Das Bild ist so angepasst, dass der "grüne und graue Balken" sich überlagern. Also mit dem "grünen und grauen Balken" der Shopnavigation.

Auf dem iPad / iPhone allerdings wird wohl das Hintergrundbild irgendwie so verkleinert, dass die Proportionen nicht mehr stimmen und der "Header" oben in der Luft hängt.

Zusätzlich wird für den Container keine weisse Farbe angezeigt. Also der Container ist transparent.

Um diese Seite geht es:

Ranzenladen - Schul-Ranzen Online-Shop in Kassel mit Marken Scout - McNeill und DerDieDas


Kennt sich jemand von euch mit der Anpassung für mobile Endgeräte aus und kann mir sogar weiterhelfen?

lg Bubble
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.02.2013, 18:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
mit der Anpassung für mobile Endgeräte aus und kann mir sogar weiterhelfen?
Da unterschätzt du wahrscheinlich den Aufwand. An der Seite ist so ziemlich gar nichts, was für ein Responsive Design verwendet werden kann. Die müsste mit HTML5/CSS3 komplett neu erstellt werden, wobei von Beginn an auf einen semantischen Quelltext geachtet werden muss.

Das ist mehr oder weniger ein hingebastelter Anfängerquelltext.

Im Moment versuchen die Smartphones und Tablet-PCs die Seite automatisch an die geringere Bildschirmgröße anzupassen, was je nach Browser mehr oder weniger gut gelingt. Da an der Seite nichts "responsive" ist, ist das aber reine Glückssache. Und die Besucher sind ständig am rein- und rauszommen sowie am hin- und herscrollen.

Gruss

MrMurphy

Geändert von MrMurphy (04.02.2013 um 18:27 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.02.2013, 18:31
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2010
Beiträge: 70
Bubble befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Hallo



Da unterschätzt du wahrscheinlich den Aufwand. An der Seite ist so ziemlich gar nichts, was für ein Responsive Design verwendet werden kann. Die müsste mit HTML5/CSS3 komplett neu erstellt werden, wobei von Beginn an auf einen semantischen Quelltext geachtet werden muss.

Das ist mehr oder weniger ein hingebastelter Anfängerquelltext.

Im Moment versuchen die Smartphones und Tablet-PCs die Seite automatisch an die geringere Bildschirmgröße anzupassen, was je nach Browser mehr oder weniger gut gelingt. Da an der Seite nichts "responsive" ist, ist das aber reine Glückssache. Und die Besucher sind ständig am rein- und rauszommen sowie am hin- und herscrollen.

Gruss

MrMurphy

Das ist kein "Anfängerquelltext" Das ist eine von uns genutzte Shopsoftware.

Es funktioniert ja alles. Nur mit dem Hintergrundbild und die Darstellung der Hintergrundfarbe vom Container haben die mobilen Endgeräte Probleme.

Mein XHTML sowie CSS ist sonst immer W3C konform.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.02.2013, 18:32
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2010
Beiträge: 70
Bubble befindet sich auf einem aufstrebenden Ast
Standard

Ich würde keine Site momentan komplett in HTML5 / CSS3 erstellen, da das noch nicht von allen Browsern 100 pro unterstützt wird.

Edit: Vielleicht kann ich eine CSS für Smartphones separat anlegen!? Also z. B. für das Background IMG.

Geändert von Bubble (04.02.2013 um 18:37 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 04.02.2013, 19:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
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

Bei dem Body-Hintergrund dürfte es helfen, die tatsächliche Bildgröße als background-size anzugeben.

Das weiße Bild für den Container ist vermutlich einfach zu groß, da gibt es Beschränkungen.
Ein solch gigantisches Bild für einen hauptsächlich weißen Hintergrund ist ... unökonomisch. Nach einem schnellen Blick würde ich sagen, wenn man #left und #main mit einem Element zusammenfassen würde, dann könnte man diesem neuen Element einfach eine weiße Hintergrundfarbe geben.

Mit "Anpassung für mobile Geräate" hat das aber alles noch wenig zu tun. Stichwort für weitere Information ist "responsive web design".
Mit Zitat antworten
  #6 (permalink)  
Alt 04.02.2013, 19:38
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2010
Beiträge: 70
Bubble befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Bei dem Body-Hintergrund dürfte es helfen, die tatsächliche Bildgröße als background-size anzugeben.

Das weiße Bild für den Container ist vermutlich einfach zu groß, da gibt es Beschränkungen.
Ein solch gigantisches Bild für einen hauptsächlich weißen Hintergrund ist ... unökonomisch. Nach einem schnellen Blick würde ich sagen, wenn man #left und #main mit einem Element zusammenfassen würde, dann könnte man diesem neuen Element einfach eine weiße Hintergrundfarbe geben.

Mit "Anpassung für mobile Geräate" hat das aber alles noch wenig zu tun. Stichwort für weitere Information ist "responsive web design".
Das mit der Größe hatte ich auch schon versucht. Aber wenn ich ne fixe Größe habe, muss ich ja je nachdem wie groß das Hintergrundbild ist horizontal scrollen um zum Content zu kommen. Weisst was ich mein?

Beim Container ist das kein weisses Bild sondern einfach die Farbe weiss: background-color: #ffffff;


Responsive web design ist ja erst richtig 2012 zum Thema geworden. Ich kann natürlich nicht erwarten das eine Shopsoftware dies schon zu 100 % umgesetzt hat.
Mit Zitat antworten
  #7 (permalink)  
Alt 04.02.2013, 19:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
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 Bubble Beitrag anzeigen
Das mit der Größe hatte ich auch schon versucht. Aber wenn ich ne fixe Größe habe, muss ich ja je nachdem wie groß das Hintergrundbild ist horizontal scrollen um zum Content zu kommen. Weisst was ich mein?
Ich weiß, was du meinst -- aber ich hab auch nichts davon geschrieben, dass du eine Breite für body angeben sollst. Ich schrieb von background-size!

Zitat:
Beim Container ist das kein weisses Bild sondern einfach die Farbe weiss: background-color: #ffffff;
Sicher?
Zitat:
Code:
#container {
    background: url("/ranzenladen/img/container-bg.png") no-repeat scroll left top transparent;
Das Ding ist 1000 x 8000px groß!
Mit Zitat antworten
  #8 (permalink)  
Alt 04.02.2013, 19:51
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2010
Beiträge: 70
Bubble befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Ich weiß, was du meinst -- aber ich hab auch nichts davon geschrieben, dass du eine Breite für body angeben sollst. Ich schrieb von background-size!

Sicher?
Das Ding ist 1000 x 8000px groß!
Argh,... shit du hast recht. Ist ein img.

Was background-size betrifft, habe ich es so versucht: background-size:2000px 3554px;

Ist aber das gleiche Problem.
Mit Zitat antworten
  #9 (permalink)  
Alt 04.02.2013, 19:58
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2010
Beiträge: 70
Bubble befindet sich auf einem aufstrebenden Ast
Standard

Stimmt nicht. Das mit dem background-size hat funktioniert!

Bombe! Super vielen Dank. Das hat schonmal ein Problem eliminiert!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.02.2013, 20:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
habe ich es so versucht: background-size:2000px 3554px;
Du hast aber noch im Hinterkopf, das dein ursprünglicher Wunsch ein auf Smartphones (speziell iPhone / iPad) ausgerichtet war? Also für kleine Bildschirme?

Dann sind fixe Größenangaben, speziell auch noch in den Größen, mehr als kontraproduktiv.

Zitat:
Ich würde keine Site momentan komplett in HTML5 / CSS3 erstellen, da das noch nicht von allen Browsern 100 pro unterstützt wird.
Ältere Browser zeigen dann die Seite nur so an, wie sie ihn auch mit älteren HTML / CSS Versionen anzeigen würden. Und deshalb sollen aktuelle Browser auch ein veraltetes Layout anzeigen?

Zitat:
Das ist kein "Anfängerquelltext" Das ist eine von uns genutzte Shopsoftware.
Doch, nur weil es sich um eine Shopsoftware handelt sagt das noch lange nichts über die Qualität aus. Der Quelltext ist so seit dem Jahr 2000 (Einführung von CSS2) veraltet. Wenn das Shopsystem älter sein sollte..

Wie du aktuell merkst ist durch den "veralteten" Quelltext auch eine nachträgliche Anpassung mit unabsehbaren Folgen verbunden. So stehen z. B. viele Styleangaben direkt im Quelltext. Oder Abstände werden mit br-Elementen erzeugt.

Solche Kunden wie dich wünscht sich jeder Verkäufer. Da wird sogar noch fehlerhafte Ware mit Leib und Seele verteidigt.

Gruss

MrMurphy
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
Navigation wird im IE 6 und 5.5 falsch dargestellt Safran CSS 3 14.08.2008 13:26
Internet Explorer stellt Layout falsch dar phpfuchs CSS 2 14.09.2006 10:16
IE interpretiert Layout falsch Vincent Vega CSS 1 05.08.2006 17:57
4-Block Layout: IE lässt falsch floaten akb CSS 2 29.07.2006 22:49
Height 100% wird falsch dargestellt phraid CSS 12 25.10.2004 14:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:51 Uhr.