CSS Radiobuttons positionieren
- Ersteller Joe-B
- Erstellt am
Soylent schrieb:Wenn du nicht alles in einer Farbe haben willst, dann kannst du der container div auch ein Bild zuweisen, (HxB: 1px x 660px) das entsprechende vertikale Linien drin hat. Das kannst du noch mit einer abschließenden Div inkl. Bild kombinieren, so dass die Tabellen nach unten abschließen.
Mag sein, dass es ein wenig umständlich ist, aber es is Tabellenlos und dynamisch. Zudem könnte man mit der Bildertaktik auch wunderbar barrierefrei abgerundete Ecken einbauen
Die Lösung ist schon nicht schlecht, soweit hatte ich das auch schonmal. Ich hätte die Farbe tatsächlich pro Spalte haben wollen.
Wenn nun noch die Anforderung kommt, dass du vorher nicht weißt, wieviele Spalten da sein werden und dass die Hintergundfarbe im CMS auch noch eingestellt werden können soll, dann hilft diese Lösung leider auch nicht.
Oder: Der Kunde will, dass die Spalten jeweils grafisch umrahmt sind und
der Hintergrund transparent, so dass der Webseitenhintergrund sichtbar wird.
Oder: Der Kunde will das am unteren Rand der jeweiligen Spalte noch Content auftaucht.
Oder: Jede Spalte bekommt ein eigenes im CMS einstellbares Hintergrundbild.
Ich weiß es ist unfair, dass ich die Anforderungen nach oben schraube, aber es geht ja darum ein Beispiel zu finden, welches nicht aussschließlich mit CSS gelöst werden kann, aber mit einer Tabelle.
Mein zweites Aufgabenbeispiel bleibt indes immer noch ungelöst. Dafür habe ich bis heute keine Lösung gefunden die ohne JavaScript auskäme.
Zuletzt bearbeitet:
Cool Master
Fleet Admiral
- Registriert
- Dez. 2005
- Beiträge
- 38.696
Banthor schrieb:
Klar geht nicht alles aber in Prozent würde ich mal sagen gute 90% (wenn nicht zugar mehr) kann man in CSS umsetzen.
Zu deinem 2. bsp warum sollte man nicht wissen wie Breit die Nav leiste sein soll?^^ Ich mein wenn ich in PS bin habe ich von Kunden ja die Vorgabe ich will x Buttons haben und so setzte ich das natürlich um
Cool Master schrieb:Zu deinem 2. bsp warum sollte man nicht wissen wie Breit die Nav leiste sein soll?^^ Ich mein wenn ich in PS bin habe ich von Kunden ja die Vorgabe ich will x Buttons haben und so setzte ich das natürlich um
Du hast mich teilweise mißverstanden. Die Gesamtbreite der Navigationsleiste ist bekannt. Die Anzahl der Buttons in der Leiste ist nicht vorher bekannt. Diese Buttons sollen alle gleich breit sein und die Breite der Navigationsleiste insgesamt voll ausnutzen
Die Anzahl der Buttons ist vorher nicht bekannt, weil das Layout für ein CMS ist, bei dem die Anzahl der Buttons sich theoretisch jeden Tag ändern kann.
Das ist ein konkretes Beispiel aus einem Projekt, also nichts erfundenes
Soylent schrieb:
Ja, leider hören Kunden nicht immer auf Ratschläge. Wenn ein Design durch alle Abteilungen gegangen ist und abgenommen wurde, dann wird es immer sehr schwierig das noch zu ändern. Das ist immer eine heikle Sache denen zu erklären, dass etwas "Scheiße" ist.
Designer selber sind noch viel schlimmer als die Fachabteilungen, denn die sind sofort gekränkt, wenn man sagt das ist technisch nicht gut. Da prallen einfach Welten aufeinander.
Tabellen kann man ja so anlegen, dass sie immer eine feste Breite einnehmen. Dann werden die Spalten gleichmäßig aufgeteilt. Natürlich klappt das auch nicht zu 100% - nämlich dann, wenn die Leute einen Text einpflegen, der dann breiter ist als die rechnerische Breite. Aber auch dann passt sich die Tabelle sich entsprechend an. Nicht optimal aber irgendwann muss auch mal gut sein - spätestens dann kommt dann wieder die vertikale Navigation ins Spiel
T. Smith
Lt. Junior Grade
- Registriert
- März 2008
- Beiträge
- 280
So wirklich mag ich das nicht durchgehen lassen. Dein Navigationsbeispiel ist ziemlich konstruiert, zumindest wenn man das nur per CSS lösen soll. So ein Fall wird nur dann auftreten, wenn hinter der Seite ein CMS steckt. In diesem Fall ist es ein leichtes, entweder das CSS dynamisch zu generieren oder per CMS eine Klasse auszutauschen, die zwischen verschiedenen Layouts umschaltet.
Im Übrigen hast du auch per CSS Zugriff auf die Tabelleneigenschaften, hier sind also auch keine unnötigen Tabellen im Markup nötig. Da nur der IE < 8 hier eine Sonderbehandlung braucht, ist das auch relativ gut per Conditional Comment lösbar.
Zudem kann CSS Dinge, die eine Tabelle konstuktionsbedingt nicht leisten kann (beispielsweise die freie Anordnung von Spalten, unabhängig von ihrer Reihenfolge im Quelltext).
Im Übrigen hast du auch per CSS Zugriff auf die Tabelleneigenschaften, hier sind also auch keine unnötigen Tabellen im Markup nötig. Da nur der IE < 8 hier eine Sonderbehandlung braucht, ist das auch relativ gut per Conditional Comment lösbar.
Zudem kann CSS Dinge, die eine Tabelle konstuktionsbedingt nicht leisten kann (beispielsweise die freie Anordnung von Spalten, unabhängig von ihrer Reihenfolge im Quelltext).
T. Smith schrieb:
Du musst dir die Beiträge richtig durchlesen, dann wüßtest du, dass das kein konstruiertes Beispiel war, sondern aus einem echten Projekt. (Mein Post #24) Und ja, es kommt aus einer Art CMS.
Die Leute die das CMS bedienen sind als "dumm" anzunehmen. Daher kannst du von denen nicht erwarten, dass die im CMS dort verschiedene CSS auswählen. Das sind Leute, die teilweise deutlich über 50 sind (dies ist jetzt nicht respektlos gemeint), die wollen sich auf die Hauptsache konzentrieren. Die wissen nicht was CSS ist und würden es auch nicht verstehen wollen. Das sind Menschen die kommen schon wegen viel einfacheren Sachen nicht klar.
Natürlich kannst du auch mit CSS die Tabelleneigenschaften aktivieren, aber ob ich nun Tabellentags verwende oder die divs die ich zu einer Tabelle umdeklariere macht nun kaum einen Unterschied. Und wie du sagst musst du für <IE8 Sonderbehandlungen einbauen.
Unterm Strich war es in dem Projekt mit einer Tabelle zeit/kostentechnisch am schnellsten und einfachsten gelöst. Alles andere hätte nur Zeit/Nerven gekostet und für das CSS mit wirklich unnötigen und in meinen Augen viel schlimmeren Browserweichen erfordert.
T. Smith
Lt. Junior Grade
- Registriert
- März 2008
- Beiträge
- 280
Habe ich, du auch? Ich sagte das Beispiel ist konstruiert, wenn du es nur per CSS lösen willst. Das Problem entsteht durch die Dynamik des CMS und dieses kann das Problem auch auf einfache Art lösen (siehe nächster Absatz).Banthor schrieb:
Das müssen sie auch nicht. Ich kann meinem CMS problemlos beibringen die Menüpunkte zu zählen, und dann dem body eine Klasse ala .layout-1 / .layout-2 / … zu geben. Auf Basis dieser Klassen kann ich für eine unterschliedliche Anzahl von Menüpunkten problemlos feste Breiten verteilen, so dass alle Menüpunkte gleich breit sind.
Semantik?! Tabellen nutzt man für tabellarische Inhalte, eine Navigation ist eine Auflistung von Links.
Die Browsereichen betreffen, wie schon gesagt, nur den IE < 8. Wer mit den Macken dieser Browser Erfahrung hat, für den hält sich der zeitliche Mehraufwand in Grenzen. Letztendlich muss sich sowieso der Kunde entscheiden, wo er Prioritäten setzt. Entweder er investiert sein Geld in die Unterstützung veralteter Browser, oder er richtet seine Aufmerksamkeit auf die neuen Geräte wie Smartphones, Tablets usw. (Als Literaturempfehlung nenne ich hier mal Hardboiled Web Design von Andy Clarke. Gerade das erste Kapitel vermittelt hier eine sehr gesunde Einstellung zu veralteten Browsern.)
Cool Master
Fleet Admiral
- Registriert
- Dez. 2005
- Beiträge
- 38.696
Nur mal aus neugier welches CMS war/ist es? Ich nutze django-cms.
T. Smith schrieb:
Diesen Zusatzaufwand wird der Kunde nicht bezahlen. Dein Vorschlag ist leider auch nicht die finale Lösung. Ist der Text eines Buttons breiter als die vorgesehene Breite, dann ist der nächste Supportanruf sicher. Dann müsste man anfangen im CMS die Breiten basierend auf dem gewählten Font + Text auszurechnen. Das ist den Aufwand einfach nicht wert.
Das ist mir durchaus bekannt. Der Unterschied wird allerdings höchstens bei Screenreadern wichtig:T. Smith schrieb:
1. Wer einen Screenreader braucht weil er sehbehindert ist, interessiert sich nicht für die Produkte des betreffenden Kunden.
2. Ist bekannt, ob Screenreader evtl. zu Tabellen umdefinierten divs nicht auch als Tabellen interpretieren? Ich weiß es nicht.
T. Smith schrieb:
Ich finde Browserweichen 100 mal schlimmer als in gut begründeten Fällen ausnahmesweise eine Tabelle zu verwenden. Für mich sind Browserweichen Todsünden genauso wie CSS Hacks. Entweder geht es mit dem Standard-CSS (vllt. mit ein wenig Verenkung) oder gar nicht. Und bevor ich eine Browserweiche einbaue oder einen CSS Hack werde ich eine Tabelle einsetzen, die beißt mir nicht bei einer neuen Browserversion in den Arsch.
IE7 zu unterstützen ist selten ein Problem, aber für den IE6 muss man gerade bei aufwändigen Layouts oder Animationen oft mehr Zeit investieren. Manchmal gibt es auch keine Lösung.
Für mobile Geräte gibt es für das Projekt ohnehin ein separates an die Geräte angepasstes Layout. Das Bedienkonzept ist mit Touch-Geräten einfach so anders, dass man für eine gute Lösung speziell auf diese Geräte eingehen muss.
Cool Master schrieb:
Das CMS ist speziell für diesen Kunden entwickelt worden, weil die üblichen CMS die Anforderungen des Kunden nicht erfüllen können. Dabei geht es nicht nur um Texte, Bilder etc. sondern um sehr komplexe regelbasierten Produktstrukuren die dort gepflegt werden.
T. Smith schrieb:
Ah, danke für die Info beim Screenreader.
Conditioal Comments sind nur eine Form von Browserweichen und auch die einzig zuverlässige. Tatsächlich verwende ich das auch um genau ein extra css für IE zu laden - meistens nur um die opacity-Eigenschaft mit MS-Mitteln umzusetzen.
Blöd ist, wenn du Browserweichen für nicht IE-Browser machen möchtest. Bevor ich sowas anfange gehe ich lieber andere zuverlässige Wege.
Ich sehe das so...bevor ich an einem ausgefallenem Formular mit divs spans floats clears margins displays und haste nicht gesehen hantiere und es eh nicht so hinbekomme das alle Browser das so fressen wie ich es gekocht habe dann nehm ich ne Tabelle und habe meine Ruhe.
HTML ist keine Mode, es soll funktionieren und solange <table> funktioniert und das tut es bei allen Browsern "ist bei CSS nicht der Fall" benutze ich das.
Das W3C sagt auch nicht ,,du darfst keine Tabellen für Formulare benutzen,, und nur weil ne handvoll Junkies sagen Hey, Web2.0 <table> ist böse schreien dann sollen die sich Ihre div Suppen doch kochen, ich bin mit <table> 4 mal schneller mit einer Seite fertig und hab 4 mal mehr Geld verdient.
HTML ist keine Mode, es soll funktionieren und solange <table> funktioniert und das tut es bei allen Browsern "ist bei CSS nicht der Fall" benutze ich das.
Das W3C sagt auch nicht ,,du darfst keine Tabellen für Formulare benutzen,, und nur weil ne handvoll Junkies sagen Hey, Web2.0 <table> ist böse schreien dann sollen die sich Ihre div Suppen doch kochen, ich bin mit <table> 4 mal schneller mit einer Seite fertig und hab 4 mal mehr Geld verdient.
Ähnliche Themen
- Frage
