[Ask SM] Прозрачный фон, проблема позиционирования

1. Об авторе Крис - веб-дизайнер и разработчик. Он пишет обо всех вещах в Интернете на CSS-Tricks...
2. Автообновление содержимого RSS
3. Позиционирование блюза
4. Прозрачный фон Div
5. Использовать CSS Framework?
6. Изображение Размер ячейки таблицы
7. Стилизация элемента HTML
8. Quickfire Вопросы
9. Похожие сообщения

Об авторе

Крис - веб-дизайнер и разработчик. Он пишет обо всех вещах в Интернете на CSS-Tricks рассказывает обо всем на веб-конференциях по всему миру и о его… Подробнее о Крисе ...

Это наш четвертый выпуск Ask SM, в котором представлены вопросы читателей о веб-дизайне с упором на HTML, CSS и JavaScript. В этом посте мы расскажем, как можно стилизовать только текстовые вводы, автоматически обновлять блок контента, как избежать некоторых проблем с позиционированием, а также создавать и использовать прозрачные фоновые изображения; мы также обсуждаем дальнейшие проблемы, связанные с CSS, и даем ответы на несколько вопросов по быстрому запуску.

Если у вас есть вопрос о CSS или JavaScript, не стесняйтесь связаться со мной (Крис Койер) одним из следующих способов:

1. Отправьте электронное письмо, чтобы задать [at] smashingmagazine [dot] com с вашим вопросом.
2. Оставьте свой вопрос на нашем форуме.
3. Или, если у вас есть быстрый вопрос, просто чирикать нам @smashingmag или же @chriscoyier с хэштегом #asksmcss .

Обратите внимание: я сделаю все возможное, чтобы ответить на вопросы, но я, конечно, не смогу ответить на все из них. Тем не менее, я надеюсь, что вы используете форумы для публикации вопросов, потому что это дает вам наилучшую возможность получить помощь от сообщества.

Вас могут заинтересовать следующие похожие посты:

Стилизация только текстовых входов

DonRonito пишет:

Поскольку я использую CMS для генерации форм, я столкнулся с проблемой стилизации форм, которые генерируются автоматически. Я могу использовать input [type = text], который только стилизует ввод текста, но он не работает в IE. Интересно, есть ли другой хороший способ сделать это?

Привет, Дон, как вы, похоже, знаете, этот селектор - это то, что в CSS называется селектором атрибутов . Вы можете использовать его для любого элемента, если вы собираетесь выбирать только элементы с определенными значениями входов. Например, [title = "home"] является допустимым селектором атрибутов, который будет нацеливаться на такие элементы, как этот <a title="home" ...>. В случае входных данных это особенно полезно, потому что существует так много разных типов: текст, отправка, радио, изображение и т. Д., Но все они являются <входными>. Вы можете хотеть применить ширину к текстовым вводам, но не к переключателям, например.

Как вы также узнали, IE 6 и ниже не любит селекторы атрибутов (он просто игнорирует их). Огромный облом. Одним из решений, которое было сразу отмечено на форумах, является применение идентификатора или класса к этим входам. Затем вы можете использовать идентификатор или класс для нацеливания на них в CSS и применять свой уникальный стиль таким образом, не опасаясь влияния на другие типы входных данных. Но вы говорите, что эти формы генерируются CMS, что, по-видимому, подразумевает, что у вас нет такого типа детального контроля.

Немного грубой ситуации у вас там. Но есть надежда, если вы не против немного JavaScript. Если вы используете jQuery, он поддерживает CSS-селекторы, которые точно делают выбор за вас, даже в IE 6:

<pre class = "js" name = "code"> <code> $ ("input [type = text]"). css ({// применить стилизацию

});

Возможно, еще лучшим решением является использование сценария Дина Эдварда ie7-js, который автоматически заставляет ваш селектор атрибутов CSS просто работать, а также исправляет множество других ошибок IE 6:

<pre> <code class = "language-markup tmp-xml"> & lt;! - [if lt IE 7] & gt;

<script src = “ http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js» type = «text / javascript»> </ script> <! [endif] ->

Автообновление содержимого RSS

Ники браун пишет:

