WebStyleBoard

na da werd ich doch mal nen paar Stichpunkte in ungeordneter Reihenfolge loslassen

• um Verständigungsproblemen vorzubeugen hab ich mal ein Bild angehängt und dort gekennzeichnet, welcher Bereich mit welchem Begriff gemeint ist. Ich bitte auch nachfolgende Schreiber, sich daran zu halten
  
• gelbe Schrift auf weissen Untergrund geht gaaaaar nich
  

• 	Quellcode
  1 2 3 4	ul#Navigation a:visited { color:white/*#666 = grey*/; background-color:#eee; /* silver */ }

  
  Diesen Code solltest du dem ul#Navigation a:link anpassen, damit man diese Links auch noch erkennen kann, wenn man mal draufgeklickt hat.
  
• ist das gewollt, dass der Naviblock in den Contentblock reinragt? Wenn ja, dann würde ich den Naviblock ein wenig nach oben oder unten versetzen, damit die gestrichelten Rahmen nicht so aufeinanderliegen
  
• im Header finden sich rechte Seite nen paar Links zb. zur .com oder .net ... scheint ein wenig verunglückt zu sein
  
• im FF liegt der Rahmen des Contentblocks direkt unten auf der Linie auf, während im IE dort ein kleiner Abstand dazwischen ist, was auch besser aussieht
  
• in der Navigation findet sich kein Link zur Startseite ... das ist nicht gut
  

Komm ich nochmal schnell auf die Validator-Meldungen zu sprechen:
http://validator.w3.org/check?verbose=1&…no.de%2Ftest%2F


Dieser Code macht irgendwie keinen Sinn, den regelt ein Browser selber recht zuverlässig.

-------------------------------------------------------

Zitat

Error Line 54 column 29: there is no attribute "face".

<h1>Cinemino<font face="Lucida Sans Unicode">&reg;</font></h1>

Das hat den Grund, dass <font> in aktueller HTML-Version nicht mehr erlaubt ist. Benutze stattdessen:



-------------------------------------------------------

Zitat

# Error Line 78 column 22: required attribute "src" not specified.

<img id="Bild" /><a href="Bilder/LOGO-alt.jpg" alt="Cinemino-Katalog beinh

Da ist der Code ein wenig zerrutscht
richtiger Code für Bild normal:

"Error Line 78 column 22: required attribute "alt" not specified." - das bedeuted nichts anderes, als das alt="" fehlt, aber eben Pflicht ist.

richtiger Code für Bild als Link:


-------------------------------------------------------

Zitat

# Error Line 87 column 17: there is no attribute "LANGUAGE".

<SCRIPT LANGUAGE="JavaScript">

richtig muss es so sein:

-------------------------------------------------------

Soviel mal zu meiner kurzen Analyse ... bin leider halt gerade etwas eingespannt
Hoffe ich konnte dir erstmal ein wenig weiterhelfen ... und wenn Fragen, dann einfach fragen

TNS | sich mal wieder an die Arbeit macht

Hi Johanna!

[q=Johanna]ich bitte um eure Unterstützung[/q]
Wie heißt es so schön: Lieber spät als nie!

[q=Johanna]Bin fachfremd[/q]
Und? Dafür sind wir ja da...

[q=Johanna]habe letztes Jahr meine ersten Schritte mit Dreamweaver gemacht[/q]
Ein Programm, dass auch ich gerne benutze... Weiteres dazu siehe nächster Punkt.

[q=Johanna]nachdem ich einige "Wünsche" für mich damit nicht regeln, oder finden konnt[/q]
Das Problem bei Dreamweaver (und jedem anderen [WIKI]WYSIWYG[/WIKI]-Editor) ist, dass der Code, den das Programm produziert, streng genommen für den Ar*** ist.

Das passiert, wenn Du quasi nur in der Entwursansicht arbeitest, und dort die Seite wie mit einem Grafikprogramm zusammenstellst. Daher arbeite ich im Dreamweaver nur in der Codeansicht und tippe dort manuell. Wenn Du Dir dann bei korrektem HTML die Entwurfsansicht ansiehst, lachst Du Dich kaputt...

Aber Dreamweaver ist dennoch sehr nützlich, und zwar als reiner Editor, zum Organisieren der Sites, Hochladen / Synchronisieren mit dem Webserver usw.

[q=Johanna]bin dort natürlich auf "klare"Trennung HTML und CSS gestossen[/q]
<modus="Klugscheiß">Das ist so nicht ganz richtig!</modus>

Nicht die Trennung von HTML und CSS ist wichtig. Die beiden kannst Du eigentlich gar nicht trennen, denn ohne CSS kein Layout...

Was Du sicher meinst ist die Trennung von Inhalt/Struktur und Layout, also Gestaltung. DAS ist wichtig. Und HTML und CSS sind die geeigneten Werkzeuge dafür. Was hinter diesem Prinzip steht erschließt sich für den Einsteiger nicht unbedingt sofort. Vereinfacht kann man sagen, dass man sich innerhalb des HTML rein auf die Informationen einer Seite konzentrieren sollte, und nicht HTML-Elemente für die Gestaltung verwendet.

In a nutshell: Du solltest nicht mit HTML Dinge machen, die für das Layout, also CSS gedacht sind.

Ein Beispiel: Nehmen wir an, Du hast einen Inhaltsbereich wo eine Überschrift und darunter ein Textabsatz zu finden sind. Etwa so:



Soweit, so gut. Nun möchtest Du aber, dass zwischen den jeweiligen Textblöcken ein größerer Abstand entsteht. Fälschlicherweise könntest Du das so versuchen:



oder



In beiden Beispielen benutzt Du Elemente aus HTML um Einfluß auf die Gestaltung, die Optik zu nehmen. Korrekt wäre aber:



Auf diese Weise enthält die HTML-Datei nur die reine Information und wird durch das CSS gestaltet. Diese Handhabe hat im wesentlich zwei große Vorteile:

1. Änderungen im Stylesheet wirken sich auf alle Unterseiten aus, was Überarbeitungen und Änderungen weitaus einfacher macht.

2. Du kannst den gleichen Inhalt für verschiedene Zwecke verwenden, umgestalten


Ein wunderbares Beispiel aus der Praxis für Punkt 2 ist zum Beispiel die Verwendung eines eigenes Stylesheets für die Druckansicht. Auf diese Weise kannst Du dafür sorgen, dass der Ausdruck einer Seite völlig anders aussieht, als die Bildschirmansicht. So etwas mach durchaus Sinn, denn was willst Du z.B. mit einer Navigationsleiste auf einem Blatt Papier?

[q=Johanna]Die Anfangsseiten teilweise geprüft mit Validatoren, habe aber für manche Fehler die ich dann behoben habe, nach erneuter Prüfung "noch mehr" Fehlermeldungen erhalten. Ich blick manchmal nicht wirklich durch. Meine Englsichkenntnisse sind auch nicht gerade das "gelbe vom Ei"....[/q]
Es ist gut und löblich die eigenen Seiten mit Validatoren zu überprüfen, aber man kann es dort auch übertreiben. Leider gibt es in ein paar Punkten "Fehler" aus Sicht des Validators, die sich nicht verhindern lassen. Aber meist haben diese Dinge keinen Einfluß auf die Funktionalität einer Seite.

Was Deine Englisch-Kenntnise angeht, dem kann abgeholfen werden... Keine Sorge! Ich empfehle Dir jetzt keine Studienkurse...

SelfHTML bietet einen HTML-Validator in Deutsch. Damit dürfte Dir das Arbeiten wesentlich leichter fallen...

[q=Johanna]Ich möchte gerne von euch wissen,
wie erst einmal euer Eindruck ist, von der Konzeption, habe nähmlich ger keines, man wächst ja mit seinen Aufgaben, das reale Material liegt mir nur teilweise vor.[/q]
Der Mensch wächst mit seinen Herausforderungen, das ist richtig. Aber dennoch solltest Du nicht ohne ein - wenigstens grundlegendes - Konzept an so eine Sache gehen. Wenngleich Du nicht alle Materialien auf einmal bekommst (leider muss ich Dir sagen, dass das der Regelfall ist. Wenn ich von meinem Kunden mal alle Informationen / Materialien für eine Site in einem Paket bekommen würde wäre das für mich wie Weihacnten... ), solltest Du zumindest Dir grundlegend Gedanken machen, was den Aufbau und die Strukturierung angeht.

