Jak stworzyć pionowy tekst nad przyciskiem, aby to działało we wszystkich przeglądarkach?

Question

Chciałbym stworzyć pionowy tekst nad przyciskiem. Jak stworzyć pionowy tekst nad przyciskiem, aby to działało we wszystkich przeglądarkach?

<table id="video_info" style="color: white; position: fixed; top: 70%; left: 10px; font-size: 16px">
	<tr>
		<td>
			<img id="button_img" src="przycisk.png" />
		</td>
		<td>
			<span style="font-weight: bold"> Tu ma być pionowy tekst nad przyciskiem</span>
		</td>
	</tr>
</table>

 

Answer 1

Skorzystaj z CSSowego transform: rotate(90deg):

https://davidwalsh.name/css-vertical-text

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

Comments

Za ten pionowy tekst wg. mojego gustu odpowiada zapis:

transform: rotate(-90deg);

Aktualny kod:

<table id="video_info" style="position: fixed; top: 70%; left: 20px">
    <td>
		<img id="button_img" src="przycisk.png" />
		<div style="transform: rotate(-90deg); font-weight: bold; color: yellow; font-size: 24px; background-color: #0000ff; position: fixed; width: 350px"> Tu będzie pionowy tekst</div>
    </td>
</table>

Super, są postępy. Przycisk jest w dobrym miejscu, ale niestety pionowy napis pojawił się na samym dole bardziej po prawej stronie. Próbowałem działać z marginesami, ale nie przyniosło to dobrego rezultatu. Jak zrobić, aby można było przemieszczać przycisk wraz z napisem? Co muszę poprawić w kodzie?

---

Pobaw się position: absolute / relative;

https://css-tricks.com/almanac/properties/p/position/

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 2

http://lingubot.pl/przyklad.php

 

.rotacja {
    -moz-transform:rotate(-270deg); 
	color:white;
    -moz-transform-origin: bottom left;
    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: bottom left;
    -o-transform: rotate(-270deg);
    -o-transform-origin:  bottom left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

 

Answer 3

Co oznacza pionowy tekst nad przyciskiem? Jakiś przykład?

Comments

Tutaj jest niezły przykład:

http://imageshack.com/a/img922/3202/sHfY5f.jpg

Aktualnie mój tekst znajduje się poziomo po prawej stronie przycisku.