Pionowy tekst ma być w tym samym miejscu na standardowych rozdzielczościach i przeglądarkach

pytanie zadane 23 stycznia 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)

Witam.

Na podstronie mam umieszczony pionowy tekst, który jest ulokowany od lewej strony ok 20px w prawo. Korzystam z przeglądarki Firefox. Szerokość podstrony w body wynosi 100%. Z pozoru wygląda to tak jak powinno i niby jest OK, ale musiałem wpisywać nieproporcjonalne i minusowe wartości w pikselach, aby w końcu nastąpił oczekiwany efekt. Co muszę poprawić w kodzie, abym względem lewej strony mógł pozycjonować pionowy tekst w prawo i aby było dobrze na innych standardowych rozdzielczościach i popularnych przeglądarkach?

<body>
	
	<div class="wrapper">

		<div id="content">
		</div>

		<div class="tekst_info">
			<div id="vertical-text1" class="vertical-text">Tekst biały</div>
			<div id="vertical-text2" class="vertical-text">Tekst żółty</div>
		</div>
		
	</div>

</body>

body
{
	font-family: Verdana;
	background-attachment: fixed;
	margin: 0px;
	width: 100%;
	position: relative;
}

.wrapper
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#content
{
	background-color: #C0C0C0;
	width: 740px;
	height: 1200px;
	position: relative;
	margin-left: auto;
	margin-top: 50px;
	margin-right: auto;
}

.tekst_info
{
	position: fixed;
	left: 30px;
	top: 83%;
}

.vertical-text
{
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	background-color: #0000ff;
	position: absolute;
	font-size: 16px;
	text-align: center;
}

#vertical-text1
{
	color: white;
	left: -52px;
	top: -78px;
	width: 123px;
}

#vertical-text2
{
	color: yellow;
	font-weight: bold;
	left: -139px;
	top: -295px;
	width: 297px;
	font-family: Calibri;
}

1 odpowiedź

odpowiedź 23 stycznia 2017 przez mtk3d Nałogowiec (46,690 p.)

Wszystko jest ok. Są ujemne wartości dlatego, że przeglądarka najpierw pozycjonuje te divy, a potem obraca. Obraca je względem ich środków. Usuń obrót, albo wpisz np. 45deg, może wtedy lepiej zrozumiesz.

komentarz 23 stycznia 2017 przez Krzysiek_34 Mądrala (6,050 p.)

Przetestowałeś to czy tylko strzelasz w ciemno? :)

1	komentarz 23 stycznia 2017 przez mtk3d Nałogowiec (46,690 p.) http://jsbin.com/pujatehitu/edit?html,css,output Wpisuj sobie różne wartości obrotu i zwróć uwagę jak div'y się zachowują.

komentarz 24 stycznia 2017 przez Krzysiek_34 Mądrala (6,050 p.)

OK, zwrócę na to uwagę. Mam jeszcze jedno zastrzeżenie odnośnie drugiego tekstu w kolorze żółtym. Standardowo miałem wcześniej ustawioną nazwę czcionki o nazwie Verdana w tekście żółtym i nie było rewelacji co do wyświetlania tekstu w pionie. Tekst był nieco zdeformowany. Aktualnie zapisałem czcionkę o nazwie Calibri i dalej nie ma rewelacji. Niektóre litery są nieco zdeformowane, np litera "W".

#vertical-text2
{
	color: yellow;
	font-weight: bold;
	font-family: Calibri;
}

Litery wyświetlane w poziome są płynne, ale w pionie jest już nieco gorzej. To jest zależne od obróconych liter czy zależne od podanej czcionki?

komentarz 24 stycznia 2017 przez mtk3d Nałogowiec (46,690 p.)

Od obróconych liter

Podobne pytania

0 głosów

3 odpowiedzi 294 wizyt

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

pytanie zadane 10 lipca 2016 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)

0 głosów

1 odpowiedź 815 wizyt

Przesuwający się tekst pojawił się pod napisem "Info: ", a ma być w tej samej linii.

pytanie zadane 28 kwietnia 2016 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)

0 głosów

2 odpowiedzi 2,265 wizyt

Obrazki są po lewej, a tekst ma być po prawej stronie obrazków, ale po środku.

pytanie zadane 10 kwietnia 2016 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)

Pionowy tekst ma być w tym samym miejscu na standardowych rozdzielczościach i przeglądarkach

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci