code für simple text box

  • Seite 1 von 3
29.08.2014 08:41 (zuletzt bearbeitet: 29.08.2014 08:41)
#1 code für simple text box
avatar
Mitglied

Moin Moin,

hab gestern ein paar Stunden mich dran verweilt, bekomme es aber einfach nicht gebacken. ich such den Code für das im Portal mittig obere Bild. Die Schrift soll rechts neber dem Bild stehen, und zwar mit einem Abstand, praktisch so wie das untere. das eben der text nicht so am Bild "klebt". Kann mir den jmd vllt nennen?

danke und lieben gruß

verwendetes Template meines Boards: Business


 Antworten

 Beitrag melden
29.08.2014 10:07
#2 RE: code für simple text box
avatar
Mitglied

Hallo Elia,

schau mal in mein Portal. Schrift ist nur unabhängig möglich entweder über, oder unter dem Bild. Schrift setze ich alle mit Forencodes.
Die Box ist ja abhängig von der Grösse des eingestellten Bildes, also kannst Du da nicht noch Text daneben schreiben. Es sei denn Du machst das Foto so gross, wie es in der Original Willkommensbox von Xobor war. Die habe ich aber leider nicht mehr, da ich meine verändert habe.
Vielleicht hat ja jemand sowas gemacht und zeigt es Dir hier, wie es gemacht wurde. Zu realisieren wäre es womöglich mit einen eigenen Seite. Nur weiss ich nicht, ob man die auf das Portal bekommt? Also habe ein wenig Geduld, es weiss sicher jemand eine Lösung.
Abstände macht man übrigens mit <br> je nachdem vor .- oder hinter dem Link, oder der Schrift. Je mehr <br> desto grösser der Abstand.
<br> erzwingt einen Zeilenumbruch.

Mit freundlichen Grüssen
Gabriella

http://www.musengarten.com/
http://www.garten-der-poesie.de/

Layout: Business

 Antworten

 Beitrag melden
29.08.2014 14:52 (zuletzt bearbeitet: 29.08.2014 15:01)
avatar  ( gelöscht )
#3 RE: code für simple text box
Gast
( gelöscht )

Hallo,

... der Zeilenumbruch wurde ja von @Shogun bereits beschrieben. Wenn Du nun nachfolgenden Code mal komplett in eine Simple Text-box kopierst, wirst Du sehen, dass Du Bilder in und neben dem Text einbinden kannst, Größen, Schriftfarben, Schriftgrößen ändern kannst.
Setze Dich einfach mit diesem kleinen skript auseinander, füge Deine eigenen Bildadressen ein und tausche die Texte aus. Experimentiere mit den eingetragen Werten für Farben und Größen herum, bis es Deinen Vorstellungen entspricht. Es kann ja nix kaputt gehen ... :-)

<div style="text-align:left">
<img src="https://files.homepagemodules.de/b624252/...39_a9288fb8.jpg" style='float:left; padding:5px; padding-top:5px;' />
<h2>fett und größer<br> geschriebener Text</h2><br>
<font color="#c7c3c7">...hier kommt der gewünschte Text rein...,<img src="https://files.homepagemodules.de/b624252/a_139_a9288fb8.jpg" width="80px" height="60px" /> dazwischen kann man Bilder einsetzen, mit Größenangabe widht= und height= <br><br>
<img src="https://files.homepagemodules.de/b624252/a_139_a9288fb8.jpg" width="120px" height="80px" />... oder mit der rezise Anweisung, wie beim oberen Bild.</font><br><br><h2>Fettschrift nach Zeilenumbruch</h2> </div>
<div style="clear:both"></div>


Blau = Bildadressen
Orange = Dein eigener Text

der Rest sind Anweisungen mit veränderbaren Werten.

Viel Spaß dabei.


 Antworten

 Beitrag melden
29.08.2014 15:20
#4 RE: code für simple text box
avatar
Mitglied

bei den bildadressen muss ich erst die bilder in die Bildergalerie hochladen und welchen code benutze ich dann? HTML oder Forum Code?

verwendetes Template meines Boards: Business


 Antworten

 Beitrag melden
29.08.2014 15:26
avatar  ( gelöscht )
#5 RE: code für simple text box
Gast
( gelöscht )

... lade die Bilder , die Du für die Box nehmen willst in der Iconbar als Grafiken hoch, kopiere Dir die Adressen und setze sie in den oben geschriebenen Code ein. Dan experimentierst noch bischen mit Schriften und Zeilenumbrüchen, bis die Box so aussieht , wie Du sie gern haben möchtest.


 Antworten

 Beitrag melden
29.08.2014 15:37 (zuletzt bearbeitet: 29.08.2014 15:40)
#6 RE: code für simple text box
avatar
Mitglied

wo lad ich die bilder hoch? Unter "Iconset"? dort werden nur zip Dateien angenommen

edit: ok, weiß wo ;)

verwendetes Template meines Boards: Business


 Antworten

 Beitrag melden
29.08.2014 15:46
#7 RE: code für simple text box
avatar
Mitglied

welche werte muss ich einegebn bei " fett und grösser" wenn ich den text kleiner haben will?

verwendetes Template meines Boards: Business


 Antworten

 Beitrag melden
29.08.2014 15:57
avatar  ( gelöscht )
#8 RE: code für simple text box
Gast
( gelöscht )

... unter Admin→Layout→Kopf-/Fußzeile steht im oberen Fenster am Schluss : Laden Sie hier Grafiken hoch um Sie auf dem Forum einzubinden

