• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Beurteilung Design (Zentrierung, Footer)

Umgekehrt wird ein Schuh daraus. Man weist CSS per HTML zu.

Lieber Tronjer

Hier liegt wohl (?) ein Missverständnis vor (denke ich): Ich meine das Element <html> (daher die Klammern), nicht HTML als Sprache. In manchen Büchern heisst <html> auch Wurzelelement oder Stammelement oder so ähnlich, wenn ich es recht im Kopf habe.

Stichwörter wären hier Browserweichen, Responsive Webdesign, Media Queries und Conditional Comments.

Ja, nur möchte ich auf all das zumindest dann verzichten , wenn es andere Lösungen gibt.

Wie deine Seite in älteren IE-Versionen aussieht, kannst du mit den Entwicklertools (F12) des Internet Explorers überprüfen.

Das habe ich wirklich nicht gewusst, sofort ausprobiert und funktioniert wunderbar (nur IE 7 und IE 8, IE 6 kann nicht mehr getestet werden - aber IE 6 möchte ich definitiv nicht mehr berücksichtigen müssen). Vielen Dank für diesen Tipp, das hätte ich nie im Leben herausgefunden! Mal etwas Schlaues vom IE! Ich arbeite sonst immer im FF.

Lg Xeno
 
Werbung:
- Dein Body (der hier die Funktion eines DIVs hat, dem man sonst z.B. die id="wrapper" geben würde) ist in der Breite komplett vom Browser abhängig. Das ist mutig, weil sich dessen Inhalt immer der Breite des Browsers anpassen muss. Solange da nur Absätze untereinander stehen und Bilder eigene Zeilen haben, gibt das kein Problem. Aber schon die Navigation verhält sich ggf. etwas unvorhergesehen, wenn der Browser zu schmal wird. Abhilfe könnte hier eine feste Breite liefern (960px ist gerade voll angesagt) oder zumindest eine min-width, die so gewählt ist, dass zumindest die Navigation sauber dargestellt wird. Den hellgrünen Bereich zentrierst du dann, indem ihm margin:0 auto; mitgibst.

Ja, das werde ich nächstens ändern. Du hast nämlich ganz einfach recht. Komisches Verhalten der Navigation konnte ich zwar bisher nur auf Smartphones erkennen (aber immerhin, die Dinger werden ja immer wichtiger), und zwar so, dass die Navi umbrochen wurde (d. h. ein Teil der Items erschienen auf einer zweiten Zeile), was empfindlich stört (nicht einmal nur optisch, sondern auch noch funktional, weil dann gar nicht mehr klar ist, was jetzt Oberpunkt zu was ist).

(Für den IE6 brauchst du dann im übergeordneten Bereich ein text-align:center; das du im Bereich selbst wieder aufheben musst. [text-align:left;])

Ich erlaube mir den IE 6 zu ignorieren. Ich weiss, dass das ein Vollprofi (noch) anders macht, aber mit einem Anteil in deutschsprachigen Raum von deutlich hinter dem Opera (alle Versionen von dem!) ist das meiner Meinung nach für eine Homepage dieser Art vertretbar. In China soll IE 6 noch um die 10 Prozent Anteil haben, aber ich kann mit hoher Wahrscheinlichkeit, die an Sicherheit grenzt, ausschliessen, dass Millionen von Chinesen auf meine Seite zugreifen.

Ob das alles auch funktioniert, wenn man einen Body in einem gestylten html plaziert, weiß ich aber nicht. Sonst macht man das so:
Code:
* {margin:0; padding:0}
html {
  height:100%
}
body {
  background-color:#008000;
  height:100%
  text-align:center /*für IE6*/ 
  width:100%;
}
#wrapper {
  background-color:#B4DC00;
  margin:0 auto;
  text-align:left; /* für IE6 */
  width:960px;
}

Danke für diese umfassende Hilfestellung, auch für den Code. Ich werde es bald testen.

Lg Xeno
 
[...]

Den Kommentar zu Safari verstehe ich schlicht nicht, oder anders: Ich sehe auf dem Screenshot nichts Falsches. Meinst Du mit "Rand" den hellgrünen Bereich zwischen der Navi und dem Rest? Das ist gewollt *duck*. Vielleicht reden wir aber da aneinander vorbei. Also gemäss Screenshot macht Safari (wo ich nur die mobile Version auf iPhone 4S getestet habe) das, was alle anderen auch und was der Künstler wollte...

Lg Xeno

Naja nein, ich meine den kleinen hellgrünen strich, links (und rechts) am Rand des Zwischenraumes, der Content und Navi trennt, und über der Navigation. Auf dem Screenshot sieht man es leider kaum, weil das Script hier im Forum es extrem komprimiert...

