MyBB.de Forum
[HTML & CSS] Hilfe bei Design-Umsetzung - Druckversion

+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Sonstiges (https://www.mybb.de/forum/forum-1.html)
+--- Forum: Programmierung (https://www.mybb.de/forum/forum-32.html)
+--- Thema: [HTML & CSS] Hilfe bei Design-Umsetzung (/thread-8483.html)



[HTML & CSS] Hilfe bei Design-Umsetzung - Zwoetzen - 27.01.2008

Hi alle miteinander,

ich bin gerade dabei, das Design meines Forums zu überarbeiten, und stehe momentan vor einem Problem, wo ich seit Tagen schon keine Lösung für finde.

Als Veranschaulichung hier eine Bildmontage, wie es am Ende aussehen soll:
   
Ich habe die einzelnen Bereiche im Bild mit Rahmen abgegrenzt, damit die Aufteilung klarer wird.
Im Ganzen soll es eine Box werden, die ich später dann für viele verschiedenen Zwecke einsetzen werde (Forenanzeige der Startseite, Übersicht, Shoutbox etc.).
Der mittlere Teil wird der eigentliche Content, der soll hier nicht weiter interessieren.

Mein Problem sind die beiden Leisten oben bzw. unten: Diese bestehen jeweils aus 3 Grafiken: Links und rechts ein "Endstück" (je 100px breit) und in der Mitte die eigentliche Leiste als repeat-x (also als Background), wo dann der Titel der Box reinkommt. Die Box an sich soll die gesamte verfügbare Breite einnehmen. Die Endstücke sind dabei (teilwese) transparent, sodass dahinter möglichst nicht die repeat-x Grafik sein sollte Wink

Mein Problem ist nun: Wie kriege ich die Grafiken so hingebaut, wie sie auf dem Screenshot zu sehen sind?
Die Lösung sollte nicht zu verschachtelt sein, weil ich einfach Quelltext sparen möchte. (Im aktuellen Design hab ich das zwar schon eingebaut, aber ich finde das geht eleganter als mit einer Tabelle, die ja für eine Zeile schon 3 Tags in sich verschachtelt hat (table, tr und td) und das ganze noch mit verschiedenen Klassen etc ^^ )

Deshalb meine Frage: Könnte bitte jemand von euch den passenden HTML/CSS-Code posten, der die Leiste wie oben im Screenshot erzeugt?
Ich habe mich erst vor wenigen tagen mit CSS vertraut gemacht, und habe da so noch meine kleinen Problemchen (unter anderem diese Leiste ^^)

Schonmal ein Danke im Vorraus Wink


MfG Zwoetzen


RE: [HTML & CSS] Hilfe bei Design-Umsetzung - StefanT - 27.01.2008

Am einfachsten geht das mit einer Tabelle. Sonst müsstest du die Reihen oben und unten mit div-Tags zerteilen. Schließlich dürfen sich die Bilder ja nicht überlagern.


RE: [HTML & CSS] Hilfe bei Design-Umsetzung (Edited) - Zwoetzen - 27.01.2008

Okay, wenn du meinst dass tabelle das einfachste wären, werd ich wieder Tabellen nehmen Wink
Trotzdem Danke für deine Antwort Smile


EDIT:
Ich stehe aber weiterhin vor einem Problem.
Und zwar sind die Endstücke der Leisten ja 100px breit, der Content an sich soll aber rechts und links nur je 50px eingerückt werden.
also entweder arbeite ich mit Colspan, das ich dann jedes mal im Quelltext mit hinschreiben müsste, oder ich teile die Endstücke nochmal in der mitte, dass die tabelle letztendlich 5 Spalten hat, wobei der Content dann über die 3 mittleren Spalten gehen würde. Aber durch das Spalten der Grafik müsste ich dann pro Leiste 4 Grafiken einbinden, was den Quelltext wieder länger machen würde.

Am liebsten würde ich ja folgendes anstreben:
Code:
<div class="thead_left"></div><div class="thead">Box Header</div><div class="thead_right"></div>
<div class="content">Lorem ipsum blabla</div>
<div class="tfoot_left"></div><div class="tfoot">Box Footer (falls Text vorhanden)</div><div class="tfoot_right"></div>
Das wäre eben das, was du angesprochen hattest, dass ich die Leiste über mehrere Divs verteile.

Ich weiß einfach nicht, wie ich es am besten anstelle.

Ich will eben von anfang an einen recht effektiven Quellcode haben, denn später sollen noch weitere Seiten vor das Forum geschaltet werden, die genau das Design des MyBB verwenden. Und da ich noch nicht weiß, wie oft diese Boxen zum Einsatz kommen, sollen sie von vornherein einfach gut strukturiert sein Wink

EDIT No.2:
Okay, ich habe es jetzt geschafft, dass ganze mit DIV-Tags umzusetzen. Habe jtzt 7 Tags pro Box, eben die oben markierten Bereiche je ein Tag.
Es hilft manchmal eben, im Forum zu fragen, denn durch das Schreiben denkt man automatisch nochmal darüber nach ^^


RE: [HTML & CSS] Hilfe bei Design-Umsetzung - Zwoetzen - 28.01.2008

Aber mal noch eine andere Frage (passt zwar nicht ganz, aber nen extra Thread ist sie kaum wert):
Sind die Templates, die ich in MyBB 1.2.* erstelle, dann zu 1.4 kompatibel? Oder lohnt es sich gar nicht erst, in MyBB 1.2 anzufangen sondern gleich auf MyBB 1.4 zu warten (soll ja irgendwann mal rauskommen ^^)?
Nicht dass ich dann alles zweimal schreibe muss, weil die Templates nicht kompatibel sind ^^


RE: [HTML & CSS] Hilfe bei Design-Umsetzung - StefanT - 28.01.2008

Ich schätze, dass es einige Änderungen (für neue Funktionen) geben wird. Ob es sich lohnt zu warten kommt auf deine Änderungen an. Bei großen Änderungen würde ich warten, da das sicher schwieriger ist beim Update.


RE: [HTML & CSS] Hilfe bei Design-Umsetzung - Zwoetzen - 28.01.2008

Naja, ich hab eigentlich schon vor, das komplette Layout eben neu zu machen, das heißt viele Änderungen in den Templates und Themes.
Ist eigentlich mitlerweile bekannt, wann MyBB 1.4 in etwa rauskommen wird?


RE: [HTML & CSS] Hilfe bei Design-Umsetzung - StefanT - 29.01.2008

Nein. Leider gibt es über MyBB 1.4 kaum Informationen.