Zu einem Webseitenentwurf

[TorstenA]

Hallo allerseits,

mir wurde die ehrenvolle Aufgabe zuteil, die Homepage des Chors meiner Schwiegermutter zu überarbeiten, den Entwurf findet ihr hier:

http://www.siechfreds-welt.de/chor/index.html

Hierzu bitte ich um eure Meinung hinsichtlich Benutzbarkeit in verschiedenen Browsern unter verschiedenen Betriebssystemen, Aussehen, Technik und was euch außerdem noch auf- oder missfällt. Ich bitte zu beachten, dass die Links alle noch ins Nichts führen, es geht mir nur um die Frage, ob das Ganze nach eurer Meinung im Ansatz so bleiben kann.

Vielen Dank
Torsten

[patrick]

http://www.siechfreds-welt.de/chor/index.html

also mich irritiert immer ein Hintergrundbild.
Es lenkt vom lesen ab. Mach solch ein Bild lieber oben irgendwo hin.
Zudem würd ich noch ein bischen Farbe reinbringen.
Beim Mozilla siehts gut aus, beim IE hingegegen kommt bei mir rechts noch eine Scrollleiste, also es sind dann rechts 2 Scrollleisten zu sehen.
Aber sonst für eine Chorseite o.k.

;-)
gruß
patrick

[TorstenA]

Hallo patrick,

also mich irritiert immer ein Hintergrundbild.

Meinst du das im Body?

Zudem würd ich noch ein bischen Farbe reinbringen.

Hm, farb- und grafikmäßig habe ich ziemlich strikte Vorgaben, mal sehen, was sich da noch machen lässt.

Beim Mozilla siehts gut aus, beim IE hingegegen kommt bei mir rechts noch eine Scrollleiste, also es sind dann rechts 2 Scrollleisten zu sehen.

Sollte jetzt behoben sein.

Aber sonst für eine Chorseite o.k.

Das freut mich :-)

Grüße
Torsten

[TorstenS]

Hallo Patrick,

Beim Mozilla siehts gut aus, beim IE hingegegen kommt bei mir rechts noch eine Scrollleiste, also es sind dann rechts 2 Scrollleisten zu sehen.

Sollte jetzt behoben sein.

Irgendwie aber doch noch nicht. Habe IE5 + 1152 x 864 Pixel.

Bei mir kommt ein vertikaler und ein horziontaler Balken. Also in der Mitte.
Gruss
TorstenS

[TorstenA]

Hallo Namensvetter,

Irgendwie aber doch noch nicht. Habe IE5 + 1152 x 864 Pixel.

Ja, hatte einen Fehler in den Conditional Comments, der sollte behoben sein.

Bei mir kommt ein vertikaler und ein horziontaler Balken. Also in der Mitte.

In der Mitte bedeutet allerdings, dass der vertikale Scrollbalken das DIV ID="links" betrifft. Unerklärlich :-(

Grüße
Torsten

[patrick]

Irgendwie aber doch noch nicht. Habe IE5 + 1152 x 864 Pixel.

Bei mir kommt ein vertikaler und ein horziontaler Balken. Also in der Mitte.

beim IE 6 waren es rechts 2 Scrollbalken.
Gucks dir auch mal in 800x600 an, sind immer noch um die 25 % aller Surfer und muss auch beachtet werden.
Man sollte eigentlich nie von links nach rechts scrollen müssen!

[Uschi Renziehausen]

Gugugg Torsten,

ich habe es mir jetzt auch angesehen, habe aber auch Probleme mit dem Hintergrundbild, dieweil kurzsichtig. Besonders das helle grau der besuchten Links in der Navi hat nicht genügend Kontrast, und wenn ich mir im Content-Bereich eine normale Schriftgröße vorstelle, ist das auch kritisch.
Vielleicht würde es helfen, wenn es nicht so pixelig oder ein my heller wäre.

Ansonsten wäre es doch vielleicht eine Variante, den eigentlichen Content-Block in zartem glatten altrosa zu halten. Dann ist das Lesbarkeitsproblem aus der Welt.

Außerdem wackelt im IE 6 der Navigationsblock ein Stückchen nach links, wenn man das erste mal über einen Link maust.

Gruß aus Erfurt nach Erfurt von Uschi an den Forumsnachbarn :-))