Da ich mich vor ein paar Tagen selbst mit diesem Problem herumgeplagt habe, und auch in deiner formatierung.css keine Angabe gefunden habe, die einen hellgrünen Rand erklären würde, Dachte ich du hättest selbiges Problem.

Naja, ich gucke das gleich nochmal am PC an. Und schneide den Screenshot so zu, dass man auch erkennen kann was ich meine.

Oliver
 

Anhänge

  • Foto-06.10.12-18-46-44.jpg
    Foto-06.10.12-18-46-44.jpg
    5,8 KB · Aufrufe: 6
Zuletzt bearbeitet:
Werbung:
Lieber sOliver

Ja, jetzt sehe ich, was Du meinst. Das ist natürlich eindeutig ein Fehler. Er tritt bei IE7-9, Chrome und FF nicht auf.

Was zum vornherein auffällt, ist, dass die fragliche Linie genau "zwischen" <html> und <body> steht. Das kann als Hinweis interpretiert werden, dass die Idee, direkt <html> direkt CSS-Eigenschaften zuzuweisen, möglicherweise eben doch nicht für alle Browser geht. Eine entsprechende Vermutung hat schon bodil weiter oben geäussert, er rein theoretisch (ohne ein konkretes Browserproblem anzuführen).

Die Behebung, wenn denn das wirklkich die Ursache des Problems ist, würde bedeuten, die (üblichere) Zuweisung auf <body> statt <html> und auf ein <div> statt <body> zu wählen.