Einfach ins Blaue zu arbeiten hat in der Regel immer zur Folge, dass Du:

1. weitaus mehr Arbeit investieren musst, als nötig, weil immer was geändert werden muss
   
2. das Ganze meist unzusammenhängend und unstrukturiert aussieht
   [/list=a]
   
   Nun zu meinem Eindruck:
   
   Das Gute vorweg: Schlecht finde ich die Struktur / Aufteilung gar nicht. Es ist klar gegliedert und übersichtlich, allerdings gibt es noch viel Detailarbeit.
   
   1. Kontrast
   Gelbe Schrift auf weißem Hintergrund? Böööse Falle... Das lässt sich kaum lesen und streng viel zu sehr an, als das die Seite als angenehm empfunden werden kann. Gelbe Schrift kannst Du lediglich auf richtig, richtig dunklen Hintergründen verwenden. Ansonsten gilt: Finger weg von Gelb als Schriftfarbe.
   
   Gleiches gilt für die Links der Navigation. Diese werden weiß, wenn sie angeklickt wurden (a:visited?). Auf weißem oder grauen Hintergrund gar nicht schön. Es ist zwar an sich eine gute Idee dem Benutzer zu zeigen, wo er schon war, aber die Links unsichtbar machen? Nope! Was ist, wenn er zu der Seite nochmal zurück will?
   
   2. Linkhintergrund
   Im Header befindet sich auf der rechten Seite eine kleine Navigation, wobei aktive Links einen Hintergrund haben. Bei einem Farbverlauf im Hintergrund macht sich das gar nicht gut...
   
   3. Weniger ist mehr
   Ich denke das die meisten Menschen heutzutage wissen, was eine Navigation ist. Und selbst wenn nicht, werden Sie schnell drauf kommen, wofür die Liste auf der linken Seite ist.
   
   Den Begriff "Navigation" brauchst Du dort nicht...
   
   4. Bildgrößen
   Es ist klar, dass das Gemälde mit dem Schmetterling und den beiden Kolibris nur als Platzhalter dient, aber ein kleiner Tipp für die Zukunft: 248 KByte sind VIEL, VIEL, VIEL zuviel...
   
   Bilder sollten so klein wie nur irgend möglich sein. Denn zum einen sind leider nicht alle mit DSL unterwegs, und zum anderen scheint auch Dein Webserver nicht der allerschnellste zu sein. Und wenn dann mal ein paar mehr Besucher auf den Seiten sind und der Server megabyte-weise Bilder liefern muss... :dizzy:
   
   [q=Johanna]dann würde ich natürlich gerne im CSS wissen, ob ich an tausend Stellen doppelt gemoppelt habe[/q]
   Nun zu Deinem CSS...
   
   1. pt und em
   Du schreibst selbst als Kommentar /* Schriftgröße nur als pt*/, verwendest aber pt und em. In der Tat solltest Du lieber em benutzen, da em relativ und damit skalierbar ist.
   
   2. Farben
   Farben solltest Du immer als Hexadezimal angeben und nicht als Farbnamen. So solltest Du #FFFFFF oder #FFF anstatt "white" nehmen. Denn Du kannst Dir nie sicher sein, dass alle Browser die Farbnamen gleich interpretieren und erlebst so eventuell die eine oder andere unangenehme Überraschung.
   
   3. Margin und Padding
   Angaben wie margin-top oder ähnliches kannst Du Dir eigentlich sparen. Einfacher ist folgende Schreibweise:
   
   margin : 1 2 3 4;
   
   Dabei steht:
   
   1: Oben
   2: Rechts
   3: Unten
   4: Links
   
   Auf diese Weise kannst Du für alle Seiten in einem Rutsch Angaben machen. So würde z.B.:
   
   margin : 10px 0px 10px 0px;
   
   dafür sorgen, dass das Element oben und unten einen Randabstand von 10 Pixeln erhält.
   
   Auf die gleiche Weise kannst Du auch Angaben für padding, border usw. handhaben.
   
   
   Ein Wort in Sachen margin, padding und Crossbrowserkompatibilität...
   
   In Deinem zweiten Posting schreibst Du von der unterschiedlichen Darstellung zwischen IE und FF. Oft liegen solche Unterschiede in der Tatsache begründet, dass die meisten Browser für bestimmte Elemente voreingestellte Werte für margin und padding haben.
   
   Solche Elemente sind zum Beispiel der Body oder der Textabsatz p. Leider können sich die Werte von Browser zu Browser unterscheiden und wenn Du diese nicht überschreibst, sieht Dein Layout in jedem Browser anders aus...
   
   Ein Beispiel: Nehmen wir an, der IE verpasst jedem p automatisch einen linken Randabstand von 10 px und der FF aber von 15 px. Gibst Du nun keine eigene Angabe an, so sehen die Textabschnitte in beiden Browsern anders aus.
   
   Das kann auf das Gesamtlayout übertragen verheerende Konsequenzen haben... Daher ist es sinnvoll, dafür zu sorgen, dass Du ganz genau angibst, welche Rand- und Innenabstände die jeweiligen Elemente haben sollen.
   
   Sollen keine Ränder und Abstände auftauchen, solltest Du also:
   
   margin : 0;
   padding : 0;
   
   schreiben, um auf Nummer Sicher zu gehen...
   
   4. Angabe der Schriftart
   Also font-family:Coopbl; ist keine gültige Angabe zur Schriftart... Welche Schrift soll das sein? Cooper Black? Cooper Bold?
   
   Wenn Du Schriften angibst, solltest Du immer Alternativen mit angeben und zu letzt immer eine generische Schriftenfamile anfügen.
   
   Generische Schriftenfamile heißt, dass Du angibst, zu welcher Art von Schrift die gewünschte Schrift gehört:
   
   sans-serif: Ohne Serifen, also Arial, Verdana, Helvetica usw.
   serif: Serifen-Schrift, als Times New Roman usw.
   monospace: Schrift mit gleichgroßer Zeichenbreite, wie Courier, Courier New usw.
   
   Korrekt wäre also etwas in dieser Richtung:
   
   font-family:Coopbl, Arial, sans-serif;
   
   [q=Johanna]Den Hintergrund hätte ich gerne auch an der linken Seite runter[/q]
   Was genau meinst Du damit? Das der Grauverlauf auch hinter der Navigation liegt, oder dass der Grauverlauf von oben angefangen bis runter zum Ende der Navigation läuft...
   
   [q=Johanna]ist mit Corel Draw 10 gemacht, kann damit aber auch nicht wirklich umgehen[/q]
   Herzlichen Glückwunsch zur Verwendung des besten Verktorgrafik-Programms dieses Universums (und aller Paralleluniversen eingeschlossen... )
   
   Ich verwende CorelDRAW! seit der Version 2... Ohne Witz... Aktuell arbeite ich mit 12 und 13. Wenn Du also Fragen speziell zu CorelDRAW! hast, dann immer rein damit in "mein" Grafik-Forum...
   
   [q=Johanna]ich habe auch zwei verschiedene Logos[/q]
   Mir persönlich gefällt das Logo in den gelb/orange Tönen weitaus besser. Das darf auf den Seiten auch gerne etwas größer ausfallen... Vielleicht wäre es auch keine allzu schlechte Idee, die Farben der Seiten selbst den Farben aus dem Logo anzupassen...
   
   Last but not least ein genereller Tipp: Der IE scheint arge Probleme zu haben mit dem Laden einiger Bilder in Deiner Seite. Beim Betrachten der Verknüpfungen und Dateinamen sind mir ein paar Kleinigkeiten aufgefallen.
   
   Um potenzielle Fehler zu vermeiden, solltest Du Dich bei Ordnernamen und Dateinamen an folgende Konventionen halten:
   
   Immer nur Kleinbuchstaben verwenden, dann das Betriebssystem des Webservers unterscheidet zwischen Groß- und Kleinschreibung. D.h. für Windows sind hallo.txt und Hallo.txt ein und die selbe Datei. Aus Sicht eines UNIX/Linux-Servers handelt es sich aber um zwei verschiedene Dateien...
   
   D.h. wenn Du die Datei Bild.jpg nennst, und im Link dann bild.jpg schreibst, findet der Server das Bild nicht...
   
   Keine Leerzeichen in Dateinamen und Ordnernamen verwenden. Dass kann zwar gut gehen, muss aber nicht...
   
   Keine Sonderzeichen in Dateinamen und Ordnernamen verwenden...
   
   Zusammengefasst sind folgende Zeichen erlaubt und sinnvoll:
   
   1. Kleibuchstaben von a-z
   2. Ziffern 0-9
   3. Der Bindestrich "-"
   4. Der Unterstrich "_"
   
   Der Unterstrich eignet sich insbesondere als Leerstellen-Ersatz. So wird aus:
   
   http://www.cinemino.de/test/Erwachsene/Kino%20Malerei/Bilder/Wahnsinn.jpg
   
   besser
   
   http://www.cinemino.de/test/erwachsene/kino_malerei/bilder/wahnsinn.jpg
   
   [q=Johanna]achja, ich mache das neben einem anderen Job[/q]
   Darf man fragen, was Du hauptberuflich machst?
   
   
   Soweit erst einmal von mir... Ich hoffe, Dir ein wenig weitergeholfen zu haben... :-)
   
   LapisInfernalis

