Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag23.01.2013 um 13:53 (UTC)    
Titel: Design Clean - Auf Mobilgerät Seite abgeschnitten

Hallo liebe Community,

nachdem ich jetzt unsere Website www.feuerwehrbadstaffelstein.de ein neues Design mithilfe von Clean verpasst habe, sieht dass ganze zumindest schon mal auf dem PC in meinen Augen recht gut aus.

Auf Mobilgeräten (Iphone, Androidhandys) jedoch ist das ganze abgeschnitten und es kann auch nicht in den linken Bereich gescrollt/gezoomt werden.

Bild siehe hier: http://img.webme.com/pic/f/feuerwehrbadstaffelstein/foto.png

Ich möchte hier nicht zuviel verlangen, eine mobile Version brauche ich nicht. Ich würde mich jedoch freuen, wenn mir jemand sagen könnte, wie ich bzw. mit welchem Code ich bewirken kann, dass die Seite auf dem Mobilgerät komplett und nicht links abgeschneiden angezeigt wird.

Danke schon mal .

Grüße Holger[/code] Smile
Beitrag23.01.2013 um 14:08 (UTC)    
Titel:

Auf den ersten Blick sieht es so aus, dass hier verschiedene width: Formatierungen sich miteinander nicht vertragen.
#stage {
max-width: 1000px;
}
hat eine max. von 1000px,
der #access ist bei dir min-width: 1090px; ist somit schon mal 90px mindestens breiter, als sie #stage, in der #access liegt.
#container {
width: 1000px;
}
hat bei dir 1000px und der #content, der darin liegt
#content {
min-width: 1200px;
}
da kommt die Darstellung dann schon mal etwas durcheinander ... Smile
______________
mfg SEO
---
Ist ein Thema von dir erledigt, dann schreib das [erledigt] doch BITTE auch in den Titel des ersten Postings rein!
Verwendet sinnvolle und beschreibende Titel. Wer kann mir helfen ... oder Hilfe... sind nur bedingt hilfreich!
Doppelpostings quer durchs Forum finden übrigens nicht nur Moderatoren doof!
Themenfremde Posting in den verschiedenen Kategorien sind ebenso doof und schaffen nur unnötige Arbeit!
Beitrag24.01.2013 um 07:56 (UTC)    
Titel:

Danke SEO.
Daran hat es gelegen. Musste etwas mit den Werten spielen bzw. einen Kompromiss finden und sie dementsprechend abändern. Jetzt kann ich die HP sowohl auf PC als auch Handy gut betrachten.

MFG Very Happy
Beitrag28.01.2013 um 12:10 (UTC)    
Titel:

ich habe ein ähnliches Problem, und zwar wird mein Inhalt sowohl beim Firefox als auch beim IE einwandfrei dargestellt, ich nutze auch nicht mehr Breite als die 1000px die zur Verfügung stehen. 
Auf sehr vielen Mobiltelefonen mit verschiedenen Browsern jedoch wird der Header rechts schmaler als der Content dargestellt.
(Der FB-Like-Button verdeckt schon einen Teil unseres Schriftzuges im Headerbild), der Versatz zum Inhalt sieht echt unschön aus. 
Ich habe mal 2 Bilder als Vergleich: 
Mobil:
http://img.webme.com/pic/a/audi-tt-r/screenshot.jpg
PC:
http://img.webme.com/pic/a/audi-tt-r/screensho_home.jpg 

Hat jemand eine Lösung?


Zuletzt bearbeitet von audi-tt-r am 28.01.2013, 18:08, insgesamt einmal bearbeitet
Beitrag28.01.2013 um 16:20 (UTC)    
Titel:

