Это наш третий транш Ask SM, показывая на вопросы читателей о веб-дизайне, ориентируясь на HTML, CSS и JavaScript.В этом посте we’ буду рассмотрим, как можно заботиться о плавный скроллинг страниц и Internet Explorer 6 ошибок.You’ будем также узнать, как совокупный RSS-каналы, как создать динамическую ширину список изображений и как создать DIV-контейнеры равных height.
Если у вас есть вопросы по HTML, CSS или JavaScript, не стесняйтесь связаться со мной (Chris Coyier), используя один из следующих методов:
- Задать свой вопрос по электронной почте: задать [в] SmashingMagazine [точка] com.
- Задайте свой вопрос в нашем forum
- Или, если у вас есть быстрый вопрос, просто твит нас @ smashingmag или @ chriscoyier
Пожалуйста, обратите внимание: я отвечу на столько вопросов, сколько я могу, но я, конечно, не сможет ответить на все.Я надеюсь, что вы будете использовать форумы, чтобы задать вопросы, потому что это даст вам возможность получить помощь от сообщества well.
Гладкий Page Scrolling
@ Mango_Juice пишет:
Что такое лучший способ JavaScript для гладкой скроллер страницы
Эй Mango_Juice, JQuery имеет возможность делать анимированные прокрутки, используя свою функцию анимации и “ scrollTop” параметров.Карл Сведберг охватывает эту technique на своем сайте большое обучения jQuery.
Лучший способ справиться с ней, чтобы установить прокрутки цели с хэш-тег ссылки (например, # о) на вашей странице.Вы устанавливаете “ href” значение в якорем ссылки на “ # target”, и тогда ссылка будет перейти на страницу элемента на этой странице “ target” как его ID.Это означает, что она будет работать независимо от того, включен JavaScript или not.
Для большинства пользователей, которые do иметь JavaScript включен, we’ будем перехватывать клики по этим ссылкам и прокрутите вниз до них (или вверх), по мере необходимости.Вот код, который делает это возможным:
$(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' this.hash.slice(1) ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
Посмотреть Demo | Скачать Files
Динамический список Ширина Images
Giedrius пишет:
Возможно ли, чтобы создать список с CSS, который имеет текст выравнивается по правой стороне, а на левой стороне имеется изображение взяв ширину оставшееся пространство
Эй Giedrius, когда я впервые прочитал ваш вопрос, я думал, немедленно недавний пост на Web Designer Wall, CSS: Список меню Design.Nick La использует некоторые умные методы позиционирования построить гибкую текстовый списокимитирует стандартный дизайн меню.Вы знаете, вид, который имеет мало пунктирной линии, которая соединяет текст слева, чтобы цена на right.
Но то, как мы говорили, было ясно, вам нужно что-то другое.Поскольку изображение должно иметь градиент, который isn’ T горизонтально повторяется, мы в буквальном смысле нужно использовать встроенные изображения и установить его ширина по мере необходимости.CSS только isn’ T способна выполнять расчеты и осуществление DOM элементы, как, что, таким образом, let’ S привлекать JQuery для job.
Во-первых, совершенно нормально неупорядоченный список в HTML:
<ul> <li>Lorem ipsum dolor sit</li> <li>Aliquam</li> <li>Vestibulum auctor dapibus neque</li> </ul>
Единственное, что следует отметить, что длина текста в каждом элементе списка значительно различается.Так let’ S думаю, через то, что нам нужно сделать:
- Измерьте полную ширину списка item.
- Измерьте ширину текста inside.
- Добавляет изображения в каждом списке item.
- Сделать ширины изображения к (полная ширина) –. (Ширина текста)
Вот как я сделал это с JQuery:
$(function(){
$("li")
.wrapInner("<span></span>")
.prepend("<img src='images/listimage.png' />");
var listWidth = $("li").width();
$("li span").each(function(){
var itemWidth = $(this).width();
var imageWidth = listWidth - itemWidth;
$(this).parent().find("img").width(imageWidth - 10).height(1);
});
});
Посмотреть Demo | Скачать Files
DIVs равных Height
Адриан Engelbrecht пишет:
Как это возможно, чтобы иметь два дивы, один с навигацией и один с содержанием, которое всегда имеют одинаковую высоту.Разве это возможно
Эй, Адриан, на самом деле там много различных способов сделать это, но все согласны с тем, что никто из них не так просто, как они должны быть с CSS.
1) Fake It с искусственной Columns.
Если вам просто нужно две дивы на look, что они имеют одинаковую высоту, но не обязательно be той же высоте, это самый простой способ.Вы можете прочитать об Dan Cederholm’ S искусственного колонны method здесь и видеть Простой пример here.
2) использование таблиц CSS или Tables.
Очевидно, вы знаете, что с помощью таблиц для разметки плохо харизмы, но если он получает вас из жесткой месте раз в то время, мир не прощу.Таким образом, вместо того, чтобы использовать дивы, вы могли бы бюст из ячеек таблицы, чтобы сделать это, потому что в той же строке, они всегда на одной высоте.CSS таблицы горячей новой техники (лично я до сих пор есть серьезные сомнения), но они могут помочь также.Отъезд этом tutorial на NETTUTS.
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров