Layoutprobleme: FF float im foot; IE Formularbreite; FF Zeilenumbruch

[Budman]

Hallo!

Nicht "rechts an der Navi" sondern "links an der Überschrift". Dann sollte es eigentlich auch klappen. Wenn ich mich nicht verschaut habe, ziehst Du bei der Formatierung von "h1" die Linie an die Navi dran (durch den Einsatz von "0.5em"). Hierzu noch ein kleiner Hinweis zu "em" (Quelle: SelfHTML):

Andere Angaben wie em oder Prozentwerte umgehen zwar das Problem der unterschiedlichen Bildschirmdarstellungen - aber erstens kann man bei einer Angabe wie 1.2em kaum von "Formatierung" reden, und zweitens bereiten solche Angaben auch andere Probleme. So kann es beispielsweise durch das Prinzip der natürlichen Vererbung passieren, dass Schriftarten bei mehrfach verschachtelten Elementen (etwa bei Listen oder Tabellen) immer kleiner oder größer werden. CSS 2.0 bietet zwar mit den erweiterten Möglichkeiten, Seite Formate für verschachtelte Elemente zu definieren, Maßnahmen zur Abhilfe an, doch das nutzt vorläufig auch nichts, solange es in vielen noch verbreiteten Browsern nicht funktioniert.

Um die "richtigen" und "falschen" Maßangaben ist angesichts all dieser Probleme in einigen Kreisen schon ein richtiger Glaubenskrieg ausgebrochen. Die einen behaupten, man solle sich an Angaben wie pt halten, weil ein Punkt immer gleich groß zu sein hat, die anderen beschwören die em-Angabe wie einen Erlösergott.

Ich wollte Dich da nur nochmal fragen, warum keine "div"-tags? Diese sind imho ein wesentlicher Teil von CSS, solange man sie nicht als "Lückenfüller" oder, wie Du schon sagtest, "inhaltsleer" verwendet, sondern sinnvoll und dort nutzt wo nötig.

Ich verwende in solchen Fällen immer als schönes Beispiel CSS Zen Garden als Beispiel für den gelungenen Einsatz von CSS. Aber auch dort ist eine Verwendung von divs unverzichtbar.

Gruss Bud

 

[hpvw]

Hallo Budman.
Wie meinst Du das mit dem linken Rand an der Überschrift?
Der würde sich dann ja, so wie es jetzt mit den 2% (die 0.5em sind top und bottom) auch ist, auf den Seitenrand beziehen?
Dann müßte ich ihn ja so breit (+Abstand), wie die Navigation machen.
Ich weiß jedoch vorher nicht, wie breit die Navigation ist.
Die Seite wird im Endeffekt dynamisch erstellt und die Navigation soll soviel Platz einnehmen, wie sie gerade braucht.
Außerdem würde die Angabe sich ja auch auf alle anderen h1-Überschriften beziehen.
Da die Seite dynamisch erstellt wird und die User unterschiedliche Fensterbreiten haben (die ich ihnen gönnen will), weiß ich ja auch nicht, welche Überschrift die erste ist, die nicht mehr neben der Navigaton, sondern darunter steht.
Vielleicht habe ich Dich ja auch falsch verstanden.

Zu em:
Bei pt und px lässt der Internetexplorer keine Änderung der Schriftgröße durch den User zu. Das will ich dem User aber nicht verbieten.Im Firefox weiss ich selbst nicht mehr, ob ich normale, größere oder kleinere Schriftgröße habe. Wenn ich's nicht mehr lesen kann mache ich Strg +, wenn es mir ins Gesicht springt, mache ich Strg -.
Sicherlich muss man auf Verschachtelungen achten, aber damit kann ich leben, manchmal ist das ja auch gewünscht.
Danke für den Hinweis, wie Du siehst geht es mir nicht um absolute Größen, sondern um die relativen Unterschiede zwischen den Elementen unterschiedlicher Bedeutung.

Zu den div's:
Wenn es nicht anders geht nehme ich auch ein div. Die div's sind zwar im html-Standard, aber an sich unter dem Aspekt der inhaltlichen Auszeichnungssprache IMHO fehl am Platz.
Mit dieser Seite habe ich mir selbst den Anspruch gesetzt html in seiner "reinsten" Form zu verwenden und die Gestaltung ausschließlich dem css überlassen.
Mir ist auch aufgefallen, dass, wenn man zum Beispiel den gesamten Content in ein div packt (also alle h1..6, p, etc), der Firefox merkwürdiges beim drucken fabriziert.
Wie im css schon ansatzweise zu erkennen, will ich auch die spezielle Formatierung für den Ausdruck berücksichtigen.
An welcher Stelle meinst Du, könnte ein div helfen?