[TorstenA]

Hallo Uschi ;),

ich habe es mir jetzt auch angesehen, habe aber auch Probleme mit dem Hintergrundbild, dieweil kurzsichtig.

Ich habe es etwas aufgehellt, ist es so besser?

Besonders das helle grau der besuchten Links in der Navi hat nicht genügend Kontrast

Habe ich auch geändert, gleiche Frage wie oben.

Außerdem wackelt im IE 6 der Navigationsblock ein Stückchen nach links, wenn man das erste mal über einen Link maust.

Noch ein IE-Phänomen :-(
Konnte ich bei meinem IE nicht reproduzieren. Welche IE-Version nutzt du?

Gruß aus Erfurt nach Erfurt von Uschi an den Forumsnachbarn :-))

Zurück :-))

Grüße
Torsten

[Uschi Renziehausen]

Ich habe es etwas aufgehellt, ist es so besser?

Von der Lesbarkeit her ja, aber nu ist natürlich irgendwie langweilig geworden. Das scheint mir die Lösung so noch nicht zu sein.

Außerdem wackelt im IE 6 der Navigationsblock ein Stückchen nach links, wenn man das erste mal über einen Link maust.

Noch ein IE-Phänomen :-(
Konnte ich bei meinem IE nicht reproduzieren. Welche IE-Version nutzt du?

6.0.2800.1106 mit SP1 unter Windows 2000

Ich werf mal einen Blick auf deine CSS.

Schönen Bastelsonntag :-))

[Uschi Renziehausen]

Sorry, kleiner Irrtum. Die Navi rutscht nicht nach links, sondern nach rechts. In bestimmter Hinsicht bin ich eben doch ein Weibchen ;-)

[TorstenA]

Hallo Uschi,

Sorry, kleiner Irrtum. Die Navi rutscht nicht nach links, sondern nach rechts.

Habe das gerade im IE6 unter WinXP ebenfalls festgestellt, aber noch keine Erklärung gefunden. Aber ich suche weiter.

Grüße
Torsten

[Uschi Renziehausen]

Guggugs,

ich glaub ich habe den Fehlerteufel. Der kommt mit position: fixed einfach nicht zurande. All die andern Fehlerlein resultieren nämlich auch daraus. Meines Wissens geht das nur unter Einsatz von JS, und dann kommen immer zittrige Navis dabei raus, also lässt man es wahrscheinlich besser ganz. Anbei die Ergebnisse meiner bisherigen Experimente, die dem IE das position: fixed wegnehmen. Getestet unter IE6, Mozilla 1.3 und Opera 7.

core.css (so heisst das teil halt bei mir standardmäßig)
body, p, div, span, td, th, ul, ol, li {
 font-family:Tahoma,Verdana,Arial,sans-serif;
 font-size: 10pt;
}

* html body {overflow: auto}

body {
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 background-image:url(./bgrd.png);
 height: 100%;

}

#links {
 position: fixed;
 margin: 0px 0px 0px 10px;
 width: 200px;
 height: 100%;
 background-image:url(./logo.gif);
 background-repeat:no-repeat;
 background-position:0px 10px;
 padding-top: 180px;
 float: left;
}

#links ul {
list-style-type:none;
margin:0px 0px 1.5em 10px;
}
#links li {
margin:0px 0px 0px 0px;
padding:0.5em 0px 0.5em 0px;
}

#links a {
color:#000;
font-family:Tahoma,Verdana,Arial,sans-serif;
font-size:1.0em;
font-weight:bolder;
text-decoration:underline;
}
#links a:visited {
color:#404040;
}
#links a:hover {
color:#000000;
text-decoration:underline;
background-color:#DFCDB5;
text-decoration: none;
}
#links a:active {
color:#ddddff;
}

#rechts {
 position: absolute;
 top: 0px;
 left: 200px;
}

coreie.css

#links {
 position: absolute;
}
#rechts {
 position: absolute;
}

