Jump to content

rookie

User
  • Posts

    61
  • Joined

  • Last visited

Everything posted by rookie

  1. rookie

    Remote Linking

    Немного изменил Вашу разметку, но думаю разберетесь: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Blah</title> <style> .titleNpost { width: 600px; height: 400px; padding: 30px; margin: 50px auto; background: #bbb; } .titleNpost h2 { color: #fff; background: #369; } .titleNpost h2, .post { -moz-transition: all 1s ease-in; -webkit-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .titleNpost:hover h2 { background: #c33; } .post { border: 1px solid #fff; } .titleNpost:hover .post { border-color: #c33; } </style> </head> <body> <div class="titleNpost"> <h2 class="postTitle">Title</h2> <div class="post"> Blah-blah... </div> </div> </body> </html> Весь фокус в том чтобы прописать transition элементам в дефолтном состоянии, а не когда у контейнера - :hover
  2. Это да, хотя еще лучше - Graceful degradation/Progressive enhancement/Вы используете IE, пожалуйста установите себе браузер
  3. Да, только там есть один маленький недостаток - нужно стоять в очереди, чтобы воспользоваться сервисом, что при разработке блоками с ориентиром на поддержку IE не очень удобно.
  4. Математику в школе учили? 100% на три разделить можете?
  5. Не знаю почему, но мне кажется что нам проверять ничего не надо. Мы просто предлагаем Вам варианты решения и уже Вы сами их проверяете бо проблема у Вас, а не у нас и Вы гораздо лучше знаете какого результата в итоге хотите добиться. И кстати, Вы мне так и не ответили - как можно добиться liquid width кроме тех способов которые я привел?
  6. rookie

    Remote Linking

    1) .postTitle, .post { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; 2) никода не разделяйте пробелом двоеточие и имя псевдокласса - :hover но не - : hover
  7. А по-моему, проблема все же в скриптах бо с отключенным js IE6-7 кушают Вашу страницу с аппетитом, а вот с включенным они сразу давятся. Кроме того, в IE9 все работает нормально и со скриптами.
  8. Хороший сервис, спасибо за ссылку!
  9. rookie

    Remote Linking

    Примерно вот так это делается: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Blah</title> <style> .box { width: 600px; height: 400px; padding: 30px; margin: 50px auto; background: #bbb; } .box h1 { color: #fff; background: #369; } .box h1, .post { -moz-transition: all 1s ease-in; -webkit-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } .box:hover h1 { background: #c33; } .post { border: 1px solid #fff; } .box:hover .post { border-color: #c33; } </style> </head> <body> <div class="box"> <h1>Headline</h1> <div class="post"> <p>Blah-blah-blah...</p> </div> </div> </body> </html> Смысл в том, что стили меняются не при наведении на заголовок а на контейнер в котором находятся и заголовок и блок с рамкой, а т.к. последние являются childnodes первого, то и при наведении на них эффект срабатывает.
  10. Интересно, как Вы предлагаете проверять без кода скрипта? Откуда я знаю, что у Вас делает - prev()? Какие стили он меняет? Какие размеры задает? А если по существу, то... Вы знаете другие способы сделать что-либо резиновым кроме тех что я указал? Было бы очень интересно узнать о них.
  11. А как насчет: 1)Убрать width совсем или 2)Подставить width: X% или 3)Задать ограничители min/max-width ?
  12. Может быть твоя картинка просто имеет большее разрешение чем окно браузера, не? Если да, то можно так: .target-box { position: absolute; width: 100%; height: 100%; background: url(img/blah.png) 0 0 no-repeat; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; } В IE<9 такой фокус не работает, зато теперь наплевать как соотносятся разрешение экрана и размер изображения.
  13. На самом деле, нет никакой разницы, объясняет тебе живой Попов или мертвый. Если полученные знания не будут находить применения через постоянную практику то толку от таких знаний как от пука в лужу. Единственный плюс IRL-курсов заключается в том, что есть быстрый фидбэк: не понял -> спросил у преподавателя -> тот объяснил. С другой стороны, если разберешься в непонятном сам, то ты лучше это усвоишь.
  14. 1) www.w3.org 2) Изучаем HTML, XHTML и CSS 3) CSS. Каскадные таблицы стилей. Подробное руководство 4) HTML и XHTML. Подробное руководство
  15. Как-то так: <div id="wrapper1"> <div id=wrapper2> ...content </div> </div> <div id="footer"></div> html,body {height: 100%} #wrapper1{ min-height: 100%; margin-bottom: -200px; } #wrapper2 { padding-bottom: 200px; } #footer { height: 200px; }
  16. Нет лучше курсов, чем - практика
  17. Можно например задать цвет не для .foot, а для ссылок в нем.
  18. Приведите тогда уж все решение вместе с разметкой если она тоже изменилась.
  19. Для того чтобы быть классным ruby программистом не обязательно в совершенстве знать html/css. В принципе достаточно знать Haml и SASS:)
  20. В принципе да. Я не правильно выразился, скрипт будет работать и на локальной машине, но только через localhost.
  21. Просто шкурный интерес. А какая практическая польза от резиновых инпутов? Резиновая textarea - понятно например, а input?
  22. klierik, а в итоге Ваша миссия какая была? Добиться того чтобы input можно было задать float и его соседи снизу обтекали контентом или что?
  23. А как Вы решили задачу? input - table-cell, родитель - table?
  24. Тут Только имейте ввиду, что этот скрипт не работает на локальных машинах, его нужно сразу на сервер класть.
  25. да и для того что бы растянуть <input type='text' /> совершенно не требуется display:block; правило. Не требуется-то оно не требуется но Вы же хотите, чтобы input вел себя как обычный div, а тогда без display: block не обойтись. Кроме того, у input есть атрибут size, который по дефолту равен 80. Думаю, что это во многом объясняет тот факт, что просто задав ему display: block, input не становится как div.
×
×
  • 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