Positionierung mit CSS, Elemente der Seite mittels CSS "modern" positionieren und fixi Einstellungen

[spezies-8472]

Hallo, hier ist der "Neue"...
und wie könnte es anders sein - ich hätte da gerne auch mal ein Problem!

Für meine Frau habe ich folgende Seite gebaut und gestaltet:

http://www.amira-almaas.de

Dabei habe ich versucht (außer auf der Startseite und einer weiteren Unterseite) komplett auf Tabellen als Mittel zur Seitenaufteilung zu verzichten.
Meine Probleme sind nun folgende - nach vielen Versuchen und endlosem ausprobieren habe ich es irgendwie geschafft, die Seiten im IE (6 & 7 zumindest), sowie Firefox halbwegs gleich aussehen zu lassen. Dabei musste ich auf der Unterseite "Referenzen & Links" schon einige Kopfstände machen, damit im zentralen Bereich die Referenzen dargestellt werden und im rechten Randbereich die Links wie in einer Spalte einer Tabelle nach unten positioniert sind und das auch noch UNTER dem Bild, welches EIGENTLICH auf allen Unterseiten an der gleichen Stelle stehen sollte. Sollte, da der IE es minimal verschiebt und Sollte, weil ich dank der Sonderbehandlung dieser Seite ein größeres Bild benutzen musste - warum ist mir allerdings unklar geblieben...

Frage 1. gibt es eine einfachere Variante, als meine, 3 Bereiche nebeneinander zu positionieren, dass sie sich NICHT gegenseitig beeinflussen? Dabei soll aber das Menü auf der linken Seite fixiert sein, während der Hintergrund darunter hinwegscrollen darf (soll)
Aber es wäre noch schöner, wenn man in dieser Spalte trotzdem auch weiteren Text oder ggf. Bilder unterbringen könnte bei Bedarf - habe ich aktuell GAR NICHT geschafft.
Wichtig wäre mir auch, dass bspw. das Bild rechts bei nur 2-spaltiger Nutzung der Seite vom Text umflossen werden soll, bei 3 Spalten ist es einfach nur die obere Grenze der 3. Spalte für folgenden Text.
Wie sieht die Seite aber überhaupt in anderen Browsern aus? Opera, Konquerer (oder wie er sich schreibt) und anderen Linux- und alternativen Browsern???

Frage 2. ist die Seite aktuell in HTML 4.01 transitional geschrieben - um moderner zu sein, wäre es vielleicht sinnvoll(?), sie auf XHTML umzustellen?? Allerdings geht das bei mir völlig schief. Da verschiebt sich das Menü bei der Darstellung im IE und dem FF ziemlich deutlich - entweder schaffe ich es, das Menü für den FF ordentlich zu positionieren, oder aber für den IE (7) - beides klappt nicht

Frage 3. unterstützt phase 5 irgendwie das Erstellen und positionieren von solchen "Containern"? Habe dazu noch nichts finden können.

Reicht das erstmal?

[Peter Gedamke]

so durch und versuche wenigstens im FF, IE6 & 7 die Seiten halbwegs gleich aussehen zu lassen

vom Prinzip her genügt das eigentlich doch auch schon - aber mich interessiert es halt dennoch, wie's in den - wie hier ganz richtig gepostet - wohl für immer unbedeutenden Browsertypen wie Safari oder auch, ganz klar, dem OPERA aussieht.
Vielleicht ein bischen 'überpingelig', aber who cares

Grosse Rücksichten nehme ich da soweit eh nicht, gleich wie es mir Wurscht ist, wie meine Seiten in echten Mumien-Browsern zur Ansicht kommen.
Wer eben meint, immer noch mit FF 1x, IE5 oder dem wohl nur zu berühmt berüchtigten Netscape 4 in's Netz gehen zu müssen, hat dann eben, abgesehen von den Sicherheitsrisiken, Pech gehabt, wenn er nicht alle Einbindungen meiner Sites auch geniessen kann

[spezies-8472]

Interessieren tut es mich natürlich auch, aber andererseits dann dafür noch mehr Programme installieren...??!!
Könnte man sicherlich tun, aber wo ist dann die Grenze? Und für diese Browser dann auch noch optimieren - vermutlich muss man dann letztendlich entweder ne Flash-Seite bauen, oder auch nahezu alle moderneren Gestaltungselemente verzichten, wenn man ohne zig Hacks & Weichen auskommen will...