Auf welcher Safari-Version hast Du getestet? Safari 5 könnte ich ja für Windows downloaden zum Testen (Safari 6 gibt's noch nicht für Win).

Lg Xeno
 
Hey,

das ist der iOs Safari (iPad 5.1.1). Das Problem ist allerdings bekannt und lässt sich wohl recht einfach beheben. (z.B. KLICK)

Oliver
 
- In einem kurzen Test fand ich das Dunkelgrün des Hintergrundes (#008000) als Farbe für die bisher hellblauen Links besser. Das Weiß der Navi gefällt mir auch nicht, da habe ich aber gerade auch keine zündenede Idee. Das »Gelb« der Fußzeile? Bestehst du denn auf das Dunkelgrün außenrum? Ist keine »Partei-Farbe« (wie ich gerade festgestellt habe) und macht das ganze sehr düster und schwer - obwohls ne schöne Farbe ist. Auf der von dir verlinkten Seite Grnliberale Partei Emmental ist viel mehr Weiß, ein helles Grau ... das wirkt zugänglicher und weniger streng.

Das Farbkonzept wurde zwischenzeitlich grundlegend geändert, wobei die meisten Deiner Einwände berücksichtigt wurden.

- Deine <h1> benutzen eine zu große Schrift. font-size:1.2em; (=120%) reicht völlig.

Richtig, habe ich soeben geändert.

(alles Meinungen des Laien vom Dienst, unser Ästhetik-Beauftragter hat gerade Urlaub.)

Ich fand Dein umfassendes Posting qualifiziert.

Die Problematik bezüglich Zentrierung (Prozentangaben statt fester Wert) habe ich übrigens, wie von Dir empfohlen, ebenfalls geändert (ohne wesentliche Auswirkung auf die Optik am PC, sollte aber Störungen in der Darstellung der Navi auf Smartphones beseitigen).

Lg Xeno
 
Werbung:
Ich fands besser, als das Bild oben in der Mitte war, so sieht es richtig Durcheinander aus. Aber die Farben hast du gut hingekriegt! ;)
Mit dem Durcheinander hast du in gewisser Weise recht. Aber wenn wir das ganze jetzt mal typographisch (das Schriftbild betreffend) betrachten, sollte man die Kombination von linksfließendem Text und zentriertem Text den Profis überlassen, die beides so kombinieren können, dass es passabel aussieht. Hier wirkt die Kombination nicht gut. Weder bei der Haupt-Überschrift noch beim Bild. Recht hast du jetzt insofern, als dass das Bild diese Senkrechte, an der der Text links beginnt, etwas ungünstig durchbricht. So richtig oben steht das Bild nicht. So richtig von Text umschlossen ist es auch nicht.
Ausprobieren könnte man jetzt, ob es besser wirkt, wenn das Bild ganz oben steht oder wenn es erst auf der Höhe von »Über mich« beginnt. Auf beiden Höhen kann ich mir das Bild grundsätzlich auch rechts vorstellen. Rechts hätte es den Vorteil, dass es den Flattersatz (Linksbündiger Text der nach rechts ausflattert) nicht so stört. Sitzt es ganz oben rechts in der Ecke, könnte es dem Textbereich sogar visuell zu einer Rechteckform verhelfen, während es tiefer vielleicht etwas verloren wirkt – müsste man ausprobieren.
Apropos Typographie:
Im css habe ich gesehen, dass weder Schriftgröße noch -farbe definiert sind. Das ist mutig, weil du nie weißt, welche Voreinstellungen in so einem Browser vorhanden sind. (Die Möglichkeiten der Werkseinstellungen der Browser sind überschaubar, aber die lassen sich auch vom User ändern.)
Jetzt liefert schwarz auf weiß sicher den denkbar besten Kontrast, aber genau der kann auf die Dauer etwas anstrengend sein, weshalb ich zu beihnahe schwarzem Text in Dunkelgrau (#333333) raten würde. Das wirkt harmonischer.
Die Schriftgröße finde ich übertrieben. Das mag lesefreundlich sein, gerade mit Blick auf Menschen mit Sehbehinderungen, für mich (< 1 Dioptrien) wirkt es aber auf den ersten Blick eher wie eine Seite für Grundschüler, die bei kleinerem Text leicht die Zeile verlieren. (Auch der Vergleich mit anderen professionellen Seiten im Web zeigt: Man schreibt heutzutage kleiner!) Ich würde (wärs meine Seite) für den Body eine Schriftgröße von 12px festlegen, alle anderen Schriftgrößen basieren dann darauf und können (für mein ästhetisches Empfinden) entsprechend bleiben. Gleichzeitig würde ich den Zeilenabstand erhöhen:
Code:
  line-height:1.45em;
wobei em soviel wie die ursprüngliche bzw. umgebende Schriftgröße ist (1.45em = 145%)
 
Du könntest bei deinem Changelog vieleicht eine Tabelle für die Darstellung der einzelnen Änderungen verwenden.
Das würde ordentlicher und vor allem übersichtlicher aussehen ;)

Ja, weiss Gott! Das Chaos entstand, sobald das Layout zentriert wurde (als es noch die ganze Breite füllen "durfte", sah es zumindest auf breiten Bildscirmen noch ganz ordentlich aus). Das gehe ich demnächst an. Hat noch den didaktischen Nebeneffekt, dass ich lerne, wie am Tabellen macht und stylt. Fürs allgemeine Layout habe ich (bewusst) keine Tabellen verwendet, weil man das ja heute aus verschiedenen Gründen nicht mehr macht. Aber für genuin tabellarische Infos sind Tabellen ja da.

Lg Xeno

Edit: "Changelog" wurde wie vorgeschlagen überarbeitet.
 
Zuletzt bearbeitet:
Mit dem Durcheinander hast du in gewisser Weise recht. Aber wenn wir das ganze jetzt mal typographisch (das Schriftbild betreffend) betrachten, sollte man die Kombination von linksfließendem Text und zentriertem Text den Profis überlassen, die beides so kombinieren können, dass es passabel aussieht. Hier wirkt die Kombination nicht gut. Weder bei der Haupt-Überschrift noch beim Bild.

Hm, eigentlich ist überall die Schrift linksbündig mit der einzigen Ausnahme der "Begrüssungsüberschrift" (die ist zentriert). Oder was meinst Du ganz genau mit "Kombination"? Natürlich kann man diese "Begrüssungsüberschrift" auch linksbündig machen, aber das hat mich gestalterisch nicht so überzeugt. Nicht ganz klar ist mir der Zusammenhang zwischen diesem Problem und der Positionierung des Bildes, das sind doch eigentlich zwei voneinander unabhängige Fragen? Kann aber gut sein, dass ich das Votum nicht ganz verstanden habe.

Ich werde zu weiteren Punkten Deines umfangreichen Feddbacks gesondert Stellung nehmen. So oder anders verdanke ich es schon mal!

Lg Xeno
 
Werbung:
Recht hast du jetzt insofern, als dass das Bild diese Senkrechte, an der der Text links beginnt, etwas ungünstig durchbricht. So richtig oben steht das Bild nicht. So richtig von Text umschlossen ist es auch nicht.
Ausprobieren könnte man jetzt, ob es besser wirkt, wenn das Bild ganz oben steht oder wenn es erst auf der Höhe von »Über mich« beginnt.
Auf beiden Höhen kann ich mir das Bild grundsätzlich auch rechts vorstellen. Rechts hätte es den Vorteil, dass es den Flattersatz (Linksbündiger Text der nach rechts ausflattert) nicht so stört. Sitzt es ganz oben rechts in der Ecke, könnte es dem Textbereich sogar visuell zu einer Rechteckform verhelfen, während es tiefer vielleicht etwas verloren wirkt – müsste man ausprobieren.

Du findest nachfolgend drei Varianten gemäss Deinen Vorschlägen:

Variante 1 (links, aber nach dem ersten Absatz): Michael Ritter

Variante 2 (rechts und nach dem ersten Absatz): Michael Ritter

Variante 3 (rechts oben): Michael Ritter

Wenn ich ehrlich bin, gefällt mir keine eindeutig besser als der Istzustand ( Michael Ritter ), am ehesten noch Variante 3. Das liegt an Folgendem: Dummerweise ist das Bild gerade gleich hoch wie der Absatz "Über mich", was sehr stört. Man müsste das Bild verkleinern, um eine bessere Typographie zu bekommen. Würde es dann nicht etwas zu klein werden?

Lg Xeno
 
Hi Xeno!
Im von mir zitierten Text wurde geäußert, dass das Bild besser zentriert in einer eigenen »Zeile« stünde. Mein Statement dazu war, dass auf einer Seite die von linksbündigem Text geprägt ist, weder zentrierte Bilder noch zentrierte Überschriften funktionieren. Die Überschrift war dabei nur ein Nebenaspekt, ich halte sie bei weitem nicht so störend wie eine zentriertes Bild (gegen das auch noch andere gute Gründe sprechen).
Aber auch für die Überschrift gilt: zentriert sieht nicht professionell aus. Das geht über einer Seite im Blocksatz, dann bekommt das ganze so einen Zeitungsstil. Aber mit Flattersatz geht das gar nicht. (Das ist keine Empfehlung für Blocksatz!) Oder findest du hierfür professionelle Beispiele im Netz? ;-)
Grüße!
B.
 
Hi Xeno!
Im von mir zitierten Text wurde geäußert, dass das Bild besser zentriert in einer eigenen »Zeile« stünde. Mein Statement dazu war, dass auf einer Seite die von linksbündigem Text geprägt ist, weder zentrierte Bilder noch zentrierte Überschriften funktionieren. Die Überschrift war dabei nur ein Nebenaspekt, ich halte sie bei weitem nicht so störend wie eine zentriertes Bild (gegen das auch noch andere gute Gründe sprechen).
Aber auch für die Überschrift gilt: zentriert sieht nicht professionell aus. Das geht über einer Seite im Blocksatz, dann bekommt das ganze so einen Zeitungsstil. Aber mit Flattersatz geht das gar nicht. (Das ist keine Empfehlung für Blocksatz!) Oder findest du hierfür professionelle Beispiele im Netz? ;-)
Grüße!
B.

Ah ok, dann war mir der Zusammenhang der Diskussion nicht mehr klar. Ich habe die Überschrift auf der Startseite jetzt linksbündig ausgerichtet bzw. die Zentrierung entfernt. Es gibt sonst auf der ganzen Seite nirgends zentrierte Elemente (Navi ausgenommen).

Ich melde mich dann wieder bezüglich Deiner weiteren Inputs.
 
Werbung:
Hi Xeno!
Dummerweise ist das Bild gerade gleich hoch wie der Absatz "Über mich", was sehr stört. Man müsste das Bild verkleinern, um eine bessere Typographie zu bekommen. Würde es dann nicht etwas zu klein werden?

Webdesing funktioniert üblicherweise anders. Der Kunde bekommt ein CMS und das grafische Konzept, das Bild- und Schriftgrößen festlegt, muss funktionieren, egal wie der Kunde seine Texte ändert.

Deine Anforderungen unterscheiden sich davon. Aber: Gesetzt den Fall, du willst auf Folgeseiten noch mehr Bilder einsetzen (wozu ich dringend raten würde) bekommst du ein Problem, wenn du jedes mal neu über Bildgrößen und Absatzlängen nachdenkst. Natürlich kann man (als Autor) nochmal nen Absatz in den Text kloppen, dass der Text besser ums Bild fließt, oder eben einen Umbruch rausnehmen. Aber im Prinzip sollte die Bildgröße nicht von der gerade vorhandenen Textmenge abhängen.

Viel wesentlicher finde ich, dass der Text (m.E.) noch viel zu groß ist. Ich glaube (mit meinen Laienkenntnissen, die zumindest ich für halbwegs fundiert halte - nicht vergessen!) mit kleinerem Text sieht das alles viel entspannter aus. Der Text, der da dein Bild umfließen soll wird dadurch etwas flüssiger.
 
Zurück
Oben