Schrift Vertikal Darstellen

[snoopdoc]

Hallo,
ich Suche eine Möglichkeit um einen Text Vertikal Darstellen.
Nennen wir das Beispiel mal Hallo Welt.
Diesen Text möchte ich über eine .css so Dargestellt haben
H
a
l
l
o

W
e
l
t

ist das Möglich ?
Bitte freundlich um etwas Hilfe

 

[Maik]

Hi,

selbstverständlich ist dies möglich:

<div class="textBox">H a l l o W e l t</div>

div.textBox {
width:15px;
text-align:left;
}

Wichtig hierbei sind die Leerzeichen zwischen den einzelnen Buchstaben, damit der Browser auch einen Anhaltspunkt für den Zeilenumbruch hat.

mfg Maik

 

[snoopdoc]

Hallo,
Danke für die Schnelle Antwort.

Funktioniert wohl auch, aber leider nicht ganz so wie ich mir das gedacht hatte.
Da ich im Vorfeld noch nicht weiß welcher Text Vertikal Angezeigt werden soll muß ich ja mit 100% der Tabelle Arbeiten

<style>
div.textBox {
width:10px;
text-align:left;
}
</style>
<div class="textBox" style="width: 17; height: 100%">H a l l o W e l t</div>

 

[Maik]

Wenn du selber im Vorfeld nicht weißt, welcher Text überhaupt vertikal ausgerichtet werden soll, kann ich dir auch nicht weiterhelfen.

Eines ist auf jeden Fall so sicher, wie das Amen in der Kirche: der Text muß in eine Box eingebunden werden, die, wie von mir demonstriert, eine (extrem) geringe Breite besitzt.

Übrigens hast du bei der zweiten width-Deklaration die Einheitenangabe vergessen, was im standardkonformen Modus von den Browsern mit Fehldarstellungen quittiert wird.

Und wieso deklarierst du überhaupt in dem Inline-Style eine zweite und abweichende Breitenangabe?

mfg Maik

 

[snoopdoc]

Hallo,
hier mal mein Beispiel:

{if is_array($menue_right)} {foreach from=$menue_right item=haupt_menu name=hauptmenu}
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">
      <table border="0" width="62" cellspacing="0" cellpadding="0">
        <tr>
          <td width="62" background="http://www.pintax.de/test/menu.gif" height="128">
            <table border="0" width="28" align="right" height="128" cellspacing="0" cellpadding="0">
              <tr>
                <td width="100%" class="textBox"><a {$haupt_menu.link_opt} href="index.php{$haupt_menu.link}" class="tright"><font color="#FFFFFF">{$haupt_menu.name}</font></a></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
   </td>
    <td valign="top">{if is_array($haupt_menu.submenu)} {foreach from=$haupt_menu.submenu
      item=unter_menu name=untermenu}
      <table border="0" width="170" cellspacing="0" cellpadding="0">
        <tr>
          <td width="100%" valign="top"><a {$unter_menu.link_opt} href="index.php{$unter_menu.link}" class="right">{$unter_menu.name}</a></td>
        </tr>
      </table>
      {/foreach}{/if}<br>
    </td>
  </tr>
</table>
{/foreach}{/if

 

[Maik]

Und weiter?

Du hast eingangs nach der Möglichkeit zur vertikalen Darstellung eines Textes gefragt, und ich hab dir gezeigt, wie's CSS-technisch geht.

Wenn du aber im Vorfeld noch garnicht weißt, welcher Text überhaupt vertikal ausgerichtet werden soll, ist es müßig, das Thema hier in die Breite zu ziehen und die Diskussion luftschloßartig fortzusetzen.

mfg Maik

 

[snoopdoc]

Hallo,
ok.
Sagen wir mal die Tabelle wo steht {$haupt_menu.link} soll eine feste Breite und Höhe haben.
Höhe 124 Pixel und Breite 24 Pixel.

Das sollte doch dan gehen oder ?

 

[Maik]

Probier's doch einfach mal aus.

Wenn die Schriftgröße zu klein gewählt ist, werden sich bei der Breite von 24px der eine oder andere Buchstabe in einer Zeile nebeneinander anordnen.


mfg Maik

 

[snoopdoc]

Habe noch mal was Versucht.

<style>
div.textBox {
width:3px;
text-align:left;
}
</style>
<div class="textBox"><a href="index.php{$haupt_menu.link}">{$unter_menu.name}</a></div>

Nuns ist es der Text {$unter_menu.name} nicht mehr Vertikal ausgerichtet !
Was habe ich FALSCH gemacht ?

 

[Maik]

Tjaaaaaa ... anhand der "Textvariablen" kann ich jetzt nur mutmaßen, dass zwischen den Buchstaben keine Leerzeichen enthalten sind, auf die ich in meinem ersten Post ausdrücklich hingewiesen hatte ;-)

mfg Maik