Zoomfunktion des Browsers ansprechen
| Autor | Nachricht |
|---|---|
|
Verfasst am: 20. 07. 2010 [13:50]
|
|
|
Xawin
Themenersteller
Dabei seit: 15.07.2009
Beiträge: 7
|
Hallo Ihr T3´ler, ich bin dabei eine Homepage zu erstellen und das hat auch soweit ganz gut geklappt. Die Homepage sieht in der Auflösung 1280x800 richtig proportioniert aus (sprich Seitenabstand, Höhe,usw.). Wenn man aber einen Monitor mit einer höheren Auflösung hat (z.B. 1920x1080), dann wird die Homepage sehr klein und den Text kann man kaum noch lesen.-Soweit ist das ja nichts neues! Nun habe ich überlegt, was man da am besten machen kann! Da jeder Browser mittlerweile eine eingebaute Zoomfunktion hat, möchte ich nun versuchen diese Funktion über T3 anzusprechen um damit je nach Auflösung des Surfenden die Seite größer oder kleiner Zoomen. Ich könnte mir auch vorstellen einen Zoombutton auf die HP zu setzen, dann kann jeder Besucher selbst entscheiden welche Größe er haben möchte. Hat jemand damit schon Erfahrungen gemacht? Eine andere möglichkeit wäre natürlich eine Auflösungsabhängige CSS Datei zu erstellen. Das kann aber meiner Meinung nach nicht die beste Lösung sein. Und wie verhält es sich, wenn ich alle Angaben in der CSS Datei in Prozen und em angebe? Wird dann nicht die Größe der HP an das Fenster angepasst? Was haltet Ihr für die beste und einfachste Lösung? P.S.: Hier noch der Link zur Homepage, damit Ihr euch ein Bild machen könnt. Darstellungsfehler könnt Ihr auch gerne Melden  [url=]http://typo3.p124869.webspaceconfig.de/index.php?id=4[/url] |
  |
|
|
Verfasst am: 21. 07. 2010 [13:11]
|
|
|
etux
Dabei seit: 14.02.2009
Beiträge: 223
|
Xawin schrieb: Da jeder Browser mittlerweile eine eingebaute Zoomfunktion hat ... Trotzdem finde ich gut, die Zoom-Funktion der Browser (angekoppelt an der Schriftgrößeneinstellungen) zu simulieren. Irgendwie versuchst Du Dich ja auch in dieser Richtung – Breitenangaben in „em“. Der Rest der CSS sagt mir aber eher, dass Du nicht wirklich weißt, was Du da tust. So erreichst Du genau das Gegenteil davon, was Du anstrebst. Das müsstest Du aber selbst bemerkt haben. Denn ich glaube nicht, dass Du zwei Browser findest, in denen Deine Seite gleich aussieht – von leicht verschobenen bis unerreichbar abgeschnittenen Elementen, versetzte Navigation usw. ... Auch der Quellcode Deiner Seite ist sehr verbesserungswürdig. Grüße: Emil
----------------------------------------------------------------------------- http://emil-webdesign.net/; CSS-Layouts: Gleich hohe Spalten, Inhalt zuerst. TYPO3-Templates. |
 |