Den Doctype habe ich auf xhtml gesetzt, hier der code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Gemischter Chor der Wartburgstadt e.V.</title>
<meta name="title" content="Gemischter Chor der Wartburgstadt e.V." />
<meta name="description" content="Homepage">
<meta name="keywords" content="Gemischter,Chor,Wartburgstadt,Eisenach,Gesang" />
<meta name="author" content="Siechfred" />
<meta name="Content-Language" content="de" />
<meta name="revisit-after" content="1 month" />
<meta name="page-topic" content="Chorgesang">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="SHORTCUT ICON" href="./favicon.ico" />
<link rel="stylesheet" type="text/css" href="./core.css">
<!--[if IE]><link rel="stylesheet" href="coreie.css" type="text/css" id="coreie" media="screen" /><![endif]-->

</head>
<body>
<div id="links">
  <ul>
  <li><a href="#">Startseite</a></li>
  <li><a href="./chor.html">Gemischter Chor</a></li>
  <li><a href="./kleinerchor.html">Kleiner Chor</a></li>
  <li><a href="./chorleiter.html">Chorleiter</a></li>
  <li><a href="./termine.html">Auftritte</a></li>
  <li><a href="./presse.html">Presse</a></li>
  <li><a href="./bilder.html">Bilder</a></li>
  <li><a href="./kontakt.html">Kontakt</a></li>
  <li><a href="./impressum.html">Impressum</a></li>
  </ul>
</div>
<div id="rechts">
  <img id="bild1" src="./logo_voll.gif" alt="Gemischter Chor der Wartburgstadt e.V." title="Gemischter Chor der Wartburgstadt e.V." />
  <img id="bild2" src="./lied.jpg" alt="Die Chorhymne" title="Die Chorhymne" />
  <h1>Vom Fuße der Wartburg kommt unser Chor,<br>wir singen Sopran, Alt, Bass und Tenor.</h1>
  <img id="bild3" src="./wartburg.gif" alt="Die Wartburg" title="Die Wartburg" /><br />
  <img id="bild3" src="./wartburg.gif" alt="Die Wartburg" title="Die Wartburg" />
</div>
</body>
</html>

[TorstenA]

Hallo Uschi,

ich glaub ich habe den Fehlerteufel. Der kommt mit position: fixed einfach nicht zurande.

Ja, das war wohl tatsächlich der Übeltäter. Ich habe es jetzt sozusagen "gefixed" ;)
Vielen Dank für die Arbeit, die du dir gemacht hast.

Grüße
Torsten

[Uschi Renziehausen]

Torsten,

wie sieht die endgültige Lösung nun aus, so altruistisch war das von mir nämlich gar nicht, kriege ich doch nächste Woche eng verwandte Probleme.

Gruß, Uschi

[TorstenA]

Hallo Uschi,

wie sieht die endgültige Lösung nun aus, so altruistisch war das von mir nämlich gar nicht, kriege ich doch nächste Woche eng verwandte Probleme.

Die korrigierte Fassung habe ich vorhin hochgeladen, ich habe mich für die Conditional Comments entschieden, da alle anderen CSS-Definitionen auch im IE 6 funktioniert haben.

Grüße
Torsten

[Detlef G.]

Hallo Torsten

Mir persönlich gefallen die Scrolleisten um die Navigation herum nicht, die zumindest bei jeder Schriftvergrößerung erscheinen.

Sollte sowohl die Breite als auch die Höhe das Browserfenter nicht ausreichen, erscheint der Balken zum Querscrollen am unteren Ende der Seite, nicht am Browserfenster.
Das Problem mit den grauen Balken beim wiederholten scrollen beim Mozilla 1.4 besteht auch noch.

Dann, die Überschrift der Seite ist der Vers? (<H1>)
Die Noten kannst du mit ein bischen Geschick im PNG- oder GIF-Format in besserer Qualität ohne größeren Speicherplatzbedarf speichern.

Vielleicht solltest du auch generell deine CSS-Dateien überarbeiten.
Viele Eigenschaften, sind die Standardeinstellungen, die nicht extra angegeben werden müssen, und viele sind für jedes Element separat angegeben. Schau dir Uschis CSS-Dateien an, wie es übersichtlicher und effektiver geht.