Dort kommst zu einem Dialogfenster, um Deine Bilder hochzuladen. Adresse kopieren und einsetzen.

Überall wo im Beispiel "h2" steht, wird durch "h3", "h4", "h5" der text verkleinert. Ganz weglassen = Normalgröße.


 Antworten

 Beitrag melden
29.08.2014 16:06
#9 RE: code für simple text box
avatar
Mitglied

bekomm das nicht hin das das bild links am rand der box ist und nebendran der text, sch****

verwendetes Template meines Boards: Business


 Antworten

 Beitrag melden
29.08.2014 16:47 (zuletzt bearbeitet: 29.08.2014 17:01)
avatar  ( gelöscht )
#10 RE: code für simple text box
Gast
( gelöscht )

also noch mal von vorn. Wenn Du den ersten Teil des codes verwendest, hast Du das Bild links und rechts daneben steht der Text, den Du , wie schon geschrieben formatieren kannst.

Im Test sieht das dann so aus:




Deine Bildadresse verwenden und fertig ! Mit dem padding - Wert stellst Du den Abstand des Bildes vom Rand und vom Text ein. Dir Tags h1 bis h6 sind dafür gedacht, um Überschriften hervorzuheben. Der style `float:left;`bestimmt die Position Deines Bildes. Die Bausteine hast jetzt, zusammenbasteln musst schon allein. :-)

1
2
3
4
5
6
7
8
9
10
11
12
 
<div style="text-align:left">
<img src="https://files.homepagemodules.de/b624252/resize/160x160/a_139_a9288fb8.jpg" style='float:left; padding:15px; padding-top:5px;' />
<h2>fett und größer</h2> <b> normal fett geschriebener Text</b><br>
...der geschriebene Text steht rechts neben dem Bild<br>
Testtext ...Testtext ...Testtext ...Testtext ...Testtext ...Testtext ...Testtext<br>
Testtext ...Testtext ...Testtext ...Testtext ...Testtext ...Testtext ...Testtext<br>
Testtext ...Testtext ...Testtext ...Testtext ...Testtext ...Testtext ...Testtext<br>
und springt nach links , sobald das Bild "zu Ende" ist :-)<br>
Testtext ...Testtext ...Testtext ...Testtext ...Testtext ...Testtext ...Testtext<br>
Testtext ...Testtext ...Testtext ...Testtext ...Testtext ...Testtext ...Testtext
</div>
<div style="clear:both"></div>
 


 Antworten

 Beitrag melden
29.08.2014 17:03 (zuletzt bearbeitet: 29.08.2014 17:03)
#11 RE: code für simple text box
avatar
Mitglied

sieht bei mir jetzt so aus, hab auch nicht alles übernommen vom testtext

verwendetes Template meines Boards: Business


 Antworten

 Beitrag melden
29.08.2014 17:37 (zuletzt bearbeitet: 29.08.2014 17:40)
avatar  ( gelöscht )
#12 RE: code für simple text box
Gast
( gelöscht )

... dann musst Du die Bildgröße anpassen, es ist zu groß für Deine Box ...

<img src="https://files.homepagemodules.de/b624252/resize/160x160/a_139_a9288fb8.jpg" style='float:left; padding:15px; padding-top:5px;' />

Das grün markierte in Deine Bildadresse einfügen und die Werte anpassen. Oder mit < br> zusätzliche Zeilenumbrüche in Deinen Text einbauen, dass er so lang wie Dein Bild wird, oder am Ende Deines Textes so viele Zeilenumbrüche einfügen, bis es passt.


 Antworten

 Beitrag melden
29.08.2014 17:53
#13 RE: code für simple text box
avatar
Mitglied

ok, die Schrift war mir zu dick und zu schwarz, sollte so aussehen wie das unetre bild

verwendetes Template meines Boards: Business


 Antworten

 Beitrag melden
29.08.2014 18:22
avatar  ( gelöscht )
#14 RE: code für simple text box
Gast
( gelöscht )

... dann lass die Tags für die Fettschrift weg und verwende das Farbattribut (<font color="#c7c3c7">...</font> ) mit dem von Dir gewünschten Farbcode. Ich hab Dir jetzt wirlich alle Elemente geliefert, die Du zum gestalten Deiner Box brauchst. Bischen zusammenbasteln und in die Materie einsteigen musst schon selber.


 Antworten

 Beitrag melden
29.08.2014 18:23 (zuletzt bearbeitet: 29.08.2014 18:25)
#15 RE: code für simple text box
avatar
Mitglied

Die Schriftgrösse macht man mit <H1> oder wie auch immer</H1>
Wenn sie nicht Fett willst, dann einfach das <b> <b> wegnehmen.

Lade das Bild ganz einfach mit Bild hochladen hoch, dann nimmst den untersten Link aus der Mail dort und setzt ihn da zwischen das was rot ist!

<img src="https://files.homepagemodules.de/b624252/resize/160x160/a_139_a9288fb8.jpg" style='float:left; padding:15px; padding-top:5px;' />

Das grüne ist die Bildgrösse

Sorry Frank hatte nicht gesehen, dass schon geschrieben hattest, jetzt hat er wirklich alles, ich wollte mir hätte auch jemand soviel geliefert als ich angefangen habe.

Mit freundlichen Grüssen
Gabriella

http://www.musengarten.com/
http://www.garten-der-poesie.de/

Layout: Business

 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!