Я следовал вашему уроку SimplePie ( Спросите СМ, 3-е изд. ) и сделал Банановые твиты , Но теперь мне интересно, как я могу заставить твиты автоматически обновляться, скажем, каждые 20 секунд.

Эй, Ники, отличный вопрос! Мы можем сделать это довольно легко с AJAX-возможностями jQuery. Мы можем начать с того места, где остановились в прошлый раз. В этом примере, когда страница загружена, SimplePie использует свое волшебство, выбирая данные канала RSS (или Atom) и отображая их.

Вместо этого мы вытащим весь этот SimplePie PHP и поместим его в отдельный файл (который мы назовем feeder.php ).

&lt;pre> <code class = "language-php"> & lt;? php require_once (& # 39; inc / simplepie.inc & # 39;); $ feed = new SimplePie (); $ feed- & gt; set_feed_url (массив (& # 39; http: //search.twitter.com/search.atom? q = twitter & # 39;)); $ Запитка & GT; enable_cache (истина); $ Запитка & GT; set_cache_location (& # 39; Кэш & # 39;); $ Запитка & GT; set_cache_duration (10); $ Запитка & GT; INIT (); $ Запитка & GT; handle_content_type (); if ($ feed- & gt; error):? &amp; gt; & lt; p & lt;? php echo $ feed- & gt; ошибка; ? &amp; GT; & Lt; / р &amp; GT; & lt;? php endif; ? &amp; GT; & lt;? php foreach ($ feed- & gt; get_items () как $ item):? &amp; gt; & lt; div class = "chunk" & gt; & lt; h4 style = & quot; background: url (& lt;? php $ feed = $ item- & gt; get_feed (); echo $ feed- & gt; get_favicon ();? & gt;) no-repeat; текстовый отступ: 25px; margin: 0 0 10px; & lt; a href = & lt;? php echo $ item- & gt; get_permalink (); ? & gt; & lt;? php echo $ item- & gt; get_title (); ? & GT; & Lt; / а & GT; & Lt; / h4 & GT; & lt; p class = & quot; сноска & gt; Источник: & lt; a href = & lt;? php $ feed = $ item- & gt; get_feed (); echo $ feed- & gt; get_permalink (); ? & gt; & lt;? php $ feed = $ item- & gt; get_feed (); echo $ feed- & gt; get_title (); ? & GT; & Lt; / а & GT; | & lt;? php echo $ item- & gt; get_date (& # 39; j MY | g: ia T & # 39;); ? & GT; & Lt; / р & GT; & Lt; / дел &amp; GT; & lt;? php endforeach;

?>

Этот «фидерный» файл может быть загружен напрямую, но он будет полностью не стилизован. Суть в том, чтобы использовать AJAX для загрузки контента с этой страницы и подключения к нашей реальной странице. Затем мы можем установить интервал JavaScript для вызова этого файла каждые 20 секунд и замены текущего содержимого:

<pre> <code class = "language-markup tmp-xml"> & lt; script type = & quot; text / javascript & quot; & gt; function getFresh () {$ (& quot; # loadArea & quot;). fadeOut (400, function () {

$ ("# loadArea"). load ("feeder.php", function () {$ ("# loadArea"). fadeIn ();}); });

}; $ (function () {getFresh (); var int = setInterval (& quot; getFresh () & quot ;, 10000);});

</ Скрипт>

Обратите внимание, что приведенный выше код зависит от jQuery.

ПОСМОТРЕТЬ ДЕМО СКАЧАТЬ ФАЙЛЫ

Позиционирование блюза

Джеймс Булл пишет:

На моем сайте мне было интересно, как избежать проблемы с масштабированием. Если вы перетащите браузер меньше ширины страницы, возникнут проблемы с моими изображениями в верхнем углу. Я пробовал разные значения минимальной ширины в разных контейнерах и не могу решить эту проблему. Знаете, как это сделать?

Эй, Джеймс, во-первых, твой фон выглядит как комбинация из четырех разных слоистых изображений. Один на элемент html, элемент body, image_left и image_right. Так как ваш сайт представляет собой веб-сайт с фиксированной шириной по центру, вы можете сделать это всего за два: один для фоновой текстуры, а другой для всех остальных наворотов.

