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;" /> [] -

http://www.woothemes.com/flexslider/ Решил воспользоваться этим слайдером, т.к. он адаптивный. Все работает, кроме того, что стрелки передвижения слайдов не visible. Они есть, т.к. при наведении курсора курсор меняется. Я сделал отдельный документ *.html без другого контента, только слайдер. Стрелки появились. Следовательно проблема в родителях, но мне ее не найти. Помогите пожалуйста! Вот css для стрелок: /* Direction Nav */ .flex-direction-nav {*height: 0;} .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(components/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;} .flex-direction-nav .flex-next {background-position: 100% 0; right: -36px;} .flex-direction-nav .flex-prev {left: -36px;} .flexslider:hover .flex-next {opacity: 0.8; right: 5px;} .flexslider:hover .flex-prev {opacity: 0.8; left: 5px;} .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;} .flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;} А вот css для всех родителей по порядку: body{ max-width: 1200px; margin: 0 auto; background: url(bg.gif); height: 1700px; } #wrap{ height: 100%; } .main{ height:100%; padding-top: 3.5%; border: none; background: url(main-bg.gif); background-origin: border-box; background-position: right 222% top; float: left; width: 70%; } .img_slides{ margin-left: 10%; width: 80%; } Вот сама html структура: <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="styles/flexslider.css" type="text/css"> <script src="js/jquery.flexslider-min.js"></script> <link media="screen" href="styles/main.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="styles/flexslider.css" type="text/css"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> </head> <body> <div id="wrap"> <div class="main"> <div class="img_slides"> <div class="flexslider"> <ul class="slides"> <li> <img src="components/anonymous.jpg" /> <div class="img_note">Мы приветствуем тебя, дорогой друг!</div> </li> <li> <img src="components/read_us.jpg" /> <div class="img_note">Подписывайся и читай нас!</div> </li> <li> <img src="components/spy.jpg" /> </li> <li> <img src="components/anonymous.jpg" /> </li> </ul> </div> </div> <script> $(window).load(function() { $('.flexslider').flexslider({ animation: "fade", touch: true, controlNav: true, directionNav: true }); }); </script> </div> </html> [не] - not[not] не, нет, ни; [no] не, нет; [n't] не, нет, ни

Да, вы были правы. Я забыл просто у wrap поставить 100%. Спасибо! <img id="y-t-loader" style="display: none;" /> [] -

у меня стоит теперь 1700px. И теперь точно туда все элементы страницы входят. <img id="y-t-loader" style="display: none;" /> [] -

Я ставил body 1000px. Он вообще не реагирует. <img id="y-t-loader" style="display: none;" /> [] -

Совсем забыл про clear. .archieve решил положить в side_bar. Но проблема теперь в том, что я ему пишу для .main, .side_bar{ height:80%;}. А он ничего не делает. Какую бы высоту я не ставил. Хотя если поставить в px то ставиться. <img id="y-t-loader" style="display: none;" /> [] -

Решил идти в ногу со временем и сделать адаптивный дизайн. Вот возникают сложности. Помогите, пожалуйста! Проблема в том, что блог .archieve лезет вправо. Устанавливаю высоту, но он сначала встает нормально, а потом начинает опять съезжать.(Смотреть надо на экране большем 860px. Блок, где написано "архив блога"). Вот ссылка, где можно взять остальной html и css. http://87.237.116.73/blog/index.html P.S. Те, кто разбирается в адаптивном, оцените еще пожалуйста саму верстку. .archieve{ background-color: black; color: olive; padding-top: 3%; border: 1px black solid; } .side_bar{ border: none; padding-top: 3.5%; background: white; max-height: 70%; height: 70%; float: right; width: 30%; } .main{ border: none; background: url(main-bg.gif); float: left; width: 70%; max-height: 96.4888%; height: 96.4888% } Заранее спасибо resource://jid1-cxafu9ddh0q8gq-at-jetpack/y-translate/data/ajax-loader.gifсложностиof[aggro] уличная драка, беспорядки, неприятности <img id="y-t-loader" style="display: none;" />] - [возникают] - there

Да, спасибо. Блин, все время эта фигня. Ладно пойдем дальше. [название] - name[name] имя, название, наименование; [title] название, титул, звание; [designation] обозначение, определение, указание

Почему-то не ставиться background-image. Путь стоит верный, т.к. в простом html, где ничего нет, кроме фона, все ставится. Вот страница http://87.237.116.73/blog/index.html . Помогите, пожалуйста! resource://jid1-cxafu9ddh0q8gq-at-jetpack/y-translate/data/ajax-loader.gifbackgroundфон[фон] background, ground, context; [задний план] background; [происхождение] origin, descent, birth [ставиться] - put

http://87.237.116.73/Otromt/Michael/shop.html

Лиса не хочет отображать границы в таблице. Почти все она отображает, но лишь две не отображает. На картинке видно. Но что самое интересное я ничего не менял, и на какое-то время они появились. Потом опять пропали. В Opera, Chrome все нормально. Подскажите пожалуйста. Вот код: .shop_table table tr th{ font-size: 23px; border: 3px ridge slategrey; } .shop_table table tr td{ font-size: 18px; border: 3px ridge slategrey; } .shop_table table{ border: 3px ridge slategrey; border-collapse: collapse; } <img id="y-t-loader" style="display: none;" /> [] -