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

[spezies-8472]

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

Das klingt in der Theorie gut, aber in der Praxis läßt sich das nicht immer so umsetzen - auch wenn man es vielleicht mit Nachdruck tun sollte - aber gerade, wenn man was für andere macht, haben die zuerst das Design im Kopf und VIIIIEL später kommen dann der restliche Aufbau - "...ach, kannst Du nicht diesen Text dorthin schieben und das Bild sollte ganz unten sein und die Links bitte auf die andere Seite, das sieht besser aus..."

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?

Ich weiß, was ich anpassen WILL, aber die Formulierung bezog sich mehr auf das Design, nicht so sehr auf die inneren Werte

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.

Das Finden ist weniger ein Problem - mehr das verstehen... Ich habe auch mehrere Seiten gelesen, wo es um einen allgemeinen "Reset" aller Browserinternen Voreinstellungen geht, damit man mit den StyleSheets sozusagen ganz unten anfangen kann - ok, schön und gut, aber WIE man das tatsächlich machen soll - das habe ich nicht gefunden. Man soll es einbauen - aha! Und wo und wie und was genau??? Die Autoren slcher Anleitungen wissen natürlich ganz genau, wie es geht und können sich meist nicht vorstellen, dass ein Anfänger ihre Gedanken eben nicht kennt...

JavaScript... ...taugt es nun schon aus zwei Gründen nicht für deine Aufgabenstellung.

Aber womit könnte ich dann so eine Browserweiche sicher und zuverlässig realisieren?
Wie das per CSS geht, habe ich trotz vieler Artikel noch immer nicht wirklich verstanden - bin da wohl ein wenig zu dumm?!?

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

Hmm - ok, dann muss ich mal gucken, ob ich das verstehe... Danke erstmal!

[Andreas]

Kann es sein, dass

Das klingt in der Theorie gut, aber in der Praxis läßt sich das nicht immer so umsetzen - auch wenn man es vielleicht mit Nachdruck tun sollte - aber gerade, wenn man was für andere macht, haben die zuerst das Design im Kopf und VIIIIEL später kommen dann der restliche Aufbau ...

das deshalb so schwierig ist, weil

Die Autoren slcher Anleitungen wissen natürlich ganz genau, wie es geht und können sich meist nicht vorstellen, dass ein Anfänger ihre Gedanken eben nicht kennt...

das noch gegeben ist?

Natürlich ist es manchmal mühselig ein Element von einer Stelle an eine andere zu verfrachten, aber graue Haare habe ich deswegen noch nicht bekommen. Im Gegenteil, das macht doch auch Spaß.

Mich wundert in dieser ganzen Diskussion, dass Du durchschimmern lässt, Anfänger zu sein und gleichzeitig ganz vehement behauptest, dass viele Dinge nicht mit einfachen Mitteln lösbar sind. Wie kannst Du das, wenn Du keine Erfahrung hast?

Gruß

Andreas - der das völlig neutral fragt ...

[spezies-8472]

Hi Andreas,
so ganz habe ich die von Dir gequoteten Sachen zwar nicht kapiert, aber ist nicht so tragisch, ich denke, ich ahne, was Du meintest

Klar macht es Spaß, eine Seite so nach und nach zu gestalten, dass alles passt - aber wenn dann der Frust Überhand nimmt, weil WIEDER mal der IE sich an keine Richtlinien hält und hier und da und dort sein eigenes Süppchen kocht und jede neue Version letztendlich eigene Hacks benötigt, die ich ehrlich gesagt nicht wirklich verstehe... und wenn man es dann irgendwie geschafft hat - ohne selbst nachvollziehen zu können, wieso es jetzt geht und vorher nicht, aber dann der FF bspw. nichts mehr so darstellt, wie anfangs, dann macht es irgendwann keinen Spaß mehr.

Mich wundert in dieser ganzen Diskussion, dass Du durchschimmern lässt, Anfänger zu sein und gleichzeitig ganz vehement behauptest, dass viele Dinge nicht mit einfachen Mitteln lösbar sind. Wie kannst Du das, wenn Du keine Erfahrung hast?

Ganz einfach - ich habe zwar meine uralte private Homepage (ja, schrecklich!!) gestaltet und daran html gelernt und später dann die Homepage für meine Frau gebaut und jetzt rundumerneuert (überwiegend mit Hilfe von CSS) und eine Homepage für deren Freundin und Kollegin gebaut (noch mit Frames...) und zuletzt die Homepage des Brandenburger Orientfestivals erstellt (allerdings mit Hilfe eines Programms für die Menüs), aber verglichen mit Webdesignern sehe ich mich eher als Laie - habe weder ein Studium noch eine Ausbildung auf dem Gebiet, kenne mich nicht mit Java, JavaScript, Pearl, PHP und sonstigen Sprachen und Dialekten aus und muss vieles nach dem "Trial & Error"-Verfahren ausprobieren. Ich lerne zwar sicher auch daraus ein wenig, aber bin weit entfernt davon, eine neue Seite einfach mal so aus dem Ärmel zu schütteln...
Ich habe also sicherlich ein wenig Erfahrung, aber möchte mir nicht anmaßen, auch nur halbwegs professionell Homepages designen zu können .
Alle Klarheiten beseitigt?

Gruß zurück!
Oliver

Der Beitrag wurde von spezies-8472 bearbeitet: 26.05.2008 - 15:40

[Andreas]

Ich habe also sicherlich ein wenig Erfahrung, aber möchte mir nicht anmaßen, auch nur halbwegs professionell Homepages designen zu können ;-)Alle Klarheiten beseitigt?

Das meinte ich. Und es ist ja auch keine Schande.

Nur, wenn Du so wenig Erfahrung hast, warum wirfst Du dann mit allen möglichen Aussagen zu Hacks und Inkompatibilitäten um Dich, die Dich zu fiesen Verrenkungen oder gar Flash zwingen? Es haben doch jetzt schon etliche Leute geschrieben, dass das alles halb so wild ist. Ich habe exakt ein einziges Layout, dass an einer einzigen Stelle eine Besonderheit für den IE benötigt. Ansonsten erstellst Du Deine Seiten valide und scherst Dich um den Rest einen Dreck. Und dann - oh Wunder - zeigen alle Browser etwas an. Die Gelassenheit, die Dir dann noch fehlt, den ein oder anderen Renderfehler so zu lassen wie er ist, ist letztendlich die eigentlich fehlende Erfahrung Und Profi bist Du, wenn Du das dann auch noch Deinen Kunden vermitteln kannst.

Die Seiten sehen doch auch alle in Ordnung aus ... Bis auf diese span class="zeile..." Geschichte auf der Seite Deiner Frau. Das macht einen putzigen Eindruck. Habe aber auch nicht weiter geguckt, was Du damit bezweckst.

Gruß

Andreas