Но, глядя на проблему, процентное позиционирование, которое вы используете для этих «угловых» изображений, является проблемой. Ваше изображение "image_left.png" установлено на 50%. Это означает, что это изображение будет отлично висеть на левой стороне окна браузера без ограничений и без прокрутки. Контейнер "image_right.png" установлен в левое положение, что приведет к горизонтальной прокрутке (странно, да?).

Быстрое решение в вашем случае - убедиться, что область просмотра не может сужаться ни в какое положение, чем ширина image_left.png (876 пикселей). Так что просто установите:

html {min-width: 876px; }

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

Прозрачный фон Div

Луи Ливон-Бемел пишет:

Есть ли простой способ придать фону div низкую непрозрачность, но содержимое должно быть нормальным. Единственный способ, которым я знаю, - это поместить второй div за содержимым с z-index и придать фону div меньшую непрозрачность. И если возможно, я бы хотел, чтобы это работало во всех браузерах.

Они так, как вы описываете работы, но идти на такие длины, вероятно, не нужно. Если фоном div является изображение, вы можете уменьшить его непрозрачность в Photoshop и сохранить его как альфа-прозрачный PNG (PNG-24 в Photoshop). Затем используйте этот PNG в качестве фонового изображения. Тебе понадобиться PNG взломать для IE 6. Если у вас есть сплошной цвет фона, вы можете использовать повторяющийся альфа-прозрачный PNG размером 1x1 пиксель этого цвета, или использовать Rgba ,

Использовать CSS Framework?

Эндрю Тернер пишет:

Мне было интересно, считаете ли вы, что лучше всего использовать доступные CSS-фреймворки для проектов (например, Blueprint CSS) или создать их самостоятельно с нуля? Есть ли недостатки или преимущества использования фреймворков?

Распространенными аргументами против фреймворков являются: 1) раздутость, то есть куча ненужных CSS для альтернативных сеток, которые вы никогда не сможете использовать, и 2) проблемы семантики. Ваша разметка будет использовать такие вещи, как <div id = grid_13_b .. />, что не очень полезно или семантически.

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

Несмотря на это, я верю, что если вы посвятите некоторое время изучению всех деталей конкретной структуры, это может сэкономить вам некоторое время, а также придать знакомый вид всем вашим проектам. Если Blueprint CSS достаточно хорош для Джеффа Крофта и Blueflavor, он может работать на вас.

Изображение Размер ячейки таблицы

Уильям Вулард пишет:

Я создал календарь с использованием PHP, который генерирует дни в ячейках таблицы. Я изменил его, чтобы добавить class = "currentdate" к текущей дате. Дневные ячейки с одной цифрой имеют один размер (1), а дневные ячейки с двумя цифрами - в два раза больше (24). Есть ли способ применить фоновое изображение к ячейке, которое регулируется в соответствии с размером ячейки? Например, фон является кругом, как если бы день был обведен (для дней, состоящих из одной цифры) и расширялся, чтобы выглядеть как овал в днях, которые являются двузначными?

Это действительно сложный сценарий. CSS фоновые изображения не могут быть изменены, так что это не так. Другой способ включить изображение на страницу - встроенный <img ... />. Они могут быть изменены, поэтому мы можем что-то сделать. Метод растяжения изображения до размера его родителя - использовать абсолютное позиционирование и установить верхнее, нижнее, левое и правое значения в ноль. К сожалению, родитель должен иметь относительное позиционирование, чтобы это работало, и ячейки таблицы не принимают относительное позиционирование.

Div, однако, принимают относительное расположение. Таким образом, div внутри будет растягивать его до ширины ячейки родительской таблицы, но не обязательно до высоты, и мы не можем форсировать ее из-за упомянутой выше проблемы отсутствия относительного позиционирования на ячейках таблицы.

Только с помощью CSS мы можем почти получить это:

<pre> <code class = "language-markup tmp-xml"> & lt; td class = "currentDay & quot; & gt;

<div> <img src = "images / circle.png" class = "circle" alt = "" /> 19 </ div> </ td>

