SnowCatcher
-
Posts
11 -
Joined
-
Last visited
SnowCatcher's Achievements
Explorer (1/14)
0
Reputation
-
огромное спасибо. поправил только .boxRotateLeft{ -webkit-transform-origin:30px 30px; -moz-transform-origin: 30px 30px; -o-transform-origin:30px 30px; -ms-transform-origin:30px 30px; transform-origin:30px 30px; width:20px; } вёрстка не едет, всё идеально!
-
Картинку можно вставить абсолютом и прижать к верху например. А вообще ты у нас тут главный по CSS3, поэтому сам и выкручивайся) абсолютом у меня вообще не получится, потому что панелька выезжающая эх, ща проверил свой код - верстка уехала(
-
psywalker здорово))))) кароче дело к ночи. сделал такой вариант, всё работает независимо от количества букв. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1"> <style type="text/css"> .boxRotateLeft{ -webkit-transform: rotate(270deg); /* Saf3.1+, Chrome */ -moz-transform: rotate(270deg); /* FF3.5+ */ -ms-transform: rotate(270deg); /* IE9 */ -o-transform: rotate(270deg); /* Opera 10.5 */ transform: rotate(270deg); zoom: 1; } </style> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> function load(){ nWidth = $(".boxRotateLeft").width(); nMarginHideSpan = ( $("#hide").height() - $("#hide img").height() - nWidth )/2; $(".boxRotateLeft").css({"margin-top": nMarginHideSpan, "display": "block", "height": nWidth, "width": nWidth}); } </script> </head> <body onLoad="load()"> <div id="hide" style="float:left;height:110px;background-color:#999999;width:20px;"> <img src="img/hide.png"> <span class="boxRotateLeft">hifgdhde</span> </div> </body> всем спасибо в этом форуме спасибо! завтра обязательно разберу
-
если увеличить количество букв в слове "hide" текст уезжает за пределы дивки. если текст один и тот же - вариант на миллион)
-
Конеша не поможет. Ты display:block; то убери у спана) увеличте количество букв в слове hide sigma77 простите сердешна. width:20px; у дивки не выставил. в 8 посте написал об этом, а в код не добавил.
-
не помогает. говорю же, пробовал с самого начала.
-
Погоди, а text-align: center; не помогает что ли? А дай тестовую страницу с примером посмотреть. неа, не помогает. первым делом попробовал. вот, можете поколдавать, картинку не прилагаю) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1"> <style type="text/css"> .boxRotateLeft{ -webkit-transform: rotate(270deg); /* Saf3.1+, Chrome */ -moz-transform: rotate(270deg); /* FF3.5+ */ -ms-transform: rotate(270deg); /* IE9 */ -o-transform: rotate(270deg); /* Opera 10.5 */ transform: rotate(270deg); zoom: 1; display:block; } </style> </head> <body> <div id="hide" style="float:left;height:110px;background-color:#999999;width:20px;"> <img src="img/hide.png"> <span class="boxRotateLeft">hide</span> </div> </body> вобщем, без display:block; я смог узнать ширину. буду ее запоминать, делать маргин-топ, а после этого выставлять атрибут. пойду попробую
-
да, высота 110px; ширина 20px высота картинка 16px
-
для каждого языка - не вариант. другое дело, если бы можно было высчитать высоту этого спана - и рассчитывать скриптом маргин (внешняя дивка "hide" у меня связана высотой). но при повороте высота спана считается как ширина "hide"
-
вот как сейчас хочется так пока выкрутился, прописав в класс boxRotateLeft line-height: 7; но от него у меня едет верстка. да и не помогает он для центрирования(
-
добрый день! делаю выплывающее боковое меню. поворот его заголовка с помощью css делается так .boxRotateLeft{ -webkit-transform: rotate(270deg); /* Saf3.1+, Chrome */ -moz-transform: rotate(270deg); /* FF3.5+ */ -ms-transform: rotate(270deg); /* IE9 */ -o-transform: rotate(270deg); /* Opera 10.5 */ transform: rotate(270deg); zoom: 1; display:block; } вопрос: как отцентрировать этот текст по-вертикали? дело в том, что для разных языков высота будет разная. вариант с картинками мне не подходит вот еще сама разметка <div id="hide" style="float:left;"> <img src="img/hide.png"> <span class="boxRotateLeft">hide</span> </div>