Главная → Программирование → by

[Задать SM] прозрачный фон, позиционирование проблемы

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

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

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

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

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

Styling Только текст Inputs

DonRonito пишет:

Так как я использую CMS для создания форм, я столкнулся с проблемой с моделированием форм, которые генерируются автоматически.Я могу использовать вход [тип = текст] , который только стили текста входов, но он не работает в IE.Мне интересно, если есть еще один хороший способ сделать this.

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

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

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

$("input[type=text]").css({
		// apply styling
});

Может быть, даже лучшим решением является использование Дин Edward’ с ie7-JS скрипт, который автоматически делает ваш CSS селектор атрибута просто работать, а также исправить множество других IE 6 ошибок: 

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Auto-Освежающий RSS Content

Niki Brown пишет:

Я последовал вашему SimplePie учебник ( Задать SM, 3-й ed.) и составил Бананы Tweets.Но теперь I’ интересно, как я хотел бы получить твиты для автоматического обновления, скажем, каждые 20 seconds.

tweets

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

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

<?php
    require_once('inc/simplepie.inc');

    $feed = new SimplePie();

    $feed->set_feed_url(array(
    	'http://search.twitter.com/search.atom?q=twitter'
    ));

    $feed->enable_cache(true);
    $feed->set_cache_location('cache');
    $feed->set_cache_duration(10);

    $feed->init();

    $feed->handle_content_type();

    if ($feed->error): ?>

        <p><?php echo $feed->error; ?></p>

    <?php endif; ?>

    <?php foreach ($feed->get_items() as $item): ?>

    	<div class="chunk">

    		<h4 style="background:url(<?php $feed = $item->get_feed(); echo $feed->get_favicon(); ?>) no-repeat; text-indent: 25px; margin: 0 0 10px;"><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h4>

    		<p class="footnote">Source: <a href="<?php $feed = $item->get_feed(); echo $feed->get_permalink(); ?>"><?php $feed = $item->get_feed(); echo $feed->get_title(); ?></a> | <?php echo $item->get_date('j M Y | g:i a T'); ?></p>

    	</div>

    <?php endforeach; 

?>

Это “ feeder” файл может быть загружен непосредственно, но оно будет полностью без стилей.Дело в том, чтобы использовать некоторые AJAX для загрузки содержимого с этой страницы и подключить его к нашей реальной странице.Тогда мы можем установить интервал наличие звонить этот файл каждые 20 секунд и заменить текущее содержание: 

<script type="text/javascript">

    function getFresh() {

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

    };

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

</script>

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

VIEW DEMO   СКАЧАТЬ FILES

Позиционирование Blues

Джеймс Bull пишет:

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

logo push

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

Но смотреть на проблему под рукой, процент позиционирования вы используете для тех, “ corner” изображение является проблемой.Ваше изображение “ image_left.png” установлен в правильное положение 50%.Это означает, что изображение будет идеально готов повесить с левой стороны окна браузера без предела и не вызывая прокрутки.“ image_right.png” контейнер установлен в левое положение, которое will. Причиной горизонтальной прокрутки (? Странно, да)

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

 html {
	min-width: 876px;
}

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

Прозрачная Div Background

Louie Livon-Bemel пишет:

Есть простой способ, чтобы дать div’ S фоне низкой прозрачностью, но содержание будет нормально.Единственный способ я знаю, это позиционировать второй дел за контент с г-индекс и дать фон дел нижних непрозрачности.И если возможно, I’ D хочу, чтобы это работать во всех browsers.

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.