Michael Myers
-
Posts
32 -
Joined
-
Last visited
-
Days Won
1
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Michael Myers
-
-
Была задача сделать блок для подписки, который бы следовал за текстом названия по мере увелечения страницы. Долго мучался, вдруг решил сделать внутри блока список 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;
} -
Странно, проверил в опере, хроме и фаерфоксе страничку, созданную из твоего кода: результат один - все отображается правильно, как и должно, то есть верхний паддинг 25px, нижний 12,5px. Может, кинешь ссылку на макет, попробую посмотреть.
А это может быть из-за того, что у меня 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;" />] -
вот фон: http://www.imageup.ru/img295/1352714/main-bg.gif.html
Картинка почему-то не видна, наверно из-за того что она белая.
Вот ее пропорции:
Height: 6 pixels
Width: 961 pixels
Эта картинка представляет собой: слева белый, который к правому концу становиться серым. Это придает эффект вдавленности.
-
http://www.woothemes.com/flexslider/
Да, простите. Все-таки проблема в путях. Забыл, что путь указываю из .css, а не из .html . Спасибо!
-
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> -
-
-
высота в % значении возвожна лиш в том случае, если родитель имеет фиксированную высоту, заданную в px (pt, em, rem, прочее).
я рекомендую вникнуть в то, как подобная технология реализована в http://twitter.githu...html#responsive
Я ставил body 1000px. Он вообще не реагирует.
-
-
Решил идти в ногу со временем и сделать адаптивный дизайн. Вот возникают сложности. Помогите, пожалуйста!
Проблема в том, что блог .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;" />] -
-
Похоже что файл с именем "bg.gif" не существует. Посмотрите внимательнее на название файла который Вы хотите подключить.
Да, спасибо. Блин, все время эта фигня. Ладно пойдем дальше.
-
Почему-то не ставиться 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
-
-
Лиса не хочет отображать границы в таблице. Почти все она отображает, но лишь две не отображает. На картинке видно. Но что самое интересное я ничего не менял, и на какое-то время они появились. Потом опять пропали. В 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;
}
Сделал, сам не знаю как
in HTML Coding
Posted
Я прочитал на htmlbook статью про строчно блочные элементы. Ничего нового для себя не заметил. Мне не понятно, почему div выравнивается по центру, хотя в статье ничего про это не сказано.