[q=Johanna]danke, für eure "ersten" Hilfen und ... ja jetzt bin ich wirklich platt[/q]
Dafür sind wir ja da...

[q=Johanna]ich mache die Homepage, weil das unsere Zukunft werden soll[/q]
Dieses Projekt im Speziellen oder Webdesign im Allgemeinen?

[q=Johanna]Die Farbennamen habe ich deswegen genommen, weil nach einem Check die Schriftfarben bei den Links auf einmal alle grün waren, obwohl hinter dem Hexadezimalwert der dazugehörige? Farbname stand[/q]
Dann wird wohl der Hex-Code falsch gewesen sein... Wie gesagt, immer lieber Hex-Codes verwenden. Du kannst bei Fehlverhalten den Code ja in einem beliebigen Bildbearbeitungsprogramm überprüfen...

[q=Johanna]Wo und wie sollte oben nach deiner/eurer Meinung die Linkleiste sein, links oben oder rechts waagrecht oder nach unten[/q]
Was genau meinst Du? Die kleine Zusatznavigation? Auf jeden Fall waagerecht und entweder direkt über oder unter den Header.

[q=Johanna]über diesen Bereich sollen auch irgendwann mal entweder kleine Käfer laufen oder kleine Herzen fliegen[/q]
Also das würde ich mir an Eurer Stelle noch einmal ganz schwer überlegen... An so etwas sieht man sich schnell satt und dann wirkt so etwas im Handumdrehen störend.

[q=Johanna]das mit Schriftgröße nur in pt habe ich von Selfhtml[/q]
Dann aber wohl aus einer älteren Ausgabe. In der aktuellen wird - wie ich bereits sagte - em vorgeschlagen und pt nur für Druckstile empfohlen, da es sich um eine nicht-relative Einheit handelt.

[q=Johanna]bei Cinemino im Header verlangt er Cooper Black, da er es auch auf den Büchern so hat [/q]
Das mag ja sein, aber Deine Lösung hat zwei Haken:

1. Du solltest den Schriftnamen verwenden und keine Abkürzung oder einen Dateinamen, als wenn dann "font-family : Cooper Black" usw.

2. Die wenigsten Menschen werden diese Schriftart auf ihrem System installiert haben, d.h. bei all denjenigen ohne Cooper Black als installierte Schriftart wird diese nicht angezeigt!

Wenn Du an bestimmten Stellen - wie im Header - sicher gehen willst, dass dort eine bestimmte Schrift erscheint, dann musst Du sie als Grafik einbinden.

[q=Johanna]Der Hintergrund sollte noch von links nach rechts über die Navileiste laufen, und nach unten möglichst so lange, bis die Seite mit dem Haupttext endet, aber ich bekomme das nicht hin[/q]
Ich fürchte, ich verstehe nicht genau was Du meinst... Soll der Hintergrund im Header von grau nach weiß von oben nach unten und in der Navigation von grau nach weiß von links nach rechts laufen?