|
|
Verfasst am: 21. 07. 2010 [13:54]
|
|
|
Xawin
Themenersteller
Dabei seit: 15.07.2009
Beiträge: 7
|
Hallo Emil, ich hoffe doch, dass ich weiß was ich tue  Vielleicht noch einmal zum besseren Verständnis: Ich habe nun alle Angaben in em angegeben. Nun habe ich vor auf meiner Seite einen Umschalter zu legen, mit dem man die Schriftgröße von html {font-size} ändern kann. Dadurch das alles in em angegeben ist, wird nicht nur die Schrift vergrößert sondern auch die Breite und Höhe der div-container( und die relationen müssten auch beibehalten werden). Damit kann dann jeder User selbst entscheiden wie groß er die Seite haben möchte. Einziger Nachteil ist, dass Bilder nicht mit skalieren und somit die selbe Größe behalten (dies kann aber auf der Seite vernachlässigt werden!) Ausprobieren kann man das, in dem man im Browser die Schriftgröße ändert. Dann noch zu dem Punkt: "Auch der Quellcode Deiner Seite ist sehr verbesserungswürdig" Kannst du deine Aussage vielleicht etwas konkretisieren? Ich habe meine Seite mit dem HTML Validator überprüft und der Test wurde ohne Fehler bestanden! Auch beim CSS gab es nur 2 kleine Fehler.-In welchem Browser ist alles unerreichbar abgeschnitten?Habe meine Homepage mal bei browsershots.org mit verschiedenen Versionen und Browsern rendern lassen und dort ist mir nichts aufgefallen. Falls mein Ansatz komplett falsch ist, könnt Ihr es mir ruhig sagen aber bitte mit Begründung Danke für deine Antwort Gruß Rene |
|
|
|
Verfasst am: 21. 07. 2010 [15:59]
|
|
|
etux
Dabei seit: 14.02.2009
Beiträge: 223
|
Xawin schrieb: ich hoffe doch, dass ich weiß was ich tue Hallo Rene, sorry, das war nicht böse gemeint. Ich bin bloß im Stress und Eile und muss mich kurz fassen.  Xawin schrieb: Vielleicht noch einmal zum besseren Verständnis ... Glaube mir, ich verstehe Dich bestens – ich habe mir Quellcode und CSS-Datei angeschaut. Xawin schrieb: Ich habe nun alle Angaben in em angegeben. Nun habe ich vor auf meiner Seite einen Umschalter zu legen ... Was Du vor hast, ist schon i.O. - das Problem ist Dein CSS-Layout (im Allgemein). So wie Du formatierst, würde es vielleicht beim Print-Design gehen, aber nicht beim Webdesign. Lesestoff: http://infotekten.de/index.php?itemid=417 Xawin schrieb: Dann noch zu dem Punkt: "Auch der Quellcode Deiner Seite ist sehr verbesserungswürdig" Kannst du deine Aussage vielleicht etwas konkretisieren? Ich habe meine Seite mit dem HTML Validator überprüft und der Test wurde ohne Fehler bestanden! Auch beim CSS gab es nur 2 kleine Fehler Der Validator (HTML und CSS) prüft nicht ob Dein Code semantisch aufgebaut ist und ob Dein Layout flexibel und userfreundlich ist. Auch nicht die Art wie Du die Elementen positionierst wird geprüft. Geschweige denn, ob Du dabei Fehler machst (Syntax-Fehler meine ich auch hier nicht). Fehler (zum Teil sehr grobe) hast Du reichlich. Die meiste Elementen sind „relative“ (und somit fast starr) positioniert. „div#center“ hat Höhe und „overflow: hidden“ - das ist Selbstmord. Weiter in der CSS-Datei geht es auch nicht besser … Xawin schrieb: Falls mein Ansatz komplett falsch ist, könnt Ihr es mir ruhig sagen aber bitte mit Begründung Ja, er ist komplett falsch. Die Begründung musst Du aber selber finden. Sorry, keine Zeit. Hier habe ich auf die Schnelle was gefunden: http://www.vorsprungdurchwebstandards.de/theory/semantischer-code/ http://www.vorsprungdurchwebstandards.de/theory/retro-coding/ Zum Thema wirst Du aber sicher noch viel Lesestoff finden. Und hier was zu CSS-Layouts: http://little-boxes.de/little-boxes-teil1-online.html Grüße: Emil
----------------------------------------------------------------------------- http://emil-webdesign.net/; CSS-Layouts: Gleich hohe Spalten, Inhalt zuerst. TYPO3-Templates. |
|
|
|
Verfasst am: 22. 07. 2010 [01:12]
|
|
|
etux
Dabei seit: 14.02.2009
Beiträge: 223
|
Xawin schrieb: In welchem Browser ist alles unerreichbar abgeschnitten?Habe meine Homepage mal bei browsershots.org mit verschiedenen Versionen und Browsern rendern lassen und dort ist mir nichts aufgefallen. Hier ein Paar Screenshots: Firefox Epiphany (WebKit) Opera Und mit etwas mehr Text-Inhalt: mehr Text-Inhalt Wie willst Du die Redakteure daran hindern, mehr Text einzugeben, als das Layout verkraftet? Grüße: Emil
----------------------------------------------------------------------------- http://emil-webdesign.net/; CSS-Layouts: Gleich hohe Spalten, Inhalt zuerst. TYPO3-Templates. |
|
|
|
Verfasst am: 22. 07. 2010 [13:27]
|
|
|
Xawin
Themenersteller
Dabei seit: 15.07.2009
Beiträge: 7
|
Hallo Emil, das weiß ich doch, dass du das nicht böse gemeint hast  Außerdem bin ich doch für jede Hilfe dankbar.Was soll ich zu deinem letzten Post noch sagen außer Schachmatt! Hab mir die Texte durchgelesen, die du mir gesendet hast und das klingt auch alles ganz einleuchtend. Also muß ich jetzt versuchen den Text zu beschreiben und nicht das Aussehen, wenn ich das richtig verstanden habe.  Werde mich morgen daran versuchen alles so umzuschreiben, dass es hoffentlich passt! Wenn du noch ein paar hilfreiche Links hast immer her damit! Gruß Rene |
|
|
|
Verfasst am: 22. 07. 2010 [14:33]
|
|
|
karlchen
Dabei seit: 19.10.2006
Beiträge: 868
|
abgesehen von den bereits erwähnten Punkten von etux, die gerade mit einem CMS Probleme machen, würde ich dir empfehlen die Seite generell etwas breiter zu machen. Du hast 800px für dein center div und das finde ich für heutige Verhältnisse zu schmall. Ich denke kaum ein Netbook, Notebook oder Computer Bildschirm wird heute noch mit weniger als 1024x768 px verkauft. Somit kannst du nach Abzug von Scrollbalken, Extra Browserleisten, etc, eta 940-980 px nutzen. Dann wirkt die Seite insgesamt nicht mehr so klein bei höheren Auflösungen. |
|
|
|
Verfasst am: 23. 07. 2010 [19:04]
|
|
|
etux
Dabei seit: 14.02.2009
Beiträge: 223
|
Xawin schrieb: Werde mich morgen daran versuchen alles so umzuschreiben, dass es hoffentlich passt! Wenn damit ein Neubau der Site gemeint ist, kann ich es nur begrüßen.  Entwerfe ruhig solange mit Stift und Papier, bist Du mit der Lösung zufrieden bist. Fürs Code-Schreiben wird in der Regel die wenigste Zeit benötigt. Grüße: Emil
----------------------------------------------------------------------------- http://emil-webdesign.net/; CSS-Layouts: Gleich hohe Spalten, Inhalt zuerst. TYPO3-Templates. |
|
|
|
Verfasst am: 23. 07. 2010 [22:38]
|
|
|
etux
Dabei seit: 14.02.2009
Beiträge: 223
|
„Dank“ des Regens hatte ich gerade etwas Zeit und habe ein wenig gebastelt: Template :: Rene Grüße: Emil
----------------------------------------------------------------------------- http://emil-webdesign.net/; CSS-Layouts: Gleich hohe Spalten, Inhalt zuerst. TYPO3-Templates. |
|
|
|
Verfasst am: 09. 08. 2010 [15:48]
|
|
|
Xawin
Themenersteller
Dabei seit: 15.07.2009
Beiträge: 7
|
Hallo Emil, sorry das ich noch nicht geantwortet habe aber war 2 Wochen im Urlaub. Jetzt kann die Arbeit mit neuer Energie weiter gehen Hab eine Frage zu deiner Lösung: Wie lange hast du denn dafür gebraucht? Ich habe es auch versucht aber mein Versuch sah noch lange nicht so granular aus wie deiner! Besonders gut hat mir auch gefallen, dass der obere Balken ein Border-top ist. Da wäre ich erst einmal nicht drauf gekommen aber mit jeder Übung wächst ja das Wissen.Dank deiner Lösung kann ich nun alles besser nachvollziehen! Eine Frage hab ich aber noch: Darf ich Teile deine Lösung auf der Seite Verwenden? Zum Thema Zoomfunktion des Browsers ansprechen gab es aber bis jetzt noch keine Lösung-schade! Wenn ich ne Lösung dazu habe, werde ich Sie natürlich hier Posten... |
|
|