warum ich bspw <br /> verwendet habe? Um ggf. nicht allzuviel Aufwand zu haben, sollte ich mal offiziell auf XHTML umstellen...
Allerdings weiß ich halt nicht, wie relevant XHTML nun tatsächlich ist - der Aussage von "Auge" entnehme ich allerdings, dass es für meine paar Seiten eher überflüssig wäre?!?

[Auge]

Interessieren tut es mich natürlich auch, aber andererseits dann dafür noch mehr Programme installieren...??!!
Könnte man sicherlich tun, aber wo ist dann die Grenze? Und für diese Browser dann auch noch optimieren - vermutlich muss man dann letztendlich entweder ne Flash-Seite bauen, oder auch nahezu alle moderneren Gestaltungselemente verzichten, wenn man ohne zig Hacks & Weichen auskommen will...

Grundsätzlich gilt, dass man nicht für einen/einige Browser optimieren soll. HTML ist eine Sprache, mit der man die Struktur eines Dokuments (um mal vom Begriff Datei wegzukommen) beschreibt. So, wie man z.B. einer Programmdokumentation in Word oder was auch immer eine Struktur, die sich im Inhaltsverzeichnis widerspiegelt, gibt, sollte man das -an die Erfordernisse angepasst, auch in einem HTML-Dokument tun.

Eine Überschrift ist eine Überschrift, eine Liste ist eine Liste und so weiter. Für alle diese (wenn auch nicht für alle möglichen) Fälle gibt es entsprechende Elemente in HTML. Wenn man den Inhalt seines Dokuments entsprechend ausgezeichnet hat, hat man den ersten Schritt getan. Das Ergebnis kann jedes Anzeigeprogramm (da gibt es ja einige mehr als nur die grafischen Browser, auch wenn diese einen verschwindend geringen Marktanteil haben) für HTML darstellen.

Danach ist die Zeit gekommen, dem Dokument per CSS das gewünschte Aussehen zu verpassen. Allerdings geht in einem Browser einerseits nicht alles, was man z.B. aus dem Printbereich kennt (1), andererseits, und das wurde ja schon erwähnt, muss man sich mit den unterschiedlichen Fähigkeiten der Browser bezüglich CSS herumschlagen (2).

1. HTML ist dafür gedacht, mit verschiedenartigsten Programmen angezeigt zu werden. Da gibt es die allseits bekannten grafischen Browser, Nurtextbrowser, in denen eine Seite aussieht, wie auf einer Kommandozeile ("DOS-Box", "Konsole"; je nach OS), Vorleseprogramme, Braillezeilen, Browser auf kleinen Bildschirmen von Funktelefonen oder PDAs etc. pp.. Nicht alle Geräte sind für alle Seiten relevant, aber die Aufzählung soll verdeutlichen, dass HTML bzw. dessen Anzeige bewusst flexibel sein soll. Du bist als Autor einer Seite schließlich bei einem Besucher zu Gast und weißt nichts über sein Aussgabeprogramm, über eine eventuelle Browserfenstergröße, ob in dem Browserfenster, wenn es denn eines ist, vielleicht eine Sidebar angezeigt wird, die den Anzeigebereich zusätzlich schmälert, ob die referenzierten Grafiken tatsächlich angezeigt werden, und, und, und.

2. Zu all dem eben genannten autorenseitigen "Ungemach" kommt noch dazu, dass verschiedene Browser verschiedene CSS-(Un)Fähigkeiten haben. Man kann natürlich (partiell CSS-fähige) Uraltbrowser (die, die Peter ansprach) aktiv von den Segnungen von CSS ausschließen oder einfach ignorieren, dass es sie noch gibt. Wenn es denn technisch möglich ist, sollte man Ersteres tun. Zudem sollte man es sich der Einfachheit halber nicht zum Ziel machen, dass eine Seite überall pixelgenau identisch aussieht. Das erspart einem jede Menge Frustrationen.

Klar soll sie, die Seite, überall wiedererkennbar sein, aber ob jemanden, der beispielsweise den Opera benutzt, interessiert, dass ein Bild oder ein Textblock in einem anderen Browser, den er nicht benutzt, zwei Pixel weiter rechts steht, darf angezweifelt werden. Offensichtliche Fehler sollten natürlich ausgemerzt werden, dafür gibt es CSS-Hacks und (für MSIE) die Conditional Comments. Über geringe Ungleichheiten sollte man sich aber nicht übermäßig Gedanken machen. Davon kriegt man nur Magengeschwüre.

