Forum - Textbausteine nebeneinander anordnen

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten � Textbausteine nebeneinander anordnen - Tabelle mit BB-Code

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Textbausteine nebeneinander anordnen - Tabelle mit BB-Code datum

02.01.2017 21:34 (zuletzt bearbeitet: 18.10.2023 19:36)

Huhuuu zusammen und frohes neues Jahr ^-^

Ich habe mal wieder eine Frage oder besser ein Problem und habe absolut keine Ahnung, wie ich es lösen soll ._.

Ich habe vor, Textbausteine nebeneinander anzuordnen, wie in einer Tabelle. So wie hier:

Schlie�en

Da sind die drei Spalten noch mit einer Scrollbar versehen. Mir wäre also wichtig, dass ich die drei Blöcke einzeln Bewegen kann und bearbeiten kann, ohne mir gleich alles zu verziehen und zu verzerren.

Ich hoffe ihr habt da eine Idee und könnt mir helfen >.< Für sowas reicht mein HTML Wissen leider nicht aus ._.

Liebe Grüße
Jules

Antworten

#2 | HTML-Tabelle: Scrollbare Textbausteine nebeneinander anordnen - Teil 1 datum

04.01.2017 18:46 (zuletzt bearbeitet: 24.03.2019 09:15)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3316
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1249

HTML-Tabelle: Scrollbare Textbausteine nebeneinander anordnen - Teil 1
Aktualisiert 09.04.22

Hallo Jules,
hier hast Du ein Grundgerüst einer HTLM-Tabelle mit scollbaren Textbausteinen.
Die Scrollbar wird durch einen zusätzlichen, in der Höhe bestimmbaren Div-Container und dem Befehl "overflow:scroll" verwirklicht.

Über die CSS kann man so einiges verändern:
  • Höhe der scrollbarenen Texte in Zeile 19
  • Breite der gesamten Tabelle in Zeile 6
  • Allgemeine Rahmenstärke in Zeile 24 (ansonsten in die einzelnen Spalten gehen!)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<style>
.format_tabelle {
text-align:center;
border-radius:5px;
padding:1px;
width:80%;
}
.format_ueberschrift {
font-weight:bold;
text-align:center;
background-color:#eeeefe;
}
.format_spalte {
text-align:center;
padding:10px;
}
.format_scollbar {
overflow-y:scroll;
height:200px;
}
</style>
 

<table border="1" align="center" class="format_tabelle">
<tr>
 
<td class="format_ueberschrift">Männliche</td><td class="format_ueberschrift">Weibliche</td><td class="format_ueberschrift">Nachnamen</td>
</tr>
 
<tr>
<td class="format_spalte">
<div class="format_scollbar">
A-Text 1 2 3 4 5 6
<br><br>
B-Text 1 2 3 4 5
<br><br>
C-Text 1 2 3 4
<br><br>
A-Text 1 2 3 4 5 6
<br><br>
B-Text 1 2 3 4 5
<br><br>
C-Text 1 2 3 4
<br><br>
A-Text 1 2 3 4 5 6
<br><br>
B-Text 1 2 3 4 5
<br><br>
C-Text 1 2 3 4
</div>
</td>
 
<td class="format_spalte">
<div class="format_scollbar">
A-Text 1 2 3 4 5 6
<br><br>
B-Text 1 2 3 4 5
<br><br>
C-Text 1 2 3 4
<br><br>
A-Text 1 2 3 4 5 6
<br><br>
B-Text 1 2 3 4 5
<br><br>
C-Text 1 2 3 4
<br><br>
A-Text 1 2 3 4 5 6
<br><br>
B-Text 1 2 3 4 5
<br><br>
C-Text 1 2 3 4
</div>
</td>
 
<td class="format_spalte">
<div class="format_scollbar">
A-Text 1 2 3 4 5 6
<br><br>
B-Text 1 2 3 4 5
<br><br>
C-Text 1 2 3 4
<br><br>
A-Text 1 2 3 4 5 6
<br><br>
B-Text 1 2 3 4 5
<br><br>
C-Text 1 2 3 4
<br><br>
A-Text 1 2 3 4 5 6
<br><br>
B-Text 1 2 3 4 5
<br><br>
C-Text 1 2 3 4
</div>
</td>
 
</tr>
</table>
 

Schlie�en

Tabelle in der Iconbar:

Mit der folgenden Anleitung ist es möglich mit einem Klick eine Tabelle in Beiträgen einzufügen!
Gleichzeitig ist eine Veränderung der Tabellenbreite, der Tabellenhöhe und der Hintergrundfarbe der Überschrift möglich!
Der Scroll-Befehl steht auf "auto", das heißt, dass die Scroll-Leiste erst beim Überschreiten der Tabellenhöhe eingeblendet wird!
Kann durch "scroll" geändert werden!
Der Tabellenhöhe bestimmt auch den Einsatz der Scroll-Leiste
Das Auslösesymbol in der Iconbar sieht wie folgt aus:

Einbau Iconbar:
• Auslösung durch eine Grafik!

Forencode umsetzen:
  • Der Forencode wird unter "Admin > Layout > Iconbar > Iconbar bearbeiten > Reiter Foren-Code" eingetragen.
  • Eintragung erfolgt in "Ersetze:" und "Mit:"
  • Wichtig! Sollten die Foren-Codes nicht umgesetzt werden, muss unter "Weitere Einstellungen" die "Reihenfolge" angepasst werden.
  • Hier ist es möglich überall die Ziffer "0" einzutragen!

1. Ersetze (Erweiterten Foren-Code einblenden):

1
 
[tabelle={{BreiteTabelle}}] ... [/tabelle]

1. Mit:

1
 
<table border="1" style="width:{{BreiteTabelle}};"><tr> ... </tr></table>

2. Ersetze (Erweiterten Foren-Code einblenden):

1
 
[ueberschrift={{farbe}}] ... [/ueberschrift]

2. Mit:

1
 
<td style="background:{{farbe}};font-weight:bold;text-align:center;padding:5px;"> ... </td>

3. Ersetze (Erweiterten Foren-Code einblenden):

1
 
[spalte={{HoeheZeile}}] ... [/spalte]

3.Mit:

1
 
<td style="padding:10px;text-align:center;"><div style="height:{{HoeheZeile}};overflow:auto;"> ... </div></td>

4. Ersetze (Erweiterten Foren-Code ausblenden):

1
 
[NeueZeile]

4.Mit:

1
 
</tr><tr>

Schlie�en

  • Zuerst Reiter "HTML" in der Iconbar öffnen.
  • "Namen" vergeben (z.B.: Tabelle).
  • Folgender Code im Eingabe-Feld "HTML" eingetragen.
  • Über "tabelle=" kann die Voreinstellung der Tabellenbreite verändert werden, hier "40%".
  • Über "ueberschrift=" kann die Voreinstellung der Hintergrundfarbe der Überschrift verändert werden, hier "#eeeefee".
  • Über "spalte=" kann die Voreinstellung der Tabellenhöhe verändert werden, hier "150px".
  • In Zeile 2 kann die Auslöse-Grafik geändert werden!
  • Fertig!

1
2
3
 
<div onclick="xob_insert('[tabelle=40%]\n[ueberschrift=#eeeefe]Überschrift 1[/ueberschrift]\n[ueberschrift=#eeeefe]Überschrift 2[/ueberschrift]\n[ueberschrift=#eeeefe]Überschrift 3[/ueberschrift]\n\n[NeueZeile]\n\n[spalte=150px]Text 1[/spalte]\n[spalte=150px]Text 2[/spalte]\n[spalte=150px]Text 3[/spalte]\n[/tabelle]','')" class="xob_icon_cont">
<img alt="Tabelle einfügen" title="Tabelle einfügen" class="xob_icon" src="//files.homepagemodules.de/b104774/f46t1197p2704n83_pjHatLBW.png">
</div>
 

Schlie�en

  • Die Texte in den Überschriften und Spalten sind mit Vorgabe zentriert, können aber beliebig formatiert werden!
  • Die Vorgabe-Texte dienen der Orientierung!
  • Die Tabelle kann sowohl zeilenmäßig, als auch spaltenmäßig erweitert oder auch mehrfach untereinander gesetzt werden!

1
2
3
4
5
6
7
8
9
10
11
 
