Michael Myers

Я прочитал на htmlbook статью про строчно блочные элементы. Ничего нового для себя не заметил. Мне не понятно, почему div выравнивается по центру, хотя в статье ничего про это не сказано.

Была задача сделать блок для подписки, который бы следовал за текстом названия по мере увелечения страницы. Долго мучался, вдруг решил сделать внутри блока список ul, поставил ему display:inline-block, сразу же все получилось. Даже не понял как так произошло. Вот картинка(http://pbrd.co/12HgpIH) и временная ссылка на сайт(http://109.172.13.165/Site/blog/). Спасибо! HTML: <div class="follow"> <ul> <li><a href="https://twitter.com/RamSaw" class="twitter"></a></li> <li><a href="#" class="rss"></a></li> <li><a href="http://vk.com/id132792025" class="vk"></a></li> </ul> </div> CSS: .follow{ margin-left: 60px; } .follow ul{ display: inline-block; padding: 0.75em 0.5em 0.75em 0.5em; background: #364050 url('img/bg1.png'); border-radius: 0 0 0.4em 0.4em; } .follow li{ float: left; }

А это может быть из-за того, что у меня Chrome и Firefox для Ubuntu?

Первый вопрос сразу же такой: почему в Firefox, чтобы сделать примерно ВИЗУАЛЬНО равные padding'и, нужно ставить разные числовые значения. padding-top: 25px; padding-bottom: 12.5px; Вот как это выглядит. Там можно определять все по border.http://pbrd.co/12SWI4e Вторая штука в том, что Chrome вообще игнорирует все, и ставит какой-то бешеный padding. И не важно будешь ты ему ставить 25px или 12.5px. Вот картинка: http://pbrd.co/12SXWMO Помогите пожалуйста, потому что я в кроссбраузерности вообще не шарю. Вот весь код: HTML: <div class="about"> <p style="color: #d4dde0;"><span style="font-size: 0.9em; color: white; font-weight: 900;font-size: 1em;">НВП Блог: Многосторонность</span><br />Вот каким словом можно охорактеризовать этот блог. В нем нет единой темы. Здесь записи на самые разные темы.</p> </div> CSS: .about{ padding-top: 25px; padding-bottom: 12.5px; border-top: solid 1px rgba(0,0,0,0.25); border-bottom: solid 1px rgba(0,0,0,0.25); height: 150px; } .about p{ font-family: 'Source Sans Pro', sans-serif; text-indent: 0; margin-top: 0; background-color: #272E39 !important; background-color: rgba(0,0,0,0.15) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 0.25em 0 rgba(0,0,0,0.25); border-radius: 0.4em; letter-spacing: 0; padding: 0.75em 0.5em 0.75em 0.5em; font-size: 0.9em; font-weight: lighter; } .about p span{ font-size: 1em; }

Спасибо большое за помощь!

Тоесть без :after только так?

Ясно. Спасибо. А можно как-то без :after все провернуть?

Здравствуйте! Скачал шаблон один. Очень красивый. Но, как мы знаем, все красивые шаблоны сложные. Вот и возникают трудности. Я не понимаю ниже приведенного кода. Код относиться к поиску, который можно посмотреть на картинке(http://pbrd.co/1bQ8cbW). А точнее к картинке с лупой. Мне не очень, во-первых, понятно, что придает :after, ведь если его убрать все меняется. Также примечательно, что текст при вводе не налезает на картинку, которая в свою очередь является фоном. По всей видимости это придает как раз таки :after. И вообще не очень понятны другие правила тоже. Вроде знаю все правила, что означают, но все равно. На фон ставиться картинка sprites.png(http://pbrd.co/1bQ8ijQ), в которой кроме лупы есть еще и иконки других социальных сетей. Не понятно куда они деваются, и почему остается только лупа. Объясните пожалуйста! HTML: <form class="search"> <input type="search"name="search" placeholder="Search"> </form> CSS: .search{ width: 195px; margin-left: 12.5px; padding-top: 25px; border-top: solid 1px rgba(0,0,0,0.25); box-shadow: none; position: relative; } .search input{ width: 153px; height: 15px; line-height: 1.75em; font-size: 11pt; letter-spacing: 0; font-family: 'Source Sans Pro', sans-serif; color: #565656; border-radius: 0.4em; -webkit-appearance: none; border: solid 1px #ddd; padding: 0.5em; position: relative; padding-right: 34px; } А вот и самый главный код CSS: .search:after { content: ''; display: block; position: absolute; top: 72.5%; right: 4px; margin-top: -12px; width: 24px; height: 24px; background-image: url('img/sprites.png'); background-position: -96px 0px; }

Да, спасибо. Благодаря вам я понял. Нужно задавать правило также и для html.

У меня возникла проблема при резиновой верстке. Допустим есть: HTML <body> <div> <div></div> </div> </body> CSS body{ height:?;(Вот здесь и проблема) } div{ height:20%; } Чтобы действовало это height:20%;, нужно чтобы body имел какую-нибудь фиксированную цифру. Но я же делаю это резиново, и мне нужно, чтобы min-heght = высоте устройства, а если содержимое не вмешается, то высота увеличивалась бы по мере необходимости. Помогите пожалуйста!

А вот еще вопрос: HTML <a class="a"></a> -- CSS .a{ background-image: url(img.png); } Вот у меня почему-то не работает.

А на background две картинки можно поставить?

Друзья, вот такая проблема. Нужно в ссылку впихнуть файл *.svg. Делаю это с помощью <img>. Но в лисе вообще ничего нет, а в Chrome картинка, обозначающяя, что картинка не смогла интерпритироваться. Как можно выкрутиться из этой ситуации. Варианты с JS принимаются. Спасибо!

Не могу понять, как работает background. Допустим есть блок сразу после body. Width: 70%, height:100%. Есть картинка фона. Как сделать, чтобы она растянулась на всю ширину, не повторяясь? Спасибо. <img id="y-t-loader" style="display: none;" />] - <img id="y-t-loader" style="display: none;" /> [] - <img id="y-t-loader" style="display: none;" /> [] - вот фон: http://www.imageup.ru/img295/1352714/main-bg.gif.html <img id="y-t-loader" style="display: none;" /> [] - Картинка почему-то не видна, наверно из-за того что она белая. Вот ее пропорции: Height: 6 pixels Width: 961 pixels Эта картинка представляет собой: слева белый, который к правому концу становиться серым. Это придает эффект вдавленности. <img id="y-t-loader" style="display: none;" /> Height: 6 pixels[] -

http://www.woothemes.com/flexslider/ <img id="y-t-loader" style="display: none;" /> [] - Да, простите. Все-таки проблема в путях. Забыл, что путь указываю из .css, а не из .html . Спасибо! <img id="y-t-loader" style="display: none;" /> [] -