MyBB.de Forum

Normale Version: Anzeigeprobleme bei (HTML/CSS(?)-)Codes
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Seiten: 1 2
Guten Abend zusammen,

meine Frage / Problembeschreibung, nochmal im richtigen Thema. ^^
Vorab: Installiert ist die Version 1.8 und HTML ist bereits aktiviert

Ich bin noch recht neu was das ganze Forum-erstellen und sowas alles angeht, bzw. nicht so tiefgehend, was die Codes angeht. Aber ich würde in mein Board gerne verschiedene Vorlagen für Vorlage für Steckbriefe etc. einbauen, teilweise mit recht umfangreichen Codes (wenn ich das bisher richtig verstanden habe HTML/CSS, aber bitte steinigt mich nicht, wenn ich als Voll-Noob gerade totalen Mist laber) und wollte mal anfragen, ob es eine Möglichkeit gibt, diese im Board auch anzuzeigen? Die Codes wurden von anderer Stelle zur Verfügung gestellt, die ich einbauen will und funktionieren wohl auch in diversen Boards einwandfrei.
Die HTML-Parts werden sogar (so gut wie möglich) versucht umzusetzen, nur alles was zwischen:
<style type.......>
und
</style>
steht und mit den {}-Klammern zusammenhängt, wird nicht richtig angezeigt.

An anderer Stelle hab ich jetzt schon was von MyCode gelesen, aber damit steige ich gar nicht durch. Muss ich dann quasi jedes mal jeden einzelnen Code irgendwie neu als Vorlage einspeichern? Ich steh da gerade vor einem riesigen Fragezeigen. ^^ Das würde ich glaube nicht hinbekommen, die ganzen Codes einzeln zu übersetzen.

Ich schicke mal beispielhaft einen der kürzeren Codes und ein Bild von der Anzeige, damit man sich einen Überblick über das Problem machen kann und vielleicht kann mir ja jemand helfen.

Code:
</font><div class="handy"><div class="kontakt">KONTAKTNAME</div><div class="display"><div class="message1">Wer hier schreibt, hat als erstes geschrieben.</div>
<div class="message2">Und darauf folgt - meistens - auch eine Antwort.</div><div class="message2">Es sei denn, ihr führt gerade ein Selbstgespräch.</div></div><div class="credit">CODE BY <a href="http://peregrine.nobel-design.net/member.php?action=profile&uid=131" target="_blank"><font color="#8897b4">PAPER.CUT</font></a></div></div>

<style type="text/css">.handy { width:300px; height:500px; background-image:url('http://i1258.photobucket.com/albums/ii523/CTHv2/hbg.png'); } .kontakt {width:188px; height:20px; background-color:#606060; font-family:calibri; font-size:12px; color:#c8c8c8; padding:3px; border-radius: 0 0 11px 11px; text-align:center; text-transform:uppercase; font-weight:bold; position:relative; top:79px; left:50px;}.display {width:234px; height:291px; position:relative; top:79px; left:50px; overflow:auto; } .message1 {width:145px; border-radius:7px; background-color:#8897b4; font-family:calibri; font-size:10px; color:#1f1f1f; margin:20px 10px 0 10px; padding:10px; } .message2 {width:145px; border-radius:7px; background-color:#c8c8c8; font-family:calibri; font-size:10px; color:#1f1f1f; margin:10px 10px 0 20px; padding:10px; } .credit { font-family:calibri; font-size:10px; margin:10px 10px 0 20px; padding:10px; position:relative; top:114px; text-align:center; }</style>

Und das ist das Ergebnis, wie es bei mir angezeigt wird:

[attachment=9813]

Vielen Dank bereits vorab

LG
Dreamer
Füge mal bitte alles, was innerhalb von dem <style>-Tag steht, zu deiner global.css hinzu. Diese findest du im Admin-CP unter "Tenplates & Styles" - "Themes" - Name des verwendeten Theme. Dann brauchst du das im Code nicht mehr und sollte dann auch funktionieren.
Die Globel.css hab ich wohl gefunden.
Aber die hat ja tausende von Unterpunkten?

Wo genau soll ich das da einfügen?
Und muss ich da was beachten? (z. B. alles immer in neue Zeilen, mit Klammern oder ohne?)

Und muss ich dann danach im Post noch irgendwas berücksichtigen, oder müsste er das dann automatisch anzeigen?

btw:
Muss ich das für jeden Code gesondert machen?

Vielen Dank für die Hilfe schonmal vorab und sorry für meine dutzende von Fragen.
Schande über mich.

LG
Dreamer
Am besten Du fügst es ganz ans Ende nach der letzten schliessenden geschweiften Klammer ein.

}