[tabelle=40%]
[ueberschrift=#eeeefe]Überschrift 1[/ueberschrift]
[ueberschrift=#eeeefe]Überschrift 2[/ueberschrift]
[ueberschrift=#eeeefe]Überschrift 3[/ueberschrift]
 
[NeueZeile]
 
[spalte=150px]Text 1[/spalte]
[spalte=150px]Text 2[/spalte]
[spalte=150px]Text 3[/spalte]
[/tabelle]
 

Schlie�en

Hilfreiche Links:

  • Scrollbalken in Forum-Beiträgen mit einstellbaren Größen!
  • Schablone in der Iconbar!
  • Sonderzeichen fürs Forum bereitstellen!
  • Farbverlauf für die Iconbar!
  • Trennlinie für die Iconbar!
  • Super Color-Picker für alle Xobor-Templates!
  • Lupe mit kleinem, schnellen Script!
  • "Achtung Bauarbeiten"!
  • Kleine Iconbar in der Bildergalerie!
  • Formatierungsmöglichkeiten in der Schnellantwort!
  • Smilies für Themen-Markierungen!
  • Iconbar fixieren - gut für lange Beiträge!
  • Meine komplette Forum-Iconbar zum herunterladen!

Bis dann und gutes Gelingen!

Wolfgang

Antworten

#3 | RE: HTML-Tabelle: Scrollbare Textbausteine nebeneinander anordnen datum

05.01.2017 17:37

Uhhhh danke schon mal für die Antwort ^-^

Jetzt muss ich aber direkt das nächste Fragen und hoffentlich reißt du mir nicht den Kopf ab, aber.... wie und wo füge ich das ein? o_o
Als ich das in der Iconbar eingefügt habe, hatte ich die gesammte Tabelle plötzlich da XD
Muss ich das im CSS Bereich einfügen oder Foren Codes oder Textbausteine oder oder oder XD

Und noch mal danke für die Antwort

Liebe Grüße
Die dumme Nuss vom Dienst .__.

Antworten

#4 | HTML-Tabelle in der Iconbar datum

14.01.2017 21:35 (zuletzt bearbeitet: 24.03.2019 09:16)

HTML-Tabelle in der Iconbar

Hallo Jules,
habe die Tabelle für die Iconbar soweit fertig!
Ich hoffe, dass es Deinen Vorstellungen entspricht!
Habe oben im Beitrag #2 alles eingefügt!
Ansonsten, sag einfach Bescheid!

  • Es lässt sich jetzt mit einem Klick eine Tabelle in Beiträgen einzufügen!
  • Eine Veränderung der Tabellenbreite, der Tabellenhöhe und der Hintergrundfarbe der Überschrift ist möglich!
  • Der Scroll-Befehl steht auf "auto".
  • Die Scroll-Leiste werden erst beim Überschreiten der Tabellenhöhe eingeblendet!
  • Kann durch die Option "scroll" geändert werden!
  • Die Tabellenhöhe bestimmt den Einsatz der Scroll-Leiste.
  • Die Tabelle wird mittels einer Auslöse-Grafik eingefügt!
  • Hier im Forum habe ich es im Drop-Down-Menü unter "Format > Tabelle" zur Verfügung gestellt!

Wolfgang

Antworten

#5 | RE: HTML-Tabelle in der Iconbar datum

28.01.2017 21:50

Suuuuuuuuuuupiiiiiiiiiiiiiiiii \(*-*)/

Du hast mir mal wieder das Popöchen gerettet ^-^
Klappt alles super! So habe ich das gewollt :D An dem Aussehen kann ich ja nun ein wenig rumbasteln!

DANKE mit ganz vielen Keksen XDD

Antworten

#6 | Aktualisiert: HTML-Tabelle Scrollbare Textbausteine nebeneinander anordnen datum

19.05.2018 18:02 (zuletzt bearbeitet: 19.05.2018 18:04)

HTML-Tabelle / Scrollbare Textbausteine nebeneinander anordnen!

• Beitrag #2 aktualisiert.
• Bilder und Grafiken auf "HTTPS" umgestellt!

Wolfgang

Antworten

Mitgliederliste aufräumen � � Profilfelder ausblenden

�hnliche Themen

Antworten

Letzter Beitrag

Ganze Textbausteine in der Iconbar als Dropdown
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von bienchen 12 26.01.2024 19:14
Daishi • Zugriffe: 499

Neuer Foren-Code: Formularfelder mit "fieldset" und "legend"!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

25.09.2023 21:55
von

Wolfgang • Zugriffe: 291

Videos über Tabelle einfügen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Nara 6 25.03.2023 12:11
Nara • Zugriffe: 330
Code Syntax-Highlighting
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 1 01.07.2022 17:33
Wolfgang • Zugriffe: 321
Spoiler-Veschachtelung mit Code und Pre
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 30.10.2017 20:16
Wolfgang • Zugriffe: 3803
Iconbar "Textbaustein"
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Julia Ady Eden 2 16.08.2015 02:02
Julia Ady Eden • Zugriffe: 827

Text und Bild nebeneinander ausrichten?
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Julia Ady Eden

25.07.2015 02:30
von

Julia Ady Eden • Zugriffe: 1038

Sonderzeichen fürs Forum bereitstellen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 3 12.04.2019 11:47
Wolfgang • Zugriffe: 6079

Activity Feed (Aktuelle Beiträge) - Höhe der Tabelle einstellen und Design anpassen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

15.03.2024 16:19
von

Anne • Zugriffe: 1742

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €

78%