audi-tt-r hat Folgendes geschrieben:
ich habe ein ähnliches Problem, und zwar wird mein Inhalt sowohl beim Firefox als auch beim IE einwandfrei dargestellt, ich nutze auch nicht mehr Breite als die 1000px die zur Verfügung stehen. 
Auf sehr vielen Mobiltelefonen mit verschiedenen Browsern jedoch wird der Header rechts schmaler als der Content dargestellt.Der FB-Like-Button verdeckt schon einen Teil unseres Schriftzuges im Headerbild, der Versatz zum Inhalt sieht echt unschön aus. 
Ich habe mal 2 Bilder als Vergleich: 
Mobil:
http://img.webme.com/pic/a/audi-tt-r/screenshot.jpg
PC:
http://img.webme.com/pic/a/audi-tt-r/screensho_home.jpg 

Hat jemand eine Lösung?


Du definierst dein Bild ja per CSS...
Hast du dir schon mal deine Seite am Rechner angesehen, wenn du das Fenster kleiner machst? Wink
Deine Bildbreite ist definiert auf 100%, allerdings gelten diese 100% nur auf den DIV.
d.h. Wenn dein Fenster kleiner ist als x Pixel, wird auch dein Bild nicht mehr in 1000px Breite angezeigt, dadurch setzt sich auch dein FB Link über deine Schrift.
2 Möglichkeiten die mir spontan einfallen.
1. FB Link weiter nach oben setzten ^^
2. Div breite auf 1000px statt 100% einstellen
Beitrag28.01.2013 um 16:43 (UTC)    
Titel:

ich kann nicht ganz folgen, da ich ein zeimlicher Laie bin Rolling Eyes

Die Browser auf den Smartphones (egal ob Android oder iOS) zentrieren meinen vollständigen Content ohne den Hintergrund links und rechts und stellen diesen auch vollständig dar.
Nur der Header darüber erscheint schmaler, der Rahmen wandert inkl Facebookbutton nach links.
Rufe ich meine Seite mit dem Bildschirm im Querformat auf, ist es das selbe, mein Smartphone kann da eine 1280px Auflösung.

Mich stört also, daß das Headerbild kleiner dargestellt wird als der Content.

Am PC jedoch ist egal in welchem Zustand immer das Headerbild bündig mit dem Content.
Mache ich das Browserfenster kleiner, so wandert der Facebookbutton und der Rahmen des Headerbildes zwar auch nach links, jedoch geht gleichmässig auch ein Teil des Contents verloren und die Navigationsbuttons springen nach und nach in die zweite Zeile.

ist übrigens auch bei einer weiteren Seite wo noch nichts am Design verändert wurde und auch die Werbung nicht weg ist genau gleich:
http://img.webme.com/pic/a/audi-tt-r/screenshot_ori.jpg

www.audi-tt-r.de.tl


Zuletzt bearbeitet von audi-tt-r am 28.01.2013, 18:16, insgesamt 2-mal bearbeitet
Beitrag30.01.2013 um 08:58 (UTC)    
Titel:

Ich habe das gleiche Problem wie audi-tt-r. Sowohl auf dem Handy als auch mit verkleinertem Browser-Fenster wird mein Header rechts abgeschnitten. Wie kann ich diese Einstellung mit "1000px statt 100%" vornehmen?
Beitrag30.01.2013 um 09:16 (UTC)    
Titel:

Dieses Problem ist definitiv im Design Clean serienmäßig vorhanden. Mich wundert es, dass es nicht schon mehreren Usern aufgefallen ist, ich finde dass es ectrem stört, speziell bei der Horizontalen Navi und Werbefreiheit.
Beitrag01.02.2013 um 14:15 (UTC)    
Titel:

Zitat:

#masthead , #access {width: 1000px; }


den beiden DIVs könnte man damit eine Breite geben.
Das sollte die Unterschiede in der Mobilen Ansicht beseitigen Wink

#masthead wäre das Headerfeld, #access das Feld mit dem Menü .


Zuletzt bearbeitet von clean-test am 01.02.2013, 15:19, insgesamt 2-mal bearbeitet
Beitrag01.02.2013 um 15:21 (UTC)    
Titel:

Danke, hat perfekt funktioniert! Daumen hoch!
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de