Problem mit CSS ohne Tabellen
 

Ich betreue gerade eine neue Website. Wir haben beschlossen, keine Tabellen mehr einzusetzen und das komplette Design nur auf DIV und CSS aufzubauen. Das Problem ist jetzt aber, dass Bilder irgendwie automatisch über den Text geschoben werden, wenn der Browser verkleinert wird. Eigentlich sollte das Layout so skalieren, dass Text und Bilder bis runter zu 800x600 ansehnlich dargestellt werden. Hier der Link: www.consenso-gmbh.de

auf welchem CMS basiert die Seite?

das problem liegt aller wahrscheinlichkeit daran, das das bild nicht im Textfluss liegt.

die komplette Site ist das Problem.
Alles aufzuzählen was dort suboptimal ist würde wohl den ganzen Abend dauern.

Angefangen vom wilden und reichlichem Rumpositionieren, unmotiviertem overflow:hidden für body, ungeeigneter Maßeinheit für die Schriftgröße...usw, usw.

Da möchte man spontan ausrufen: sechs, setzen und nochmal von vorn scnr :mrgreen:

Also das CMS ist mein Werk, sollte so einfach wie möglich werden - und lässt sich eigentlich auch gut bedienen. Das mit dem Textfluss wurde leider vom Kunden nicht gewünscht, sondern eine echte - frei skalierbare - "2-Spaltigkeit" nur eben ohne Tabellen.

Das mit dem "Rumpositionieren" hat seinen Sinn, weil der Auftraggeber pixelgenau bestimmen wollte - wo was zu sitzen hat. Der overflow:hidden für den Body bewirkt ja nur, dass der Scrollbar sich nicht im eigentlichen Frame befindet, sondern auf der kompletten Höhe des Browsers sichtbar ist - sich jedoch nur der Teil auf der Seite scrollen lässt, der auch scrollbar sein soll.

Ich hab mir auch schon massig Browsershots generieren lassen, damit die Layouts auch Crossbrowser gleich aussehen - dadurch sind dann diverse CSS workarounds entstanden... aber das Problem mit der 2-Spaltigkeit (oder vielleicht auch mal 3-Spaltigkeit) hab ich noch nicht gelöst bekommen. Bei einer Tabelle können ja alle Spalten z.B. mit 30% schön mitskaliert werden und bei bedarf wird umgebrochen... Wie bekomm ich sowas per CSS mit DIVS hin?

Die einzige Möglichkeit, die mir eingefallen ist, war:

Pixelgenau im jedem Bildschirm und bei jedem Browser ist schlichtweg unmöglich.
Mit deinem Rumpositionieren nagelt du Container im Viewport fest, machst Inhalte evtl. unzugänglich und das Layout unflexibel.
Außerdem hat aber jeder einen anderen Bildschirm bis hinab zum Netbook oder noch kleiner.
Hast du mal versucht dein Browserfenster zu verkleinern.
Da gibts dann keine horizontale Scrollbalken, sondern dein Layout zerlegt sich unterhalb einer bestimmten Größe.

overflow:hiddenn sorgt dafür das Inhalte unzugänglich werden können.

Der untaugliche Versuch eine untaugliche Struktur einigermassen in Form zu halten.
Hast du dir deine Site mal im IE7 angeschaut??

Float/clear z.B.

Sorry wenn ich das so hart sage, für mich persönlich sind Aufbau und Gestaltung ein untaugliches Rumgemurkse. ;)

1. "schlichtweg unmöglich" = sehr pessimistisch und schlichtweg falsch!

2. ich hab mir die Seite sehr wohl im IE7 mal angeschaut, aber es tut mir leid, IE < 7.0 ist für mich kein Browser - das ist eine Krankheit (ein explorer mit html darstellung, darum habe ich auch IE <= 6.0 von der Seite ausgesperrt), weil man extra für diesen Microsoft-Crap immer eine Extrawurst aufziehen muss - schon komisch, dass FF, Opera, Konqueror, Safari und andere "FREIE" Browser alles korrekt anzeigen... sofern man sich an die Syntax hält!

