404 404

Design made in Germany

Deutsches Design

Headline-Problem


Design Magazin Design Agenturen Designer Design Weblogs Design Magazine Design Portale Design Communities Design Hochschulen Design Organisationen Design Ressourcen Design Shops Grafikdesigner Schriftdesigner Webdesigner Interfacedesigner Flashdesigner Motiondesigner Sounddesigner Fotodesigner 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Hallo zusammen,

ich habe derzeit ein Headline-Problem, wie auf folgendem Bild zu erkennen ist:



Jetzt würde ich gerne wissen, wie ich's anstellen kann, dass die Überschriften in allen Browsern gleich groß (oder zumindest ähnlich groß) sind. Ich hab natürlich im CSS die Größe (px) bestimmt, aber irgendwie funktioniert das nicht.

Wäre nett, wenn mir da jemand weiterhelfen könnte.

Gruß,
Stefan


Deutsches Design: Headline-Problem

Mhm auf die schnelle kann ich dir da nichts sagen. Aber CSS und HTML wären hilfreich ...


body {font-size:100%}
h1 {font-size: 200%}

das ins css, dann sollten die in etwa gleich groß sein.


@ Florian: Im HTML hab ich einfach nur h2 gesetzt und im CSS hatte ich h2 { font-family: arial; font-size: 15px color: #000000; font-weight: bold; }, was dann obiges ergeben hat.

@ Julian: Schon mal danke. Damit sind die Überschriften tatsächlich gleich groß, aber leider auch so groß wie beim IE (siehe Bild oben), wenn ich die jetzt noch kleiner bekommen würde, wäre das großartig.


wenn das exakt dein code aus dem stylesheet ist, dann fehlt hinter "font-size: 15px" ein ";"

Glaube ich


Veruch´s auch mal mit diesem Onlinetool:

http://typetester.maratz.com/

Es gibt Dir direkt die passenden Styles aus.


body { font-size: 100.01%; } -> wichtig für opera und safari
h1 { font-size: 1em; } -> entspricht 16px


[quote]h1 { font-size: 1em; } -> entspricht 16px[/quote]
nicht wirklich.


also ohne den restlichen code gesehen zu haben würde ich auch auf das fehlende semikolon tippen, dadurch geht die css formatierung für h2 kaputt und jeder browser nimmt wieder seinen standard.


Ich hab jetzt mal den Typetester getestet und habe nun font-size: 62.5%; im body und font-size: 1.8em; in h2, womit's nun funktioniert. Zudem hab ich jegliche Textformatierung im Stylesheet neu geschrieben, weshalb ich mal auf einen Fehler meinerseits tippe (schorry!).

Jedenfalls vielen Dank für eure Antworten!


[QUOTE]nicht wirklich.[/QUOTE]
ach ja?
was denn sonst, deiner meinung nach?


[quote]was denn sonst[/quote]
variabel. bei mir zb 12px.


dann liegt es an deinen eigenen einstellungen.
standardgröße im browser für nicht angepassten text ist 16px.
oder bist du mit lynx unterwegs?


jo, das ist die standardgröße. da man diese größe jedoch ändern kann, darf man nicht davon ausgehen, daß jeder die defaulteinstellung beibehalten hat. dh wenn schon, dann in etwa so:

[quote]body { font-size: 100.01%; } -> wichtig für opera und safari
p { font-size: 1em;
h1 { font-size: 2em; }[/quote]

aber das hat ja nix mit dem thema zu tun, weil er praktischerweise mit px verwendet und sich den ganzen %/em-quatsch sparen kann.


sorry martin, was du da gerade erzählst ist müll.


wenn du das sagst..


@Stefan:
tut mir leid, ich war von einigen CSS-Kenntnissen ausgegangen, du kannst statt den 200% auch jede beliebige andere zahl einsetzen..
und du solltest tatsächlich lieber die 100.01% im body angeben.


@Martin:
der allgemeine webdesigner kann nicht jede x-beliebige einstellung berückstichtigen, wenn du der meinung bist, das deine 100% 12pixel sein sollen, dann ist es dein bier, ob du seiten noch lesen kannst, aber die von dir als praktisch bezeichnete einheit "px" ist -sry- die bescheueste die geht. denn dann sind IE benutzer auf diese größe festgenagelt und können - falls nötig - die schrift nicht vergrößern.

also am besten ist es für einen webdesigner von 16px = 100(.01)% auszugehen und dann damit runterzuregeln.


--
trotzdem stimme ich Martin bei seinem stylesheet zumindest teilweise zu, eine <h1> sollte größer sein, als ein <p>


jo, genau, barrierefreiheit = entmündigung. den user seine gewünschte schriftgröße einstellen lassen und dann reduzieren. jaja, blabla. wer schon so "sozial" sein möchte, dann auch richtig. body mit 100% und fertig. alles andere ist pure heuchelei.

wer mit der ie-skalierung argumentiert, plappert wahrscheinlich einfach nur nach, was irgendwelche selbsternannten usabilitygurus vor vielen jahren von sich gegeben haben. habe ich anfangs auch lange zeit, einfach weil es wie ein logischer kompromiss wirkte, der meinem selbst erarbeiteten kompromiss von damals sehr ähnelte. im endeffekt ist aber einfach nur unfug. mittlerweile haben es auch viele dieser gurus eingesehen, nur leider ist es noch nicht bis zu allen vorgedrungen^^

also ich weiss wovon ich rede. ich habe mich mit dem thema schon recht ausgiebig beschäftigt lang bevor es das wort barrierefreiheit überhaupt gab. aber ich lasse gerne jedem seine meinung, wenn es denn seine eigene ist. ;)


Danke, aber ich glaub eigentlich schon, dass ich weiß wovon ich rede.

Du kannst dir dieses Forum ja mal im IE (6) ansehen ;)