CSS-Zengarden ist in der Tat eine faszinierende Seite.
Alles nur mit einem anderen css umfzuformatieren ist für mich allerdings nicht relevant, da der Content ohnehin formatierungsunabhängig in einer Datenbank steht. Das heißt ein neues Template und die Seite sieht ganz anders aus. Über verschiedene "Ausgabeprozessoren" lässt sich dann sowohl das Menü, als auch der Text beliebig anpassen und auf die Seite verteilen, wenn es nötig werden sollte.

Vielen Dank für deine Anregungen, vielleicht kannst Du ja noch mal sagen, ob ich Deinen Hinweis mit dem margin richtig verstanden habe. In dem Fall hätte es nämlich leider nicht den gewünschten Effekt.

Gruß hpvw

 

[Gumbo]

Warum sollen div-Elemente IYHO (ich hasse solche Abkürzungen) unter dem Aspekt einer Auszeichnungssprache fehl am Platze sein? Die Elemente div und span sind doch dazu gedacht, mehrere zusammengehörige Elemente zu gruppieren.
Und was in HTML und XHTML (bis Version 1.1) das div-Element zur semantischen Strukturierung ist, wird in XHTML sogar noch einen Helfer bekommen, das section-Element.

 

[hpvw]

Im Prinzip ist die Gruppierung ja eine durchaus semantische Auszeichnung.
In den Beispielen zu der in XHTML2 geplanten section wird aber auch klar, wie diese Sematik zu sehen ist. Es soll, so wie ich das sehe, ja die h1 bis h6 überflüssig machen (die mich nerven, seit ich mit html zu tun habe).
div's werden in der Regel jedoch meist zur rein optischen Gruppierung verwendet. Dafür ist html jedoch nicht gedacht.
div's haben auch nicht die Intention (wie section) eine Gruppierung im Sinne von wissenschaftlichen Arbeiten und ihrer Struktur zu definieren. Dafür sind ja (noch) h1 bis h6 zuständig.
Aber wir driften vom Thema ab

Gruß hpvw

 

[Gumbo]

Wo liegt denn deiner Meinung nach die Grenze zwischen optischer und semantischer Gruppierung?
Fasse ich mehrere Absätze zu einem semantischen Block zusammen, ist es eine semantische Gruppierung. Fasse ich jedoch mehrere Absätze zu einem semantischen Block zusammen, um diesse später noch durch einen zusätzlichen Rand auch optisch von anderen Elementen abzugrenzen oder in einer anderen Art und Weise hervorzuheben, ist es dann eine optische Gruppierung?

 

[hpvw]

Die Grenze ist sicherlich fließend.
Für mich persönlich ist eine semantische Gruppierung eine Zusammenfassung, wie sie zum Beispiel in dem Beispiel von section gemacht wird.
Eine semantische Gruppierung ist meiner Meinung nach nicht gegeben, wenn ich zwei Blockelemente direkt ineinander schachtel. Also z.B.:
<div>
<div>
Bla
</div>
</div>
In Bezug auf mein Layout hielte ich auch <div><ul id="navi">...</ul></div> für eine rein optische Gruppierung.
Schachtelungen, die keine zusätzliche semantische Information liefern halte ich für optische Gruppierungen.

In Bezug auf den Thread nochmal:
Könnte ein div denn für eins der noch bestehenden Probleme Abhilfe schaffen?
Gibt es für die spans die ich verwende, aussagekräftigere, sinnvolle Elemente?

Gruß hpvw

 

[Gumbo]

Anstatt der vermeintlich überflüssige span-Elemente würde ich mir eher Gedanken über die falsche Verwendung von geschützten Leerzeichen machen, denn die sind keinesfalls für gestalterische Aspekte gedacht, sondern für semantische.

 

[hpvw]

Anstatt der vermeintlich überflüssige span-Elemente würde ich mir eher Gedanken über die falsche Verwendung von geschützten Leerzeichen machen, denn die sind keinesfalls für gestalterische Aspekte gedacht, sondern für semantische.

Da hast Du recht. Ich habe erstmal direkt im a ein padding-right eingefügt.