3. Deine "persönliche" Meinung als "untaugliches Rumgemurkse" abzutun, ist einfach frech (und ich werde mich jetzt nicht dazu herablassen über Deine Seite abzuledern, weil das einfach nicht meine Art ist).

Die Optimierung für Mobile-Clients etc. damit die Seite auf Auflösungen unter 800x600 gut dargestellt wird, kommt ja erst noch. Aber mal ehrlich, wer hat heutzutage am PC eine kleinere Bildschirmbreite als 1000px?

_____________
Ich dachte ich bekomme hier KONSTRUKTIVE KRITIK und ein paar Anregungen und nicht nur gebashe von "Relaunch die 388ste" (SORRY) - wenn das die 388. Neuauflage sein soll, möchte ich die 387 Seiten davor garnicht kennen.

Da der IE 6 leider immer noch relevant ist muß man ihn berücksichtigen. Du
verweigerst potentiellen Kunde die Seite anzusehen. Nicht gut.

Skalierbar ist die Seite ja auch eher nicht. Die Texte der Navi schieben sich
aus dem roten Zeugs heraus.

Ich denke, den Code könnte man auch kompakter machen.

zu 1: wieso ist es denn falsch?
zu 2: der ie6 ist auch nur so zur Information knappe 10 Jahre alt. man braucht von ihm nichts anders zu erwarten trotzdem arbeiten noch viele damit, deshalb diesen browser auszuschließen wäre ignorant,ausserdem gibt es genug seiten (auch sehr aufwendig gestaltete) die hervorangend im IE6 laufen.
zu 3: es ist nicht frech, es ist Tatsache. ich öffne den quellcode in einer Zeile und sehe nur 1 Zeile quellcode, der anneinandergereiht ist.
Ich sehe br tags die zur Formatierung benutzt werden.

So einfach wie möglich ist das nicht, du machst es dir wensentlich schwerer.

Die Kritik ist so kunstruktiv wie sie nunmal ist. Wenn du das hier als gebashe abtust dann ist das dein Ding nur wir geben dir gute Ratschläge wie es nunmal ist, wenn du das nicht einsehen willst auch dein Ding. Leute verbal "anzugreifen" ist auch nunja nicht wirklich das gelbe vom Ei.

Edit sagt: hast es ja anscheinend hinbekommen.

In diesem Thread stehen Probleme deiner Site zur Diskussion - und keiner anderen. Das Foul mit Nachtreten war deshalb überflüssig und fördert nicht gerade die Bereitschaft zur konstruktiven Kritik und zur Hilfsbereitschaft.

Dennoch, wenn du verhindern willst, dass sich alles zusammenschiebt, dann schau dir die min-width-Eigenschaft an - ggf. für einen Wrapper.
Alternativ denk über das Bild nach. Eine feste Bild-Breite (in Pixel) wird sicher irgendwann aus einer Spalte in % heraushängen.

das mag sein, allerdings wenn in einem Fachforum deine Site so bezeichnet wird, sollte dir das doch irgendwie zu denken geben, oder?

Du bist sicher ein guter Programmierer, sonst könntest du nicht dein eigenes CMS schreiben.
In diesem Punkt bist du mir weit voraus, weil meine PHP-Kenntnisse eher rudimentär sind.

Ich bin ein ein typischer Frontender, kein Programmierer. Dem entsprechend sind auch meine Kenntnisse.

Deine Kenntnisse vom frontenden sind leider ausgesprochen übersichtlich, wie man an deiner vorgestellten Site sehen kann.
Dabei beziehe ich mich ausdrücklich nicht auf die optische Gestaltung, die kann nämlich Geschmackssache sein.

Damit meine ich die vielen anderen Dinge, die ein Frontender beherrschen sollte, wenn er mit Kunden zu tun hat und zwar im Interesse seiner Kunden.

Wie schon gesagt, wenn ich dir erklären sollte was an deiner Site alles schlecht oder gar nicht gelöst ist, würden meine Erklärungen dazu die maximal erlaubte Anzahl der Zeichen pro Beitrag bei weitem sprengen, besonders wenn ich auch noch auf die Unterseiten eingehe.

Du würdest deinen Kunden einen großen Gefallen tun, wenn du deine Lücken in XHTML, CSS (CSS ist nämlich schwerer als es aussieht!!), Accessibility, Usability, webgerechtem texten, etc. mit Wissen füllen würdest. ;)

Okay, in der Not hab ich hier und da schon etwas mit BR Tags "gepfuscht", weil die Seite irgendwie innerhalb 2-3 Wochen online gehen sollte... aber das mit der "einen Zeile" macht mein CMS, indem alle unnötigen Zeichen für die Darstellung vor dem Senden zum Browser gefiltert werden.

Mit einem kleinen Firefox Addon wie "HTML-Validator" lässt sich der Code aber wieder bequem lesen, bzw. ich könnte die Kompression auch wieder abschalten... die Templates und die Inhalte sind lesbar formatiert.

Da magst Du vielleicht recht haben, dafür habe ich aber einen kleinen Hinweis eingebaut ( siehe IE NetRenderer - Browser Compatibility Check - und IE6 auf Consenso GmbH - Willkommen bei der Consenso Unternehmensberatung GmbH in Neu-Ulm ) - damit der Besucher nicht ganz dumm da steht. Von meiner Sicht aus als technischer Informatiker ist der IE6 aber alles andere als ein Browser!

Wenn ich die Seite im Text-Browser auf der Linux-Console anschau, sieht alle eigentlich in Ordnung aus. Das war ja auch eigentlich die Absicht, genauso wie die Printversion der Seite. Kann sich auch sehen lassen, denke ich mal.

Das mit der min-width-Eigenschaft hab ich jetzt auch kapiert, nur der IE<6 kann das doch auch nicht, oder irre ich mich?

Ich hab einfach noch keine Patent-Lösung gefunden, um 100% CrossBrowser Seiten skalierbar zu bekommen. SVG wäre eine Lösung, oder ein Canvas - aber damit kommen nur die wenigsten Browser zurecht - zumal auch noch Text zu rendern etwas komplex ist!

Und JA: Ich werde meine Lücken in XHTML, CSS, Accessibility, Usability etc. ausbessern! Darum bin ich ja hier, oder nicht? Derzeit hab ich noch ettliche kleinere Projekte nebenher (die ich auch gerne mal vorstellen kann), die ich leider auch nicht weiterverfolgen kann (da entweder veraltet oder zu wenig Zeit bleibt)

Es gibt auch keine Patentlösung, leider.

Was spräche dagegen, dem IE6-Benutzer die Seite mit einem entsprechenden Hinweis darzustellen
anstatt ihn komplett rauszuekeln ?

Na wenn das so ist, fangen wir doch mal mit ein paar Hinweisen an (auch wenn das eher in den Bereich Sitecheck passen würde).

HTML:
Du hast eine Div-Suppe gekocht. Stichwort für weitere Information: "Semantisches Markup".

Benutzbarkeit:

• Wegen der Fixierung des großen Headers und der linken Navigation sind in der Navigation links nur die zwei obersten Links zugänglich, wenn ich die Seite mit dem Netbook besuche. Für den Inhalt ist kaum Platz.
• In der horizontalen Navigation erscheint bei Berührung der roten Fläche der Link-Cursor, klickbar ist aber nur der Text. Das ist eine hochgradige Benutzerverwirrung.
• Der gerade aktuelle Menüpunkt wird nicht gekennzeichnet.

Layout:
Das Layout ist nach oben abgeschlossen, nach unten jedoch nicht. Ich habe dauernd das Gefühl, weiter nach unten scrollen zu müssen.

Gut, den Hinweis sollte ich vielleicht noch etwas ausbauen... aber es gibt zumindest einen.

Mit einem Link zu Browser-Update.org - Benutzer über Browserupdates informieren

Ich hoffe einfach, dass der Besucher so intelligent ist - und das auch liest was da steht! Vorallem der erste Absatz:

_____________________
BTW: Jetzt seh ich auch gerade auf dem netrenderer dass der IE7 auf einmal komische Sachen mit dem Menü anstellt... irgendwas stimmt da ganz und garnicht - ich denke ich zerlege das komplette HTML/CSS Modell nochmal und bau das neu auf!

EDIT:
Bei mir ist es nicht so - ich kann den kompletten Button klicken... onclick="location.href... wird für den DIV Container gesetzt!

