PHP-FUSION DEUTSCHLAND
  • DEIN CMS - DEINE ZUKUNFT
Thread Verfasser: Rolly8-HL
Thread ID: 780
Thread Info
Es gibt 11 Beiträge zu diesem Thema, und es wurde 6076 Mal angesehen.  Ausserdem wurden Dateien angehängt.

PHP-Fusion Deutschland - Offizielle Supportseite » Support Allgemein » Infusionen / Mods / Panels

 Thema drucken
Text mit CSS
Rolly8-HL
Top  #1 Beitrag drucken
Geschrieben am 03. März 2016 11:47:47
Hallo, ich suche eine Möglichkeit einen Text Horizontal aus geben zu können, nicht mit 90° verdrehen.

Zitat

Nicht so

HALLO

sondern

H
A
L
L
O

Habe das Netz schon durchsucht und alles Mögliche gefunden, denke das ich es schon mal so gemacht hatte, nur wie?

Hat da jemand eine Idee? oder Hinweis dazu?
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
WWW
John Doe
Top  #2 Beitrag drucken
Geschrieben am 03. März 2016 14:36:13
Es gibt für solche Dinge in der Tat und tatsächlich inzwischen eine CSS3-Deklaration:

writing-mode

Allerdings bin ich mir nicht so wirklich sicher, ob diese Methode auch in allen Browsern funktioniert.

Mögliche Attribute:
lr-tb, rl-tb, tb-rl, tb-lr, bt-rl, bt-lr, lr, rl, tb, inherit

Beispiel:
<div style="writing-mode:lr-tb;">hallo</div>

Du kannst ja mal ein bisschen mit den Werten und Attributen herumspielen, evtl erzielst du damit das von dir gewünschte Ergebnis.

Ansonsten bleibt natürlich auch immer die "einfache" Lösung per HTML und <br />:

<p>
h<br />
a<br />
l<br />
l<br />
o<br />
</p>
Dieses Mitglied wurde gelöscht!
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
WWW
Rolly8-HL
Top  #3 Beitrag drucken
Geschrieben am 03. März 2016 17:40:27
Danke erst ein mal für die Antwort.

Die Methode hatte ich auch schon gefunden, scheint aber veraltet zu sein oder wird nicht vom Browser übernommen.

Die andere Idee geht leider nicht da es sich um ein Text handelt der ausgelesen werden muss und auch keine Leerzeichen enthalten darf.

Mf R8
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
WWW
Manfried
Top  #4 Beitrag drucken
Geschrieben am 03. März 2016 20:14:16
Hallo Rolly,

mit den Writing Modes, die in CSS 3 ja möglich sind, würdest du nicht wirklich weiter kommen, denke ich.
Writing Modes sind primär für den asiatischen Raum konzipiert und würden dein Wort nur um 90° drehen statt die Buchstaben untereinander zu schreiben, was du ja erreichen möchtest. Da ist Layzees "einfache Methode" die bessere und sicherere.

Hier kannst du das genauer nachlesen: Vertical text with CSS 3 Writing Modes

Nachtrag: Sorry, ich hatte deinen Hinweis, dass die "einfache Methode" nicht angewandt werden kann, zu spät gelesen.
Bearbeitet von Manfried am 03. März 2016 20:22:55
Die meiste Zeit des Lebens sucht man seinen Sinn vergebens ...
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
WWW
Rolly8-HL
Top  #5 Beitrag drucken
Geschrieben am 04. März 2016 09:29:12
Jeep, habe da was gefunden, ist eine Kombination, im Test hat es schon mal geklappt.
Code Download Code  

-ms-writing-mode: tb-rl; /* old syntax. IE */

-webkit-writing-mode: vertical-rl;

-moz-writing-mode: vertical-rl;

-ms-writing-mode: vertical-rl;

writing-mode: vertical-rl; /* new syntax */

         

-webkit-text-orientation: upright;

-moz-text-orientation: upright;

-ms-text-orientation: upright;

text-orientation: upright;


Meine Frage sollte damit erledigt sein.

Mf R8
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
WWW
Anonymer Benutzer
Top  #6 Beitrag drucken
Geschrieben am 28. April 2016 19:55:22
CSS3 und HTML5 Kompact
Geht auch so z.B.
CSS:
Code Download Code  

.text {

margin-left: 30px;

font-size:12px;

font-weight:bold;

position:absolute;

-ms-transform: rotate(90deg);

-moz-transform: rotate(90deg);

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

-ms-transform-origin: left top 0;

-moz-transform-origin: left top 0;

-webkit-transform-origin: left top 0;

transform-origin: left top 0px;

}


Ausgabe per echo:
Code Download Code  

echo "<center><div class='text'>TEST</div></center>";
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Rolly8-HL
Top  #7 Beitrag drucken
Geschrieben am 29. April 2016 07:22:16
Das war nicht was ich gesucht hatte, TEST 1 hatte ich schon, TEST 2 war das was ich zur Ausgabe bringen wollte.

Dazu kommt das es sich um eine Dynamische Ausgabe handelt , "Shoutbox 200 Zeichen".
Rolly8-HL hat folgende Datei angehängt:
Du hast nicht die Berechtigung die Anhäge dieses Themas zu sehen.
Bearbeitet von Rolly8-HL am 29. April 2016 08:53:39
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
WWW
John Doe
Top  #8 Beitrag drucken
Geschrieben am 29. April 2016 07:42:11

Zitat

matze_two schrieb:

Ausgabe per echo:
Code Download Code  

echo "<center><div class='text'>TEST</div></center>";


<center> wird ausserdem unter HTML5 nicht mehr verwendet!
Bearbeitet von John Doe am 29. April 2016 08:07:09
Dieses Mitglied wurde gelöscht!
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
WWW
Janilein
Top  #9 Beitrag drucken
Geschrieben am 29. April 2016 12:04:59
Hier mal was, was ich gefunden habe, evtl. bringt dich das ja zum Ziel:
Code Download Code  

<!DOCTYPE html>

<html>

<head>

<style> 

p.test {

    width: 2px; 

    border: 0px solid #000000;

    word-wrap: break-word;

}

</style>

</head>

<body>



<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>



</body>

</html>
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Rolly8-HL
Top  #10 Beitrag drucken
Geschrieben am 29. April 2016 15:45:04
Jeep, danke auch das geht, ist sogar noch einfacher.
Habe jetzt alles was ich brauche.
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
WWW
Anonymer Benutzer
Top  #11 Beitrag drucken
Geschrieben am 29. April 2016 19:59:20
Ahh...stimmt ,,layzee,, habe ich eben gestest. Sorry. Nur der Code den ich postete ist CSS3 anzeigbar. Und sogar steuerbar...Smile
Aber :-align textrazz

Ja text Aufrufen mit ,,p,, vergass ich stimme ich dem Janilein zu.
Bearbeitet von Anonymer Benutzer am 29. April 2016 20:06:31
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Springe ins Forum: