Libiros

July 28, 2017

А что именно неправильно? Как должно быть?

Закинул все в песочницу, подключив бутстрап: https://jsfiddle.net/1k9yr01g/

July 27, 2017

28 минут назад, Svetlana_P сказал:

Всё посмотрела. К сожалению, мне сложновато понять вопрос Отвечу, как поняла.

У Вас не получается повернутый блок прилепить к правому краю. Решение вот https://jsfiddle.net/Benedetta/xohao506/3/ Т.е. сначала поднимаете блок на высоту, равную самому себе, а потом поворачиваете его на нужный угол вокруг правого нижнего угла. Неважно, какого размера будет контент внутри или окно.

Благодарю. Вариант рабочий! Но почему так? Хочу понять. Какая разница по сравнению с тем, что я сделал самостоятельно? Почему у меня не работает, а у вас очень даже?

July 27, 2017

2 часа назад, Svetlana_P сказал:

Картинка не подцепилась в песочнице. Доработайте пример, попробую помочь!

Там картинка не играет роли, это просто выдержка из моего документа. Можно без нее.

July 27, 2017

1 час назад, Igor Schnaider сказал:

Вы бы пример собрали в песочнице.

Вот песочница: https://jsfiddle.net/wx294s22/

Соответственно мы видим правый блок, который перевернут - он выезжает за края серого фона, а я бы хотел, чтобы он просто сжимался и уходил на 2-3-4 строки, вместо одной.

И также можно попробовать вписать что-то в этот блок. С каждой буквой он уезжает все дальше.

July 27, 2017

Ребята, помогите. Так и не решил проблему эту.

July 26, 2017

Мне кажется, мало данных. У меня нормально все с нижним блоком. Остальным стилей не хватает.

July 26, 2017

Всем привет! Столкнулся со следующей проблемой:

Верстаю макет на Bootstrap и столкнулся с тем, что не получается нормально отпозиционировать элементы, имеющие, во-первых, свойство

transform: rotate(-90deg);

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

Итак, вот исходный код файлов:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">

<title>Туризм</title>
</head>
<body>
    <div class="container-fluid turism_main">
      
<div class="row">
  <div class="company-name">
      <p>LuckyFox</p>
      <p>Travel</p>
  </div>
  <div class="aside_main col-xs-12">
    <a href="#"><img src="img/afterparty.png" alt=""></a>
  </div>
</div>
   
    <div class="aside-content">
        <div class="aside-contact">
            <i class="fa fa-volume-control-phone" aria-hidden="true"></i> Связаться с нами
        </div>
        <div class="aside-mail">
            <i class="fa fa-envelope-o" aria-hidden="true"></i> Подписаться
        </div>
        <div class="aside-calendar">
            <a href="#">Календарь</a>
        </div>
        <div class="aside-lang">
            <span class="active">EN</span> / RU
        </div>
    </div>
                
    </div>
    
</body>
</html>

А вот здесь style.css:

.turism_main {
    background: gray;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    color: #fff;
    position: relative;
}
.company-name {
    font-size: 2em !important;
    letter-spacing: 2px;
    opacity: .7;
    position: absolute;
    right: 45%;
    left: 45%;
    text-align: center !important;
    display: block;
    line-height: 1;
    margin-top: 15px;
    width: 200px;
}

.aside_main {
   text-align: right;
    padding: 0;
}

.aside-content {
    z-index: 999;
    position: absolute;
    right: -195px;
    top: 400px;
    transform: rotate(-90deg);
    font-size: .8em;
    background: black;
}

.aside-content div, .aside-content a{
    display: inline-block;
    color: white;
}
.aside-content i {
    padding-right: 10px;
    color: #e9ba02;
    font-weight: bold;
}
.aside-contact, .aside-mail {
    padding: 5px 10px 5px 10px;
    border: 1px solid white;
    margin-right: 20px;
}
.aside-calendar, .aside-lang {
    margin-left: 20px;
}

Не спрашивайте меня, почему я сделал кривую строку .row и засунул в нее эту ссылку справа. Изначально можно было сделать ее position: absolute, я так и сделал, но потом стал мучаться с сабжем и переделал, в надежде, что поможет.

Если вам потребуется вообще переделать напрочь весь .aside-*, то пожалуйста, лишь бы было понятно, почему вы это делаете. Потому что мне нужно понять.

И еще есть один вопрос:

Почему, когда я вписываю что-то в .aside-content , то он начинает ехать влево? Ведь у него не увеличивается ни длина, ни ширина. А если я увеличиваю width, например, то он тоже уезжает далеко...

