Ich habe für einen Bekannten eine Homepage für seine KFZ-Werkstatt erstellt. Das Design habe ich mit Photoshop erstellt, dann gesliced und anschließend mit CSS sauber zusammengefügt.
Das ist meine erste Page, die ich mit CSS statt mit Tabellen angefertigt habe, daher bin ich noch etwas unsicher auf dem Gebiet.
Ich bin eigentlich so gut wie fertig mit der Startseite, doch einige Probleme bekomme ich nicht in den Griff:
[ol]
[li]Unter der Navigation ist ein weißer Streifen, den ich nicht wegbekomme (Ja! Ich habe die FAQ gelesen )[/li][li]Die TÜV-Grafik soll nach unten rechts, aber ich verstehe nicht wie.[/li][li]Die transparenten Teile des Fotos mit dem Team werden unter IE6 nicht richtig angezeigt, das Problem habe ich trotz googeln nicht hinbekommen.[/li][li]Unter IE befindet sich oberhalb der gesamten Page ein weißer Text, der eigentlich gar nicht angezeigt werden dürfte. In Firefox ist er nicht sichtbar.[/li][li]Eigentlich eher eine Bitte: Ist die Seite an sich sauber geschrieben, oder gibt es noch Verbesserungsbedarf?[/li][/ol]
Ich würde mich total über eine Antwort freuen, weil der Kopf raucht und die Gedanken drehen sich im Kreis.
Die bisherige Page findet ihr unter folgender Adresse:
Hi, bei mir weist die Seite vom Aussehen eigentlich keine Fehler auf. (Iron und Firefox), der IE ist immer sone Sache, kann ich aber nicht beurteilen, da ich ein reinlicher Mensch bin und so einen Dreck wie IE als 2. gelöscht habe.
Verbesser mal die 11 Fehler, vielleicht hilft das.
Ansonsten ist sie auch vom Code her gelungen, bis auf das man 2 Divs weniger hätte verwenden können.
Die Fehler, die der Validator angezeigt hat, habe ich korrigiert.
Allerdings wurden meine anderen Fragen leider noch nicht beantwortet:
[ol]
[li]Wie geht der weiße Streifen unter der Navigation weg?[/li][li]Wie bekomme ich das Tüv-Zeichen nach unten rechts?[/li][li]Wie schaffe ich es, dass die PNG-Transparenz beim Internet Explorer 6 angezeigt wird.[/li][/ol]
Frohe Weihnachten!
div#navigation ist überflüssig. Du gruppierst hier nichts.
Ich finde eine Definitionsliste als Menü unglücklich, zumal bei der Liste die Definitionen (
) fehlen. Es ist eigentlich so, dass zu einem Term (
) immer eine Definition (
) gehört. Das fehlt bei Dir. Nimm doch lieber eine normale, unordered List.
Warum ist Deine Seitenüberschrift nicht als Überschrift ausgezeichnet? (div#header). Warum bindest Du ein Bild, das Content enthält, als background-image ein statt als , wo Du dann einen Alternativtext angeben kannst, der dann auch in Textbrowsern, Vorlesebrowsern und von Suchmaschinen gesehen werden kann?
Deine s stehen im Nichts.
Dein Footer ist auch nicht richtig ausgezeichnet.
Und font-size nicht in „px“ angeben, das lässt sich im IE6 nicht skalieren, ist somit nicht barrierefrei. „em“ ist besser.
-warum ist die div-Navigation überflüssig. Ich muss zugeben, ich arbeite das erste mal mit einer CSS-basierten Website und habe mich zum Teil anhand eines Tutorials durch den Aufbau meiner Seite gehangelt. Dort wurde die Navigation auch mit div-Elementen errichtet und ich war bis jetzt auch der Meinung, dass das ganz sinnvoll ist. Allerdings hat das mit der Navi auch nicht ganz so funktioniert, wie ich wollte. Eigentlich wollte ich, dass die Rollovergrafik mit dem Schraubenschlüssel auch bleibt, wenn man sich in der entsprechenden Kategorie befindet.
-ich habe versucht die Definitionsleiste im Menü mit einer ungeordneten Liste umzusetzen. Allerdings gab es bei mir dann die wildesten Darstellungsfehler, deswegen hab ich es wieder rückgängig gemacht.
-Wie hätte ich das mit der Kopfzeile bessr umsetzen sollen? Gar kein Div-Element einfügen und nur die Image-datei einfügen?
-Und was meinst du damit, dass meine im Nichts stehen und der Footer nicht richtig ausgezeichnet ist.
Wäre cool, wenn du mir das erklären kannst, ich möchte es auf jeden Fall verstehen und sauber programmieren lernen.
div#navigation ist für das Layout der Seite unerheblich. Entsprechende Eigenschaften bzw. die ID könnten auch für das darin enthaltene dl oder ul gesetzt werden. Der div-Tag könnte komplett weg.
Gleiches gilt wohl für deine div.padding’s.
-ich habe versucht die Definitionsleiste im Menü mit einer ungeordneten Liste umzusetzen.
Gibt andere Möglichkeiten. Einfach mal nach „css menu“ suchen.
-Wie hätte ich das mit der Kopfzeile bessr umsetzen sollen? Gar kein Div-Element einfügen und nur die Image-datei einfügen?
Das Bild zumindest als -Tag. Markier mal im Firefox „Menu > View > Page Style > No Style“, dann merkst du, wieso. Das Bild ist nicht mehr zu sehen, wenn das CSS deaktiviert wird. (Dafür aber irgendein anderes. ;))
-Und was meinst du damit, dass meine im Nichts stehen und der Footer nicht richtig ausgezeichnet ist.
Auf die Erklärung bin ich gespannt.
Für meinen Geschmack arbeitest du außerdem noch zu viel mit Inline-Styles. Versuch mal, da mehr Klassen zu setzen. Das zwingt dazu, sich Gedanken über die logische Struktur zu machen.
)[/li][li]Die TÜV-Grafik soll nach unten rechts, aber ich verstehe nicht wie.[/li][li]Die transparenten Teile des Fotos mit dem Team werden unter IE6 nicht richtig angezeigt, das Problem habe ich trotz googeln nicht hinbekommen.[/li][li]Unter IE befindet sich oberhalb der gesamten Page ein weißer Text, der eigentlich gar nicht angezeigt werden dürfte. In Firefox ist er nicht sichtbar.[/li][li]Eigentlich eher eine Bitte: Ist die Seite an sich sauber geschrieben, oder gibt es noch Verbesserungsbedarf?[/li][/ol]