Ich habe mir erlaubt, Uschis Entwurf und deine Grafiken noch einmal nach meinen Vorstellungen zu ändern. Schau dir meinen Entwurf an, besonders, bei kleineren Browserfenstern oder Schriftvergrößerung oder schau, was ohne CSS dabei herauskommt.
Er ist bisher nur unter IE 6.0, Mozilla 1.4 und N 7.1 jeweils unter Win98 getestet.

Ich habe den Entwurf für ein Weilchen unter http://www.selk-guben.de/demo/Chor.html abgelegt.

Detlef

[TorstenA]

Hallo Detlef,

Ich habe den Entwurf für ein Weilchen unter http://www.selk-guben.de/demo/Chor.html abgelegt.

Ich bin sprachlos, ganz ehrlich. Werde mich mal intensiv mit deinem Entwurf befassen. Habe mich wohl zu sehr mit der Nutzbarkeit unter NN4.78 verzettelt.

Vielen Dank
Torsten

[Detlef G.]

Hallo Torsten

Soll die Seite im NN4.xx unbedingt in voller Pracht erscheinen?

Ich würde sonst alle Styles, bei denen dieser oder andere ältere Browser Probleme machen, vor diesen verstecken.
Deshalb auch mein Hinweis, die Seite einmal ohne CSS zu betrachten, inwieweit diese auch so akzeptabel ist.

Eventuell im Quelltext, Zeile 41:
statt <div id="vers">...</div>
      <big id="vers">...</big><br />

Detlef

[Uschi Renziehausen]

Hallo Torsten, hallo Detlef,

thanks whery much indeed @Detlef und @Torsten: vergiss NN4.x in voller Pracht. Wenn du willst kannst du dem eine vollkommen eigene CSS verpassen, die du als allerestes lädst. Danach lädst du dann die CSS-Dateien für menschenfreundliche Browser. Damit nn4x die nicht erkennt muss du den LINK-Elementen nur eine id verpassen, und schon liest unser alter Freund nicht mehr mit.
Du solltest zumindest eine Schriftgröße in pt festlegen. Das was der IE automatisch bei kleiner bietet, ist nämlich so winzig, dass ich ne Lupe anwenden muss.

Gruß, Uschi

[Detlef G.]

Hallo Uschi

Du solltest zumindest eine Schriftgröße in pt festlegen. Das was der IE automatisch bei kleiner bietet, ist nämlich so winzig, dass ich ne Lupe anwenden muss.

Dabei ist sich IE und Mozilla ziemlich einig. Wer keine Lupe verwenden will, wird nicht gerade "sehr klein" wählen. Problematisch wird es, wenn die Schriftgrößen unter 1em definiert sind.
Bei pt oder px lehnt zumindest mein IE jede Schriftgrößenänderung kategorisch ab.

Detlef

[Jeena Paradies]

Hallo,

Du solltest zumindest eine Schriftgröße in pt festlegen. Das was der IE automatisch bei kleiner bietet, ist nämlich so winzig, dass ich ne Lupe anwenden muss.

Warum bestehst du denn die ganze Zeit so auf "pt"? Soll er doch einfach bei em bleiben, denn es gibt ja noch andere Browser/Systeme die seine Seite anzeigen sollen. em ist doch eine Super Einheit, die sogar alle möglichen und unmöglichen Browser verstehen, und richtig anwenden. Wozu er allerdings body {font-size:1em} gewählt hat ist mir noch nicht ganz klar. Ist doch eh voreinstellung oder verstehe ich da was falsch?

Grüße
Jeena Paradies

[TorstenA]

Morgen Uschi,

thanks whery much indeed @Detlef und @Torsten: vergiss NN4.x in voller Pracht. Wenn du willst kannst du dem eine vollkommen eigene CSS verpassen, die du als allerestes lädst.

Ja, so hatte ich das ursprünglich, was wahrscheinlich dazu geführt hat, dass ich ein wenig den Überblick verlor :-| Und um auch noch den IE zufrieden zu stellen, habe ich mit Conditional Comments gearbeitet, was das Chaos perfekt gemacht hat.

Du solltest zumindest eine Schriftgröße in pt festlegen. Das was der IE automatisch bei kleiner bietet, ist nämlich so winzig, dass ich ne Lupe anwenden muss.

*Argh* Manchmal könnte ich ... den IE ...

