iDrugov

October 29, 2012


html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Кстати, отличный способ. Работает у меня на сайте, отображается вполне корректно.

October 29, 2012

Красивые элементы дизайна дает CSS3, а не HTML. И то, особо много на нем не сделаешь. Как образец, можете посетить мой сайт, где графика только в четырех местах (фон, лого, фото, иконка top creator)

October 28, 2012

Отобразился сайт кривовато и выдал ошибку:

Похоже, исполняемый на этой странице сценарий занят или не отвечает. Вы можете остановить его сейчас или продолжить и посмотреть, сможет ли он завершить свою работу.

Сценарий: http://desomag.ru/design/js/ddsmoothmenu.js:61

Но полосы прокрутки нет и лишнего отступа тоже.

October 26, 2012

Можно начать с основ.

<!doctype html> - не указано

<html>

<head>

<title>Мой сайт</title> - не указано

</head>

<body>

Код должен быть ступеньками, в идеале:

<div>
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
</div>

</body>

</html>

Не критично, но неграмотно.

И весь сайт заключен в один див. Зачем?

ЗЫ

Заполните сайт, например о себе, уберите ненужные кнопки, заполните нужные.

October 25, 2012

Одна страница? Особо оценивать-то нечего. Бывает и хуже, если вас это подбодрит

October 25, 2012

Я верстаю под последнюю Опера, потом добавляю хаки для других браузеров, проверяю в Хроме, ФФ и заливаю. На ИЕ смотреть вообще нельзя, туда либо табличную графику заливать, либо забить на него вообще.

October 25, 2012

Лучше использовать графические элементы, ибо повернутый текст в CSS выглядит не очень.

October 25, 2012

Можно ли сделать элемент, который зависит от перемещения мышки? Например, для создания своего scroll. Поэксперементировал с position, но элемент либо "прыгает" в сторону, либо держится на месте.

October 24, 2012

Лучше использовать нестандартные шрифты один/два раза, в случае крайней необходимости. Как показал опыт - гугл фонтс и обычное подключение шрифта, всё равное не дают должного результата. Даже простые шрифты типа Myriad Pro или Calibri выглядят поршиво в XP, а подключение каллиграфического шрифта и на семерке его кособочит. По-меньшей мере у меня не вышло ничего толкового.

October 23, 2012

