nicht angemeldet
MudGuard
Gunnar Bittersmann
MudGuard
Der Martin
MudGuard
MudGuard
Der Martin
Hi alle.
Wie arbeite ich am besten mit der Einheit em?
Erst das Design im mit der Größeneinheit em gestalten und dann die Schrift oder umgekehrt? Oder ganz anders?
Hab versucht mir damit zu helfen aber ich weiß agrnicht wo ich anfangen soll. Ich habe ein Layout in px geschrieben will es aber nun in em umwandeln. Wie soll ich vorgehen?
http://www.reeddesign.co.uk/test/points-pixels.html
mfg
Phil
Hi,
Wie arbeite ich am besten mit der Einheit em?
üblicherweise indem Du sie einsetzt.
Erst das Design im mit der Größeneinheit em gestalten und dann die Schrift oder umgekehrt? Oder ganz anders?
Was meinst Du mit "erst"?
Hab versucht mir damit zu helfen aber ich weiß agrnicht wo ich anfangen soll. Ich habe ein Layout in px geschrieben will es aber nun in em umwandeln. Wie soll ich vorgehen?
Vergib für die entsprechenden Größen sinnvolle Werte. Das impliziert auch, dass Du em nur dann einsetzt, wenn es sinnvoll ist. Wenn Du irgendwo auf Probleme stößt, solltest Du diese beschreiben, anstatt zu propagieren, es gäbe ein grundsätzliches Problem, bei dem auf grundsätzliche Weise geholfen werden könnte.
Cheatah
Hi,
»»Wenn Du irgendwo auf Probleme stößt, solltest Du diese beschreiben, anstatt zu propagieren, es gäbe ein grundsätzliches Problem, bei dem auf grundsätzliche Weise geholfen werden könnte.
Zum Besipiel das 1em im IE anders bzw, größer dargestellt wird als im Moz. Lässt sich das nur mit Browserweiche beheben(Die ich ohnehin schon für andere Darstellungspürobleme nutze)?
mfg
Phil
Hi,
Zum Besipiel das 1em im IE anders bzw, größer dargestellt wird als im Moz.
Nein - das ist der Sinn des Arbeitens mit em. Die Schrift wird so dargestellt, wie es der User gerne hätte.
Lässt sich das nur mit Browserweiche beheben
Daß Du in Deinem Mozilla eine andere Default-Schriftgröße konfiguriert hast als in Deinem IE? Nein, das läßt sich nicht mit einer Browserweiche beheben, da mußt Du schon die Konfiguration Deiner Browser bemühen.
cu,
Andreas
Acho jetzt versteh ich das ganze. ^^
Daß Du in Deinem Mozilla eine andere Default-Schriftgröße konfiguriert hast als in Deinem IE? Nein, das läßt sich nicht mit einer Browserweiche beheben, da mußt Du schon die Konfiguration Deiner Browser bemühen.
Wenn ich mir den IE und MOZ MOZ neu installiere, sind dann automatisch bei beiden die gleichen Einstellungen*hoff* und haben die vom Prinzp aus andere Einstellungen?
mfg
Phil
Hi,
Wenn ich mir den IE und MOZ MOZ neu installiere, sind dann automatisch bei beiden die gleichen Einstellungen*hoff* und haben die vom Prinzp aus andere Einstellungen?
IE und Mozilla haben vom Prinzip her unterschiedliche Einstellungen, weil es unterschiedliche Programme sind, und sie haben unterschiedliche Darstellungen, weil Du Dich im World Wide Web bewegst. Das ist eine seiner hervorragendsten[1] Eigenschaften.
Cheatah
[1] In jeder Bedeutung des Wortes.
Irgendwie versteh ich das mit dem em nicht ganz.
Ich das mein Design und Schrift immer zueinander passen.
Also muss ich alle Angaben in em machen. Wenn das dann in beiden Browsern perfekt ist, dann wird bei einem anderem Benutzer mit anderen Größeneinstellungen alles automatisch so vergrößertet das es auch da passt. Versteh ich das richtig?
Sorry. Nein ich stell mich nicht dumm und ja ich hab mehrere Artikel darüber gelesen -.- ( Um da sim Vorraus zu sagen).
mfg
Phil
Hallo,
Ich das mein Design und Schrift immer zueinander passen.
Also muss ich alle Angaben in em machen. Wenn das dann in beiden Browsern perfekt ist, dann wird bei einem anderem Benutzer mit anderen Größeneinstellungen alles automatisch so vergrößertet das es auch da passt. Versteh ich das richtig?
Spätestens bei Bildern funktioniert das nicht mehr.
Du musst dich einfach erstmal mit dem Gedanken anfreunden,
dass es keine 100% Designs gibt, und das der Hauptaspekt einer Webseite nicht ihr "megafettes Design" ist, sondern die Tatsache, dass die Inhalte gut erreichbar sind. Denn wegen den Inhalten geht jemand auf eine Webseite.
Wenn du das erkannt hast, und die erste Seite geschrieben hast, die in Lynx wunderbar nutzbar ist, dann fang an, die Gedanken zu machen, wie man um diesen "sicheren" Aufbau herum Design einarbeiten kann ;)
Gruß,
Philipp
Hi
Wenn du das erkannt hast, und die erste Seite geschrieben hast, die in Lynx wunderbar nutzbar ist, dann fang an, die Gedanken zu machen, wie man um diesen "sicheren" Aufbau herum Design einarbeiten kann ;)
Okay sagen wir mal so.
Ich hab mein Design im Kopf, ich habe meien Inhalte, Ich weiß wie sie alle voneinander erreichbar sind.
Ich hatte mein Design auch fast komplett feritg allerdings in px geschrieben. Jetzt haben mir soviele gesagt ich soll es in em machen damit es Benutzerfreundlicher ist. (was ich ja auch so haben will) Das ich es irgendwie umschreiben muss.
mfg
Phil
Hallo Phil,
so wie es aussieht stehst Du vor dem größten Problem, das man hat wenn man ein skalierbares und anpassungsfähiges Design erstellen will.
Wie wahrscheinlich die meisten tendierst Du dazu Dir im Kopf ein Blatt Papier zu nehmen und eine Webseite aufzumalen, und dann versuchst Du diese 1 zu 1 auf den Bildschirm zu zaubern.
Beschränke Dich nicht. Der Browser gibt Dir die Möglichkeit die strengen Grenzen eines DinA4 Blattes zu verlassen. Das stellt aber auch neue Herausforderungen.
Wenn Du einen Bereich erstellst, überlege Dir, was passiert, wenn die Schrift größer wird.
Z. B. eine Menüleiste. Finden nicht alle Links mehr Platz in einer Zeile, bricht die Zeile um, und Du hast auf einmal zwei. Dann müß sich der Bereich eben in der Höhe anpassen, was er normal auch tut. Floaten die Links, dann wird es etwas schwieriger. Ein Element, was das Floaten aufhebt kann da helfen.
Bei Textblöcken könnte overflow:auto helfen. Wenn nötig erscheinen dann Scrollbars. Vielleicht nicht so schön aber zweckmäßig. Oder man läßt sie einfach in der Größe mitwachsen, was auch besser wäre.
Breiten von Textblöcken kann man in em angeben, muß aber nicht _immer_ sein. Der Umbruch passt sich ja eigentlich an, auch wenn z.B. 400px für einen Textblock vorgesehen ist. Bis "Donaudampfschifffahrtsgesellschaft" nicht mehr in 400px passt (nicht umbricht), muß man schon ziemlich groß skalieren.
Kannst Du mit diesem Post ja mal probieren ;)
Das Schwierigste war für mich, dieses DinA4 Schema aus dem Kopf zu bekommen.
Dabei hat mir geholfen einiges zu "liquid Design" zu googeln und mir entsprechend "flüssige" Seiten anzusehen. Für den Firefox gibt es eine Erweiterung mit der man sich JS und CSS direkt ansehen kann. Da habe ich dann auch reichlich Quelltext gelesen und mir abgeschaut, wie andere das gemacht haben. Es bleibt schwer, man ist so erzogen in diesen engen Grenzen zu denken. Lohnt sich aber umzudenken.
Wichtig ist nicht daß in jedem Brower das pixelgenaue Bild erscheint, sondern daß _interessante_ Inhalte universell verfügbar sind. Das in eine ansprechende Form zu gießen, damit es auch bei verschiedenen Fenstergrößen und Schriftgrößen gut aussieht ist zugegeben nicht so einfach. Aber es lohnt sich!
Basis ist aber allemal ein valider Code. Ansonsten ergeben sich u. U. Darstellungsfehler die auszubügeln schwer, aber leicht vermeidbar ist - einfach durch eine valide Dokumentstruktur. Nimm egal ob HTML oder XHTML gleich die strict Variante. Die zwingt Dich von vorneherein zu sauberer Trennung von Inhalt und Darstellung.
Und die Idee mit dem dicken Buch ist echt gut. Professionelle Websites von Stefan Münz habe ich immer auf dem Schreibtisch liegen.
Da ist eigentlich alles angerissen was man als Beginner wissen muß bis zu einem Niveau mit dem man schon eine Menge anfangen kann.
Viele Beispiele zum nachbauen und ausprobieren. Umfangreiche Referenz.
Aber es gibt auch eine Menge anderer Bücher. Schau Dich um, vieles erliest man sich auch einfach online. Das Web ist so voll davon...
netten Tag und viel Spaß und Erfolg
^da Powl
Hi Powl.
Das Schwierigste war für mich, dieses DinA4 Schema aus dem Kopf zu bekommen.
Das wäre vllt. mal ganz gut für mich -.-.
Dabei hat mir geholfen einiges zu "liquid Design" zu googeln und mir entsprechend "flüssige" Seiten anzusehen. Für den Firefox gibt es eine Erweiterung mit der man sich JS und CSS direkt ansehen kann. Da habe ich dann auch reichlich Quelltext gelesen und mir abgeschaut, wie andere das gemacht haben. Es bleibt schwer, man ist so erzogen in diesen engen Grenzen zu denken. Lohnt sich aber umzudenken.
Hab ich auch schon versucht aber _bisher_ wenig.
Wichtig ist nicht daß in jedem Brower das pixelgenaue Bild erscheint, sondern daß _interessante_ Inhalte universell verfügbar sind. Das in eine ansprechende Form zu gießen, damit es auch bei verschiedenen Fenstergrößen und Schriftgrößen gut aussieht ist zugegeben nicht so einfach. Aber es lohnt sich!
Bei mir ist es halt so. Ich übe hauptsächlich gute&flexible Designs zu schreiben. Das sollte dann aus HTML und CSS bestehen und so wenig wie möglich aus Js und sonstigem. Der Inhalt der Page kommt bei mir erst ganz zum Schluss(Wenn ich Pages für mich selber schreibe).
Bei anderen ist natürlich beides gleichwichtig. Aber mir kommts einfach sehr sehr stark aufs Design an. Aber das liefgt vllt. einfach an nicht vorhandener Erfahrung.
Basis ist aber allemal ein valider Code. Ansonsten ergeben sich u. U. Darstellungsfehler die auszubügeln schwer, aber leicht vermeidbar ist - einfach durch eine valide Dokumentstruktur. Nimm egal ob HTML oder XHTML gleich die strict Variante. Die zwingt Dich von vorneherein zu sauberer Trennung von Inhalt und Darstellung.
Gibt es regeln die ich bei Strict beachten sollte? Wo find ich die. Da ich hier bei SelfHTML nur finde was es bewirkt. Und wo kann ich nachgucken ob mein Code valide ist?(Ich weiß das ich das eigendl. lääängst wissen wollte)
Und die Idee mit dem dicken Buch ist echt gut. Professionelle Websites von Stefan Münz habe ich immer auf dem Schreibtisch liegen.
Ich habe von das HTML Kompendium von Günter Born vom Markt&Technik Verlag.
Aber es gibt auch eine Menge anderer Bücher. Schau Dich um, vieles erliest man sich auch einfach online. Das Web ist so voll davon...
Bin fleißig dabei ;)
Ich werde das komplette Design neu schreiben.
Ich danke dir. =)
mfg
Phil
habe d'ehre Phil
Und wo kann ich nachgucken ob mein Code valide ist?(Ich weiß das ich das eigendl. lääängst wissen wollte)
man liest sich
Wilhelm
Danke ! =)
man liest sich
Auf jeden Fall ;)
mfg
Phil
Hello out there!
Gibt es regeln die ich bei Strict beachten sollte? Wo find ich die.
In SELFHTML unter http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Dokumenttyp-Deklaration.
Ansonsten natürlich in den DTDs für HTML4.01 Strict bzw. XHTML 1.0 Strict. (Wie die zu lesen sind, steht in SELFHTML im Abschnitt XML unter <http://de.selfhtml.org/xml/dtd/index.htm@title=Dokumenttyp-Definitionen (DTDs)>.)
See ya up the road,
Gunnar
Hi Phil,
Hab ich auch schon versucht aber _bisher_ wenig.
Das glaube ich nicht. Da gibt es ehrlich jede Menge (leider vor allem in Englisch ;) )
Bei mir ist es halt so. Ich übe hauptsächlich gute&flexible Designs zu schreiben. Das sollte dann aus HTML und CSS bestehen und so wenig wie möglich aus Js und sonstigem. Der Inhalt der Page kommt bei mir erst ganz zum Schluss(Wenn ich Pages für mich selber schreibe).
Das Konzept halte ich für nicht ideal. Irgendwie bestimmt der Inhalt die Gestaltung doch mit, z. B. was Grafiken und Farbgebung angeht. Wenn ich eine Seite für Modellbauer mache, dann würde ich andere Farben nehmen als für mein Gartenhobby, meinst Du nicht?
Eine Webseite als Selbstzweck? Bitte nicht, die Server sind voll davon.
Gibt es regeln die ich bei Strict beachten sollte?
Strict sorgt vor allem für die Inhalt/Design Trennung. Ist auch viel besser, wenn es Dir in den Sinn kommt die h1 nicht blau sondern rot zu machen, genügt eine Änderung im zentralen Stylesheet, anstatt X Seiten zu ändern.
Bringt mich zu Klassennamen. .blau wäre nicht gut. Soll sie dann doch rot, dann wäre .blau {color:red;} irgendwie merkwürdig.
Besser gleich .news oder .h1_news - Besser Themenbezogen benennen als auf Grund der gewünschten Darstellung - letzteres kann sich ändern.
Bin fleißig dabei ;)
Schön, ich habe gleich noch einen Link für Dich. Professionelle Websites hat auch ein online Angebot. Man kann sich die Beispiele gleich ansehen und am Quelltext zum herumspielen herauskopieren. Vieles erklärt sich von selber.
Das Buch ist sicherlich noch weit ausführlicher, aber einen Eindruck bekommt man in jedem Fall.
Einige Layouts (Winkel Spalten und so), um mal ein Gefühl zu bekommen. Zudem schau Dir mal auf SELFHTML die Layoutbeispiele an. Laß Dich inspirieren.
Was mir noch einfällt: Breitenangaben in % sind auch richtig gut.
(Abhängigkeit zum viewport)
em ist am besten für Elemente, die sehr stark von dem Text abhängig sind. Wenn Du z.B. eine Linkliste mit CSS stylest dann kannst Du sie in der Breite gut in em angeben. Ist der längste Link z. B. "Impressum", kommst Du je nach Schriftart mit ca. 7em hin (IIRC). Wenn man jetzt größer skaliert wachsen die Buttons schön mit. Bei Pixeln würde es das Layout ziemlich ramponieren.
Schau mal bei 1ngo auf die Seite, er hat da schöne Beispiele zum Thema em! (Und auch zu anderen Themen). Auch sonst eine Seite die dem Besucher viel Freiraum gibt. Nix mit "optimiert für 1234px und Browser XYZ".
Würdest Du ein Auto anbieten, nur für Nadelstreifenanzugträger, die Nichtraucher sind und Schuhgröße 45 haben?
Ich danke dir. =)
gern geschehen.
netten Tag und viel Spaß noch
^da Powl
Hi!
Hab ich auch schon versucht aber _bisher_ wenig.
Das glaube ich nicht. Da gibt es ehrlich jede Menge (leider vor allem in Englisch ;) )
Damit meitne ich das ich ers bisher wenig versucht habe :D ;).
Beim Moz klappt alles sehr gut die Page ist dort sehr flexibel aber im IE.... nicht gerade so das Wahre.
Schau mal bei 1ngo auf die Seite, er hat da schöne Beispiele zum Thema em! (Und auch zu anderen Themen). Auch sonst eine Seite die dem Besucher viel Freiraum gibt. Nix mit "optimiert für 1234px und Browser XYZ".
Die Seite hat mir schonmal sehr geholfen. Danke.
Würdest Du ein Auto anbieten, nur für Nadelstreifenanzugträger, die Nichtraucher sind und Schuhgröße 45 haben?
Nein ^^.
mfg&THX
Phil
Wenn du dir das hier nochmal ansiehst.
http://lmg.byto.de/PHIL/TEST/index.php
http://lmg.byto.de/PHIL/TEST/index.php
Einmal im IE und einmal im Moz.
Im Moz ist es flexibel(wenn ich das richtig sehe). Im IE nicht.
Es wird im IE nur richtig dargestellt, wenn man den Schriftgrad auf "Größer" gestellt hat.
Ausserdem wird im IE die Linie die ich mit deren Rand Style "double" ausgezeichnet habe anders dargstellt.
Dafür ist aber im Moz das graue Feld zu lang und geht über das Schwarze. Im IE sind beide gleichlang(so wie ich das auch haben will).
Hättest du da ein paar Tipps zu?
mfg
Phil
Hallo,
Hättest du da ein paar Tipps zu?
Im Moment nicht viel, da ich den Quelltext nicht gelesen habe. Was mir aber auffällt ist, daß bei großer Schriftskalierung die gesamte Seite aus dem viewport haut. Das könntest Du vermeiden, wenn Du für die großen Bereiche Breiten in % angibst. Das richtet sich dann nach dem viewport, also dem Browserfenster und erzwingt dann keine horizontalen Scollbars, die immer unschön sind. Versuche doch mal der "Seite" z. B. 80% Breite zu geben und dann margin: x 10%; zuzuweisen.
Für Browser kannst du mit min-width verhindern, daß dein Headerbild zusammengedrückt wird, so Du es als Hintergundbild einbindest. Wenn Du es als <img></img> einbindest, gibst Du ja (hoffentlich) auch height und width an, dadurch ist dann die Mindestbreite quasi schon vorgegeben.
Probier doch beides ruhig mal aus.
Innerhalb dieses äußeren Seiten divs kannst Du dann Deine Elemente arrangieren, Menüleiste und so. Blockelemente haben dann automatisch die Breite der gesamten inneren Seite. Laß die Elemente einfach frei umbrechen. In der Menüleiste mußt Du nur aufpassen, daß sich die Höhe automatisch anpaßt, wenn durch den Umbruch der Links mehr Spalten nötig werden.
Die Höhe des Inhaltsbereiches kannst Du erstmal vernachlässigen. Eigentlich sollten die Inhalte so umfangreich sein, daß sich die Höhe dann schon ergibt.
Ansonsten kann man für den IE einfach eine height: festlegen. Benötigt der Inhalt mehr Höhe, wird der Bereich angepasst. IE behandelt height also wie min-height.
Diesen Befehl mußt Du nur vor Browsern verbergen, dort muß eine min-height Angabe hin.
Also z. B.
* html #inhalt {height:10em;}
body > #inhalt {min-height:10em;}
Hilfreich kann sein
* {border:1px solid red;}
Damit umrahmst Du alle Elemente und bekommst einen guten Eindruck wie diese sich anordnen. Manchmal kann man mit diesem Trick einiges besser Überblicken.
Ich gehe eigentlich so vor, daß ich mir grob überlege wie das Layout aussehen soll und dann gehe ich systematisch vor. Ein Bereich nach dem anderen. Immer in kleinen Schritten, parallel immer in IE und Browser überprüfen und anpassen wenn nötig. Nicht zu viele Änderungen auf einmal. Bevor man sattelfest vorhersehen kann wie sich z. B. Positionierungen auswirken werden, einfach mal experimentieren. Eine Anweisung ändern und gleich den Effekt beobachten.
So bekommt man gleich ein Gespür dafür, was man bewirkt. Ist zwar langsam aber zu Anfang mMn ein gangbarer Weg um CSS beherschen zu lernen.
Und wenn's an einer konkreten Stelle mal richtig hakt, hat's hier mit Sicherheit einen guten Rat.
Gute N8t
^da Powl
Danke Powl das du mir immernoch hilfst =)
Ich hoffe das bleibt noch ein bisschen so. Da du gut meine Probleme verstehst und dir viel Mühe gibst. Was ich sehr sehr schätze. =)
Wenn du keinen Bock hast hier immer den Thread zu suchen können wir auch ruhig mailen wenns dir recht/lieber ist.
Ich glaube ich habe schonmal einen großen Teil gelöst guck dir am besten nochmal die Seite an.
http://lmg.byto.de/PHIL/TEST/
http://lmg.byto.de/PHIL/TEST/
Das mit den Bordern mache ich auch immer. =)
mfg
GN8
Phil
Hallo.
Hilfreich kann sein
* {border:1px solid red;}
Damit umrahmst Du alle Elemente und bekommst einen guten Eindruck wie diese sich anordnen. Manchmal kann man mit diesem Trick einiges besser Überblicken.
Und manchmal sorgt gerade dieser Rand für ungewollte Umbrüche, etwa wenn zwei Flächen nebeneinander dargestellt und jeweils fünfzig Prozent der Fläche einnehmen sollen. Da kann es sich auch empfehlen, teiltransparente Hintergrundgrafiken zu verwenden.
MfG, at
Hallo at.
Hilfreich kann sein
* {border:1px solid red;}
Damit umrahmst Du alle Elemente und bekommst einen guten Eindruck wie diese sich anordnen. Manchmal kann man mit diesem Trick einiges besser Überblicken.Und manchmal sorgt gerade dieser Rand für ungewollte Umbrüche, etwa wenn zwei Flächen nebeneinander dargestellt und jeweils fünfzig Prozent der Fläche einnehmen sollen. Da kann es sich auch empfehlen, teiltransparente Hintergrundgrafiken zu verwenden.
Oder die outline–Eigenschaft.
Einen schönen Donnerstag noch.
Gruß, Ashura
Hallo.
Oder die outline–Eigenschaft.
Stimmt. Aber ich finde es außerdem ganz praktisch, einen Überblick über die Verschachtelung zu haben, und ziehe daher meist die unterschiedlichen Transparenzgrade vor.
MfG, at
Tach,
Im Moz ist es flexibel(wenn ich das richtig sehe). Im IE nicht.
es ist auch in GEcko Browsern nicht flexibel, es wird nur passend zur Schriftgröße gezoomt, das ist zwar für den Anfang ganz nett aber verhilft unter Umständen nur zu unnötigen horizontalen Scrollbalken.
mfg
Woodfighter
Hallo,
Wenn ich mir den IE und MOZ MOZ neu installiere, sind dann automatisch bei beiden die gleichen Einstellungen*hoff* und haben die vom Prinzp aus andere Einstellungen?
Wozu neu installieren? Stell die Schriftgröße anders, wenn dir die aktuelle nicht gefällt.
Bedenke immer: em zu benutzen nimmt dir jegliche Chance, auf die _effektiv_ angezeigte Schriftgröße Einfluss zu nehmen. Das ist allerdings auch Sinn und Zweck der Sache. Das fällt unters Thema Benutzerfreundlichkeit.
Aber vor dem Einsatz von em kommt erstmal der Abschied von der Vorstellung, einen Einfluss darauf zu haben, wie deine Seite bei jemandem aussieht. Ist deine Seite gut gemacht, entscheidet das zu großen Teilen den User selbst.
Gruß,
Philipp
Hallo,
Zum Besipiel das 1em im IE anders bzw, größer dargestellt wird als im Moz. Lässt sich das nur mit Browserweiche beheben(Die ich ohnehin schon für andere Darstellungspürobleme nutze)?
Gerade da liegt der Sinn von em. Willst du es einsetzen, weil du es für sinnvoll hältst, oder weil du glaubst, das müsste so sein, ums richtig zu machen, ohne aber zu wissen, was es wirklich ist?
Gruß,
Philipp
Hi Phil(ipp)
Gerade da liegt der Sinn von em. Willst du es einsetzen, weil du es für sinnvoll hältst, oder weil du glaubst, das müsste so sein, ums richtig zu machen, ohne aber zu wissen, was es wirklich ist?
Weil ich mri damit erhoffe das sich Design und Schrift immer danach anpasst wie der Benutzer seine Größe eignestellt hat.
mfg
Phil
Hi,
Weil ich mri damit erhoffe das sich Design und Schrift immer danach anpasst wie der Benutzer seine Größe eignestellt hat.
Warum willst Du dann ständig Browserweichen einbauen, damit es trotzdem in allen Browsern identisch aussieht? Du widersprichst Dir doch selbst.
cu,
Andreas
Hoi ;)
Weil ich mri damit erhoffe das sich Design und Schrift immer danach anpasst wie der Benutzer seine Größe eignestellt hat.
Jep, und das erreichst du auch, Der Martin hats grad sehr treffen formuliert, 1em ist was der Benutzer als "Normal" empfindet und eingestellt hat. 1.1 em ist 10% größer und dicker, 0.9em sind 90% von dem was der Benutzer als Normal emfpindet. So kannst du sicherstellen, dass das _Verhältnis_ der Schriftgrößen auf deiner Seite erhalten bleibt, ohne gleichzeitig einem Sehbehinderten eine 10px große Schrift aufzuzwingen.
Gruß,
Philipp
Hi,
Zum Besipiel das 1em im IE anders bzw, größer dargestellt wird als im Moz.
wieso glaubst Du, das sei ein Problem? Die zwangsläufig und notwendigerweise(!) auftretenden Unterschiede in der Darstellung bei verschiedenen Clients sind *der* *Grund* für den Einsatz von em.
Lässt sich das nur mit Browserweiche beheben(Die ich ohnehin schon für andere Darstellungspürobleme nutze)?
Da habe ich einen Rat für Dich: Nimm Dir ein Buch. Ein schön dickes. Egal welches, Hauptsache dick. Dann gehst Du vorsichtig mit dem Buch zur Browserweiche und erschlägst sie wie eine fette, ekelhafte Spinne.
Herrje, wieso setzt Du eine *Browserweiche* ein? Es müsste sich eigentlich inzwischen rumgesprochen haben, dass sowas komplett dämlich und völlig ohne Nutzen ist.
Cheatah
Hi.
Herrje, wieso setzt Du eine *Browserweiche* ein? Es müsste sich eigentlich inzwischen rumgesprochen haben, dass sowas komplett dämlich und völlig ohne Nutzen ist.
Argh das bringt mich jetzt völlig aus dem Konzept.
Sagen wir mal im Moz wird 1 em schön dargstellt und im IE schlecht weil es ganz anders ausssieht. Im IE müsste ich 0.75 em benutzen damit es gleich aussieht. Dann lässt sich das nur per Brwoserweiche regeln oder? Wenn ich dann den Brwoser umstelle hat ja jeder Besucher was anderes als ich als Resultat.
mfg
Phil
Hallo,
Sagen wir mal im Moz wird 1 em schön dargstellt und im IE schlecht weil es ganz anders ausssieht.
nein, weil die Default-Schriftgröße in den beiden Browsern unterschiedlich ist. Aber die stellt sich der mündige Benutzer so ein, dass sie für ihn optimal ist.
Wenn ich dann den Brwoser umstelle hat ja jeder Besucher was anderes als ich als Resultat.
Du hast es erfasst! Genau _DAS_ ist der Sinn von benutzerdefinierten Einstellungen. Als Webautor gibst du dann alle Größen nur relativ zu dieser Schriftgröße an, die der Benutzer als "normal" empfindet.
So long,
Martin
Hi,
Sagen wir mal im Moz wird 1 em schön dargstellt und im IE schlecht weil es ganz anders ausssieht. Im IE müsste ich 0.75 em benutzen damit es gleich aussieht.
Es geht ja gerade darum, daß es nicht gleich aussieht.
Stell Dir vor, Du kannst 10px große Schrift gut lesen, also stellst Du bei Dir im Browser 10px als Standard-Schriftgröße ein.
Jemand anderes (kurzsichtig!) kann keine Schrift, die kleiner als 20px ist, lesen, also stellt er bei sich im Browser 25px als Standard-Schriftgröße ein.
Wenn auf Deiner Webseite die Standard-Schrift mit 1em definiert ist, kannst Du sie lesen, denn sie ist 10px groß bei Dir.
Und auch der Kurzsichtige kann die Seite lesen, denn bei ihm wird die Schrift mit 25px dargestellt, so daß er sie lesen kann.
Hättest Du dafür gesorgt, daß die Seite beim Kurzsichtigen identisch wie bei Dir dargestellt wird, bekäme der Kurzsichtige die Schrift in 10px Größe - er sähe dann nur unlesbares Zeugs.
Dann lässt sich das nur per Brwoserweiche regeln oder?
Nein, immer noch nicht.
Wenn ich dann den Brwoser umstelle hat ja jeder Besucher was anderes als ich als Resultat.
Das ist doch das Ziel. Jeder Besucher bekommt etwas, was er lesen kann.
cu,
Andreas
Hi
Das ist doch das Ziel. Jeder Besucher bekommt etwas, was er lesen kann.
Aber was ist dann zum Beispiel wenn die Schrift dnn zu groß ist fürs Design? ALso muss das design doch irgendwie mitwachsen oder?
mfg
Phil -.- *langsam sehr sehr verzweifelt*
Hi,
Das ist doch das Ziel. Jeder Besucher bekommt etwas, was er lesen kann.
Aber was ist dann zum Beispiel wenn die Schrift dnn zu groß ist fürs Design?
Dann ist das Design untauglich.
ALso muss das design doch irgendwie mitwachsen oder?
Richtig.
cu,
Andreas
ALso muss das design doch irgendwie mitwachsen oder?
Richtig.
Argh und wie erreichich das?
Und was ist wenn folgendes ist:
Ich habe das komplette Design und den Ihalt mit em formatiert.
Im Moz sieht es gut aus. Dann öffne ich es mit dem IE und es sieht total komisch aus. Dann hab ich doch eigndl. ALLES mit em gemacht und es sollte sich vergrößern und verkleinern je nach Wunsch.
mfg
Phil
Hi,
ALso muss das design doch irgendwie mitwachsen oder?
Richtig.
Argh und wie erreichich das?
Indem Du auch die Breiten - sofern überhaupt erforderlich - in em angibst.
Ich habe das komplette Design und den Ihalt mit em formatiert.
Im Moz sieht es gut aus. Dann öffne ich es mit dem IE und es sieht total komisch aus.
Dann hast Du vielleicht einige Fehler eingebaut oder die Eigenarten des IE - besonders im quirks mode - nicht berücksichtigt. Vielleicht hast Du aber auch im IE den Schriftgrad nicht auf "normal" stehen - dann darfst Du Dich über eine größere oder kleinere Schrift bei em nicht wundern. Es ist gar nicht so selten, dass IE-User ihren Schriftgrad unbewußt verstellen und das nicht merken bzw. es erst auf Seiten auffällt, die die Schritgröße nicht in px angeben.
freundliche Grüße
Ingo
Hello out there!
Im Moz sieht es gut aus. Dann öffne ich es mit dem IE und es sieht total komisch aus.
Belässt du IEs im Quirks-Modus? [http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch]
See ya up the road,
Gunnar
Hi,
Das ist doch das Ziel. Jeder Besucher bekommt etwas, was er lesen kann.
Aber was ist dann zum Beispiel wenn die Schrift dnn zu groß ist fürs Design? ALso muss das design doch irgendwie mitwachsen oder?
Da tut's doch auch. Wenn du ALLES in em festlegst, auch höhe und breite, dann passt sich auch das ganze Layout an die Größeneinstellung an. Ich möchte jetzt keine Eigenwerbung machen, aber ich glaub ich kann das dir am Besten verdeutlichen, wenn du mal meine Webseite besuchst. Hier kannst du beliebig an der Schriftgröße rumdrehen. Das Layout (vor allem die Navi und die Maximalbreite) wächst ja nach zoom mit (der zoom wirkt sich in diesem Fall genauso aus, wie eine Änderung der Schriftgröße).
Natürlich solltest du auch nicht das gesamte Layout in em definieren, sondern, wenn es möglich ist, die Blöcke einfach die volle Breite einnehmen lassen.
Einen schönen Sonntag noch!
Hi there,
Aber was ist dann zum Beispiel wenn die Schrift dnn zu groß ist fürs Design? ALso muss das design doch irgendwie mitwachsen oder?
Wenn es halbwegs normal gemacht ist, tut es das auch. Abgesehen davon, ich stell mir bspweise im Mozilla die Schrift mit CTRL+ immer um 2 Grade größer, was glaubst Du, wie wurscht mir Dein Design ist? Entweder ich kann lesen, was auf der Seite ist, oder ich bin weg. Da kannst Du hundertmal irgendwelche Pixel abzählen, es kommt fast immer nur auf den Inhalt an. Und wenn ich den schwer oder gar nicht lesen kann, dann hab ich Dein Design schon vergessen, noch ehe ich irgendeinen Button zum Verlassen Deiner Seite gedrückt habe.
Das kommt hauptsächlich aus den krausen Vorstellungen irgendwelcher Werbefuzzies, die meinen, eine Seite müßte immer genauso aussehen wie die Prospekte und Flyer, die sie designen. Daher auch aus der Ecke diverse Wahnideen, sämtliche Inhalte nur mehr mit PDF-Dateien darzustellen. Sorry, ich schwiff ab;)
Hi,
Abgesehen davon, ich stell mir bspweise im Mozilla die Schrift mit CTRL+ immer um 2 Grade größer,
Wäre es da nicht einfacher, die Default-Schriftgröße hochzusetzen, statt immer 2mal Ctrl+ zu drücken?
cu,
Andreas
Hi there,
Wäre es da nicht einfacher, die Default-Schriftgröße hochzusetzen, statt immer 2mal Ctrl+ zu drücken?
Theoretisch ja. Aber manchmal häng ich so nah vorm Schirm, daß mich daß dann wieder stört. Egal, besser wäre es, man sähe gut...
Hallo.
Sorry, ich schwiff ab;)
Macht nichts, schwofen rockt.
MfG, at
hallo Cheatah,
Wenn Du irgendwo auf Probleme stößt, solltest Du diese beschreiben, anstatt zu propagieren, es gäbe ein grundsätzliches Problem, bei dem auf grundsätzliche Weise geholfen werden könnte.
Das ist zwar insofern wahr, als der OP (noch) kein "grundsätzliches Problem" im Umgang mit den Maßeineiten beschrieben konnte, aber es gibt ein solches grundsätzliches Problem.
Die Maßeinheit em skaliert. Das ist gut und in fast allen Fällen ausreichend. Nur klappt es genau dann _nicht_, wenn man gleiche Elemente (bei denen das erlaubt ist) verschachtelt. Ein Beispiel: Wenn du in deiner CSS für das HTML-Element <li> eine Größenangabe von 1.1 em für die Schrift vorgibst, danach aber Listen in der Form
<ul>
<li>
<ul>
<li>
[...]
</li>
</ul>
<ul>
verschachtelst, ist auf einmal die "innere Liste" mit deutlich kleinerer Schriftart versehen. Je tiefer die Verschachtelung geht, desto zwergenhafter wird die Schrift. Und es wird dir bekannt sein, daß an solchen Stellen mancher ins Stolpern (und auch heftig ans Fluchen) geraten wird.
Eventuell sollte man hier mit einer Erklärung, warum das so ist und wie das beherrscht werden kann, ansetzen.
Cheatah
Grüße aus Berlin
Christoph S.
Hallo Christoph.
[…] Ein Beispiel: Wenn du in deiner CSS für das HTML-Element <li> eine Größenangabe von 1.1 em für die Schrift vorgibst, danach aber Listen […] verschachtelst, ist auf einmal die "innere Liste" mit deutlich kleinerer Schriftart versehen.
Das würde mich doch sehr wundern.
Einen schönen Sonntag noch.
Gruß, Ashura
habe d'ehre Ashura
[…] Ein Beispiel: Wenn du in deiner CSS für das HTML-Element <li> eine Größenangabe von 1.1 em für die Schrift vorgibst, danach aber Listen […] verschachtelst, ist auf einmal die "innere Liste" mit deutlich kleinerer Schriftart versehen.
Das würde mich doch sehr wundern.
Dem ist aber so. Es gab mal fuer das Forum hier einen Feldversuch mit em, sah abenteuerlich aus.
man liest sich
Wilhelm
hallo Wilhelm,
Es gab mal fuer das Forum hier einen Feldversuch mit em, sah abenteuerlich aus.
Das hat dazu geführt, daß es in http://src.selfhtml.org/selfhtml.css (und seinen Verwandten) immer noch sehr viel mehr "px" als "em" gibt.
Prinzipiell ist es trotzdem richtig, zu em zu raten. Ich wollte nur auf die möglichen Stolperstellen aufmerksam machen.
Grüße aus Berlin
Christoph S.
Hallo Wilhelm.
[…] Ein Beispiel: Wenn du in deiner CSS für das HTML-Element <li> eine Größenangabe von 1.1 em für die Schrift vorgibst, danach aber Listen […] verschachtelst, ist auf einmal die "innere Liste" mit deutlich kleinerer Schriftart versehen.
Das würde mich doch sehr wundern.
Dem ist aber so.
Der Martin hat unverblümt zum Ausdruck gebracht, was ich meinte.
Einen schönen Sonntag noch.
Gruß, Ashura
hallo Ashura,
Der Martin hat unverblümt zum Ausdruck gebracht, was ich meinte.
Hat er, und er hat auch recht. Das ändert nichts daran, daß es bei der Verschachtelung von HTML-Elementen, die per CSS mit einer em-Größenangabe formatiert werden, durchaus ein "grundsätzliches Problem" geben kann.
Grüße aus Berlin
Christoph S.
Hallo Christoph,
Wenn du in deiner CSS für das HTML-Element <li> eine Größenangabe von 1.1em für die Schrift vorgibst, danach aber Listen in der Form
<ul>
<li>
<ul>
<li>
[...]
</li>
</ul>
<ul>
verschachtelst, ist auf einmal die "innere Liste" mit deutlich kleinerer Schriftart versehen.
Du meinst *größer*, nicht kleiner?
1.1em > 1em -> Vergrößerung um 10%
Eventuell sollte man hier mit einer Erklärung, warum das so ist und wie das beherrscht werden kann, ansetzen.
Guter Gedanke.
So long,
Martin
hallo,
Du meinst *größer*, nicht kleiner?
1.1em > 1em -> Vergrößerung um 10%
öhm, ja, natürlich. Ich habe schnell mal eine meiner CSS zum Vergleich herangezogen, da steht allerdings 0.9 em drin, und das hab ich fürs posting mal eben zu 1.1 verändert.
Eventuell sollte man hier mit einer Erklärung, warum das so ist und wie das beherrscht werden kann, ansetzen.
Guter Gedanke.
Mach mal *g*
Das Thema wäre sogar einen TuT-Artikel wert. Aner ich habe schon so viele <I> herumliegen, daß ich für derlei Krimskrams derzeit nicht zuständig bin.
Grüße aus Berlin
Christoph S.
Hi,
Eventuell sollte man hier mit einer Erklärung, warum das so ist und wie das beherrscht werden kann, ansetzen.
Guter Gedanke.Mach mal *g*
Das Thema wäre sogar einen TuT-Artikel wert.
ach was?
li li {font-size:1em;}
Was sollte man noch dazu schreiben, um den Aetikel wenigstens ein bisschen zu füllen? ;-)
freundliche Grüße
Ingo
habe d'ehre Ingo
li li {font-size:1em;}
Hmhh, wann taucht ein <li> innerhalb <li> auf? Muesste es nicht
li ul li heissen?
man liest sich
Wilhelm
Hallo Wilhelm.
li li {font-size:1em;}
Hmhh, wann taucht ein <li> innerhalb <li> auf?
Obiger Selektor sagt nicht, dass das zu selektierende li-Element *direkt* innerhalb eines li-Elementes auftauchen musst.
Du meinst vermutlich folgendes:
Augeli>li {
font-size:1em;
}
Dieser Selektor kann zumindest in (X)HTML niemals auf Basis von validem Code aktiv werden.
Einen schönen Montag noch.
Gruß, Ashura
habe d'ehre Ashura
Hallo Wilhelm.
li li {font-size:1em;}
Hmhh, wann taucht ein <li> innerhalb <li> auf?
Obiger Selektor sagt nicht, dass das zu selektierende li-Element *direkt* innerhalb eines li-Elementes auftauchen musst.
Dann ist mein "Wissensstand" falsch. Was impliziert er dann?
man liest sich
Wilhelm
Hallo Wilhelm.
li li {font-size:1em;}
Hmhh, wann taucht ein <li> innerhalb <li> auf?
Obiger Selektor sagt nicht, dass das zu selektierende li-Element *direkt* innerhalb eines li-Elementes auftauchen musst.
Dann ist mein "Wissensstand" falsch. Was impliziert er dann?
Er sagt: selektiere ein li-Element welches sich, beliebig verschachtelt, in einem li-Element befindet.
<ul>
<li id="foo">
<ul>
<li id="bar"></li>
</ul>
</li>
</ul>
Hier befindet sich also li#bar innerhalb von li#foo, obiger Selektor würde also li#bar selektieren. Dass sich noch ein ul-Element dazwischen befindet, spielt hier keine Rolle.
Einen schönen Montag noch.
Gruß, Ashura
habe d'ehre Ashura
li li {font-size:1em;}
Dann ist mein "Wissensstand" falsch. Was impliziert er dann?
Er sagt: selektiere ein li-Element welches sich, beliebig verschachtelt, in einem li-Element befindet.
Wieder was gelernt. Danke.
Es ist nur schade, dass ich den Thread mit dem Versuch der SELFFORUM-Umstellung auf em nicht mehr finde. Die Suche spuckt mit meinen Parametern nichts aus. Da waren so etliche CSS-"Gurus" am Werk und die <li> wurde von Ast zu Ast kleiner.
man liest sich
Wilhelm
Hallo
Es ist nur schade, dass ich den Thread mit dem Versuch der SELFFORUM-Umstellung auf em nicht mehr finde. Die Suche spuckt mit meinen Parametern nichts aus. Da waren so etliche CSS-"Gurus" am Werk und die <li> wurde von Ast zu Ast kleiner.
Zumindest der Text zu der Schriftgrößeneinstellung in den Benutzereinstellungen des Forums ist davon übriggeblieben. Ausschließlich absolute Einheiten.
<zitat>(Angabe in den Größen px, pt, mm, cm, pc oder in)</zitat>
Früher wurde (wenn ich mich nicht irre) zusätzlich noch, mit Beispielbild des von dir genannten Effekts, explizit darauf hingewiesen, keine relativen Einheiten zu verwenden.
Tschö, Auge
habe d'ehre Auge
wenn man einen em-Wert als Schriftgroesse eingibt. :-)
man liest sich
Wilhelm
Hallo.
Es ist nur schade, dass ich den Thread mit dem Versuch der SELFFORUM-Umstellung auf em nicht mehr finde. Die Suche spuckt mit meinen Parametern nichts aus. Da waren so etliche CSS-"Gurus" am Werk und die <li> wurde von Ast zu Ast kleiner.
Das kann ja nur vorkommen, wenn man einen kleinen Wert als 1em verwendet. Und das machr man ja auch nicht.
MfG, at
Hi,
Er sagt: selektiere ein li-Element welches sich, beliebig verschachtelt, in einem li-Element befindet.
Ganz genau. Und damit wird eine ggfls. von 1em abweichende font-size in beliebiger Verschachtelung aufgehoben. Für andere verschachtelbare Elemente wäre das gleiche anzugeben, z.B. auch td td {font-size:1em;}.
Oder wenn Du einfach verschachtelte li etwas kleiner als normal, weiter verschachtelte li's jedoch nicht noch kleiner darstellen willst, dann definierst Du
li li {font-size:0.93em;}
li li li {font-size:1em;}
Wenn Dir freilich ul li ul li ul li {} mehr zusagt... ;-)
freundliche Grüße
Ingo
hallo Ingo,
Das Thema wäre sogar einen TuT-Artikel wert.
ach was?
li li {font-size:1em;}
Was sollte man noch dazu schreiben, um den Aetikel wenigstens ein bisschen zu füllen? ;-)
Das, was jetzt hier wenigstens ansatzweise diskutiert wird. Daß man eben
li li {font-size:1em;}
schreiben oder auch ein > benutzen könnte, und daß da irgendwas "Selektor" heißt, steht bisher in _dieser_ Form nicht in SELFHTML (übrigens auch nicht in der DEV-Version 8.1.2). Der Begriff "Selektor" kommt im Text natürlich ganz beiläufig mehrfach vor und kann über Olivers Suchmaschine auch gefunden werden. Aber da TuTs nun einmal "ergänzendes Wissen" vermitteln sollen, wärs schon ganz gut, gerade solche "Anwendungsbeispiele" da mal zu erläutern und systematisch zu bündeln. Ein TuT-Artikel muß ja nicht voluminös ausfallen - er muß nur das erklären, was es in SELFHTML eben _noch nicht_ gibt (oder nicht in dieser Form), worauf hier im Forum aber häufiger verwiesen wird.
Grüße aus Berlin
Christoph S.