warum ich bspw <br /> verwendet habe? Um ggf. nicht allzuviel Aufwand zu haben, sollte ich mal offiziell auf XHTML umstellen...
Allerdings weiß ich halt nicht, wie relevant XHTML nun tatsächlich ist - der Aussage von "Auge" entnehme ich allerdings, dass es für meine paar Seiten eher überflüssig wäre?!?

Du kannst es durchaus benutzen, wenn du dir darüber klar bist, dass gerade der/die MSIE(s) XHTML nicht als XML ausgeben können, was zur Folge hat, dass du die XHTML innewohnenden Vorteile so nicht nutzen kannst.

Wofür du dich auch immer entscheidest, ob HTML (SGML) oder XHTML (XML), richte dich nach dem jeweiligen Standard. Bei HTML: <img>, <br>, <meta>, <hr>; bei XHTML: <img />, <br />, <meta />, <hr /> (analog gilt dies auch für weitere Elemente).

Tschö, Auge

PS:

Wer eben meint, immer noch mit FF 1x, IE5 oder dem wohl nur zu berühmt berüchtigten Netscape 4 in's Netz gehen zu müssen, hat dann eben ... Pech gehabt

Wenn es denn nur um vorenthaltenes CSS geht, gehe ich mit dir vollkommen konform. Allerdings, auch wenn das deiner Aussage nicht widerspricht, ich wollte es nur angemerkt haben, ist es durchaus möglich, dass der Besucher gar keinen Einfluss auf die Wahl des Browsers hat (z.B. in Firmen). Übrigens, der FF1 ist von seinen Fähigkeiten keineswegs mit den beiden anderen genannten Browsern vergleichbar.

Der Beitrag wurde von Auge bearbeitet: 25.05.2008 - 0:06

[spezies-8472]

Grundsätzlich gilt, dass man nicht für einen/einige Browser optimieren soll. HTML ist eine Sprache, mit der man die Struktur eines Dokuments (um mal vom Begriff Datei wegzukommen) beschreibt....

Damit hast Du natürlich vollkommen Recht, aber heutzutage reicht eine nüchterne Textseite für einen Internetauftritt einfach nicht mehr aus - ergo bekommen Gestaltungselemente und CSS usw. immer größere Bedeutung.
Dass die seiten im IE bzw. FF nicht exakt deckungsgleich sind, darüber rede ich gar nicht, ist mir auch völlig egal, wenn da die besagten 2 Pixel links oder rechts fehlen oder zuviel sind - mir geht es um grundsätzliche Interpretationsfehler - FF stellt noch alles so dar, wie ich es mir denke, aber der container für meine Links, der im FF schön, wie es sein soll unter dem Bild angeordnet ist, wird im IE plötzlich ganz unten unter den Text geschoben - ist er dann im IE an der korrekten Stelle, überlagert er den Content-text im FF - also sind schon die ersten Spagats nötig, die wiederum tiefergehende Kenntnisse erfordern, die man nicht einfach mal abgucken kann. Ok, kann man natürlich schon, aber im nächsten fall fängt man wieder von vorne an, da man das zugrunde liegende Prinzip nicht einfach so durchschauen kann, wie man eben mal fast nebenbei HTML erlernen kann...

Und mich würde es ja mal interessieren, ob es möglich ist, eine etwas anspruchsvoller gestaltete Seite wirklich exakt deckungsgleich für alle möglichen Browser zu gestalten?!? Also nicht mehr Netscape 3 oder IE 3 oder sowas... (falls es die überhaupt gibt)

Was mein Problem ist, bei der ganzen Sache - ich weiß nicht, genau, wie welcher Hack und welche Weiche funktioniert und wie ich verhindern kann, dass eine CSS-Definition, die in beiden Browsern unterschiedlich dargestellt wird, von beiden interpretiert wird - klingt jetzt etwas durcheinander, oder?
Also die sicherste Variante wäre vermutlich soviele HTML-Seiten zu erstellen, wie man Browser abdecken möchte. Dann kann man jede Seite für nur EINEN Browser gestalten und bekommt keine Probleme - nur ist das dann ggf. 3, 4, 5facher Aufwand, die ganzen, eigentlich gleichen Seiten zu pflegen und aktuell zu halten...
Allerdings muss man dann immer noch irgendwie unterscheiden, welche Seite von welchem Browser aufgerufen werden darf... - geht das überhaupt ohne JavaScript??