Еще раз повторю задачу:

Нужно сделать так, чтобы весь блок .aside-content был прилеплен к правому краю и каким-то образом был адаптирован, если я уменьшаю экран по вертикали. В данный момент этот блок просто под .container-fluid ...

Как быть?

Сначала решил не прикреплять картинку, потом, все же, решил. Чтобы было нагляднее...

August 31, 2014

Лендинги сейчас набирают популярность. Также набирает популярность и грамотная верстка. И в связи с этим у меня вопрос - как совместить эти две вещи?

Типовая верстка подразумевает примерно вот такой код:

<!DOCTYPE html><html lang="ru"><head>	<meta charset="UTF-8">	<title>Document</title>	<link rel="stylesheet" type="text/css" href="style.css"></head><body><header>	...</header><main role="content">	...</main><footer>	...</footer></body></html>

Однако, у лендингов нет ни "хедеров", ни "футеров", ни мейн-контента. То есть я бы верстал так:

<!DOCTYPE html><html lang="ru"><head>	<meta charset="UTF-8">	<title>Document</title>	<link rel="stylesheet" type="text/css" href="style.css"></head><body><section>	...</section><section>	...</section> ................................<section>	...</section></body></html>

Вопрос стоит, как в правильности верстки, так и в семантике. Стоит ли задумываться о правильной семантике в лендинге? Ведь это всего одна страница, которая, если и всплывет, то вскоре утонет. А раскручивать ее только контекстной рекламой можно.

Стоит ли придерживаться традиций и верстать первым вариантом или не париться и делать как во втором варианте? И стоит ли задумывать о семантике?

March 3, 2014

Почему? Можете пояснить?

Сравни свои .css стили и пример сэра, которому ты сказал спасибо. Явное различие. У него куда легче .css.

А еще пора бы уже применять HTML5, а у тебя все "div class".

March 3, 2014

<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Заголовок страницы!</title><style>body{margin: 0;padding: 0;font-family: 'Trebuchet MS', Helvetica, sans-serif;font-size: 13px;color: #333333;background-color: #ffc000 !important;}.header {width: 100%;min-width: 1024px;height: 204px;background:url('http://s6.hostingkartinok.com/uploads/images/2014/03/71aaef81bcdb2c100eb1a6ae77d14349.png') center top repeat-x !important;  }.content {width: 100%;min-width: 980px;height: 200px;color: #FFFFFF;text-shadow:0.1em 0.1em 0em #daa902;background: url('http://s3.hostingkartinok.com/uploads/images/2014/03/42853124b425f89b3602014cf4e5a760.png') repeat-x !important;}.site-content {width: 980px;color: #FFFFFF;text-shadow:0.1em 0.1em 0em #daa902;padding-top: 18px;margin: 0 auto;}footer {background: #ffce1f;height: 100px;}</style></head><body><div class ="header"></div><div class ="site-content">Наш сервис – это комплекс инструментов и механизмов, которые дают возможность провести полный анализ сайтов, увидеть общую картину веб-ресурса изнутри, в том числе определить тиц сайта. Перед началом продвижения обязательно нужно сделать анализ сайта, таким образом определить основные возможности ресурса. Самым популярным показателем, который хотят узнать вебмастера, является Тематический Индекс Цитирования (ТИЦ). Сервис pr-cy.ru будет лучшим помощником, и seo инструменты – это только первоначальные шаги к созданию первоклассного сайта. Кроме анализа сайта мы представляем уникальный инструмент, который может сделать полную оценку сайта. Кстати, оценка сайта осуществляется по многим критериям и дает возможность точно определить стоимость сайта после полного анализа всех факторов, которые и влияют на стоимость ресурса.Наш сервис – это комплекс инструментов и механизмов, которые дают возможность провести полный анализ сайтов, увидеть общую картину веб-ресурса изнутри, в том числе определить тиц сайта. Перед началом продвижения обязательно нужно сделать анализ сайта, таким образом определить основные возможности ресурса. Самым популярным показателем, который хотят узнать вебмастера, является Тематический Индекс Цитирования (ТИЦ). Сервис pr-cy.ru будет лучшим помощником, и seo инструменты – это только первоначальные шаги к созданию первоклассного сайта. Кроме анализа сайта мы представляем уникальный инструмент, который может сделать полную оценку сайта. Кстати, оценка сайта осуществляется по многим критериям и дает возможность точно определить стоимость сайта после полного анализа всех факторов, которые и влияют на стоимость ресурса.Наш сервис – это комплекс инструментов и механизмов, которые дают возможность провести полный анализ сайтов, увидеть общую картину веб-ресурса изнутри, в том числе определить тиц сайта. Перед началом продвижения обязательно нужно сделать анализ сайта, таким образом определить основные возможности ресурса. Самым популярным показателем, который хотят узнать вебмастера, является Тематический Индекс Цитирования (ТИЦ). Сервис pr-cy.ru будет лучшим помощником, и seo инструменты – это только первоначальные шаги к созданию первоклассного сайта. Кроме анализа сайта мы представляем уникальный инструмент, который может сделать полную оценку сайта. Кстати, оценка сайта осуществляется по многим критериям и дает возможность точно определить стоимость сайта после полного анализа всех факторов, которые и влияют на стоимость ресурса.Наш сервис – это комплекс инструментов и механизмов, которые дают возможность провести полный анализ сайтов, увидеть общую картину веб-ресурса изнутри, в том числе определить тиц сайта. Перед началом продвижения обязательно нужно сделать анализ сайта, таким образом определить основные возможности ресурса. Самым популярным показателем, который хотят узнать вебмастера, является Тематический Индекс Цитирования (ТИЦ). Сервис pr-cy.ru будет лучшим помощником, и seo инструменты – это только первоначальные шаги к созданию первоклассного сайта. Кроме анализа сайта мы представляем уникальный инструмент, который может сделать полную оценку сайта. Кстати, оценка сайта осуществляется по многим критериям и дает возможность точно определить стоимость сайта после полного анализа всех факторов, которые и влияют на стоимость ресурса.Наш сервис – это комплекс инструментов и механизмов, которые дают возможность провести полный анализ сайтов, увидеть общую картину веб-ресурса изнутри, в том числе определить тиц сайта. Перед началом продвижения обязательно нужно сделать анализ сайта, таким образом определить основные возможности ресурса. Самым популярным показателем, который хотят узнать вебмастера, является Тематический Индекс Цитирования (ТИЦ). Сервис pr-cy.ru будет лучшим помощником, и seo инструменты – это только первоначальные шаги к созданию первоклассного сайта. Кроме анализа сайта мы представляем уникальный инструмент, который может сделать полную оценку сайта. Кстати, оценка сайта осуществляется по многим критериям и дает возможность точно определить стоимость сайта после полного анализа всех факторов, которые и влияют на стоимость ресурса.</div><div class ="content"></div><footer></footer></body></html>

Но:

Тебе не в этот раздел надо было
Так верстать нельзя

March 3, 2014

Правильнее первый вариант, т.к. <article> - это независимая часть документа, которая может быть вырвана из контекста страницы целиком и при этом не потерять смысл.

Большое спасибо.

Эта информация из спецификации html5 или откуда-то еще?

March 3, 2014

Решил внести свой вклад.

Получается, что за 7 секунд объект должен пройти 30px. Почему он проходит равные расстояния за слишком короткое время (что вызывает иллюзию торможения/дергания) я не знаю, т.к. не углублялся в прорисовку. Но есть смысл уменьшить время до 3 секунд.

Однако если уменьшать время нельзя и оно должно быть ровно 7 секунд. Тогда проблему возможно решить только увеличением расстояния, которое должен пройти объект. Путем нехитрых вычислений мои экстремумы равны 35px. (При 10px идеальная анимация производится в 2 секунды, но можно поставить и 3)

@-webkit-keyframes circle-move {  0% {    -webkit-transform: translateY(0);    transform: translateY(0);  }  25% {    -webkit-transform: translateY(-35px);    transform: translateY(-35px);  }  75% {    -webkit-transform: translateY(35px);    transform: translateY(35px);  }  100% {    -webkit-transform: translateY(0);    transform: translateY(0);  }}

Но тогда не подходит картинка (слишком мала). Но это можно решить, увеличив картинку или изменив ее. Скажем, увеличить невидимую часть картинки, а видимую оставить прежней. Тогда проблема решится очень просто.

Как здесь недостатки?

Придется увеличивать или вообще изменять картинку с оригинальной, это не всегда хорошо.

Какие достоинства?

Не нужно писать лишние .js, jquery скрипты. Не нужно не то, чтобы использовать, а даже употреблять такие слова как webgl, 3d-ускорение и прочее.

Я бы решил эту проблему именно увеличением в размерах основной картинки и небольшим изменением видимой ее части.

March 3, 2014

Доброго времени суток!

У меня следующая проблема - не понимаю как семантически правильнее верстать следующую структуру:

<section> <h1>Title</h1> <article>  <h1>Article-title №1</h1>  <p>Article-content №1</p> </article> <article>  <h1>Article-title №2</h1>  <p>Article-content №2</p> </article></section>

или

<section> <h1>Title</h1> <article>  <h2>Article-title №1</h2>  <p>Article-content №1</p> </article> <article>  <h2>Article-title №2</h2>  <p>Article-content №2</p> </article></section>

Для ленивых поясню. В первом случае заголовок в article задается через h1, во втором через h2.

Как правильнее при наличии h1 после section?

December 8, 2013

лучше уж дополнительный span, накрывающий текст картинкой, когда она есть.

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

December 7, 2013

Почему это первый неправильный? Ведь внутри него все тот же контент, как и во втором случае - ничего не изменилось.

Я напомню, это был первый вариант

<section id="block">
<div class="conteiner">
<h1>Тра-ля-ля</h1>
</div>
</section>

Правильным считается дать заголовок тегу section и лишь потом группировать.

December 7, 2013

js для таких целей - рак

December 7, 2013

Там неясно какой правильный - все зависит от контекста. Могут быть оба неправильны и оба правильны.

Я бы сказал иначе...

Там ясно, что первый вариант неправильный.

А второй вариант зависит от ситуации.

Тег section группирует осмысленный контент.

Для неосмысленного можно использовать figure. Может быть, даже не нужен будет figcaption.

Но именно для группировки.

December 7, 2013

Может здесь можно просто обойтись атрибутом tittle? Зачем тут текст, если этот атрибут даст понять, что за ссылка и куда ведет.

Тогда будет ли это валидно для W3C и, опять же, SEO ?

В спецификации приведены примеры только для заполненного тега a

December 7, 2013

При отключении картинок, text-indent тоже проблему не особо решает.

А content: url (); не позволяет использовать спрайты.

Остается использовать старинный способ, но про влияние на СЕО хотелось бы услышать.

December 7, 2013

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

Это из спецификации.

Section тематически группирует и для него обязателен заголовок.

Исходя из спецификации, ты верстаешь неправильно.

December 7, 2013

Речь идёт лишь о тексте, соответствующем содержанию. Про черную оптимизацию знаю. Интересуют как раз легальные способы скрытия текста.

December 7, 2013

text-indent: -9999px; overflow:hidden;

Вопрос как раз в этом. Как сильно это влияет на СЕО и отношение ко мне поисковиков?

December 7, 2013

Вписывать, но скрывать? Или вписывать и оставлять?

December 7, 2013

Дело в том, что фактически я скрываю текст.

У меня есть логотип (кружок) и я делаю его ссылкой на главную страницу. Ссылку описываю как "logo". Пользователю не нужно знать, что описывает ссылка в логотипе.

Другое дело социальные кнопки...

Одно дело вставить картинку с твиттера и написать "подписывайтесь на наш твиттер". Другое дело скрыть текст и оставить логотип твиттера.

Здесь пользователь видит логотип твиттера, но не видит надписи. Является ли это обманом? С точки зрения робота

Еще мне понравилось простое решение с content: url()

Но отключение картинок всё испортит.

Хотя сейчас в голову приходит решение заключить каждую ссылку в div, но это плохое решение.

P.S. Вот до чего доводят спрайты

December 7, 2013

Нашел следующее решение:

<a href="#" title="title">link</a>

a {content: url('gplus.png');}

Исходный код, соответственно:

<!doctype html><html lang="en"><head><link rel="stylesheet" href="style.css">	<meta charset="UTF-8">	<title><Document></Document></title></head><body>	<a href="#" title="title">link</a></body></html>

Вопрос: будет ли это считаться скрытой информацией от пользователя, но явной информацией для робота?

P.S. При отключении картинок - пустая страница.

Sign In

Libiros

Posts

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Store

Posts posted by Libiros

Bootstrap и форма для мобильных и планшетов

Свойство transform: rotate() для адаптивной верстки

Свойство transform: rotate() для адаптивной верстки

Свойство transform: rotate() для адаптивной верстки

Свойство transform: rotate() для адаптивной верстки

позиционирование элементов

Свойство transform: rotate() для адаптивной верстки

Лендинг и типовая верстка

Проблемы вёрстки.

Проблемы вёрстки.

Семантика заголовков section -> article

Недостаточно плавная анимация

Семантика заголовков section -> article

text-indent, о размусоленном

Ещё раз о section

Хоть убей...

Ещё раз о section

text-indent, о размусоленном

text-indent, о размусоленном

Ещё раз о section

text-indent, о размусоленном

text-indent, о размусоленном

text-indent, о размусоленном

text-indent, о размусоленном

text-indent, о размусоленном

Forums

Important Information