Это наш шестой партии Ask SM, показывая на вопросы читателей о веб-дизайне упором на HTML, CSS и JavaScript.
Эти записи не на все вопросы, но довольно быстро Twitter в ответ на запрос, “ Какова была ваша самая трудная CSS задача ”? Среди прочего, этот пост охватывает липкий нижний колонтитулы вопросы, позиционирования элементов в нижней части дел, наимеющие макета, согласование этикетки и входы, топ авто и нижнее заполнение, г-индекс и многое другое.Если у вас есть вопросы, связанные с этой проблемой, не стесняйтесь связаться со мной (Chris Coyier) одним из следующих способов:
- Отправить письмо задать [в] SmashingMagazine [точка] com с question.
- Задайте свой вопрос в нашем forum.
- Или, если у вас есть быстрый вопрос, просто твит нас @ smashingmag или @ chriscoyier.
Пожалуйста, обратите внимание: я буду делать то, что я могу ответить на вопросы, но я, конечно, не сможет ответить на все из них.Тем не менее, я надеюсь, что вы используете форумы, чтобы задать вопросы, потому что это дает вам лучшие возможности получить помощь от community.
Div Перед Div B
@ leewillis77 пишет:
Настоящее время у меня дел до B дел в HTML, и DIV B имеет поплавок.Я хочу, чтобы воспроизвести эту, но с DIV до B дел в HTML.
Пока оба B дел и дел имеют фиксированную ширину, которая при сложении меньше или равна ширине своих родителей, то он doesn’! Имеет значения, какой из них стоит на первом месте в HTML
Не менее важно отметить, что если дел и дел B сделать not имеют фиксированный с, то они should, так как плавающие элементы без ширины является рецептом для trouble.
Sticky Footer
@ ilove2design пишет:
Я должен признаться, “ липкие footer” CSS проблема была чертовски раздражает, пока я нашел несколько решений на Web.
Договорились!“ липкие footer” чистый CSS решения там являются чертовски умна и пригодится регулярно.Вот два:
Оба разделяют одну слабость, однако, в том, что они требуют подвал, чтобы быть фиксированной высотой пиксела, который иногда проблематично.Вообще, я просто больше, чем необходимо и дать тексте много местав grow.
Размещение элементов в нижней части Div
@ _Zapp пишет:
Как вы позиционируете материал в нижней части блок с (или без) позицию абсолютного и относительного, так что она будет выглядеть одинаково на всех browsers.
Когда вы даете элемента относительного позиционирования, что ограничивает сферу абсолютного позиционирования на всех его дочерних элементов.Это один из моих любимых техник в веб-дизайн CSS. Я иду по ней более подробно here, но let’ S взять быстрый look.
<div id="parent">
Lorem ipsum....
<p id="child">*Just a little footnote</p>
</div>
#parent {
position: relative;
padding-bottom: 20px;
}
#child {
position: absolute;
bottom: 0;
right: 0;
}
Только быстрое примечание, в нижней / правой комбо потребности hasLayout в IE 6 работать right.
Позиционирование Divs, несмотря Источник Order
Алексей Ross пишет:
Div верхней, средней, нижней.Топ опускается ниже content.
Я думаю, что вы получаете на здесь оказывает заголовок сайта приходят after Основной контент в HTML-разметке еще оказаться на вершине, где заголовок принадлежит.Часть мощности, что CSS дает нам то, что наши проекты don’ т должны быть источником зависит от порядка, как и таблица макетов на основе делают.Вот как бы я это сделать:
<div id="page-wrap">
<div id="main-content"></div>
<div id="header"></div>
</div>
#page-wrap { padding-top: 100px; position: relative; }
#header { position: absolute; top: 0; left: 0; width: 100%; }
Потенциально это может привести SEO преимуществ, особенно если груз содержания в заголовке толкают вниз более важно содержание страницы.См. пример этого, когда я говорю о вводе чрезмерного навигации ниже content.
Центрирование внутри Resizeable Area
@ olliepee пишет:
Я всегда проблемы психического центрирования автоматически изменять размер дел внутри 100% ширины div.
Divs по умолчанию 100% широк, поэтому если у вас есть DIV в DIV без установления определенной ширины, что внутри DIV будет такой же ширины, как его родитель.Если вы установите ширину внутри DIV, вы можете убедиться, it’ с центром с ol’ классические центрирования trick.
div {
margin: 0 auto;
}
На Имея Layout
@ devolute пишет:
Забыть применять зум: 1; на everything В IE условный стиль sheet.
Если кто-то hasn’ T слышал об этом, применяя зум: 1; для элементов является способом заставить элементы, чтобы получить собственные hasLayout недвижимость в IE браузерах.Это можно исправить ряд (по-настоящему), странные ошибки в IE.
Подробнее об этом here.
Выравнивание этикетки и Inputs
@ Ofaurax пишет:
Правильное расположение form’ S “ этикетки input”.I’ нас не нашли окончательного решения в чистом CSS.
Знаков и входы (все различные типы) имеют встроенные элементы по умолчанию.Делая такие вещи, как сделать их элементы уровня блока и плавающие них может быть очень полезной и поможет вам избежать “ unnecessary” разметку.Тем не менее, я думаю, что that’ с первым шагом на пути кросс-браузерный непоследовательность.Я довольно приличный удачи во много раз оставляя их в качестве встроенных элементов и использованием вертикального выравнивания: посередине; имущество, чтобы держать вещи в линию.Затем обернуть этикетки / вход пары в дивы, чтобы вызвать необходимые разрывы строк.Это особенно полезно с радио-кнопок и флажков.Также помните, что если только IE дает вам горе, вы можете использовать условные стили и относительное позиционирование, чтобы подтолкнуть отдельных элементов в place.
Текст с градиентом Background
@ pannpann пишет:
Создание фона градиент внутри динамической numbers/letters.
Как правило, текст в веб-дизайне может быть установлена в твердой цвет, и that’ все.Если you’ D как эффект градиента на реальный текст Web, несколько методов плавают вокруг.Один из них лежал прозрачный PNG в верхней части текста, который затемняет его часть. Web Designer стена имеет tutorial на это, но отмечают, что это приводит к потенциально серьезные проблемы юзабилити не в состоянии выделить text.
Если прогрессивного улучшения ваша игра, Джей Робинсон demo о том, как вы можете использовать WebKit’ Собственная -WebKit-фон-clip для достижения this.