Wofür du dich auch immer entscheidest, ob HTML (SGML) oder XHTML (XML), richte dich nach dem jeweiligen Standard. Bei HTML: <img>, <br>, <meta>, <hr>; bei XHTML: <img />, <br />, <meta />, <hr /> (analog gilt dies auch für weitere Elemente).

Ok, habe ich schon bereinigt inzwischen und die XHTML-Seiten "ad akta" gelegt... Ich war davon ausgegangen, dass XHTML nach HTML 4.01 folgt...

Bis denne
spezies-8472

[Auge]

Grundsätzlich gilt, dass man nicht für einen/einige Browser optimieren soll. HTML ist eine Sprache, mit der man die Struktur eines Dokuments (um mal vom Begriff Datei wegzukommen) beschreibt....

Damit hast Du natürlich vollkommen Recht, aber heutzutage reicht eine nüchterne Textseite für einen Internetauftritt einfach nicht mehr aus - ergo bekommen Gestaltungselemente und CSS usw. immer größere Bedeutung.

Ich habe auch nirgendwo gegenteiliges behauptet. Ich wies nur auf die Reihenfolge (erst Struktur mit (X)HTML, danach Gestaltung mit CSS) hin.

...FF stellt noch alles so dar, wie ich es mir denke, aber der container für meine Links, der im FF schön, wie es sein soll unter dem Bild angeordnet ist, wird im IE plötzlich ganz unten unter den Text geschoben - ist er dann im IE an der korrekten Stelle, überlagert er den Content-text im FF - also sind schon die ersten Spagats nötig ...

Ja, klar muss man da wissen, was welche Eigenschaft bei welchem Browser bewirkt. Wenn du das weißt und auch noch weißt, was du für welchen Browser anpassen musst (danach klingt zumindest dein Geschriebenes), kannst du das doch auch tun. Wo ist das Problem?

Was mein Problem ist, bei der ganzen Sache - ich weiß nicht, genau, wie welcher Hack und welche Weiche funktioniert und wie ich verhindern kann, dass eine CSS-Definition, die in beiden Browsern unterschiedlich dargestellt wird, von beiden interpretiert wird - klingt jetzt etwas durcheinander, oder?

Wie welcher Hack funktioniert, ist auf so vielen Seiten im Netz beschrieben, diese Seiten kannst du doch gewiss nicht verpasst haben, oder? Die Stichworte "CSS-Hack" und "Conditional Comments" hatte ich ja schon gegeben.

Also die sicherste Variante wäre vermutlich soviele HTML-Seiten zu erstellen, wie man Browser abdecken möchte. Dann kann man jede Seite für nur EINEN Browser gestalten und bekommt keine Probleme - nur ist das dann ggf. 3, 4, 5facher Aufwand, die ganzen, eigentlich gleichen Seiten zu pflegen und aktuell zu halten...
Allerdings muss man dann immer noch irgendwie unterscheiden, welche Seite von welchem Browser aufgerufen werden darf... - geht das überhaupt ohne JavaScript?

Wieviele Versionen wievieler Seiten willst du vorhalten und pflegen? Nochmal: Nicht alles geht, also beschränke dich auf den kleinsten gemeinsamen Nenner. Gimmicks, ohne die der Inhalt nicht entstellt wird, werden nur Browsern, die damit umgehen können, zugeteilt. Mehr geht nicht, egal, was du willst. Achja, JavaScript; Mal abgesehen davon, dass JavaScript im Browser läuft und somit für diese Aufgabe an der falschen Stelle sitzt, da es nicht überall läuft, taugt es nun schon aus zwei Gründen nicht für deine Aufgabenstellung.

...
Ich war davon ausgegangen, dass XHTML nach HTML 4.01 folgt...

Tut es doch. Es folgt bloß anderen Grundlagen. HTML ist ein SGML-Dialekt, XHTML ist ein XML-Dialekt. Wo du Erklärungen, was was ist, findest, sagt dir die Suchmaschine deiner Wahl.

Tschö, Auge

Der Beitrag wurde von Auge bearbeitet: 25.05.2008 - 19:00