Grüße
Torsten

[TorstenA]

Hallo Detlef,

Soll die Seite im NN4.xx unbedingt in voller Pracht erscheinen?

Ich meine schon, da es sich bei den Chormitgliedern überwiegend um Damen und Herren jenseits der 45 handelt, die zumeist keine Erfahrungen mit PCs haben und deren heimische Computer in aller Regel die abgelegten PCs ihrer Kinder sind. Da sind Browser wie NN4.7x oder IE 5.0 nicht auszuschließen, sodass die Seite in diesen Browsern zwar nicht "in voller Pracht" aber zumindest vom Aufbau und von der Benutzbarkeit her auch für ältere Browser geeignet sein sollte.

Wie es mit der browsermäßigen Ausstattung der Zielgruppe der Seite aussieht, vermag ich nicht einzuschätzen, die Chormitglieder müssen mir die Seite allerdings abnehmen, weshalb ich auch auf die Benutzbarkeit in älteren Browsern achten sollte.

Grüße
Torsten

[patrick]

Ich habe es etwas aufgehellt, ist es so besser?

Besonders das helle grau der besuchten Links in der Navi hat nicht genügend Kontrast

das lila jetzt passt nicht so arg zu dem restlichen..
versuchs mal mit einer anderen farbe..

[patrick]

Hallo patrick,

also mich irritiert immer ein Hintergrundbild.

Meinst du das im Body?

ja diese Noten, die komplett im Hintergrund sind.
Versuchs mal mit mehr freiräumen und mehr weiß.

[Zeromancer]

Hallo

ich finde die lila Farbe beim "hovern" nicht sehr passend.

MfG

André

[TorstenA]

Hallo Andre,

ich finde die lila Farbe beim "hovern" nicht sehr passend.

Ich habe jetzt mal testweise eine andere Farbe genommen. Ansonsten, welche Farbe fändest du denn passend? Btw, die "Chorklamotten" haben annähernd die Farbe wie jetzt beim Hover-Effekt.

Grüße
Torsten

[Struppi]

Ich habe jetzt mal testweise eine andere Farbe genommen. Ansonsten, welche Farbe fändest du denn passend? Btw, die "Chorklamotten" haben annähernd die Farbe wie jetzt beim Hover-Effekt.

Ein nützliches Tool um "passende" Farben zu finden http://www.pixy.cz/apps/barvy/index-en.html und ein Artikel der beschreibt was es mit den Begriffen auf sich hat http://www.metacolor.de/

Struppi.

[TorstenA]

Hallo Struppi,

Ein nützliches Tool um "passende" Farben zu finden http://www.pixy.cz/apps/barvy/index-en.html und ein Artikel der beschreibt was es mit den Begriffen auf sich hat http://www.metacolor.de/

Danke, habe es berücksichtigt und hoffe, dass die Farbwahl beim Hovern nun eine bessere ist.

Grüße
Torsten

[Detlef G.]

Hallo Torsten

Habe mir die Seite bisher nur mit Mozilla 1.4 und IE 6.0 unter W98 angesehen.
Seite gefällt mir vom ersten Eindruck gut.

nur IE:

• Navigation springt bei erster Mausberührung ein Stück zur Mitte

Mozilla:

• nach Resize habe ich doppelte Scrolleiste rechts
• bei Auflösung 800 x 600 oder Schriftvergrößerung komme ich nicht mehr an die unteren Links

generell:

• beim Hintergrundbild ist Kachelung sichtbar (leichte wagerechte Linie)
  -  vielleicht könntest du den Inhalt ein wenig Höhe geben (bei Auflösung 1024 x 768, Browserfenster maximiert, ohne zusätzliche Menüs fehlen ein paar Pixel der Wartburg)
• bei schmalen Browserfentern oder Schriftvergrößerung schiebt sich der Inhalt über die Links

Detlef

[TorstenA]

Hallo Detlef,

nur IE:

• Navigation springt bei erster Mausberührung ein Stück zur Mitte

Ja, das Problem ist bekannt, allerdings habe ich noch keine Ursache lokalisieren können.

Mozilla:

• nach Resize habe ich doppelte Scrolleiste rechts

