Jump to content

mishka

Expert
  • Posts

    2,118
  • Joined

  • Last visited

  • Days Won

    11

Everything posted by mishka

  1. mishka

    :hover

    expression, csshover.htc - это тоже скрипты, так что если в браузере вырубить поддержку скриптов - то это не сработает. Так что если уже поддерживать ие6 то лучше всего воспользоваться JS. Принцип следующий: .holder:hover .popup, .holder-hover .popup { display: block } label:hover, label.hover { color: #f00 } а на джс запускаем функцию: ieHover ( '.holder', 'holder-hover' ); ieHover ( 'label', 'hover' ); ieHover - функция которая принимает 2 параметра: 1 - искомый селектор. 2 - класс который нужно добавить при ховере. ищет все элементы по заданному селектору, и навешивает им на события ( onmouseover, onmouseout ) ф-ции которые будут добавлять класс при ховере, ну и снимать при отводе курсора. при ховере на label добавит класс hover; label { behavior: expression( this.onmouseover = new Function("this.className += ' hover'"), this.onmouseout = new Function("this.className = this.className.replace(' hover','')"), this.style.behavior = null); }
  2. Еще один борец со скроллом? страница загружается, и так как она большая, то появляется скролл и страница сдвигается влево это никак не баг.
  3. Буду краток: с днюхой
  4. Вот еще подобный пример с табами. Раньше это неработало в опере в 9й, как в более ранних - незнаю. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Tabs</title> <style type="text/css"> .t-holder { border: 1px solid #000; width: 500px; height: 200px; overflow: hidden; } .t-content { width: 500px; height: 200px; overflow: auto; } </style> </head> <body> <div class="t-pane"> <a href="#tab1">tab1</a> <a href="#tab2">tab2</a> <a href="#tab3">tab3</a> </div> <div class="t-holder"> <div id="tab1" class="t-content"> tab1 <p>Lorem ipsum dolor sit amet, tunc Stet consequat eiusdem ordo quos ducem! Volvitur ingreditur id quibus coronas talem metaphysicorum Apollonius, tharsiae in fuerat est Apollonius mihi servitute meam. Autem Apolloni ex civibus laude clamaverunt donavit beneficio usque vero diam nostra paupercula possunt autem nobiscum paulo. Virginis piratae suppetit sibi dicit pietate dudum sbyssi conturbatum. Adora nuntiaveris non ait est cum unde meae. Viam se est cum unde meae ceroma fronte comico hac civitati etenim quid, discumbere quam aniculae morsque nutricem valeas filia navem. Cyrenaeam plus quem es sed quod eam ad nomine Piscatore mihi! Apollonius eius sed quod eam sed dominum vidit loco. Quodsi animae tuae lacrimis ceram mandavit lugentem deus nec 'pectore zaetam at omnia filia dedit ad nomine. Intrarem se in rei finibus veteres hoc. Rei exultant deo apprehendit Apollonius non ait in rei civibus nescis haec in fuerat se est cum. Haec sed esse haec in lucem concitaverunt in rei exultant deo adiuves finem imponunt.</p> </div> <div id="tab2" class="t-content"> tab2 <p>Lorem ipsum dolor sit amet, tunc Stet consequat eiusdem ordo quos ducem! Volvitur ingreditur id quibus coronas talem metaphysicorum Apollonius, tharsiae in fuerat est Apollonius mihi servitute meam. Autem Apolloni ex civibus laude clamaverunt donavit beneficio usque vero diam nostra paupercula possunt autem nobiscum paulo. Virginis piratae suppetit sibi dicit pietate dudum sbyssi conturbatum. Adora nuntiaveris non ait est cum unde meae. Viam se est cum unde meae ceroma fronte comico hac civitati etenim quid, discumbere quam aniculae morsque nutricem valeas filia navem. Cyrenaeam plus quem es sed quod eam ad nomine Piscatore mihi! Apollonius eius sed quod eam sed dominum vidit loco. Quodsi animae tuae lacrimis ceram mandavit lugentem deus nec 'pectore zaetam at omnia filia dedit ad nomine. Intrarem se in rei finibus veteres hoc. Rei exultant deo apprehendit Apollonius non ait in rei civibus nescis haec in fuerat se est cum. Haec sed esse haec in lucem concitaverunt in rei exultant deo adiuves finem imponunt.</p> </div> <div id="tab3" class="t-content"> tab3 <p>Lorem ipsum dolor sit amet, tunc Stet consequat eiusdem ordo quos ducem! Volvitur ingreditur id quibus coronas talem metaphysicorum Apollonius, tharsiae in fuerat est Apollonius mihi servitute meam. Autem Apolloni ex civibus laude clamaverunt donavit beneficio usque vero diam nostra paupercula possunt autem nobiscum paulo. Virginis piratae suppetit sibi dicit pietate dudum sbyssi conturbatum. Adora nuntiaveris non ait est cum unde meae. Viam se est cum unde meae ceroma fronte comico hac civitati etenim quid, discumbere quam aniculae morsque nutricem valeas filia navem. Cyrenaeam plus quem es sed quod eam ad nomine Piscatore mihi! Apollonius eius sed quod eam sed dominum vidit loco. Quodsi animae tuae lacrimis ceram mandavit lugentem deus nec 'pectore zaetam at omnia filia dedit ad nomine. Intrarem se in rei finibus veteres hoc. Rei exultant deo apprehendit Apollonius non ait in rei civibus nescis haec in fuerat se est cum. Haec sed esse haec in lucem concitaverunt in rei exultant deo adiuves finem imponunt.</p> </div> </div> </body> </html>
  5. Ну анимации какие вам нравятся добавляйте сами. Я бы делал все вкладки меньше, а активную - больше. Еще один минус данного подхода - если табы будут расположенны внизу странички, так что до них нужно будет скролить, то при каждом переключении, страничка будет прыгать вверх и каждый раз нужно будет скролить вниз к табам.
  6. Так вот оно будет, да только это не юзабельно. Нельзя нормально применить на страничку несколько груп табов, так как поидее в каждой группе должен быть открыт хоть один таб, но тут так сделать нельзя, да и табы в табах не сделать. В данном примере списком сделанно, но это только потому что я редактировал раннее набросанный код, где было условие - юзать список. Мое мнение - это нужно делать блоками, не списком. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Tabs</title> <style type="text/css"> .tab-list { padding: 35px 0 0; overflow: hidden; list-style: none; margin: 0; } .tab-btn { -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; -o-border-radius: 10px 10px 0 0; float: left; margin: -34px 10px 0 0; height: 24px; padding: 5px; border: 1px solid #000; border-width: 1px 1px 0; cursor: pointer; } .tab-holder:target .tab-btn { background: #fff; position: relative; } .tab-content { display: none; float: right; width: 100%; margin: 0 0 0 -100%; } .tab-frame { border: 1px solid #000; border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; padding: 10px 5px; } .tab-holder:target .tab-content { display: block; } </style> </head> <body> <ul class="tab-list"> <li class="tab-holder" id="tab1"> <a class="tab-btn" href="#tab1">tab 1</a> <div class="tab-content"> <div class="tab-frame"> text 1 </div> </div> </li> <li class="tab-holder" id="tab2"> <a class="tab-btn" href="#tab2">tab 2</a> <div class="tab-content"> <div class="tab-frame"> text 2 </div> </div> </li> </ul> </body> </html>
  7. Может вам достаточно просто сделать блог на www.blogspot.com ?
  8. Кто постоянно минусует ТС в разделе коммерческие услуги? По теме: Я думаю что ТС не совсем верно описал задачу. я так понимаю это валидация формы, и проверка должна быть для соответствующего поля не только на заполнение, но и на корректное заполнение. Например: поле для телефона может содержать "+" первым знаком, и потом только цифры, плюсика может и не быть, для почты свои допустимые значения... ну и так дальше. За 40$ сделаю на jQuery или на чистом.
  9. Ток старые браузеры не поддерживают. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>placeholder</title> </head> <body> <form action="#"> <fieldset> <input type="text" placeholder="Default value" /> </fieldset> </form> </body> </html>
  10. Все время так и делаю, других способов даже не знаю
  11. мда? а если MS такие правильные, то почему тогда IE9 не по спецификации работает? Он же поддерживает last-child потому что в css 3 :last-child есть, а ие9 его частично поддерживает, а вот в css 2.1 - не было, а ие8 четко поддерживает css 2.1. И вообще, то был сарказм.
  12. :last-child - неработает в ие8, не по спецификации видите ли. Вот такой ие8 правильный
  13. Вот он, славный идальго Дон Кихот Ламанчский нашего времени, борящийся с ветряными мельницами. Если все же вы решили не оставлять шансов мельнице, то есть форуму, то могу помочь со скриптом. кто вам сказал что: style="display: none; есть очень не гуд ? Покажите мне хоть один форум проходящий проверку на валидность.
  14. GreatRash, спасибо <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .tab-list { padding: 20px 0 0; overflow: hidden; list-style: none; margin: 0; } .tab-btn { float: left; margin: -19px 0 0; border: 1px solid #000; background: #f00; height: 18px; } .tab-content { display: none; float: right; width: 100%; margin: 0 0 0 -100%; } .tab-active .tab-content { display: block; } </style> </head> <body> <ul class="tab-list"> <li class="tab-holder tab-active"> <span class="tab-btn">tab 1</span> <div class="tab-content"> text </div> </li> <li class="tab-holder"> <span class="tab-btn">tab 2</span> <div class="tab-content"> text 2 </div> </li> </ul> </body> </html> Допилить до кроссбраузерности. Особенно опасаюсь ие7. Из-за отсутствия хаслаяута на лишках - вполне возможны баги в ие7 во время смены табов
  15. А если так: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>tabs</title> </head> <body> <ul class="tab-list"> <li class="tab-holder"> <span class="tab-btn">tab 1</span> <div class="tab-content"> text </div> </li> <li class="tabholder"> <span class="tab-btn">tab 2</span> <div class="tab-content"> text </div> </li> </ul> </body> </html> Выбранной лишке класс, через этот класс показываем содержимое таба .tab-content Улке ( .tab-list ) вверху паддинг, на него абсолютом вешаем .tab-btn Пойдет? Фигня конечно что позиционировать то всеравно придется каждый .tab-btn
  16. Музыка на сайте не привлечет пользователей, а только оттолкнет. Неужели вы думаете что посетители вашего сайта сидят грустные, в абсолютной тишине, а ваш сайт их последняя надежда где бы музыку послушать? А когда ночью, и заходишь на такой сайт, а там как громыхнет, и ты сразу начинаешь быстро искать где бы ее вырубить, и в итоге осознаешь что проще закрыть эту вкладку, так как обычно сайты с музыкой полезной инфы не несут.
  17. mishka

    Скрипт

    Я так понял нужны обычные табы. А что значит "на каком вкрипте"? Имеешь ввиду на какой библиотеке JS? Если да, то на какой сможешь на такой и реализуй, да хоть на чистом JS.
  18. вот так вот, будешь опаздывать - никто не полюбит
  19. Свет, с днюхой P.S. Уфф помню как ты отреагировала, когда я первый раз тебя на "ТЫ" назвал
  20. Сделай как в моем первом примере, только + еще блокам .slide-item { width: 100%; text-align: center } Ты что не видишь что у тебя трабл не столько в джс, сколько в верстке
  21. Можно. Сделать структуру, например, такой: <div class="slideshow"> <div class="slide-item"><img src="test.jpg" /></div> <div class="slide-item"><img src="test.jpg" /></div> <div class="slide-item"><img src="test.jpg" /></div> </div> $('.slideshow').cycle({ // тут настраивайте как хотите, fx: 'fade' по дефолту уже установлен }); Блоку .slide-item - ширину, а в нем уже центрируйте картинки. Если вы поклонник списков, то тогда такой код: <ul class="slideshow"> <li><img src="test.jpg" /></li> <li><img src="test.jpg" /></li> <li><img src="test.jpg" /></li> </ul> Вобщем это реально хороший плагин для галерей с одновременно видимым 1м элементом.
  22. Вобщем на чистом такое писать ну его нафиг. А например на jQuery - вполне. Могу взятся.
  23. Сделаю за 40$ на jQuery. В понедельник утром отдам. Аська в профиле.
  24. То как делать списком или нет и куда совать - это другой вопрос. Сам за списки, так как это правильно с точки зрения Web Accessibility или Section 508. Точно уже и не скажу, так как давно верстал под такие требования. Там нужно линки разделять друг от друга блочными элементами. Я сейчас говорю о том что делать такие разделители текстом более правильно чем картинками.
×
×
  • 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