Boardunity & Video Forum

Boardunity & Video Forum (https://boardunity.de/)
-   Web Design und Grafik (https://boardunity.de/web-design-grafik-f29.html)
-   -   [Projekt] vBulletin semantisch korrekt & tabellenlos (https://boardunity.de/projekt-vbulletin-semantisch-korrekt-tabellenlos-t3987.html)

Lima 28.02.2006 18:44

[Projekt] vBulletin semantisch korrekt & tabellenlos
 
Ich habe vor einiger Zeit angefangen einen neuen Skin für mein Forum zu schreiben. Da ich dabei immer mehr an die Grenzen des Standart vBulletin Skins gelangt bin habe ich mich entschlossen einen komplett neuen Skin zu schreiben. Hier bei wollte ich auf einen sauberen, moderneren Code achten. Das beinhaltet:
  • XHTML 1.0 (vielleicht auch XHTML 1.1) strict
  • Tabellen nur da wo sie nötig sind
  • Trennung von Inhalt und Layout
  • Semantisch korrekte HTML Tags

Um nicht komplett von vorn zu beginnen habe ich mich entschieden das CSS Framework YAML zu verwenden.

Was ist YAML?

Zitat:

"Yet Another Multicolumn Layout" ist ein Framework zur Erstellung moderner und flexibler Layouts auf Grundlage von float-Umgebungen. Dabei stehen ein möglichst hohes Maß an Flexibilität und Zugänglichkeit im Vordergrund.
Nach einem relativ guten Start musste ich leider feststellen dass es trotz des Framworks sehr viel Arbeit ist.

Aus diesem Grund habe ich mich entschlossen einfach mal in ein paar Foren anzufragen ob es nicht Leute gibt die vielleicht ähnliche Probleme bzw. Interesse an so einem Skin hätten und mich bei meiner Arbeit unterstützen könnten.

Kontaktieren kann man mich entweder über meine Mail ([email protected]) oder über ICQ (170-312-703).

Vorher sollte ich aber noch klarstellen das man schon ein wenig Erfahrung im Bereich HTML/CSS haben muss um so ein Projekt umzusetzen. Auch ich lerne beim lösen der auftretenden Probleme immer wieder etwas Neues und kann mich bei weitem nicht als Profi bezeichnen.

Bevor die Frage auftritt: Eigentlich hatte ich nicht vor den Skin öffentlich zugängig zu machen (Abgesehen von Mitarbeitern die ich hoffentlich finde). Das kann sich aber noch ändern. Erst einmal muss er ja fertig werden.

Karsten Achterrath 28.02.2006 19:56

Also kann dir aus eigener Erfahrung sagen--> Es ist nicht so schwer so einen Frame/Layer selbst zu erstellen, es ist viel testen und probieren!
Probleme gibt es immer dann wenn du sowas in Vorhanden Desings oder Templates einbauen willst. (Das hab ich selbst jetzt gemerkt, als ich für meine Homepage den Style gebaut habe!)
Zu dem musst du auch an manche Browser denken....

Verdammt was ist mit mir los....... *kopfschüttel*

Lima 28.02.2006 20:20

Zitat:

Zitat von GameR
Also kann dir aus eigener Erfahrung sagen--> Es ist nicht so schwer so einen Frame/Layer selbst zu erstellen, es ist viel testen und probieren!

Frame? Layer? Ich will einen Skin schreiben ;). Es geht weniger um die Schwierigkeit sondern eher um die Zeit die man für das Umschreiben und die Fehlersuche braucht.

Zitat:

Zitat von GameR
Probleme gibt es immer dann wenn du sowas in Vorhanden Desings oder Templates einbauen willst. (Das hab ich selbst jetzt gemerkt, als ich für meine Homepage den Style gebaut habe!)
Zu dem musst du auch an manche Browser beachten!

Ich glaube nicht das du verstanden hast was ich vorhabe ;).

Karsten Achterrath 28.02.2006 21:06

Ich habs schon verstanden, nur falsch ausgedrückt.
Du willst von dem Tabellenbasierten Layout (Tablelayer) auf ein css-bassierends Layout umsteigen.
Dazu benötigst du zwangsläufig div und p mit den css Befehlen float: left, float right und clear: right, clear: left und eben clear: both einsetzten musst!
Für eine Tabelle mit 3 Spalten
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<table>
kannst du jetzt auch:
<div style="float:right, width: 50px;"></div>
<div style="float:left, width: 50px;"></div>
<div style="margin-left: 51px; margin-right: 51px;"></div>
schreiben, was deiner idee entspricht!
(im Layout mein ich das jetzt, ist also nur ein Beispiel)

Jan Stöver 28.02.2006 21:23

Vor einiger Zeit habe ich hier auf ein Projekt der englischsprachigen vBulletin Gemeinschaft hingewiesen. Scheint allerdings mehr oder weniger eingeschlafen zu sein.

Link im gleichen Fenster öffnen vBulletin CSS

Auch die eigens dafür registrierte Domain vBulletin-css.com ist nicht mehr erreichbar.

Fabchan 01.03.2006 14:22

Es bleibt außerdem die Frage, ob es sinnvoll ist, komplett ohne Tabellen zu arbeiten, gerade so Dinge wie die Forenübersicht stellen eine Form von tabellarischen Daten dar, für deren Darstellung man auch ohne schlechtes Gewissen Tabellen einsetzen kann, das ist dann sogar semantisch korrekter, als Tabellen durch irgendwelche Kominationen aus floats oder <DIV>s zu ersetzen, was außerdem einen riesigen Aufwand darstellt. Angriffspunkte für sowas sehe ich eher im Bereich der einzelnen Themen, welche sich beim momentanen vBulletin auch aus einer vielzahl von Tabellen zusammensetzen. auch wäre eine größere Anzahl von <h1>, <h2>, ... nicht ganz verkehrt.

Björn 01.03.2006 14:53

Sehe es so wie Fabchan, Tabellen dort wo sie benötigt werden. Ein komplett Tabellenloses Design zu erstellen für eine Seite mit tabellarischen Inhalt ist übertrieben und vor allem Unnötig..

Lima 01.03.2006 18:39

Deswegen habe ich auch

Zitat:

Tabellen nur da wo sie nötig sind
geschrieben ;). Ich werde sicherlich keine <div> Suppe erstellen. Bis jetzt habe ich bis auf die von YAML vorgegebenen Div’s keine neuen hinzugefügt. Ich arbeite viel mehr mit <h1>, <p> etc.

Ich werde nicht versuchen sämtliche Tabellen zu ersetzten. Da wo Inhalt tabellarisch dargestellt wird sollte auch eine Tabelle sein. Schade dass das andere Projekt gestorben ist. Ich hoffe ich finde jemanden der mir hilft den sonst sehe ich auch für meins keine gute Zukunft.

Lima 16.03.2006 15:44

So, die Startseite ist schon relativ ansehbar (Sieht im Moment nur im Firefox einiger maßen gut aus):

http://armed-assault.net/vb/

Kommentare und Anregungen, bitte.

Ich habe im übrigen noch niemanden gefunden der mir hilft. Wäre schön wenn sich doch noch jemand meldet.


Alle Zeitangaben in WEZ +1. Es ist jetzt 22:05 Uhr.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25