nicht angemeldet
Darstellung und CSS-Dateien
Hallo zusammen,
ich bastele gerade an einer ersten Website für unseren Verein. Ich hatte bis vor kurzen keine Ahnung wie ein HTML Quellcode überhaupt funktioniert.
Mittlerweile habe ich es mit Hilfe von Büchern und Tips von Freunden geschaft die Website soweit fertig zu bekommen das sie mir und den meisten Vereinsfreunden gefählt.
Die Seite steht leider noch nicht online, da wir noch keinen eigenen Webspace haben.
Ich durfte jedoch vor einiger Zeit die Website auf den Server eines Freundes laden, damit Ich sie an einem Vereinsabend über ein Laptop allen zeigen konnten.
Die Seite selber hat allen gefallen und sie lief auch gut, nun hat an dem selben Abend ein Vereinsmitglied versucht über sein iPhone auf die Website zu gehen, was zwar machbar war aber grauenvoll aussah.
Dieses Problem hat mich nichtmehr los gelassen und ich habe mich über das Internet darüber schlau gemacht wie ich auch auf einem iPhone die Website gut darstellen kann.
Die Lösung war recht einfach indem ich neben meiner "website.css" eine zweite CSS- Datei angelegt habe mit dem Titel "iphone.css", die Ich dann im <head> Bereich meiner Website verlinkt habe.
<link rel="stylesheet" media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css" />
Wir haben das ganze wiederholt und die Website testweise auf den Server eines Freundes geladen und sie erneut über das iPhone des Bekannten besucht.
Nachdem wir noch ein wenig mit der "iphone.css" rum gespielt haben, konnten wir die Darstellung recht gut anpassen und Objekte die auf dem iPhone Display zu viel Platz weg genommen haben, habe ich einfach mittels "display:none;" in der "iphone.css" ausgeblendet.
Jetzt hat ein Bekannter mir diese Seite (selfhtml.org) empfohlen falls noch weitere Probleme auftretten, da wir die Website ab jetzt leider nicht mehr testweise irgendwo hoch laden können.
Ich habe mich mal ein wenig hier durch gelesen und habe auch sehr viel daraus ziehen können, was mir vorher unklar war oder Dinge die machbar sind von denen ich noch nicht wuste.
Nun bleibe ich aber leider immer wieder an zwei Punkten hängen und hoffe nun hier evtl noch den ein oder anderen Tip zu bekommen.
1:Wenn ich wie oben beschrieben Objekte in einer CSS Datei mittels "display:none;" aus blende, sind sie in der jeweiligen CSS Datei komplett weg. Das funktioniert in dem oben geschriebenen Beispiel der "iphone.css" auch gut, möchte ich jetzt jedoch Inhalte durch andere Inhalte ersetzen (z.B iPhone optimierte Schaltflächen), die ein Besucher der mit einem Computer die Internetseite besucht jedoch nicht sehen soll, kann ich diese zwar in der normalen "Website.css" ebenfalls mit "display:none;" ausblenden, dann erscheinen sie jedoch nichmehr auf dem iPhone.
Ich habe auch bei diesem Problem etwas rum getestet und habe einfach die speziel für das iPhone entworfenen Objekte wie größere Schaltflächen usw. hinter einem Bild "versteckt", so das ein Besucher der über einen PC die Website besucht diese nicht sieht und nur angezeigt werden wenn die "iphone.css" aktiv wird.
Die Frage ist jetzt, gibt es da keine bessere Lösung oder ist das "verstecken" von Objekten das was man in einer solchen Situation standardmäßig macht?!
2:Problem zwei bezieht sich auf die Lightbox zur Darstellung von Bildern auf der Website. Die Lightbox funktioniert gut über einen PC, nicht aber auf einem iPhone.
Ist es möglich, auch hier wieder die Lightbox "ausschließlich" für Besucher an einem normalen Computer zu aktivieren während für Besucher über ein iPhone die Lightbox sozusagen deaktiviert wird und die Bilder auf andere Art und weise dargestellt werden?
Ich entschuldige mich an dieser Stelle auch für evtle. Rechtschreibfehler und oder evtl. falsche Formulierungen.
Ich lebe erst seit knapp einem Jahr in Deutschland und bemühe mich sehr mit der Sprache, aber das Schreiben empfinde ich als schwieriger als das sprechen.
Grüße
Nimal