Das mit dem "aktiven Menü" wurde so nicht gewünscht, und daher das linke Menü für die Aktivität verwendet. Ich hätte ja gerne ein Drop-Down-Menü eingebaut... vielleicht kann ich das ja noch irgendwie durchsetzen!

Das ist mir auch schon aufgefallen... nervt mich auch ein wenig! Was für eine Alternative hab ich denn? Der übergroße HEADER mit fast 200px Höhe (mit Menü) ist leider so vorgegeben... sehr viel mehr Spielraum hab ich da ja fast nicht. Das gleiche mit der Schriftgröße, die wurde auch so bestimmt - nach optischen Gesichtspunkten!

Klar geht das.

Aber halt auch am Thema vorbei. Dein Job ist, für Deinen Kunden Kunden für
die Produkte zu interessieren und für eine Kontaktaufnahme anzufüttern, nicht
zu missionieren.

Tja, ich surfe mit dem Noscript-Addon, das erspart mir viel Unnötiges.
Du brauchst kein JavaScript dafür. display:block für die Links reicht.

Mit welcher Begründung? Den Besucher bewusst im Unklaren zu lassen, wo er sich gerade befindet -- ihn also ärgern zu wollen?

Ein Dropdown-Menü dürfte die Benutzbarkeit kaum verbessern.
Ich sehe kein Problem darin, ein separates Submenü zu verwenden, im Gegenteil.
Das Problem ist die Fixierung.

Was hast du denn bereits unternommen, um dem Kunden klarzumachen, dass die Fixierung eines derart großen Bereichs hochgradig problematisch ist?
Ich habe noch keinen Kunden erlebt, der seine Besucher wissend von den Inhalten abhalten wollte.

Wieso missionieren?
Das ist Beratung -- und das ist ja wohl "unsere" Aufgabe.

[Scheppertreiber, was machst du eigentlich immer mit deinen Beiträgen? Warum sind bei dir immer die Umbrüche kaputt?]

Wir ihn, ok. Er seine IE6ler ?

Das Eingabefeld ist recht schmal ...

Ach du redest vom IE6.
Den Bezug habe ich nicht herstellen können, sorry.

Ja.
Was hat das mit den manuellen Umbrüchen in deinen Beiträgen zu tun?

Noch von der mechanischen Schreibmaschine?
SCNR.

Nu is aber genug Offtopc, sorry omega2k. (Naja, es hat ja auch etwas mit Benutzbarkeit zu tun.)

okay, vergessen wir was war. :mrgreen:

Wärst du kein Webdesigner bzw. würdest du nicht als solcher arbeiten oder hättest darauf hingewiesen, das du mit deinen Kenntnissen vom Frontend erst am Anfang stehst, hätte ich ganz anders mit dir geredet. ;)

Von mir auch ein paar Hinweise:

pt ist eine absolute Masseinheit für den Druck und fürs Web ungeeignet (genauso wie px für Schriftgröße!).
Der Text deiner Site läßt sich im IE unter Standardeinstellungen nicht vergrößern.
Die erste Schriftgröße (vorzugsweise in body) immer in Prozent angeben, danach dann entweder em oder weiter Prozent.

line-height gehört vergrößert, um die Lesbarkeit zu erhöhen (ca. 1.4 ohne Maßeinheit weil line-height nur ein Faktor ist).

Nimm dieses aus deinem Dokument:
Das sorgt dafür das der IE 6 im Quirksmode rendert, weil er an erster Stelle den Doctype erwartet und mit XML nix anfangen kann.
Deine Site ist auch ohne XML-Deklaration valide.

XHTML 1.1 ist als Doctype leider ungeeignet.
Warum kannst du hier nachlesen.
Nimm lieber XHTML 1.0 strict.

Du hast ein ganz normales 2-3 Spaltenlayout.
Da brauchst du kein position:absolute und auch kein overflow:hidden.

Nutze float/clear und halte dein Layout flexibel. ;)

Im Gegenteil wenn du nicht genau weißt, was du damit anrichten kannst, solltest du darauf verzichten, Stichwort Block Formatting Context.

Es gäbe noch sehr viel zu sagen, aber das sollte erst mal genügen. :)