__edit: und versuchen die schriftgröße zu ändern.


zu allererst:
ich glaube du solltest mittlerweile zumindest erahnen können, dass ich dir nix böses will ;-)

zum corpus delicti:
ich gehe von den standards aus, dass sind wie bereits erwähnt die 16px = 1em.
du magst einen standard von 12px haben, dieser entspricht aber nicht der breiten masse. eine antwort in richtung "nicht wirklich" erweckt den anschein als hätte ich keine ahnung von was ich rede, bzw. wäre totaler quatsch. wenn du dieser meinung bist: dein bier.

zu deiner aussage "er verwendet ja pixel":
die einzige möglichkeit in verschiedenen browsern elemente in der gleichen größe darzustellen besteht nunmal nur mit em. ja, er hat auch den ie erwähnt. und nein: nicht jeder scheisst auf den internet explorer. ich spare mir jetzt den müll mit barrierefreiheit und co. meine seiten sollen einfach überall gleich aussehen.

dein einwand mit h1/p und den größen ist okay, ich habe in dem punkt nicht daran gedacht ihm eine h2 oder h3 mit 1em anzubieten. ein paragraph hat allerdings bei der vererbung nichts mit einer headline zutun.

zu guter letzt:
ist schön das du deine meinung zu usabillity und co. hast, besser als keine meinung. mit irgendwelchen "erfahrungen" und wie lange ich schon im internet unterwegs bin fange ich auch nicht an. ich weiss was ich kann, das reicht mir.

dir einen schönen abend,
jonis


1em = 16px = einfach falsch. und ich will dir da natürlich auch nichts böses und unterstelle auch nicht unwissenheit. nur wer keine ahnung hat, das liest und daraus lernen will, lernt einfach das falsche.

klar, keiner kann auf den ie scheissen (auch wenn ich es mit dmig grad mache und mich fürchterlich dafür schäme :).


body { font-size: 100.01%; } -> wichtig für opera und safari
h1 { font-size: 1.5em; }
h2 { font-size: 1em; } -> entspricht DANN 16px

so. keine lust mehr.


ne. entspricht bei VIELEN 16px, aber NICHT bei ALLEN. aber vor allem sollte man auch nicht davon ausgehen, weil es unrelevant ist was dann 1em ist, weil 1em = vorsteinstellung.

und jo, auch keine lust :)


@martin:

was sagt denn die statistik? wie hoch ist der ie-anteil bei dmig?


16% (inclusive aller versionen und plattformen)


@ Julian: Schon mal danke. Damit sind die Überschriften tatsächlich gleich groß, aber leider auch so groß wie beim IE (siehe Bild oben), wenn ich die jetzt noch kleiner bekommen würde, wäre das großartig.

tja, dann nimm doch anstatt der 200% einfach 175%, oder halt nein warte, 174%, oder moment wie wäre es mit 152.3%? probier doch einfach mal ein wenig rum


Wie gesagt: Problem gelöst. Denn durch nen Fehler im Stylesheet veränderte sich die Schriftgröße nicht wie angegeben, was mittlerweile aber behoben ist und nun in allen drei genannten Browsern plus Safari wunderbar aussieht.


Seitentitel: Headline-Problem