nicht angemeldet
opera 7.1 div / table positionierung
hallo,
ich habe folgende webseite
http://www.mothertonguelives.de
(http://www.mothertonguelives.de/mtl.css)
unter (alle für windows) opera 6.05, mozilla 1.2.1 und ie 6.0 gebastelt und getestet. heute hab ich mir testweise mal opera 7.1 installiert und der zerschiesst das layout, indem er die margin-top:145px zuweisung der tabelle (table.norm) auf die image-map (.menue) anwendet.
falls jemand eine idee hat, wie ich das problem verhindern bzw anders lösen kann, wäre ich sehr dankbar. das ist meine erste webseite, die ich programmiert habe und würde mich natürlich auch freuen, wenn ihr andere unzulänglichkeiten oder besseren code finden bzw vorschlagen könntet. danke schon mal.
jan
-
Hallo, Jan,
http://www.mothertonguelives.de
(http://www.mothertonguelives.de/mtl.css)unter (alle für windows) opera 6.05, mozilla 1.2.1 und ie 6.0 gebastelt und getestet. heute hab ich mir testweise mal opera 7.1 installiert und der zerschiesst das layout, indem er die margin-top:145px zuweisung der tabelle (table.norm) auf die image-map (.menue) anwendet.
Das Stylesheet ist ziemlich vermurkst. Das position:absolute ist gänzlich unnötig und kann herausgenommen werden. Der Bogen, also das komplett div-Element mit class="bogen" kann auch entfernt werden zugunsten eines Hintergrundbildes von menue. Dann käme in etwa .menue {margin:0; height:148px; background-image:url('bogen000.gif'); background-position:525px 0; background-repeat:no-repeat;} heraus, besser wäre natürlich eine ID, also <div id="menue"> und #menue {...}, weil das Element nur einmal pro Dokument vorkommt. margin-top bei .norm kann dann verschwinden.
das ist meine erste webseite, die ich programmiert habe und würde mich natürlich auch freuen, wenn ihr andere unzulänglichkeiten oder besseren code finden bzw vorschlagen könntet. danke schon mal.
Wenn du CSS verwendest, kannst du auch das Tabellenlayout aufgeben und float/margin oder position:absolute (aber diesmal richtig) verwenden.
Die Validatoren (http://validator.w3.org//http://jigsaw.w3.org/css-validator/) kannst du selbst befragen.
Anstatt <meta name="language" content="de"> besser lang="de" für das html-Element. Der revisit-after-Metatag hat im Grunde keine Bedeutung, daran hält sich kein Spider.
Du könntest durchaus HTML 4.01 Strict schreiben.
.middlebox und .rightbox scheinen unnötig, wenn du weiter an den Tabellen festhältst, kannst du Innenabstände mittels padding(-top) für die Zellen vergeben.
Die Schrift in der Navigation oben erscheint mir sehr klein. Im Allgemeinen sind 10 Pixel für die Fließtextschrift natürlich auch zu klein, auch wenn Verdana es ein wenig rettet.
Benutze logisches Markup, also p-Elemente für Absätze anstatt <br><br>, h1, h2 usw. für Überschriften, ul für Listen etc. Momentan hebst du Überschriften nur mit dem b-Element hervor. Für Hervorhebungen, welche nicht mit Überschriften oder anders strukturiert werden können, ist das strong-Element besser als <b>.
Wenn du die Links in der Sekundärnavigation fett formatieren willst, dann zeichne die Links mit einer ul-Liste aus, fasse die zusammen mit dem gewählten Menüpunkt darüber in ein div-Element (das kannst du dann als linke Spalte positionieren) und formatiere alle Links darin fett (#nav a usw.).
In alt-Attribute von Bildern gehört eine Alternativbeschreibung des Inhalts, nicht der Dateiname, siehe auch http://www.bjoernsworld.de/html/alt-text.html. Du kannst das title-Attribut für einen Bildtitel verwenden, welcher zusätzlich zum Bild angezeigt wird. Style-Attribute kannst du durch Verwendung von Klassen vermeiden, so musst du nicht jedem floatenden Bild Inline-Styles verpassen.
In width-Attributen dürfen keine Einheiten vorkommen, also width="150" statt width="150px". Aber verwende wie gesagt besser CSS-Layout.
Ferner kannst du die Hinweise und Links auf http://www.dciwam.de/checkliste/ selbständig durcharbeiten.
Grüße,
Mathias-
danke für die schnelle und ausführliche antwort mathias. ich hab jetzt erstmal das gröbste geändert (bogen-grafik als hintergrundbild vom .menue und position:absolute vom .menue raus, margin-top vom .table.norm raus...muss ich nur noch durch alle 70 html dateien gehn und den div-bogen kicken...uiui), damit auch die opera 7.1 user nix mehr zu meckern haben.
Wenn du CSS verwendest, kannst du auch das Tabellenlayout aufgeben und float/margin oder position:absolute (aber diesmal richtig) verwenden.
ja da werde ich mich mal als nächstes ranwagen, die ganzen tables rauszuhauen. ich hoffe das gibt kein ärger mit der positionierung des footers.
Für Hervorhebungen, welche nicht mit Überschriften oder anders strukturiert werden können, ist das strong-Element besser als <b>.
was ist der unterschied? konnte eben auf den ersten blick keinen erkennen.
deine restlichen tips werde ich beim durchforsten der ganzen html-seiten berücksichtigen. dankeee!
-
Hallo simme,
Für Hervorhebungen, welche nicht mit Überschriften oder anders strukturiert werden können, ist das strong-Element besser als <b>.
was ist der unterschied? konnte eben auf den ersten blick keinen erkennen.
Wenn Du (oder der Browser) in Deiner CSS-Datei ein
strong { font-weight: bold; }
definiert hast, dann gibt es keinen Unterschied in der Darstellung zwischen <b>hallo</b> und <strong>hallo</strong>. Allerdings sollte Dir auch klar sein, dass HTML den Inhalt auszeichnen sollte (heißt ja auch Markup Language) und <b> hat nunmal überhaupt keine semantische Bedeutung - es heißt einfach "fett". <strong> dagegen bedeutet "stark hervorgehoben" - und das _kann_ fett sein, wenn Du es so über CSS formatierst. Bedenke, dass Webseiten z.B. auch vorgelesen werden können oder in nichtgraphischen Browsern angezeigt werden können. (z.B. Lynx, w3m, Links)
Viele Grüße,
Christian--
Ich bin ein Bandbreitenverschwender. Meine Signatur tut mir leid. Ehrlich!
-
-