max-grossmann.de
- Ersteller maxibimbi
- Erstellt am
- Status
E
Efchen
Guest
Weil Du eine andere Schriftgröße eingestellt hast! Änder die mal bei Dir und Du wirst sehen, was ich meine. Du musst die nichtmal in den Einstellungen ändern, so wie ich, kannst ja im FF auch direkt mit CTRL-Minus ausprobieren.
Frohe Weihnachten!
-Efchen
Körnerbrötchen
Aktives Mitglied
Und welchen?
Das Apostroph ist falsch, auch wenn anderes gesagt wurde. Zumindest habe ich noch keinen Gegenteiligen Beweis dafür gefunden, dass solche Anglizismen bei uns jetzt erlaubt sind. Das Komma ist auch falsch. Ein "und" verbindet zwei Hauptsätze. Kommas nutzt man zum Trennen von Nebensätzen oder für Aufzählungen. Ich glaube du willst hier eine Denkpause ausdrücken. Diese erzeugt man jedoch durch einen Bindestrich. Ob das sinnvoll ist, ist aber eine andere Frage. Richtig wäre also:
Viele Grüße
E
Efchen
Guest
Wenn Du Deine Schrift verkleinerst, wird Dir das auch passieren! Das kann nicht sein, dass Du das nicht siehst...aber wenn Du meinst, mach ich nen Screenshot...dauert aber...
E
Efchen
Guest
Hier mein Screenshot:
http://www.efchen-systems.de/tmp/max.jpeg
Ja stimmt, das kann mit der Option zusammenhängen. Die gibts aber auch erst in FF3. Aber ich sagte ja auch Schriftgröße ändern, nicht zoomen :-)
http://www.efchen-systems.de/tmp/max.jpeg
Ja stimmt, das kann mit der Option zusammenhängen. Die gibts aber auch erst in FF3. Aber ich sagte ja auch Schriftgröße ändern, nicht zoomen :-)
maxibimbi
Neues Mitglied
Hi,
danke Efchen für den Screenshot, werde mal sehen! Das sind ja schon gravierende Fehler und die Besucher will ich ja eigentlich nicht verärgern. Danke!
@Körnerbrötchen: Danke für die Erklärung - nun ist es behoben.
Thx!
Gruß
So, habe noch eine ganze Menge geändert, wer möchte nochmal drauf sehen?
Das Problem mit der Schriftgröße ist allerdings noch nicht behoben. Muss mal sehen, wie ich das ändere.
Danke!
Gruß
danke Efchen für den Screenshot, werde mal sehen! Das sind ja schon gravierende Fehler und die Besucher will ich ja eigentlich nicht verärgern. Danke!
@Körnerbrötchen: Danke für die Erklärung - nun ist es behoben.
Thx!
Gruß
So, habe noch eine ganze Menge geändert, wer möchte nochmal drauf sehen?
Das Problem mit der Schriftgröße ist allerdings noch nicht behoben. Muss mal sehen, wie ich das ändere.
Danke!
Gruß
Zuletzt bearbeitet von einem Moderator:
Hallo maxibimbi,
es ist eine fürs Web nicht geeignete (und dennoch sehr häufig verwendete) Vorgehensweise, Text auf zusammengesetzte Hintergrundbilder zu schreiben. Das Problem dabei ist offensichtlich: Statische Hintergrundbilder haben ihre festen Abmessungen in Pixeln. Passt der Benutzer die Textgröße oder Zeilenlänge etc. seinen Bedürfnissen an, bleibt das Hintergrundbild starr. Damit wird das ganze Design zerstört, wenn nicht sogar die Seite unbenutzbar.
Die Lösung: Flexible Layouts mit CSS und zusammengesetzte Hintergrundbilder bei Bedarf
Sie besteht aus einer Überschrift ersten und einer Überschrift zweiten Grades. Der HTML-Code ist also leicht geschrieben:
Das wars auch schon mit HTML-Code für den Kopfbereich. wenden wir uns nun der Formatierung zu. Da Farbverläufe stets eine größere Herausforderung darstellen und meistens Kompromisse erfordern, formatieren wir das Ganze zunächst ohne den Farbverlauf rechts und kümmern uns später darum.
Folgende Angaben sind notwendig für das gewünschte Aussehen (zur Vollständigkeit nenne ich alle wichtigen Angaben, auch wenn Du sie schon gemacht hast:
Der jetzt noch anstehende Farbverlauf erfordert eine Umstellung. Fest steht, dass dafür kein img-Tag hinzugefügt werden sollte, weil kein Inhalt dazukommt.
Eine Variante wäre ein absolut positionierter Container mit halbtransparenter PNG-Grafik als Hintergrund, der über dem Kopfbereich an der rechten Seite positioniert wird und den Farbverlauf erzeugt. Da das aber einige Tricks mit dem IE6 erfordert und wir nach Möglichkeit auch ohne diesen zusätzlichen Container auskommen wollen, ist Folgendes wahrscheinlich die bessere Wahl:
Wobei ich mich nichtmal festlegen möchte, ob ich die Variante mit Farbverlauf wirklich schöner finde.
Ich hoffe, ich konnte Dir einen kleinen Leitfaden zur Lösung des Problems geben.
Gruß
Junny
es ist eine fürs Web nicht geeignete (und dennoch sehr häufig verwendete) Vorgehensweise, Text auf zusammengesetzte Hintergrundbilder zu schreiben. Das Problem dabei ist offensichtlich: Statische Hintergrundbilder haben ihre festen Abmessungen in Pixeln. Passt der Benutzer die Textgröße oder Zeilenlänge etc. seinen Bedürfnissen an, bleibt das Hintergrundbild starr. Damit wird das ganze Design zerstört, wenn nicht sogar die Seite unbenutzbar.
Die Lösung: Flexible Layouts mit CSS und zusammengesetzte Hintergrundbilder bei Bedarf
- Jedem Element wird nach Möglichkeit sein eigenes Aussehen zugeschrieben (soll heißen, nicht dem body den zusammengesetzten Hintergrund der gesamten Seite zu geben).
- Wenn möglich, werden keine (Hintergrund-) Bilder, sondern HTML-Texte und CSS-Angaben wie color, background-color, border etc. verwendet.
- Schriftgrößen werden in em (% gingen auch) angegeben. Dabei sollte Fließtext möglichst 1em der Browsereinstellung groß sein. Abstände von Texten sollten möglichst entsprechend der Schriftgröße mitwachsen.
- Der Inhalt bekommt die semantisch bestmögliche Auszeichnung (Überschriften, Listen, Absätze, Tabellen, ...). Dazu gehört auch, dass möglichst nur Bilder per img-Tag eingebunden werden, die zum Inhalt gehören.
- Wo unbedingt notwendig, werden zusammengehörige Blockelemente zur gemeinsamen Formatierung mit Containern gruppiert. Deine Seite braucht nach meiner Einschätzung übrigens keinen einzigen div-Tag. Kann mich aber auch irren.
Sie besteht aus einer Überschrift ersten und einer Überschrift zweiten Grades. Der HTML-Code ist also leicht geschrieben:
PHP:
<h1>Max Großmanns Webseite</h1>
<h2>»Und ich sage bewusst Layout und nicht Design!« — 34 Artikel verfügbar</h2>Folgende Angaben sind notwendig für das gewünschte Aussehen (zur Vollständigkeit nenne ich alle wichtigen Angaben, auch wenn Du sie schon gemacht hast:
- Abstände margin und padding von body, h1 und h2 vorerst auf 0
- Schriftart mit mehreren Alternativen im body (wird vererbt)
- Schriftgröße font-size im Body auf 100.01%, da einige Browser bei 100% oder 1em Probleme haben
- Schriftgröße für h1 und h2 in em festlegen. 1em entspricht dabei der Schriftgröße im Elternelement, 1.5em bedeutet 1,5-mal so groß usw.
- Sonstige gewünschte Schriftformatierung festlegen
- Gewünschte Schriftfarben color und Hintergrundfarben background-color für h1 und h2 festlegen
- Die einfarbige Linie zwischen den beiden Überschriften kannst Du ganz einfach mit border-bottom für h1 erreichen
- Die Linie unter dem Kopfbereich ist mehrfarbig, also würde ich das mit einem Hintergrundbild
realisieren, das unten positioniert und in x-Richtung wiederholt wird.
- Abschließend werden die gewünschten Innenabstände padding angegeben. Solche, die mit der Schriftgröße wachsen sollen, in em und solche, die fest bleiben sollen, in px. 1em entspricht dabei der Höhe des großen M in diesem Element und berechnet sich aus dem Produkt der Schriftgröße aller Vorfahrenelemente und dem eigenen Element. Klingt erstmal kompliziert, ist aber ganz einfach, wenn man es einmal verstanden hat. Zur Gewöhnung helfen vielleicht Kommentare in den CSS-Angaben.
Der jetzt noch anstehende Farbverlauf erfordert eine Umstellung. Fest steht, dass dafür kein img-Tag hinzugefügt werden sollte, weil kein Inhalt dazukommt.
Eine Variante wäre ein absolut positionierter Container mit halbtransparenter PNG-Grafik als Hintergrund, der über dem Kopfbereich an der rechten Seite positioniert wird und den Farbverlauf erzeugt. Da das aber einige Tricks mit dem IE6 erfordert und wir nach Möglichkeit auch ohne diesen zusätzlichen Container auskommen wollen, ist Folgendes wahrscheinlich die bessere Wahl:
- Wir machen im Prinzip alles wie ohne Farbverlauf, nur dass wir die horizontalen Linien erstmal weglassen. Durch Angabe von Hintergrundfarben etc. stellen wir sicher, dass die Darstellung auch bei ausgeschalteten Hintergrundbildern einigergermaßen übereinstimmt.
- Jetzt kommt eine kleine Unsauberkeit: Wir erstellen sehr große Hintergrundbilder für h1 und h2, die an der rechten Seite den gewünschten Farbübergang und unten jeweils die abschließende Linie enthalten.Hintergrundbild für h1
Hintergrundbild für h2
Diese Bilder positionieren wir in der rechten unteren Ecke der beiden Elemente und geben zur Sicherheit an, dass sie nicht wiederholt werden sollen.
Wobei ich mich nichtmal festlegen möchte, ob ich die Variante mit Farbverlauf wirklich schöner finde.
Ich hoffe, ich konnte Dir einen kleinen Leitfaden zur Lösung des Problems geben.
Gruß
Junny
Zuletzt bearbeitet:
Hallo,
die Überschriften oben sind schon deutlich besser: Sie sind als solche ausgezeichnet und die Schrift bleibt auch vergrößert lesbar. Kleine Schönheitsfehler sind der untere Rand, der an seiner Stelle bleibt (weil er dem body zugewiesen ist) und der Farbverlauf rechts, der ebenfalls seine Größe nicht verändert.
Außerdem müsste die Überschrift der jeweiligen Unterseite jetzt eine dritten Grades sein, weil sie nicht gleichberechtigt mit der im Seitenkopf ist.
Gruß
Junny
die Überschriften oben sind schon deutlich besser: Sie sind als solche ausgezeichnet und die Schrift bleibt auch vergrößert lesbar. Kleine Schönheitsfehler sind der untere Rand, der an seiner Stelle bleibt (weil er dem body zugewiesen ist) und der Farbverlauf rechts, der ebenfalls seine Größe nicht verändert.
Außerdem müsste die Überschrift der jeweiligen Unterseite jetzt eine dritten Grades sein, weil sie nicht gleichberechtigt mit der im Seitenkopf ist.
Gruß
Junny
- Status
