| |
 1.6 Кб |
|
| | CSS: не получается код стрипа (перетяжки)
Задача: поставить на масштабируемую страницу стрип (перетяжку), в котором (по необходимости) будут меняться адрес ссылки, фон, текст и положение текста, но всегда в правом верхнем углу останется якорёк, ведущий на отдельную страницу.
Блок 1: стрип заданой высоты и максимальной ширины, с фоном, на который задана ссылка.
Блок 2: текст с атрибутами цвета/размера и местоположения.
Блок 3: текст с фоном в правом верхнем углу, на который задана другая ссылка.
Проблема: второй блок задаёт отступ от первого, и то, что должно быть после стрипа - оказывается сильно ниже.
Сломал голову уже, но не получается никак... Видимо, глаз окончательно замылился.
(Код в аттаче, так как форум считает, что в коде URL-адрес)
"control line" - это контрольная линия, которая должна оказаться сразу под стрипом.
Спасибо! | |
| |
|
|
| |
|
|
| |
для: DraKot
(16.01.2013 в 13:57)
| | | Подсказываю: позиционирование типа relative смещает элемент относительно места, где он должен был располагаться, при этом оставляя место в потоке занятым.
Предлагаю такое решение:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.stripback {
background-color: #ff0000;
min-height: 125px;
border:none;
display:block;
padding-top:10px;
}
.striptext {
text-decoration: none;
font-family: Times New Roman, Times, serif;
font-style: italic;
font-size: xx-large;
color: #FFFFFF;
text-align: center;
display: block;
}
.stripcorner {
border-radius: 0 0 0 6px;
background: #66CCFF;
font-size: 14px;
padding: 5px 10px;
text-decoration: none;
font-family: sans-serif;
color: #000099;
text-align: right;
}
</style>
</head>
<body>
<div class="stripback">
<div class="stripcorner">
<a href="#2">???</a>
</div>
<div class="striptext">
<a href="#1" title="test">test</a>
</div>
</div>
<div style="color: #CCFFFF; background: #3300FF; text-align: center;" >control line</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(16.01.2013 в 14:52)
| | | Предлагаю такое решение:>Подсказываю: позиционирование типа relative смещает элемент относительно места, где он должен был располагаться, при этом оставляя место в потоке занятым.
>Предлагаю такое решение:
Спасибо, это работает!
Пошёл ковыряться дальше. :) | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(16.01.2013 в 14:52)
| | | Увы, не работает.
По блоку 1 в задаче весь фон стрипа, за исключением блока 3, должен быть полем ссылки. | |
| |
|
|
| |
|
|
| |
для: DraKot
(16.01.2013 в 15:39)
| | | Тогда надо сделать этот блок не div-ом, а ссылкой с параметром display:block (и не вздумайте снова <div> засунуть внутрь <a>, за такое расстреливают в нескольких индийских штатах).
Это будет шаг 1. В качестве шага 2 предлагаю самостоятельно догадаться, как сделать синюю полосу некликабельной. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(16.01.2013 в 15:56)
| | | Спасибо, хотя, боюсь, Вы традиционно спутали "синее" с "голубым". | |
| |
|
|
| |
|
|
| |
для: DraKot
(16.01.2013 в 16:24)
| | | Ну да. Спутал. На сегодня это моя первая ошибка, кстати. | |
| |
|
|
| |
|
|
| |
для: DraKot
(16.01.2013 в 13:57)
| | | 1) объясните по-русски - что именно вам надо
я вот слово "стрип" как "перетяжку" не понимаю, и Гугль не помог - всё про сриптиз и про стрип-данс со стрип-клубами ссылки выдаёт
2) а ещё лучше - нарисуйте то, что вы хотите получить - в тех же цветах, что у вас сейчас код выдает и на рисунке отметьте стрелочками необходимое - типа "здесь не должно быть зазора", "здесь смещение влево"
3) покуда могу сказать только одно - синтаксис CSS вы (и DJ Paltus) знаете плохо: я про отсутствие кавычек в правиле для font-family | |
| |
|
|
| |
|
|
| |
для: ЯСА
(16.01.2013 в 14:53)
| | | >1) объясните по-русски - что именно вам надо
>я вот слово "стрип" как "перетяжку" не понимаю, и Гугль не помог - всё про сриптиз и про стрип-данс со стрип-клубами ссылки выдаёт
Перетяжка - это баннер, который горизонтально идёт по большей части какой-то области (обычно - все рабочей части окна браузера). Пример Вы можете увидеть на сайте http://www.rbc.ru/ (вверху).
Стрип (иск. англ. stripe - полоса) - общемировой профессиональный сленг, обозначающий баннер-перетяжку.
>2) а ещё лучше - нарисуйте то, что вы хотите получить - в тех же цветах, что у вас сейчас код выдает и на рисунке отметьте стрелочками необходимое - типа "здесь не должно быть зазора", "здесь смещение влево"
В моём примере дан код. Если Вы умеете использовать HTML, то для Вас не должно составить труда вставить его за 10 секунд (хотя бы в блокноте/notepad) в файл, в котором Вы увидите всё необходимое для понимания.
>3) покуда могу сказать только одно - синтаксис CSS вы (и DJ Paltus) знаете плохо: я про отсутствие кавычек в правиле для font-family
Парные кавычки в атрибутах style блока head не ставятся. Подробнее смотрите здесь: http://www.w3.org/TR/html4/present/styles.html#edef-STYLE | |
| |
|
|
| |
|
|
| |
для: DraKot
(16.01.2013 в 15:12)
| | | >Парные кавычки в атрибутах style блока head не ставятся. Подробнее смотрите здесь: http://www.w3.org/TR/html4/present/styles.html#edef-STYLE
ЩИТО???!!!
Повторяю. Кавычки следовало поставить. Но только в одном месте - там, где название шрифта состоит из нескольких слов, т. е. содержит пробелы.
The quote marks are only needed when the attribute values include whitespace. - по приведенной ссылке. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(16.01.2013 в 15:16)
| | | :)
Аргумент "Times New Roman" этот аргумент попал из строчной записи стиля... хотите попробовать вставить парные кавычки там? ;)
Что касается блока head, то в записи style валидаторы ведут себя весьма по разному, из-за разночтения именно в записи style.
Проверьте, например, в валидаторах W3C:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Уверен, что Вы будете приятно удивлены обоими результатами. :)
P.S. Удивлён, что нет "ошибки" в "border-radius"... ;) | |
| |
|
|
| |
|
|
| |
для: DraKot
(16.01.2013 в 15:34)
| | | Родной, не стоит путать теплое с мягким. Мы видим какой стиль? Выделенный. Про то, что это когда-то был инлайн, я догадаться должен был?
И валидаторы мне показывать тоже не надо. Суньте в валидатор CSS мой код и обратите внимание на предупреждения, которые выдаются системой. Уверен, они покажутся смутно знакомыми, вероятно, оттого, что я это уже писал здесь.
Первый валидатор проверяет разметку, в которой, кстати, есть ошибка. Второй - проверяет таблицу стилей. Причем он сразу опознает ее как третью версию, и поэтому не против видеть там свойство border-radius.
Дальше, не по существу. Вам бы делом заняться, чем спорить с теми, кто Вам помочь решил. Чай, проект-то стоит, а Вы доводы к заведомо проигранному спору ищете? | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(16.01.2013 в 15:53)
| | | Ещё раз "спасибо", мальчик.
Боюсь, что Вы с трудом понимаете перевод Вашей цитаты "the attribute values include whitespace", применительно к параметрам "border-radius" и "padding", данным в задаче.
Очень жаль, что подчёркнуто уважительное обращение к Вам спровоцировало Вас на обращения типа "родной" и последующее подчёркнутое пренебрежение. Что ж... Вам виднее, каким Вас должны видеть, мальчик - и потому желаю Вам удачи на этом выбранном пути! | |
| |
|
|
| |
|
|
| |
для: DraKot
(16.01.2013 в 16:30)
| | | Сударь-то грубиян, как я погляжу, и к тому же склонен кусать руку дающую.
По теме, и лишь ради справедливости, следует отметить, что слова про пробелы в атрибутах вообще не относятся к таблицам стилей (это я нечаянно не оттуда цитату подтянул), а лишь к атрибутам в тегах (согласно контексту).
А еще все желающие могут прочесть про кавычки и типы переменных в CSS.
Засим откланяюсь, покуда в юном своем задоре гадостей респонденту не наговорил. | |
| |
|
|
| |
|
|
| |
для: DraKot
(16.01.2013 в 15:12)
| | | >>Стрип (иск. англ. stripe - полоса) - общемировой профессиональный сленг, обозначающий баннер-перетяжку.
гм... сленг в какой области?
баннер - это понятие относится к интернету или к рекламе
смотрим http://www.internetslang.com/list.asp?i=S - нет там такого
смотрим словарь по рекламе - там есть, но в значении "полоса; лента; страничка юмора (в издании); монтажный кадр, план, кусок; взлетно-посадочная полоса; разрушение; длинной, узкой, вытянутой формы"
имхо, понятие "общемировой" вы совершенно зря распространяете на "лично себя и ещё одного парня, который думает и говорит также как вы" :) | |
| |
|
|
| |
|
|
| |
для: ЯСА
(16.01.2013 в 15:53)
| | | >>>Стрип (иск. англ. stripe - полоса) - общемировой профессиональный сленг, обозначающий баннер-перетяжку.
>
>гм... сленг в какой области?
>баннер - это понятие относится к интернету или к рекламе
Мда, и верно: зачем ходить по данной ссылке на РБК, если можно что-то сказать?... Чукча ведь не читатель! :D
>имхо, понятие "общемировой" вы совершенно зря распространяете на "лично себя и ещё одного парня, который думает и говорит также как вы" :)
Гугл в помощь всезнайке! :) Адрес дать? | |
| |
|
|
| |
|
|
| |
для: ЯСА
(16.01.2013 в 14:53)
| | | Это недочет, а не ошибка. И не мой, а авторский. ВСЁ за него исправлять я не брался. Специально проверил по валидатору - код CSS корректный с одним предупреждением про кавычки.
"Имена, содержащие пробелы, должны заключаться в кавычки. Если кавычки пропущены, любые пробелы до или после имени игнорируются, а последовательности пробелов внутри имени преобразуются в единичный пробел." | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(16.01.2013 в 15:12)
| | | >"Это недочет, а не ошибка."
а я разве классифицировал? :) | |
| |
|
|
| |
|
|
| |
для: ЯСА
(16.01.2013 в 15:56)
| | | Да тут выяснилось, что это даже не недочет, а следствие проникновения инлайнового стиля. Могли бы и догадаться, ай-яй-яй. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(16.01.2013 в 15:57)
| | | а что, в in-line кавычки можно не ставить?
не знал...
:) | |
| |
|
|
| |
|
|
| |
для: ЯСА
(16.01.2013 в 15:58)
| | | Ну видите ли, автор считает двойные кавычки чем-то неделимым, своеобразным и, не побоюсь этого слова, сермяжным. | |
| |
|
|
