Jump to content
  • 0

Не работает свойство rotate?

Евгений_SB

Asked by Евгений_SB,

 Share

Question

Евгений_SB Explorer

Евгений_SB

Posted
Posted

Ребят помогите разобраться почему не работает свойство rotate и как сделать что бы по клику на .list:after список выпадал?

Заранее спасибо огромное

 

скрин списка

5703058m.png

<!doctype html><html lang="en"><head>	<meta charset="UTF-8">	<title>Document</title>	<link rel="stylesheet" href="style.css"></head><body><div class="list">	<select name="lictsat" id="lictsat">		<option selected="Home">HomePage</option>		<option value="firstchaild">firstchaild</option>		<option value="firstchaild">firstchaild</option>		<option value="firstchaild">firstchaild</option>		<option value="firstchaild">firstchaild</option>		<option value="firstchaild">firstchaild</option>		<option value="firstchaild">firstchaild</option>		<option value="firstchaild">firstchaild</option>	</select></div>	</body></html>
* {	margin: 0;	padding: 0;}.list {	margin: 50px;}.list select {	padding: 6px 30px;	color: #888;	text-transform: uppercase;	width: 185px;	height:30px;}.list:after {	content: "< >";	padding: 6px;	margin: 0px -38px 0px;	cursor:pointer;	background: #eee;    	transform:rotate(90deg);	   -moz-transform:rotate(90deg);	   -o-transform:rotate(90deg);	   -webkit-transform:rotate(90deg);}
Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
Евгений_SB Explorer

Евгений_SB

Posted
  • Author
Posted (edited)

добавил, весь блок со стрелочками улетел в ад (шутка) блок улетает за границы браузера при применении display-block,

сделал так,вроде отображается нормально но не работает при попытке кликнуть на него

background: none repeat scroll 0 0 #EEEEEE;    content: "< >";    cursor: pointer;    display: inline-block;    height: 23px;    margin: 0 -37px;    padding: 5px;    position: relative;    transform: rotate(90deg);    width: 23px;    transform:rotate(90deg);     -moz-transform:rotate(90deg);     -o-transform:rotate(90deg);     -webkit-transform:rotate(90deg);

Google вразумительного ответа так и не дал(

постоянно посылает на ссылки с выпадающим меню (видимо меню популярнее выпадающих списков)

Edited by Евгений_SB
Link to comment
Share on other sites
  • 0
Евгений_SB Explorer

Евгений_SB

Posted
  • Author
Posted (edited)

http://jsfiddle.net/7JR6Q/

 

Вот так вы хотели?

 

Попробовал сделать как вы показали в сам принцип врубился, но кнопка со стрелками не реагирует на клики,

повторил в фидле все пашет,в браузере нет? либо я где то ошибку допустил ,ткните носом если не сложно

http://jsfiddle.net/8xVa8/

 

Все спасибо ответ ненужен ошибку нашел,тему можно закрывать

Edited by Евгений_SB
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • d0ublezer0
      [Решено] Почему не работает анимация keyframes?
      By d0ublezer0
      http://leveler.ru/i-icons/demo.html
      Cлепил из svg набор иконок в icomoon, приклеил анимацию вращения. Не вращается

      В найденном примере вроде всё так же. Но при этом - работает:
      https://codepen.io/Keyamoon/pen/aHxuq
      Что я сделал не так?
       
      UPD: не хватало
      display:inline-block;  
    • Volan
      Проблема с button
      By Volan
      Понимаю, что вопрос возможно, выглядит пустяковым, но для меня очень важно. Почему то не работают кнопки. Даже страница не загружается.
      echo '<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>'; echo '<form method="post" action="script.php">'; for ($i=1; $i<=100; $i++){ echo '——'; $post= implode(",",$_POST); if ($i<$post) {echo '<button name="',$i ,'" value= "',$i ,'" style="background-color:yellow; float: right; padding-top: 10px">gfhfg</button>';}; if ($i==$post) {echo '<button name="',$post,'" value= "',$i ,'" style="background-color:green; float: right; padding-top: 10px"></button>';}; if ($i>$post) {echo '<button name="',$i ,'" value= "',$i ,'" style="background-color:red; float: right; padding-top: 10px"></button>';}; echo '</form>'; } ?>  
    • Libiros
      Свойство transform: rotate() для адаптивной верстки
      By Libiros
      Всем привет! Столкнулся со следующей проблемой:
      Верстаю макет на Bootstrap и столкнулся с тем, что не получается нормально отпозиционировать элементы, имеющие, во-первых, свойство 
      transform: rotate(-90deg); во-вторых, абсолютное позиционирование для того, чтобы прилепить их к правому краю экрана.
      Итак, вот исходный код файлов:
      <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <title>Туризм</title> </head> <body> <div class="container-fluid turism_main"> <div class="row"> <div class="company-name"> <p>LuckyFox</p> <p>Travel</p> </div> <div class="aside_main col-xs-12"> <a href="#"><img src="img/afterparty.png" alt=""></a> </div> </div> <div class="aside-content"> <div class="aside-contact"> <i class="fa fa-volume-control-phone" aria-hidden="true"></i> Связаться с нами </div> <div class="aside-mail"> <i class="fa fa-envelope-o" aria-hidden="true"></i> Подписаться </div> <div class="aside-calendar"> <a href="#">Календарь</a> </div> <div class="aside-lang"> <span class="active">EN</span> / RU </div> </div> </div> </body> </html> А вот здесь style.css:
      .turism_main { background: gray; background-size: cover; height: 100vh; width: 100vw; color: #fff; position: relative; } .company-name { font-size: 2em !important; letter-spacing: 2px; opacity: .7; position: absolute; right: 45%; left: 45%; text-align: center !important; display: block; line-height: 1; margin-top: 15px; width: 200px; } .aside_main { text-align: right; padding: 0; } .aside-content { z-index: 999; position: absolute; right: -195px; top: 400px; transform: rotate(-90deg); font-size: .8em; background: black; } .aside-content div, .aside-content a{ display: inline-block; color: white; } .aside-content i { padding-right: 10px; color: #e9ba02; font-weight: bold; } .aside-contact, .aside-mail { padding: 5px 10px 5px 10px; border: 1px solid white; margin-right: 20px; } .aside-calendar, .aside-lang { margin-left: 20px; } Не спрашивайте меня, почему я сделал кривую строку .row и засунул в нее эту ссылку справа. Изначально можно было сделать ее position: absolute, я так и сделал, но потом стал мучаться с сабжем и переделал, в надежде, что поможет.
      Если вам потребуется вообще переделать напрочь весь .aside-*, то пожалуйста, лишь бы было понятно, почему вы это делаете. Потому что мне нужно понять.
      И еще есть один вопрос:
      Почему, когда я вписываю что-то в .aside-content , то он начинает ехать влево? Ведь у него не увеличивается ни длина, ни ширина. А если я увеличиваю width, например, то он тоже уезжает далеко...
      Еще раз повторю задачу:
      Нужно сделать так, чтобы весь блок .aside-content был прилеплен к правому краю и каким-то образом был адаптирован, если я уменьшаю экран по вертикали. В данный момент этот блок просто под .container-fluid ...
      Как быть?
      Сначала решил не прикреплять картинку, потом, все же, решил. Чтобы было нагляднее...

    • FlixTheBro
      Шапка и подвал не хочет адаптироваться под экран
      By FlixTheBro
      В ступоре. Очень прошу помощи.
      Дело такое. Верхняя шапка сайта (фиолетовая) не хочет адаптироваться под телефоны, причём всё остальное работает, кроме самой шапки и футера.
      Так же замечена очень интересный баг: при проверки адаптивности сайта ресайзом окна или масштабированием в google chrome для десткопа или даже проверке с помощью специальных ресурсов - всё работает как надо. Вы можете сами проверить по адресу flixthebro.com
      При этом заходя на сайт с любого мобильного устройства (тестировал на 3-х) выдаёт почему то другой результат.
      Ещё несколько забавных примечаний: допустим установил я размер текста в шапке 32px и в контенте 32px. На телефоне размер шрифта в шапке никак не сопоставим с размером шрифта в контенте и намного мельче. То же самое и с футером. / Так же я эксперементрировал и пробовал убирать разные строки из css и ничего не получалось. Чем же эти два фиолетовых блока провинились? Почему они такие "особенные"?
      Ах да ещё надо бы сказать, что сайдбар сделан только для того, чтобы в случае надобности начать его использовать активировать легко и просто, сейчас он абсолютно не нужен, но в отличие от этих двух работает отлично.
      Я отчаялся и совсем перестал хоть каплю иметь соображения из-за чего это может быть. Прошу помощи от вас, господа формучане.
       
       
       
    • pozornuk
      Не работает margin
      By pozornuk
      Привет камрады!
      Не работает выравнивание блока по центру.   Не могу понять без позиционирования работает а с ним нет! В чем причина?
       
      HTML
      <!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="css/style.css" /><title></title></head><body><div id="header">12345</div></body> </html>CSS
      body { position: relative; background-color: yellow; border: 10px solid red; width: 750; height: 750;}#header { position: absolute; background-color: blue; width: 100; height: 100; border: 3px solid black; margin: 0 auto;}
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept