+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Nahtloses Images design (/thread-33353.html)
Nahtloses Images design - MatthiasK - 07.04.2016
Hallo,
Ich bin mal wieder am themes basteln und habe hier mal eine css frage.
und zwar ich möchte einige images für den .theader verwenden d.h
ich habe für die mitte bilde und die seiten teile des Main Contens bilder.
nun geht es um die Einbindung ich habe es damals mit border images gemacht leider ist mir mein altes design abhanden gekommen wo ich es so gelöst hatte.
nun wollte ich mal fragen ob jemand noch eine möglichkeit kennt bocken so zu Design das die Seiten Ränder ein anderes Bild haben das design soll dynamisch sein also sich an Bildschirm Größe anpassen.
ich weis ich könnte das auch erreichen wen ich alle templates anpasse aber das sind viele datein und ein risen Aufwand und ich wollte mal wissen ob ihr nicht noch eine einfachere Methode kennt.
Da ich leider auch kein Mybb themes gefunden habe die das ähnlich gemacht haben.
RE: Nahtloses Images design - MrBrechreiz - 07.04.2016
Sorry, aber das versteht doch keiner was Du möchtest. Mit ein wenig mehr Satzbildung, kann man es bestimmt besser verstehen was Du möchtest.
Evtl um es verständlicher zu machen, wären ein zwei Bilder zur Orientierung hilfreich, falls es mit der Erklärung nicht geht.
RE: Nahtloses Images design - MatthiasK - 07.04.2016
Okay mal ein kleines bild.
Die rot und grün markierten Flächen sind Bilder an der Seite der box.
und der Konten ist in dem fal ein anderes Bild.
In dem gezeigten bild löse ich das ganze so
ich schiebe sämtlichen Content in der box mit margin-top: -xxpx
nach oben das er auf den Bildern sitzt.
nun wollte ich fragen ob ihr da noch eine andere methode kennt.
Code:
margin-top:-70px;
border-style: solid; border-width: 35px 15px 0 15px;
-moz-border-image: url(images/gw/main_top_top.png) 35 15 round repeat;
-webkit-border-image: url(images/gw/main_top_top.png) 35 15 round repeat;
-o-border-image: url(images/gw/main_top_top.png) 35 15 round repeat;
border-image: url(images/gw/main_top_top.png) 35 15 fill round repeat;RE: Nahtloses Images design - MrBrechreiz - 07.04.2016
Nun verstehe ich es ein wenig besser was Du möchtest. Ich denke aber nicht, das man dies auf nur eine Klasse lösen kann. Ein Ansatz wäre zum Beispiel dies mit div Conainer zu Regeln, und diese in den Hintergrund setzen und das eigentliche Forum Bit darüber zu legen.
Nachtrag:
Oder meinst Du dies im etwa so ? Siehe Anhang
RE: Nahtloses Images design - MatthiasK - 07.04.2016
das mit den divs im hintergrund ist eine gute idee.
ich werde es aber mal versucher weiterhin mit meinen border images mal sehen was bei raus kommt und browser kompatibilität und so
RE: Nahtloses Images design - [ExiTuS] - 07.04.2016
So wie vorgeschlagen würde ich es ebenfalls realisieren, nämlich überall, wo der Rahmen erscheinen soll, ein Spalten-Design herum bauen, nach dem Motto:
LINKER_RAHMEN | EIGENTLICHER_INHALT | RECHTER_RAHMEN
Beispiel HTML:
Code:
<div class="border_left"></div>
<div>[INHALT]</div>
<div class="border_right"></div>CSS:
Code:
.border_left { width: 20px; background: url('./images/border_left.png') left repeat-y #XXXXXX }
.border_right { width: 20px; background: url('./images/border_right.png') right repeat-y #XXXXXX }Bzw.:
Code:
<div class="border_top"> <!-- div Hintergrund gesamte Breite -->
<div class="border_top_left"></div> <!-- div float: left für linke Ecke -->
<div class="border_top_right"></div> <!-- div float: right für rechte Ecke -->
</div>
<div class="border_left"></div>
<div>[INHALT]</div>
<div class="border_right"></div>-
Wenn du allerdings eine absolute Seitenbreite hast (fester Pixelwert, z.B. 1200px), könntest du ein Hintergrundbild mit 1200px erstellen an denen links und rechts der gewünschte Rahmen sichtbar ist,
anschließend die CSS-Klasse .tborder um dieses background-image erweitern
und den Inhalt mit padding: 0 Xpx; um die Breite des Rahmens seitlich einrücken. Das hätte denselben Effekt.
Gilt aber nur für Seitenränder!
Zum Beispiel:
Hintergrundbild:
- Breite: 1200px;
- Höhe: 1px
- linke Seite des Bildes das Rahmendesign mit einer Breite von 20px.
- rechte Seite des Bildes das Rahmendesign mit einer Breite von 20px.
CSS Klasse abändern:
.tborder { background: url('BILD.png') repeat-y #XXXXXX; }
Wenn du auch einen Rahmen am Kopf und Fuß haben möchten, ändere die CSS-Klassen .thead (Rahmen oben) und .tfoot (Rahmen unten) und setze dort ebenfalls ein gewünschtes background-image.
[ExiTuS]
RE: Nahtloses Images design - MatthiasK - 08.04.2016
eh hallo vielen dank ExiTuS
das war sehr ausführlich, ausführlicher als erwartet.