<pre> <code class = "language-css"> td {padding: 5px; выравнивание по вертикали: среднее; выравнивание текста: по центру; }

td div {позиция: относительная; } .circle {position: absolute; верх: 0; слева: 0; справа: 0; низ: 0; }

Высота все еще остается проблемой, и я не вижу чисто CSS-решения. Что нам нужно сделать, это установить высоту и ширину этого изображения равными точной высоте и ширине ячейки таблицы, в которой оно находится. Мы можем использовать jQuery, чтобы сделать эту математику для нас:

<pre class = "js" name = "code"> $ (function () {var theImage = $ (". circle"); var theCell = theImage.parent (). parent (); var theWidth = parseInt (theCell. css ("width")) + parseInt (theCell.css ("padding-left")) + parseInt (theCell.css ("padding-right")); var theHeight = parseInt (theCell.css ("height")) + parseInt (theCell.css ("padding-top")) + parseInt (theCell.css ("padding-bottom")); $ (". circle") .width (theWidth) .height (theHeight) .css ({ "top": -parseInt (theCell.css ("padding-top")), "left": -parseInt (theCell.css ("padding-left"))});

});

Вроде бы много работы для такой, казалось бы, простой задачи, но, по крайней мере, она работает и адаптируется. Если кто-нибудь может найти чисто CSS-решение, я бы хотел его увидеть!

ПОСМОТРЕТЬ ДЕМО

Стилизация элемента HTML

Аарон Базинет пишет:

Можете ли вы стилизовать HTML-элемент напрямую, например, применив к нему фоновое изображение и цвет. Я помню, как кто-то упоминал об этом однажды, но безопасно ли это делать, или это плохо?

Эй, Аарон, просто чтобы прояснить для читателей, все веб-страницы имеют элемент <html>, который оборачивает всю страницу. Тег обычно идет сразу после спецификации DOCTYPE. Так что-то вроде этого выполнимо в CSS ?:

name = "code"> html {background-color: #ccc; }

Да, это должно быть хорошо. И на самом деле, это может исправить некоторые иначе странные проблемы , Я считаю, что вам нужно вернуться к IE 5, чтобы увидеть проблемы с ним, что больше не проблема. Sitepoint имеет немного больше информации на этом и напоминает нам избегать позиционирования этого элемента.

Quickfire Вопросы

Вы когда-нибудь использовали или слышали о Sweetcron? Нам нужен учебник по их тематике! Пожалуйста помоги!

Я слышал о Sweetcron , Я думаю, что это невероятно хорошо сделанная программа для потокового вещания. Он был создан токийским веб-разработчиком Yongfook, который использует Sweetcron на его личный сайт , Я сделал учебник по созданию собственного веб-сайта Life-Stream с этим на NETTUTS.

Должен ли я зарегистрироваться в программе веб-дизайна, которая больше ориентирована на «дизайн» (вычурность) или «разработку» (кодирование)? Какой из них принесет мне больше пользы в создании веб-дизайна на полную ставку?

Если вам посчастливилось смотреть в колледжи и программы, которые предоставляют вам такой выбор, я думаю, вы преуспеете в любом случае. Я получил степень в области мультимедиа / графического дизайна, и мы даже ни разу не смотрели на HTML (не шучу). Однако, поскольку вы в конце сказали, что хотите сделать «веб-дизайн» своей карьерой на полный рабочий день, путь «дизайна», похоже, имеет больше смысла, чем путь «разработки».

У всех моих изображений есть несколько пикселей дополнительного фонового пространства вдоль нижней длины.

В этом конкретном сценарии div оборачивает изображение, создавая эффект двойной границы. Изображение внутри является встроенным элементом, поэтому пробел, следующий за тегом <img ... /> и закрывающим тегом div, по-видимому, создает разрыв строки и вызывает разрыв. Быстрое решение состоит в том, чтобы сделать изображение элементом уровня блока, что устраняет пробел.

.image img {display: block; }

Это завершает очередной выпуск журнала Ask Smashing! Если у вас есть вопросы, обратитесь к началу этой статьи, чтобы узнать, как задать свои вопросы.

Похожие сообщения

Вас могут заинтересовать следующие похожие посты:

Похожие

Комментарии