Website wird auf dem iPhone abgeschnitten

[pama]

Hallo liebe Community,

ich programmiere derzeit eine Website die soweit auch ganz gut funktioniert. Eigentlich fehlt nur noch der Feinschliff. Leider ist die Website z.B. auf dem iPhone und dem iPad überhaupt nicht zumutbar. Mir ist bewusst das eine mobile Seite sowieso besser wäre allerdings werde ich diese erst später programmieren und möchte bis dahin die Desktop Version auch einigermaßen für mobile Endgeräte kompatibel machen. Das Problem ist: Auf dem iPhone oder iPad wird die Seite nicht zentriert. Stattdessen scheint alles ein wenig nach links zu rücken. Links wird was abgeschnitten. Nach links wischen funktioniert auch nicht. Lediglich auf der rechten Seite ist alles da. Ich habe die Seite mal hochgeladen, sodass ihr euch selbst ein Bild davon machen könnt: sichtbar - printmedien und mehr

Ich habe auch viel im Netz nach Lösungen gesucht und ausprobiert. Ich habe auch versucht alle Container in einen seperaten Container zu packen und diesen mit margin: 0px auto; auszurichten. Leider tut sich da nichts.

Die css Datei hab ich mal als Anhang hochgeladen. Ich hoffe ihr könnt mir helfen :-/


lg

 

[Tronjer]

Ein paar Ratschläge:

1. Solange du nicht die Besonderheiten von position: absolute kennst, verwende es niemals. Wenn du das Attribut scheinbar benötigst, hast du etwas falsch gemacht.
2. Baue eine zweite Version der Seite unter Einsatz von Bootstrap. Dann klappt es auch mit mobile Devices.
3. Lies dich in das Thema Media Queries ein.

Nebenbei bemerkt sieht deine Seite vom Design her gut aus.

 

[pama]

Hallo und erstmal Danke für die schnelle Antwort. Ich habe mir schon fast gedacht das es an der absoluten Positionierung liegen kann. Ich bin leider kein Programmierer und versuche mir das alles selbst ein wenig beizubringen :-/ Den Tipp mit "Bootstrap" werde ich mir zu Herzen nehmen sieht sehr interessant aus. Eine Mobile Version ist wie gesagt auf jeden Fall auch noch geplant :-) "Media Queries" habe ich auf meiner Google Suche auch oft gelesen... Ich werde mir das noch mal genauer anschauen und mich auch in die absolute Positionierung einlesen.

PS: Freut mich wenn sie dir optisch gefällt. Danke! :-)

 

[pama]

Sooo ich habe es nun so weit hinbekommen das die gesamte Seite auf dem iPhone dargestellt wird. Mit dem einsetzen vom Viewport Media Querie im Meta Tag hat es geklappt :-) Ich habe dort die width auf 1920px gesetzt (die Breite meiner gesamten Seite). Für die die es später mal googlen ;-) Danke Tronjer für den Tipp!

Jetzt habe ich aber auch leider noch zwei Probleme die mich ein wenig stören:
1. Öffnet man die Seite nun auf dem iPhone ist diese nicht zentriert. Das iPhone fängt links an. Nicht weiter schlimm. Wäre aber schöner wenn es die Seite zentrieren würde.
2. Am PC läuft die Seite einwandfrei. Es stört mich nur ein wenig das mann, wenn man das Fenster kleiner macht als die Website groß ist, nach rechts scrollen kann. Gibt es eine Möglichkeit in dem Fall das Horizontale scrollen NUR am PC zu unterbinden?

lg

 

[eistruhe]

1. Öffnet man die Seite nun auf dem iPhone ist diese nicht zentriert. Das iPhone fängt links an. Nicht weiter schlimm. Wäre aber schöner wenn es die Seite zentrieren würde.
2. Am PC läuft die Seite einwandfrei. Es stört mich nur ein wenig das mann, wenn man das Fenster kleiner macht als die Website groß ist, nach rechts scrollen kann. Gibt es eine Möglichkeit in dem Fall das Horizontale scrollen NUR am PC zu unterbinden?

Zu 1. Bei mir ist sie zentriert, hast du noch was geändert?
Zu 2. Man kann das Horizontale Scrollen natürlich unterbinden, allerdings ist das nicht zu empfehlen. Da jemand mit einem kleinen Bildschirm sonst nicht mehr deine Seite komplett sehen könnte.

Dein Problem ist, dass du den Hintergrund als img eingebunden hast, was dann natürlich die komplette Breite ausnutzt und zum Scrollen zwingt.

Binge das Hintergrundbild einfach per CSS als background-image in den body ein. So wird das Bild bei kleinen Bildschirmen rechts und links abgeschnitten. Sobald der Bildschirm bzw. das Browserfenster dann größer ist, sieht man auch mehr vom Bild!


Gruß

 

[Cheffchen]

Hallo,

also Optisch super schick Technisch eher so lala.
alleine wenn ich sehe das du width: 1920px; als mindest viewport ansiehst, kommts vorbei und schenkst mir ein größeren Bildschirm mit einer besseren Grafigkarte, adresse schicke ich gerne.
Dazu kommt das iDingens ja 1024px hat und merkst wat?
Das erste css was ich sehe ist #header und da margin-left: -960px; da ist gleich klar das der nichts mehr werden kann und eine positions orgie kommt wo keiner mehr durch blickt.

Zu2 ich habe auch horiscroll und ich denke mal ein zwei andere auch. das leigt einfach an fehlplanung von 1920px.

Cheffchen

 

[pama]

Also Hintergrundbild auch als Background image einfügen und sowohl Header als auch footer "drei teilen"? Also so das die linken und rechten Teile von footer und header zum Background image gehören? Schwer zu erklären vielleicht versteht ihr ja was ich meine :-)

lg

 

[eistruhe]

Also Hintergrundbild auch als Background image einfügen und sowohl Header als auch footer "drei teilen"? Also so das die linken und rechten Teile von footer und header zum Background image gehören? Schwer zu erklären vielleicht versteht ihr ja was ich meine :-)

lg

Hi, wenn ich es richtig verstehe, nein!

Du machst das Hintergrundbild der Seite als Background in den Body. Dann machst du z. B. eine div mit der klasse head, und darin eine mit der klasse content (nur als Beispiel). Der klasse head gibst du dann die Hintergrundgrafik deines Heads (keine Breite angeben, damit es über die komplette Browserbreite läuft). Die Klasse contente welche darin liegt, hat dann z. B. width 980px, margin: 0 auto, damit der Inhalt der Seite weiterhin eine feste Breite hat und zentriert ist.

Selbes Spiel mit dem Footer.

 

[pama]

So?




(HTML)
<div class="header"><img src="img/header.png" alt="header">
<span class="content">Text</span>
</div>

(CSS)
.header {
background-image: url(img/header.png);
background-repeat: no-repeat;
}

.content {
width: 1024px;
margin: 0px auto;
}



lg

 

[eistruhe]

Nein auf folgende Grundlage könntest du die Seite einfach aufbauen.
So ist die Head- und Footergrafik immer auf die volle Breite angepasst, der Inhalt aber auf der Seite zentriert ist.
Dein Hintergrundbild der Seite kommt in den body.


<style type="text/css" media="screen">
body {

background: transparent url('background.jpg') no-repeat 0 0;​

}

.head {

background: transparent url('head.jpg') repeat-x 0 0; /* repeat-x damit sich die Grafik immer auf die volle Breite wiederholt (Grafik muss natürlich dafür gemacht sein) */​

}

.content {

width: 980px;
margin: 0 auto;​

}

.footer {

background: transparent url('footer.jpg') repeat-x 0 0; /* ausser du nimmst einen Farbwert, dann natürlich einfach background: color; */​

}
</style>


<div class="head">

<div class="content">
​

<!-- Logo, Navigation etc. pp. -->​

</div>​

</div>


<div class="content">

<!-- Seiteninhalt hier rein -->​

</div>


<div class="footer">

<div class="content">
​

<!-- Footer -->​

</div>​

</div>