✔ 3 Stufen Schriftgröße wählen

I

Identität

Erfahrenes Mitglied
Hey Leute,

also in letzte Zeit komme ich immer mehr an Javascript ran, ich denke ich werde dazu demnächst einige Tutorials zum Einstieg durchmachen müssen ;-)
Über Google finde ich nur Varianten mit + und -, aber da zerhaut total das Layout wenn jemand die Schrift 10px größer schraubt, Sinn hat es auch keinen, da man es dann auch nicht mehr sogut lesen kann. Es würde einfach reichen, wenn man mit Javascript den CSS Teil für body ändern könnte.

Ich habe eine Website, dort möchte ich die Schrift in drei Stufen vergrößern lassen. Also klein, mittel, groß.

Klein soll 13px sein und die beiden größeren sollen sich immer um 1px je Stufe vergrößern.

Hier ein Auszug aus den Textformatierungen (.css)
Code: 
body{
    background: #fff url(images/layout/bg_rot2.gif) repeat-x;
    margin: 0;
    padding: 0;
    background-color: #f6f6f6;
    text-align: center;
    font: normal 13px arial,verdana,sans-serief;
    color: #454545;
}
h1{
    font: normal 20px Segoe UI,Arial,Verdana,sans-serief;
    color: #f80605;
    margin-bottom: 15px;
}
h2{
    color: #f58220;
    font: normal 18px Segoe UI,Arial,Verdana,sans-serief;
    font-variant:small-caps;
    margin-bottom: 10px;
}
p{
    margin-bottom: 10px;
}
a {
    color: #454545;
    text-decoration: none;
    border-bottom: 1px solid #f80605;
}

Und hier die "Navigation" für die Schriftgröße:

Code: 
<span id="fontsize">Schrift: <a href="#" class="fontchoice_active">normal</a> | <a href="#" class="fontchoice">groß</a> | <a href="#" class="fontchoice">sehr groß</a></span>

Vielen Dank für eure Hilfe!
 
Moin,

das Problem ist Folgendes: du veränderst die Schriftgrösse...das macht die Schrift grösser, der Rest bleibt aber so wie er ist. Ergebnis: es zerschiesst dir dein Layout.

Was du benötigst, wäre also nicht die Änderung der Schriftgrösse, sondern die Änderung der Grösse von allen Dingen, Stichwort: Zoom

Im IE(zumindest 5.5 +6 ) ist da klein Problem(danach habe ich mich damit nicht mehr befasst...sollte aber immer noch gehen)....weil wir tutorials.de sind gibt es dazu sogar ein Tutorial :)
http://www.tutorials.de/forum/javascript-tutorials/157349-javascript-zoom-im-internet-explorer.html

Was andere Browser betrifft, könntest du ja mal umhergoogeln, das Stichwort lautet wie gesagt: ZOOM

Ein Anschaungsbeispiel(nur IE-tauglich) findest du hier: http://doktormolle.de/zoom.htm
Aber ich wills mal so Sagen: Leute, die keinen IE benutzen, wissen meist, wie man zoomt :suspekt:
 
Zuletzt bearbeitet:
Hallo,

deswegen soll es ja auch nur drei verschiedene Schriftgrößen geben. Das klappt auf jeden Fall und macht meiner Meinung nach auch Sinn. Das heißt, normaler Fließtext wird bis zu 15px groß. Sollte das nicht reichen, gehe ich davon aus, das die Leute dann selbst Tools haben um das lesen zu können, denn die meisten Seiten bieten sowas ja nicht an.

Das mit dem Strg + und Strg - kennen leider sehr viele Benutzer nicht. Bei der Seite geht es nicht um Technik, sondern um eine Art Versicherung. Also die Zielgruppe ist zwischen 30-65 Jahre alt. Und die drei Links tuen auch niemanden weh.

Das Tutorial hilft mir nur mäßig weiter. Ich hätte gedacht, das es sowas schon gibt. Naja ich werde weiter suchen, wer mir weiterhelfen kann, darf sich geküsst fühlen ;-)
 
@Sven Mintel
Danke nochmal für deinen Link, ich habe ihn jetzt in meine Bookmarks gelegt, werde ich sicherlich später noch verwenden.:)

@Maik
Keine Statistik, braucht man ja auch nicht zu jeder Kleinigkeit. Also ich werde demnächst einfach Mal einige unerfahrene PC-Nutzer fragen, wie man die Schriftgröße im Web größer macht. Ich weiß jetzt schon, das viele das nicht wissen. Und genau das ist die Zielgruppe. Stört auch niemanden oben in der Ecke.

Übrigens habe ich genau so ein Ding auf dem Stadtportal http://www.luebeck.de gefunden. Nur bin ich da auch nicht richtig im Quelltext durchgestiegen.

Ich habe es jetzt mit PHP realisiert. Ganz einfach:
Klickt man auf größer, wird eine Session geschrieben mit der Schriftgröße und die neue Style Datei wird geladen. Nur der Reload nervt ein bisschen, aber dafür ist alles Marke Eigenbau.

Trotzdem Danke ich euch für eure Mühe. Ich werde mich dringend mit JS beschäfftigen müssen.
http://www.tutorials.de/forum/members/sven+mintel.html
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück