XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem mit CSS ohne Tabellen (http://xhtmlforum.de/showthread.php?t=59875)

omega2k 18.01.2010 13:17

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

Thielo 18.01.2010 14:27

auf welchem CMS basiert die Seite?

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

hubspe 18.01.2010 15:03

Zitat:

Zitat von Thielo (Beitrag 456112)
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:

omega2k 18.01.2010 16:10

Zitat:

Zitat von Thielo (Beitrag 456112)
auf welchem CMS basiert die Seite?

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

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.

Zitat:

Zitat von Hubspe (Beitrag 456116)
Angefangen vom wilden und reichlichem Rumpositionieren, unmotiviertem overflow:hidden für body, ungeeigneter Maßeinheit für die Schriftgröße...usw, usw.

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:

Code:

<div class="TBlock">
        <div class="TBlockL">
                linker Block
        </div>
        <div class="TBlockR">
                rechter Block
        </div>
</div>


hubspe 18.01.2010 16:45

Zitat:

Zitat von omega2k (Beitrag 456125)
Das mit dem "Rumpositionieren" hat seinen Sinn, weil der Auftraggeber pixelgenau bestimmen wollte - wo was zu sitzen hat.

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.

Zitat:

Zitat von omega2k (Beitrag 456125)
Der overflow:hidden für den Body bewirkt ja nur, dass der Scrollbar sich nicht im eigentlichen Frame befindet,

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

Zitat:

Zitat von omega2k (Beitrag 456125)
Wie bekomm ich sowas per CSS mit DIVS hin?

Float/clear z.B.

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

omega2k 18.01.2010 17:23

Zitat:

Zitat von hubspe (Beitrag 456127)
(1) Pixelgenau im jedem Bildschirm und bei jedem Browser ist schlichtweg unmöglich.
[...]
(2) Der untaugliche Versuch eine untaugliche Struktur einigermassen in Form zu halten.
Hast du dir deine Site mal im IE7 angeschaut??
[...]
(3) 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.

Scheppertreiber 18.01.2010 17:54

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.

Thielo 18.01.2010 18:19

Zitat:

Zitat von omega2k (Beitrag 456131)
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?

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.

Zitat:

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.
So einfach wie möglich ist das nicht, du machst es dir wensentlich schwerer.

Zitat:

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

EvT 18.01.2010 18:30

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.

hubspe 19.01.2010 07:21

Zitat:

Zitat von omega2k (Beitrag 456131)
3. Deine "persönliche" Meinung als "untaugliches Rumgemurkse" abzutun, ist einfach frech

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:12 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022