[Можно еще так:_http://jsfiddle.net/webviper/B9AMZ/16/

http://jsfiddle.net/webviper/B9AMZ/16/

Очень толковый код! Долго веъзжал и соображал, но сделал на сайте как хотел. Удобно то, что еще один такой же спойлер сворачивает предыдущий. Можно делать подряд спойлеры и не беспокоиться особо. Правда сложный код в общей сложности вышел, чтобы реализовать кнопку "обо мне".

October 22, 2012

Жжете, ребят! Буду объюзывать ваше творчество еще пару ночей

October 22, 2012

strange_atom, недоглядел как-то, что не месье Затем, что тема та была без ответа, да и читать её долго, а теперь есть два готовых решения на двух постах, на первых запросах гугла

October 22, 2012

Хм. Переписывал сайт две ночи, не выходит, в том редакторе всё путем. Странно, буду переписывать еще ночь тогда

October 22, 2012

sigma77, ничего себе! Месье, ды вы гуру CSS! Такого кода я еще не видел, аплодирую стоя!

October 22, 2012

wwt, в первой ссылке, как я вижу в Опера - пусто. В общем-то тот же самый код, без разницы.

А по второму примеру: Сам блок идет от левого верхнего края. А если внутрь этого блока поместить еще один релативный блок, кнопку например, то она идет от нижнего левого.

October 22, 2012

npofopr, кто растянется? Какой родитель?

ЗЫ

Вопрос о системе отсчета, если что. Волнует то, что релативный элемент от релативного блока изменяется только от левого нижнего угла, вместо левого верхнего.

October 22, 2012

Этот "урок" сочетает в себе все темы, поднятые ранее и видимо окончательно (или до новых модификаций языка) закрывает данный вопрос.

Спойлер открывается по клику на его название и скрывается по клику в любую область за его пределами.

Ничего нового, просто последовательное строение:

#spoiler:focus .spoiler
{
  display: block;
}

.spoiler
{
  display: none;
  overflow: hidden;
}

<a href="#" id="spoiler">Название спойлера
  <div class="spoiler">информация для скрытия, появляется по клику</div>
</a>

Самое простое решение, которое не работает в Google Chrome вообще.

Запросив на гугле: "WTF?", получил рекомендацию прописать: tabindex="1" Почему "1"? Это номер фокусировки. Если будете создавать несколько спойлеров, то указываете номера по порядку для каждого нового: "1", "2," "3" и т.д.

<a href="#" id="spoiler" tabindex="1">Название спойлера
  <div class="spoiler">информация для скрытия, появляется по клику</div>
</a>

Проверили, работает! В Хроме выделяется желтым цветом, в Opera и Mozilla всё норм, оставляем.

Всё? А нет. Нам нужна кнопка, которая будет раскрывать спойлер. Дело в том, что кнопка должна быть relative, или вообще не содержать position, потому что при absolute, перестает работать спойлер в Mozilla.

.button
{
  position: relative;
  display: inline-block;
  padding: 0 5px 2px 5px;
  background: #69C;
}

<a href="#" id="spoiler"><p class="button">Название спойлера</p>
  <div class="spoiler">информация для скрытия, появляется по клику</div>
</a>

Ура! Две бессоные ночи не прошли даром.

Кстати, любители извращений, типа Internet Explorer, так же могут его объюзать, что радует. Всё ориентировано исключительно на Windows-пользователя с компьютера/ноута, так что за работоспособность в планшетах и тем более на мобильниках через jar, вообще ничего не обещаю.

October 21, 2012

В общем беру я пустую страницу и хочу сделать на ней релативный див, с указанием размера в процентах. Как выяснилось опытным путем, такое бывает нужно. Казалось бы, задача проста:

<div id="relative"></div>

#relative
{
  position: relative;
  display: block;
  height: 60%;
  width: 75%;
  background: #000;
}

НО не работает. Гугол вообще не дает ответов на такие вопросы, значит мы не ищем легких путей. И в первичном CSS помимо обнуления значений, пишем в body

  position: absolute;
  height: 100%;
  width: 100%;

Теперь любой релативный элемент "падает" вниз и его расположение приходится писать от bottom, что напрягает, но я никак не пойму, что нужно подправить. Есть идеи?

October 21, 2012

Я конечно понимаю, что прошло много времени, но поднимаю тему. За два года кроссбраузерность не увеличилась? Что-то у меня данный спойлер контачит лишь в Опера.

October 21, 2012

mishka, расчетное разрешение сайта 1024х600, так что мобильники меня вообще не интересуют Кстати, мне нельзя смотреть свою лс!

Конечный рабочий код

<style>

#block
{
  position: absolute; /*необходимо для своих стрелок*/
  height: 256px;
  width: 256px;
  overflow: hidden;
}

#block:after /*стрелка вверх*/
{
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  opacity: 0.75;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-bottom: 4px solid #000;
}

#block:before /*стрелка вниз*/
{
  position: absolute;
  content: '';
  right: 0;
  bottom: 0;
  opacity: 0.75;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 4px solid #000;
}

.info
{
  height: 100%;
  width: 100%;
  padding: 0 25px 0 0; /*"прячет" системную полосу прокрутки за пределы block*/
  margin: 0; /*убирает отступы у тега <p>, что не требуется в <div>*/
  overflow: auto;
}

</style>

<div id="block">
  <p class="info">
Вот дом,<br>
Который построил Джек.
<br><br>
А это пшеница,<br>
Которая в темном чулане хранится<br>
В доме,<br>
Который построил Джек.
<br><br>
А это веселая птица-синица,<br>
Которая часто ворует пшеницу,<br>
Которая в темном чулане хранится<br>
В доме,<br>
Который построил Джек.
<br><br>
Вот кот,<br>
Который пугает и ловит синицу,<br>
Которая часто ворует пшеницу,<br>
Которая в темном чулане хранится<br>
В доме,<br>
Который построил Джек.
  </p>
</div>

Может быть потом, когда решу переписать сайт на jQery Всем огромное спасибо! Этот вариант вполне меня устраивает.

October 21, 2012

mishka, это же гениально! Всё гениальное просто Надо обюзать этот момент!

October 21, 2012

Нашел! Нашел решение с плавной анимацией. Ларчик просто открывался: Оставив relative, сделал просто скрытие вверх половины информации. Без изменения position заработал transition-duration

.info
{
  position: relative;
  padding: 0;
  margin: 0;
  top: 0;
  /* плавное воспроизведение вверх */
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
}

#block:hover .info
{
  top: -50%;
  /* плавное воспроизведение вниз */
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
}

npofopr, стрелочку или полоску - без разницы. Поменяю значения, будет полоска. Мне вот интересно, как можно ли завязать scroll только на неё? Кстати, завязать анимацию на псевдоэлементы нельзя, так что сделать "плавающую" полоску не получится, если ты о ней.

October 21, 2012

npofopr, интересует чистый css, я принципиально ищу обходы

October 21, 2012

Задача: сделать scroll внутри div, избегая полосу прокрутки.

Причина: полоса прокрутки не вписывается в дизайн сайта (ну как обычно).

Выбранный путь:


#block
{
  position: absolute;
  height: 256px;
  width: 256px;
  overflow: hidden;
}

.info
{
  position: relative;
  padding: 0;
  margin: 0;
}

#block:hover .info
{
  position: absolute;
  bottom: 0;
}


<div id="block">
  <p class="info">
Вот дом,<br>
Который построил Джек.<br>
<br><br>
А это пшеница,<br>
Которая в темном чулане хранится<br>
В доме,<br>
Который построил Джек.<br>
<br><br>
А это веселая птица-синица,<br>
Которая часто ворует пшеницу,<br>
Которая в темном чулане хранится<br>
В доме,<br>
Который построил Джек.<br>
<br><br>
Вот кот,<br>
Который пугает и ловит синицу,<br>
Которая часто ворует пшеницу,<br>
Которая в темном чулане хранится<br>
В доме,<br>
Который построил Джек.
  </p>
</div>

Проблема: это решение не работает с transition-duration, т.е. прокрутку не получается сделать плавной. И нет никого "опознавательного" знака, что можно прокрутить страницу.

Стрелочку вниз можно сделать несложно:


#block:before
{
  position: absolute;
  right: 0;
  bottom: 0;
  content: '';
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 8px solid #000;
}

Конечный имеющийся вариант: посмотреть

Но можно ли сделать прокрутку при наведении на саму стрелочку, а не на весь блок в целом? Скажем, даже если сделать её не псевдоэлементом, а отдельным div'ом?

Sign In

iDrugov

Posts

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Store

Posts posted by iDrugov

Фото как background для страницы

Какими средствами сделан сайт (HTML5)?

Сайт не правильно открывается

Верстка просто сайта

Верстка просто сайта

Версии браузеров

Как сверстать меню под углом

Scroll внутри блока без полосы прокрутки

Шрифт на сайте

Кроссбраузерный спойлер по клику на CSS3

Кроссбраузерный спойлер по клику на CSS3

Кроссбраузерный спойлер по клику на CSS3

relative в процентах и опущенные элементы

Кроссбраузерный спойлер по клику на CSS3

relative в процентах и опущенные элементы

relative в процентах и опущенные элементы

Кроссбраузерный спойлер по клику на CSS3

relative в процентах и опущенные элементы

Спойлер без JS

Scroll внутри блока без полосы прокрутки

Scroll внутри блока без полосы прокрутки

Scroll внутри блока без полосы прокрутки

Scroll внутри блока без полосы прокрутки

Scroll внутри блока без полосы прокрутки

Forums

Important Information