rookie
-
Posts
61 -
Joined
-
Last visited
rookie's Achievements
Explorer (1/14)
4
Reputation
-
Немного изменил Вашу разметку, но думаю разберетесь: <!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
-
Это да, хотя еще лучше - Graceful degradation/Progressive enhancement/Вы используете IE, пожалуйста установите себе браузер
-
Да, только там есть один маленький недостаток - нужно стоять в очереди, чтобы воспользоваться сервисом, что при разработке блоками с ориентиром на поддержку IE не очень удобно.
-
Математику в школе учили? 100% на три разделить можете?
-
Не знаю почему, но мне кажется что нам проверять ничего не надо. Мы просто предлагаем Вам варианты решения и уже Вы сами их проверяете бо проблема у Вас, а не у нас и Вы гораздо лучше знаете какого результата в итоге хотите добиться. И кстати, Вы мне так и не ответили - как можно добиться liquid width кроме тех способов которые я привел?
-
1) .postTitle, .post { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; 2) никода не разделяйте пробелом двоеточие и имя псевдокласса - :hover но не - : hover
-
А по-моему, проблема все же в скриптах бо с отключенным js IE6-7 кушают Вашу страницу с аппетитом, а вот с включенным они сразу давятся. Кроме того, в IE9 все работает нормально и со скриптами.
-
Хороший сервис, спасибо за ссылку!
-
Примерно вот так это делается: <!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 первого, то и при наведении на них эффект срабатывает.
-
Интересно, как Вы предлагаете проверять без кода скрипта? Откуда я знаю, что у Вас делает - prev()? Какие стили он меняет? Какие размеры задает? А если по существу, то... Вы знаете другие способы сделать что-либо резиновым кроме тех что я указал? Было бы очень интересно узнать о них.
-
А как насчет: 1)Убрать width совсем или 2)Подставить width: X% или 3)Задать ограничители min/max-width ?
-
Может быть твоя картинка просто имеет большее разрешение чем окно браузера, не? Если да, то можно так: .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 такой фокус не работает, зато теперь наплевать как соотносятся разрешение экрана и размер изображения.
-
На самом деле, нет никакой разницы, объясняет тебе живой Попов или мертвый. Если полученные знания не будут находить применения через постоянную практику то толку от таких знаний как от пука в лужу. Единственный плюс IRL-курсов заключается в том, что есть быстрый фидбэк: не понял -> спросил у преподавателя -> тот объяснил. С другой стороны, если разберешься в непонятном сам, то ты лучше это усвоишь.
-
1) www.w3.org 2) Изучаем HTML, XHTML и CSS 3) CSS. Каскадные таблицы стилей. Подробное руководство 4) HTML и XHTML. Подробное руководство
-
Как-то так: <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; }
