Thema: Html Einleitung

LANtastic’s Artikel » DTD - Document Type Declaration - Das richtige Doctype

Auf Seite 3 steht eine Tabelle, aus der ersichtlich ist, bei welchem Docype welche Browser in Quirks- bzw. Standards Mode schalten. Dein Ziel sollte der Standards Mode sein, weil die Browser im Quirks Mode machen, was sie wollen und jeder anders.

Aber das sollte auch alles in dem Artikel stehen.

Welchen Doctype Du nun verwenden willst, liegt bei Dir. Entscheide Dich für HTML oder XHTML und für eine Version und für Strict oder Transitional. Du musst Dich dann nur an die Standards für diese Version halten.
Bei der Entscheidung ob Strict oder Transitional empfehle ich Strict, weil da die Regeln noch etwas enger gefasst sind, Du darfst weniger Fehler machen. Das bringt Dich dazu, HTML anständig zu lernen und umzusetzen. "Transitional" heißt ja "übergangsweise". Ich würde was anständiges machen wollen und nichts temporäres.

Ok, vielen Dank!

Ich bastel hier auf meiner Testseite gerade an einer "richtigen" Navigationsleiste rum.

Ich will, dass jeder Seitenname in der Mitte eines Bildes steht. Das Bild will ich über die css in der mainnav li einfügen. Aber irgendwie wird das Bild immer abgeschnitten angezeigt. Kann mir da jemand auf die sprünge helfen?

Test

Du kannst dem Element (li) die Höhe und Breite des Bildes geben, dann wird auch nichts abgeschnitten

Das Bild scheint abgeschnitten, weil das Element nicht groß genug ist. Inline-Elemente (oder solche, die Du mit display:inline dazu machst) sind immer nur so breit, wie ihr Inhalt.

Aber das Hintergrundbild bringt noch ein Problem mit sich: Wenn jemand eine andere Schriftgröße eingestellt hat als Du...probier es mal aus, vergrößere die Schrift und Du wirst es selber merken...

Also das Bild hat width:100px u. height:15px

Also habe ich ...

#mainnav li {
background-image: url("http://www.albtal-pixel.de/images/nav.gif");
width: 100px;
height: 15px;
display: inline;
padding: 0 10px;
font-family: Verdana;
font-size: 12px;
}

gemacht, aber ging nicht ...

Nein, das geht nicht, das hab ich ja indirekt auch schon gesagt.

width+height sind bei Inline-Elementen und solchen, die dazu gemacht werden, nicht erlaubt.
Du musst also das display:inline noch rausnehmen.

Und dann ist Dein Menü nicht mehr horizontal. Dazu musst Du dann float:left; verwenden.