Homepage für eine KFZ-Werkstatt: Fast fertig, aber ich find den Fehler nicht!

[Mr. Wallace]

Hallo Leute!

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:

1. Unter der Navigation ist ein weißer Streifen, den ich nicht wegbekomme (Ja! Ich habe die FAQ gelesen ;-) )
2. Die TÜV-Grafik soll nach unten rechts, aber ich verstehe nicht wie.
3. Die transparenten Teile des Fotos mit dem Team werden unter IE6 nicht richtig angezeigt, das Problem habe ich trotz googeln nicht hinbekommen.
4. 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.
5. Eigentlich eher eine Bitte: Ist die Seite an sich sauber geschrieben, oder gibt es noch Verbesserungsbedarf?

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:

T.G. Autotechnik - Ihre freundliche und kompetente KFZ-Meisterwerkstatt in Berlin Spandau


Viele Grüße
Mr. Wallace

 

[Imbericle]

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.


MfG

 

[Mr. Wallace]

So, danke erstmal!

Die Fehler, die der Validator angezeigt hat, habe ich korrigiert.

Allerdings wurden meine anderen Fragen leider noch nicht beantwortet:

1. Wie geht der weiße Streifen unter der Navigation weg?
2. Wie bekomme ich das Tüv-Zeichen nach unten rechts?
3. Wie schaffe ich es, dass die PNG-Transparenz beim Internet Explorer 6 angezeigt wird.

Frohe Weihnachten!

Gruß
Mr. Wallace

 

[DD-Stylz]

So, danke erstmal!

Die Fehler, die der Validator angezeigt hat, habe ich korrigiert.

Allerdings wurden meine anderen Fragen leider noch nicht beantwortet:

1. Wie geht der weiße Streifen unter der Navigation weg?
2. Wie bekomme ich das Tüv-Zeichen nach unten rechts?
3. Wie schaffe ich es, dass die PNG-Transparenz beim Internet Explorer 6 angezeigt wird.

Frohe Weihnachten!

Gruß
Mr. Wallace

zu 1. in der div content ist die div padding wozu?
zu 2 ka
zu 3 garnet IE6 unterstützt keine trans png´s aber ne trans gif sollte gehen.

 

[prm]

zu 1 füge das rot markierte ein:

<dt><img style="display: block;" src="http://www.html.de/images/nav_fill.jpg" alt="fuellgrafik navigation"></dt>

zu 2:

 <p>Unser Team freut sich auf Ihren Besuch!</p> 
  
    </div>
   <img style="margin-left: 590px;" src="http://www.html.de/images/meisterbetrieb.png" alt="kraftfahrzeug gewerbe meisterbetrieb">  
    </div>

 

[struppi]

guck mal in die Fehlerkonsole, du hast einen CSS Fehler

 

[Mr. Wallace]

Vielen Dank für eure Hilfe!
Hat alles perfekt funktioniert. Ich melde mich nochmal, sobald die Seite fertig ist und poste euch dann das Endergebnis.

Viele Grüße
Mr. Wallace

 

[struppi]

Der Fehler in der Fehlerkonsole ist immer noch da.

 

[Mr. Wallace]

Den hab ich nicht übersehen, ich hab die neue Version bloß noch nicht hochgeladen. Ich melde mich, sobald die fertige Version online ist.

Viele Grüße
Mr. Wallace

 

[Efchen]

Du musst noch an Deiner Semantik arbeiten.

- Du hast kein <h1> aber ein <h2>. Das ist unlogisch.
- div#navigation ist überflüssig. Du gruppierst hier nichts.
- Ich finde eine Definitionsliste als Menü unglücklich, zumal bei der Liste die Definitionen (<dd>) fehlen. Es ist eigentlich so, dass zu einem Term (<dt>) immer eine Definition (<dd>) 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 <img>, wo Du dann einen Alternativtext angeben kannst, der dann auch in Textbrowsern, Vorlesebrowsern und von Suchmaschinen gesehen werden kann?
- Deine <img>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.

 

[Mr. Wallace]

Hi Leute!

Die Seite steht jetzt. Ihr könnt sie euch unter
T.G. Autotechnik - Ihre freundliche und kompetente KFZ-Meisterwerkstatt in Berlin Spandau
anschauen.

Jetzt fange ich an die Unfeinheiten auszubügeln.

@Efchen

-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 <img> 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.



Gruß
Mr. Wallace

-

 

[mermshaus]

Ich hoffe, ich darf mich einmischen. :)

-warum ist die div-Navigation überflüssig.

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.

Kurz und knapp:

<!DOCTYPE html>

<html>
    <head>
        <title>Demo</title>
        <meta http-equiv="charset" content="utf-8" />
        <style type="text/css">
            /* Google: "easy clearing" oder "clear fix" */
            .clear:after {
                content: '.';
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }

            .clear {
                display: inline-block;
            }

            .clear {
                display: block;
            }

            body {
                background: #ccc;
            }

            #navigation {
                list-style: none;
                margin: 0;
                padding: 0;
            }

            #navigation li {
                float: left;
                margin-right: 5px;
            }

            #navigation li a {
                display: block;
                padding: 5px;
                width: 100px;
                border: 1px solid #999;
                text-decoration: none;
                text-align: center;
            }

            #navigation li a:hover {
                background-color: #f00;
            }
        </style>
    </head>
    <body>
        <ul id="navigation" class="clear">
            <li><a href="#">Eintrag</a></li>
            <li><a href="#">Eintrag</a></li>
            <li><a href="#">Eintrag</a></li>
            <li><a href="#">Eintrag</a></li>
            <li><a href="#">Eintrag</a></li>
        </ul>
        <p>Lorem ipsum</p>
    </body>
</html>

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 <img>-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 <img> 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.