Hallo, Gast! (Registrieren)

Wir wünschen allen Besuchern frohe Ostern!

Letzte Ankündigung: MyBB 1.8.37 veröffentlicht (04.11.23)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[HTML & CSS] Hilfe bei Design-Umsetzung
#1
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
Was ist der Unterschied zwischen der Politik und der Informatik?
In der Informatik ignoriert man führende Nullen...
Zitieren
#2
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.
[Bild: banner.png]

Bitte die Foren-Regeln beachten und im Profil die verwendete MyBB-Version angeben.
Zitieren
#3
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 ^^
Was ist der Unterschied zwischen der Politik und der Informatik?
In der Informatik ignoriert man führende Nullen...
Zitieren
#4
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 ^^
Was ist der Unterschied zwischen der Politik und der Informatik?
In der Informatik ignoriert man führende Nullen...
Zitieren
#5
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.
[Bild: banner.png]

Bitte die Foren-Regeln beachten und im Profil die verwendete MyBB-Version angeben.
Zitieren
#6
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?
Was ist der Unterschied zwischen der Politik und der Informatik?
In der Informatik ignoriert man führende Nullen...
Zitieren
#7
Nein. Leider gibt es über MyBB 1.4 kaum Informationen.
[Bild: banner.png]

Bitte die Foren-Regeln beachten und im Profil die verwendete MyBB-Version angeben.
Zitieren