Kannst Du in einem Bildbearbeitungsprogramm mal eine kleine Skizze machen wie es in etwa aussehen soll?

[q=Johanna]Wegen dem Logo hätte ich noch eine Frage, er schafft es nicht den weißen Hintergrund (Rechteck) "weg" zu machen, er arbeitet zwar eigentlich mit Corel 7, aber da die Website über meinen Rechner gemacht und geladen wird, Corel 10, er bekommt das aber auch bei sich nicht geregelt.[/q]
Das Zauberwort heißt Transparenz... Im übrigen eignet sich CorelDRAW! nur bedingt, um Grafiken direkt für das Web aufzuarbeiten. Besser ist es, Du erstellst die Grafiken in Draw und bearbeitest sie dann in einem Bildbearbeitungsprogramm wie CorelPHOTOPAINT! oder besser Adobe Photoshop.

Es gibt im Prinzip nur zwei im Web verwendbare Dateiformate für Bilder die Transparenz unterstützen: [WIKI]GIF [/WIKI]und [WIKI]PNG[/WIKI].

1. GIF
Das GIF-Format hat den Vorteil, dass es gut unterstützt wird und sogar Animationen darstellen kann. Allerdings überwiegen zwei Nachteile:

1. Eine GIF-Datei kann nur aus maximal 256 Farben bestehen
2. Eine bestimmte Farbe kann transparent sein

Zu Nachteil 1:

Problematisch ist dies nur bei Grafiken, die viele Farben enthalten, wie Photos oder Bilder. Bei Abbildungen mit großen, gleichfarbigen Flächen eignet sich dieses Format besonders gut.

Zu Nachteil 2:

Da nur eine bestimmte Farbe transparent sein kann, gibt es keine schöne Weiche kannte sondern runde Kanten sehen angenagt und angefressen aus.


2. PNG
PNG ist eigentlich das Traum-Dateiformat: Volle 16,7 mio Farben, verlustfreie Komprimierung und ein echter Alpha-Kanal für weiche Transparenzen...

Der wesentliche Nachteil: Der Internet Explorer zeigt die Transparenz erst ab der Version 7 an, vorher nicht.

Damit ist dieses Format in Sachen Transparenz eigentlich im praktischen Alltag wertlos.

Nun... Wie solltest Du es dann machen? Mit einem kleinen Trick...

Exportiere Dein Logo einfach aus Corel heraus als EPS. Öffne dieses in einem Bildbearbeitungsprogramm und kopiere hinter das Bild den gleichen Hintergrund wie im Header...

Du verstehst, worauf ich hinaus will? :cool:

Soweit erst einmal von mir...

LapisInfernalis

[q=Johanna]zu Corel muss ich vielleicht noch folgendes sagen, die grafischen Teile sind eigentlich seine Arbeit, ich kenne mich da nicht gut genug aus. und wenn ich sage ist mit Corel Draw gemacht, kann es durchaus auch sein, dass das mit CorelPHOTOPAINT gemacht ist[/q]
Es macht schon mehr Sinn, das eigentliche Gestalten des Logos in CorelDRAW! zu machen, zumal Du durch die Vektorgrafik viel flexibler bist.

Denn machst Du so ein Logo direkt in PhotoPaint, dann bist Du auf die ursprüngliche Größe und Auflösung festgenagelt. Du kannst dann nur noch kleinere Versionen daraus erstellen, aber keine größeren...

Wenn Du das Logo hingegen in CorelDRAW! machst - oder machen lässt - so kannst Du es für jeden nur erdenklichen Zweck nutzen, angefangen von einem Druck auf einen Werbekugelschreiber über bedruckte T-Shirts bis hin zu Werbung auf Zeppelinen...

Nur die Nachbearbeitung für das Web sollte man einem Bildbearbeitungsprogramm a la Photoshop oder -Paint überlassen.

[q=Johanna]ok, das mit png habe ich verstanden, da wir die Seite ja eigentlich schon "allgemein" haben wollen, sie aber vorrangig für ff, sprich mehr für Leute mit Köpfchen, (nachdenken, Lösungen suchen, nicht zu allen Standards ja und Amen sagen ....) optimieren wollen, werden wir diese Lösung vielleicht vorziehen ich weiss, "Denken ist schwer, darum urteilen die meisten" (Unbekannt) aber da es hier auch um Fördermittel für Kinder mit Lerndefiziten geht, ist eine unserer Zielgruppen, Menschen die etwas verändern wollen, also nachdenken usw.[/q]
Das halte ich für sehr bedenklich... Denn zum einen garantiert nicht die Benutzung des Firefox, dass der betreffende User Köpfchen hat, noch sind alle Internet Explorer-User borniert oder paragraphen-verliebt. Diese Alles-über-einen-Kamm-Einstellung widerspricht eigentlich der Köpfchen-Überlegung, oder?

Und zudem solltest Du bedenken, dass der Firefox zwar zunehmend an Beliebtheit gewinnt, was allerdings die Verbreitung und Marktanteile angeht, ist er immer noch eine Randerscheinung neben dem IE.

Aus diesem Grund rate ich Dir dringen, einfach den Hintergrund in das Logo zu integrieren. Das ist der einfachste, bzw. praktikabelste Weg.

[q=Johanna]das mit dem Hintergrund über der Navileiste meine ich so: genauso wie im Header nur um 90 Grad gedreht das heißt am äußersten linken Rand auch dunkelgrau und Verlauf zur Textmitte hin wieder Weiß. also wie ein auf dem Kopf stehendes L[/q]
OK, jetzt ist alles klar...

[q=Johanna]Die beiden noch getrennten Grafikdateien sollen natürlich auch einmal EINE werden, aber noch bekomme ich das nicht hin[/q]
Warum das? Es kann oft sinnvoller sein, die Grafiken eben nicht in einer zusammenzufügen. Oder meinst Du eventuell den Header mit dem Logo und dem Cinemino-Schriftzug...

Was den Verlauf angeht: Das ist an sich kein Problem... Meinst Du das so (verkleinerte Version):



Wenn das Dein Ziel ist, hier ein paar Links zu Grafiken, die ich mal auf die Schnelle gebastelt habe. Klicke auf den jeweiligen Link mit der rechten Maustaste und wähle "Ziel speichern unter".

Bei jedem Bild steht der entsprechende CSS-Code.

1. Header
Hier geht es zum Bild: Header

Das ist der Header-Hintergrund. Einbinden kannst Du z.B. so:



2. Header Alternativ
Hier geht es zum Bild: Header 2

Das ist der Header-Hintergrund inkl. Logo und Schriftzug in Cooper Black. Einbinden kannst Du z.B. so:



3. Navigation
Hier geht es zum Bild: Navigationshintergrund

Das ist der Hintergrund für die Navigation. Es handelt sich um ein nur 1 px hohes Bild, welches in vertikaler Richtung wiederholt wird.

Obwohl es sich um ein Bild für die Navigation handelt, solltest Du es als Hintergrund des Containers einbinden. Denn auf diese Weise läuft die Grafik bis zum Ende durch. Ansonsten würde sie nach der Navigation aufhören.

Einbinden kannst Du z.B. so:



Auf die Klassen- und ID-Namen treffen im übrigen die gleichen Tipps zu, wie auf die Schreibweise für Datei- und Ordnernamen.

Hier der Vollständigkeit halber mal die Original-Datei, nach der ich die beiden einzelnen Dateien gebastelt habe, als Photoshop oder TIFF-Datei.

Soweit von meiner Seite aus... Wenn Fragen, dann fragen...

LapisInfernalis

kurz zwischenruf:

Das sollte dein Problem lösen

[ot]zu dem Smilies: du musst nur neben dem Textfeld auf den jeweiligen Smilie klicken und der entsprechende Code wird an die Cursorposition eingefügt[/ot]

# Error Line 54 column 71: end tag for element "a" which is not open.

...ische_lampe.html" />Magische Lampe</a> <a href="wie_eine_blume_waechst.html"

der trick an (x)html ist das man alle tags die man auf macht wieder schließen muss.

also z.B.

<a ...> </a>
<div..> </div>

so. und damit man bei bildern (<img..>) nicht in xhtml so viele blöde leere tags im sinne von

<img...></img>

hat hat man sich kurzhand überlegt das man das auch so schließen kann

<img... />

wenn du also
<a href="...ische_lampe.html" />Magische Lampe</a>
schreibst dann steht da quasi

<a href="...ische_lampe.html"></a>Magische Lampe</a>

fehler erkannt?

[q=Johanna]ich möchte ja nicht hetzen, aber ein paar Meinungen, Geschmäcker oder Standards wären schon noch erwünscht[/q]
Na dann wollen wir doch mal weitermachen... :grin:

[q=Johanna]wegen der Scripte[/q]
Die Antwort dazu ist so kurz wie simpel: Lass sie einfach weg. Wie TNS bereits sagte erledigen die Browser die Aufgabe recht zuverlässig selbst. Zwar ist es wichtig, die Seite browserkompatibel zu halten, aber ich denke auf Browser aus dem letzten Jahrtausend muss man nicht mehr wirklich Rücksicht nehmen.

[q=Johanna]browserweiche wegen der png-bilder[/q]
Jede Browserweiche ist nur ein Workaround, aber keine Lösung. Browserweichen solltest Du nur verwenden, wenn es gar nicht anders geht. Ich empfehle Dir eindringlich, die Bilder einfach mit einem Hintergrund zu versehen und entsprechend zu platzieren.

Das Ergebnis ist das gleiche, allerdings mit weniger Arbeit und wenigeren potentiellen Fehlerquellen. Wofür dann also eine Browserweiche?

[q=Johanna]die andere Schriftart in der Navileiste[/q]
Was für eine andere Schriftart in der Navileiste? Du meinst, dass Du Verdana angegeben hast, aber eine andere Schriftart angezeigt wird?

Ohne Dich enttäuschen zu wollen, aber die Schriftart in der Navigationsleiste IST die Verdana. Glaubst Du nicht? Dann vergrößere mal die Schrift (im FF mit STRG +).

Das Problem ist nur, dass die Auflösung eines Bildschirmes eigentlich lächerlich gering ist. Und bei kleinen Schriften stehen für die einzelnen Zeichen nur wenige Pixel zur Verfügung. Daher sehen sich serifenlose Schriften in kleiner Größe, die für den Bildschirm optimiert sind, recht ähnlich aus.

[q=Johanna]die zwei verschiedenen Logos[/q]
Wie gesagt, ich favorisiere das orange-rote. An Eurer Stelle würde ich überlegen, ob ich nicht insgesamt die Farben der Seite auf das Logo abstimme.

[q=Johanna]was spricht gegen eine linkleiste rechts und untereinander im Header?[/q]
Eigentlich nichts. Die Frage ist nur, was willst Du damit erreichen? Welchen Zweck soll sie erfüllen?

Generell würde ich sowohl in der Navigation als auch in der Header-Navi den Hintergrund entweder herausnehmen (background-color : transparent) oder aber durch ein Bild ersetze (vielleicht ein Verlauf).

Aber so, wie das im Moment aussieht, erweckt das eher den Eindruck, da würde was fehlen oder falsch dargestellt werden, ähnlich wie dem Logo mit weißem Hintergrund, also die störenden "Ecken". Verstehst Du, was ich meine?

Soweit erst einmal von mir...

Ach ja, bevor ich es vergesse: Nimm Bitte das Grün aus den Links wenn man sie anklickt... Davon bekommt man Augenkrebs...

LapisInfernalis