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