Hier dann dein Code.
Okay, jetzt bin ich überfordert.

Wenn ich dem Weg folge, den Flobo x3 beschrieben hat, komme ich hier raus:

*rauseditiert*

Da hab ich keine } Klammern.

Ich glaub, das Prinzip hab ich dann verstanden (hoffe ich, werde ich testen und mich sonst melden ^^)

Mir mangelt es derzeit noch an dem Ort, wo ich es einbauen soll -.-
Ich sagte ja, ich bin da noch sehr unbegabt. Sad

Für weitere Hilfestellungen wäre ich trotzdem sehr dankbar
und bereits jetzt 1000 Dank für eure Geduld und eure Hilfe Smile

LG
Dreamer
Es geht auch einfacher, einfach in der inc/class_parser.php die Zeilen 139-142 mit einem // rauskommentieren, dann muss du es nicht über für jeden Code neu machen und kannst auch über <style></style> das ganze im Thread machen.

Ansonsten die fortgeschrittene Methode bei der global.css nutzen und dort eben am Ende das ganze zwischen den Klammern einfügen.
Danke schön Smile

Ich hoffe, dass ich dann jetzt klarkomme, sonst melde ich mich einfach nochmal *hust*

Aber schonmal danke für eure liebe Hilfe Smile

LG
Dreamer
Hi,
der von Flobo x3 beschrioeben Weg ist schon OK.
aber damit du es einfügen kannst solltest du rechts noch auf :

Stylesheet bearbeiten: Fortgeschrittene Methode

klicken :-)

Pether
Hei zusammen.

Also erstmal nochmal Danke für die Hilfe, dass mit der global css. hat mir sehr weitergeholfen. Smile

Jetzt hab ich aber noch eine weitere Frage.

Innerhalb des Style-Tags ist ein Bild eingebaut. Dieses soll hinterher von jedem User selbst eingesetzt werden können in der vorgebenen Größe natürlich.

Jetzt ist meine Frage:

Was muss ich im Style an der Link-Stelle einsetzen, und wie muss ich einen entsprechenden "link" im HTML setzen, damit das ganze funktioniert?
*hilfesuchend schaut*
Hoffe, es versteht überhaupt jemand, was ich meine. ^^
Vielleicht kann mir dabei nochmal jemand helfen?

Hier das Code-Beispiel vom Style:

Code:
<style type="text/css">
.box01 {background-image:url('http://i1258.photobucket.com/albums/ii523/CTHv2/grassgreen_zps5bc88624.jpg');
width:180px; height:550px; background-color:#10b10c; background-repeat:no-repeat;}
.charatext {font-family:arial narrow; font-size:8px; color:#ebe2e7; padding:185px 5px 5px 5px; text-transform:uppercase; text-align:justify;}
.ueberschrift {background-color:#1a1a1a; width:330px; font-family: 'Fredericka the Great', cursive; font-size:30px; color:#10b10c; text-shadow: 0.1em 0.1em 0.1em #000000; text-align:center;}
.box02 {width:330px; height:510px; overflow:auto; border-left: 7px solid #10b10c; margin-left:10px; padding:5px; font-family:arial; font-size:11px; color:#c2ccc2; text-align:justify;}
.sep {background-color:#1fa332; width:100%; font-family: 'Anaheim', sans-serif; font-size:20px; color:#c4c4c4; text-transform:uppercase; text-align:center; margin-bottom:5px;}
z {font-weight:bold; font-family:arial; font-size:11px; color:#10b10c; border-left:5px solid #1fa332; margin-left:5px;}
.credit {width:180px; height:10px; background-color:#1fa332; font-family:arial; font-size:8px; color:#ebe2e7; text-transform:uppercase; text-align:center; letter-spacing:0.08em;}</style>

LG
Dreamer
Das geht natürlich nicht, wenn du diesen CSS in die global.css steckst. Die Lösung hierfür ist aber gar nicht schwer.

Tausche einfach
Code:
<div class ="box01">
gegen
Code:
<div style="background-image:url('http://i1258.photobucket.com/albums/ii523/CTHv2/grassgreen_zps5bc88624.jpg');
width:180px; height:550px; background-color:#10b10c; background-repeat:no-repeat;">
aus, dann ist das Bild weiterhin für den User selbst austauschbar.
Seiten: 1 2