Die sollten nach einem Refresh wieder weg sein. Mal sehen, ob ich das Problem irgendwie anders lösen kann.

• bei Auflösung 800 x 600 oder Schriftvergrößerung komme ich nicht mehr an die unteren Links

Ups, da fehlt wohl irgendwo noch ein overflow.

• beim Hintergrundbild ist Kachelung sichtbar (leichte wagerechte Linie)

Ja, das Bild ist nicht optimal. Ich bin gerade auf der Suche nach was besserem.

Vielen Dank
Torsten

[TorstenA]

Hallo ich nochmal,

http://www.siechfreds-welt.de/chor/index.html

Zwei mir unerklärliche Phänomene treten nun auf:
Das linke DIV wird stets mit einem horizontalen Scrollbalken versehen, obwohl der Inhalt in der Standardschriftgröße eignetlich reinpasst und es so keinen Anlass für diesen Scrollbalken geben sollte.
Das zweite Phänomen tritt auf, wenn man auf der Startseite mehrfach hoch und runter scrollt, kommt irgendwann ein grauer Streifen über der obersten Grafik, der sich und damit den Inhalt immer weiter nach unten schiebt, wenn man weiter hoch und runter scrollt.

Beide Phänomene beoachtet unter Mozilla 1.4 und WinXP.

Ratlose Grüße
Torsten

[Christoph Schnauß]

hallo Torsten,

http://www.siechfreds-welt.de/chor/index.html
Zwei mir unerklärliche Phänomene treten nun auf:
Das linke DIV wird stets mit einem horizontalen Scrollbalken versehen

Gib ihm eine Größe (width), und schon ist es erledigt. Außerdem: warum positionierst du es relativ?

Das zweite Phänomen tritt auf, wenn man auf der Startseite mehrfach hoch und runter scrollt, kommt irgendwann ein grauer Streifen über der obersten Grafik

In mozilla 1.5 nicht, aber es kommt ein zeilenweise sich vergrößernder Lerraum.
Gib dem Ding doch eine Position, und schon bist du alle Sorgen los.

Grüße aus Berlin

Christoph S.

[Christoph Schnauß]

ich seh grade, ich habe die CSS teilweise verwechselt ...

Gib ihm eine Größe (width), und schon ist es erledigt. Außerdem: warum positionierst du es relativ?

"position:fixed" würde ich testweise durch "position:absolute" ersetzen und die Größenangabe für width links in Pixel machen, rechts unbestimmt lassen.
"display:block" halte ich auf der Seite, die zur Zeit sichtbar ist, für überflüssig. den Wechsel von sichtbar/unsichtbar kannst du jeweils als EventHandler bzw. Funktion an <a> binden, obwohl ich es nicht für sinnvoll halte, die "Navigation" unsichtbar zu machen.

Gib dem Ding doch eine Position, und schon bist du alle Sorgen los.

Bei der Positionierung genügt es meines Wissens nicht, lediglich "psition:irgendwas" vorzugeben. Gib noch "top" dazu an, das sollte reichen.

Christoph S.

[TorstenA]

Morgen Christoph,

vielen Dank schon mal. Bin die nächsten Abende Strohwitwer und werde mit der "Codierung" ausgehend von den Vorschlägen von Uschi und Detlef noch mal ganz langsam alles überarbeiten.

Grüße
Torsten

[Frank Opper]

Hallo Torsten,

das Scrollrad meiner Maus geht nicht auf der Seite (Mozilla 1.0.2 unter Linux).

Ansonsten finde ich die Seite gut gelungen.

Viele Grüße
Frank

[TorstenA]

Hallo Frank,

das Scrollrad meiner Maus geht nicht auf der Seite (Mozilla 1.0.2 unter Linux).

Ja, das mit dem Scrollrad im Mozilla scheint ein Problem zu sein. Unter Mozilla 1.3/1.4 und WinXP war es nutzbar.

Ansonsten finde ich die Seite gut gelungen.

Dankeschön :-)

Grüße
Torsten

[TorstenA]

Hallo allerseits,

vielen Dank für alle Antworten. Ich werde mich in den nächsten Tagen daran setzen, die Vorschläge umzusetzen und das Ergebnis dann hier noch mal vorstellen.

Grüße
Torsten