6093-1 (Кулинарные рецепты CSS)

2016-07-31СтудИзба

Описание файла

Документ из архива "Кулинарные рецепты CSS", который расположен в категории "". Всё это находится в предмете "информатика" из , которые можно найти в файловом архиве . Не смотря на прямую связь этого архива с , его также можно найти и в других разделах. Архив можно найти в разделе "рефераты, доклады и презентации", в предмете "информатика, программирование" в общих файлах.

Онлайн просмотр документа "6093-1"

Текст из документа "6093-1"

Кулинарные рецепты CSS

Craig Saila

Как убрать лишнее пространство вокруг формы? html css

Есть два способа сделать это - с помощью хитрости и с помощью css. Хитрость: вставляем форму в таблицу, помещая её между открывающим и закрывающим тэгами:

...

Второй способ - с помощью css выставить отступы в ноль:

Почему элементы формы видны даже через перекрывающие их слои? css

Это особенность отображения имеет место в IE и Opera под Windows и, к сожалению, ничего поделать с этим нельзя.

Opera показывает все элементы формы, IE только select. Пример.

Это происходит потому, что эти броузеры при отображении форм используют стандартные элементы интерфейса Windows, в то время как Netscape 6.x/Mozilla каждый раз отрисовывают их заново.

Даже проблема возникает практически во всех новых броузерах при отображении плагинов и слоёв.

На сайте DHTML Lab есть более подробная статья на эту тему. Thomas Brattli предлагает решение проблемы на JavaScript в своем скрипте CoolMenus.

Как убрать полосу прокрутки? html

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

Отключить полосу прокрутки во фрейме элементарно, просто добавьте атрибут

scrolling="no"

Убрать её из основного окна несколько сложнее. Во-первых, можно открыть окно с помощью JavaScript без активирования прокрутки:

window.open(this.href,'newWindow','scrollbars=no');

Во-вторых, в некоторых броузерах (IE под Windows пятой версии и старше, а также броузерах на базе Gecko) можно использовать нижеследующую декларацию:

HTML, BODY { style="overflow: hidden; }

Как можно контролировать размер текстового поля? html css

Увы, Netscape 4.x отображает элементы формы по иному алгоритму, нежели прочие броузеры (Internet Explorer, Opera, и на базе Gecko).

Так как Netscape 4.x использует основной моноширинный шрифт для отображения текста в полях для ввода текстовой информации, а IE использует варьирующийся шрифт (обычно sans-serif) - лучше всего оптимизировать текстовое поле прежде всего для Netscape.

После этого можно использовать декларацию css (которую старые версии Netscape проигнорируют) для подгонки поля под прочие броузеры.

Примеры:

Обычное поле для ввода в Netscape 4.7:

Поле для ввода в IE 5.5, подогнанное под размер поля в Netscape (отступы добавлены для вертикального выравнивания текста)

Поле для ввода в IE 5.5, подогнанное под размер и внешний вид поля в Netscape (имитация достигается за счет рамки и шрифта)

Могу ли я использовать выпадающее меню для навигации? ia/u gd

Как и многое в веб-дизайне, целесообразность использования выпадающего меню зависит от аудитории. На обычных сайтах лучше от него отказаться. Впрочем, иногда бывает удобно собрать вместе несколько ссылок на ограниченном пространстве.

Минусы использования выпадающих меню:

длинный текст делает меню чрезмерно широким

трудности доступа к опциям в текстовых и речевых броузерах

невозможно увидеть сразу все доступные варианты

некоторые пользователи не догадываются о наличии скрытых опций

оперирование выпадающими меню может представлять трудности для некоторых пользователей ("Я не понял, что надо нажать 'перейти'")

различный внешний вид в различных броузерах

требует небольшого, но все же программирования (на стороне клиента или сервера)

Еще на эту тему имеет смысл почитать Macintosh Human Interface Guidelines.

Почему у картинок в таблицах появляется отступ внизу? html css

Особенно это заметно в броузерах на базе Gecko (например, в Netscape 6.x) и некоторых версиях Mozilla. Скорее всего это происходит потому, что броузер интерпретирует как строчный элемент. Проблема решается следующей декаларацией:

TD>IMG { display: block; }

(подробное объяснение вы можете найти в статье "Tables, Images, and Mysterious Gaps".)

После выхода Mozilla 1.0 в него был добавлен "почти стандартный" режим для исправления вышеописанной проблемы. Этот режим включается декларированием в DOCTYPE transistional HTML 4.01 (с системным идентификатором) или transistional XHTML 1.0 (на Mozilla.org есть полный список типов DOCTYPE).

В старых броузерах отступ может появляться из-за пробелов между и закрывающим . Удалите лишние пробелы и проблема скорее всего решится.

Как удалить рамку вокруг картинки-ссылки? html css

В HTML (и старых броузерах) необходимо добавить атрибут border="0" к тэгу img.

В CSS (и новых броузерах) достаточно добавить стилевую декларацию

A IMG { border: none; }

Еще вы можете сделать рамку невидимой в Netscape 4.x с помощью css, меняя её цвет на цвет фона во внешнем блоке:

A IMG { border: none; border-color: [цвет фона]; color: [цвет фона] }

Но отступ примерно в две точки вокруг картинки все равно останется.

Как установить отцентрировать таблицу с помощью CSS? css

Корректным способом установки блочных элементов (в том числе и таблиц) по центру является указание таких отступов:

margin-left: auto; margin-right: auto;

или еще проще:

margin: auto;

К сожалению, это не работает в IE версии старше 6 (да и в шестой работает странно). Чтобы справиться с этим, элементу body следует назначить атрибут text-align: center, но так как это отцентрирует весь текст на странице, то окончательный вариант будет такой:

body { text-align: center; }

#centerItem { text-align: left; margin: auto; }

Для подробного изучения данной проблемы рекомендуем статью "Centering Tables".

Как сделать резиновую верстку с ограничением по ширине? css

Проще всего было бы использовать атрибут max-width. К несчастью, он не поддерживается большинством версий IE.

Выход - в использовании атрибута width вместе с небольшим фрагментом кода на JavaScript, который будет определять ширину окна и при превышении пороговой величины зажимать её на определенном значении, иначе задавать её равной 100%.

function resizeBox(){

sObj = d.getElementById("container").style

if(d.body.clientWidth) (d.body.clientWidth>800) ? sObj.width = "800px" : sObj.width = "100%"

}

Пример.

Как задать стиль для hr? css

Internet Explorer и большая часть css-совместимых броузеров (например, на основе Gecko, Opera имеет одну странность, которую документировал Stefan M. Huber) работают с hr по-разному. Суть в том, что IE обрабатывает его как строчный элемент, а прочие - как блочный. Поэтому, для горизонтального разделителя красного цвета мы делаем:

Internet Explorer:

HR { color: #F00; }

Прочие CSS-совместимые броузеры: HR { background-color: #F00; }

Тоже самое верно и для выравнивания:

Internet Explorer:

HR { text-align: right; }

Прочие CSS-совместимые броузеры:

HR { margin-right: 0; }

Итак, достичь с помощью css того, что в html выглядит как


...вы можете следующим образом:

HR { text-align: right; width: 30%; height: 2px; color: #F00; border: none; } /* Для IE */

HTML>BODY HR { margin-right: 0; width: 30%; height: 2px; background-color: #F00; border: none; } /* Для броузеров на базе Gecko */

HTML>BODY HR { margin-right: 0; width: 30%; height: 2px; background-color: #F00; border: 0px solid #F00; } /* Для Оперы и броузеров на базе Gecko */

Для более подробной информации по этой теме читайте статью Marek Prokop "Styling


".

Как изменить отступ для элементов списка с помощью css? css

Единственного правильного пути не существует. Броузеры Gecko и Internet Explorer по-разному интерпретируют css в данном случае. Самый простой вариант для уменьшения отступа - очистить поля и отступы слева. Для увеличения же отступа можно сделать так:

ul { margin-left: 0; padding-left: 20px; }

или

ul { margin-left: 20px; padding-left: 0; }

(Те же правила применимы к ol и dl)

Eric A. Meyer написал подробное объяснение по этой проблеме.

Как можно добавить отступ между элементами списка? html css

Если элемент списка - текст, лучше всего оформить его как параграф:

  • a list item

  • В других случаях можно добавить два переноса строки в конце каждого элемента списка:

  • a list item

  • Для более аккуратного и эффективного решения проблемы следует использовать CSS, так как он не затрагивает структуру документа. Эта декларация даст тот же эффект, что и уже приведенные способы:

    li { margin-top: 1em; }

    Внимание: установка line-height для списка приведет не только к увеличению расстояния между элементами, но добавит междустрочное расстояние для содержания каждого элемента.

    Почему текст в Netscape 4.* становится все меньше и меньше? html css

    Netscape 4.* рассматривает следующие один за другим тэги

    (даже корректно закрытые) как вложенные, и поэтому уменьшает размер текста.

    Проблема возникает оттого, что пары

    в модели отображения Netscape 4.* взаимно уничтожаются. Добавьте пробел или любой другой символ между тэгами (например, так:

    ) и проблема решится.

    Список литературы

    Для подготовки данной работы были использованы материалы с сайта http://www.webmascon.com

    Свежие статьи
    Популярно сейчас
    Почему делать на заказ в разы дороже, чем купить готовую учебную работу на СтудИзбе? Наши учебные работы продаются каждый год, тогда как большинство заказов выполняются с нуля. Найдите подходящий учебный материал на СтудИзбе!
    Ответы на популярные вопросы
    Да! Наши авторы собирают и выкладывают те работы, которые сдаются в Вашем учебном заведении ежегодно и уже проверены преподавателями.
    Да! У нас любой человек может выложить любую учебную работу и зарабатывать на её продажах! Но каждый учебный материал публикуется только после тщательной проверки администрацией.
    Вернём деньги! А если быть более точными, то автору даётся немного времени на исправление, а если не исправит или выйдет время, то вернём деньги в полном объёме!
    Да! На равне с готовыми студенческими работами у нас продаются услуги. Цены на услуги видны сразу, то есть Вам нужно только указать параметры и сразу можно оплачивать.
    Отзывы студентов
    Ставлю 10/10
    Все нравится, очень удобный сайт, помогает в учебе. Кроме этого, можно заработать самому, выставляя готовые учебные материалы на продажу здесь. Рейтинги и отзывы на преподавателей очень помогают сориентироваться в начале нового семестра. Спасибо за такую функцию. Ставлю максимальную оценку.
    Лучшая платформа для успешной сдачи сессии
    Познакомился со СтудИзбой благодаря своему другу, очень нравится интерфейс, количество доступных файлов, цена, в общем, все прекрасно. Даже сам продаю какие-то свои работы.
    Студизба ван лав ❤
    Очень офигенный сайт для студентов. Много полезных учебных материалов. Пользуюсь студизбой с октября 2021 года. Серьёзных нареканий нет. Хотелось бы, что бы ввели подписочную модель и сделали материалы дешевле 300 рублей в рамках подписки бесплатными.
    Отличный сайт
    Лично меня всё устраивает - и покупка, и продажа; и цены, и возможность предпросмотра куска файла, и обилие бесплатных файлов (в подборках по авторам, читай, ВУЗам и факультетам). Есть определённые баги, но всё решаемо, да и администраторы реагируют в течение суток.
    Маленький отзыв о большом помощнике!
    Студизба спасает в те моменты, когда сроки горят, а работ накопилось достаточно. Довольно удобный сайт с простой навигацией и огромным количеством материалов.
    Студ. Изба как крупнейший сборник работ для студентов
    Тут дофига бывает всего полезного. Печально, что бывают предметы по которым даже одного бесплатного решения нет, но это скорее вопрос к студентам. В остальном всё здорово.
    Спасательный островок
    Если уже не успеваешь разобраться или застрял на каком-то задание поможет тебе быстро и недорого решить твою проблему.
    Всё и так отлично
    Всё очень удобно. Особенно круто, что есть система бонусов и можно выводить остатки денег. Очень много качественных бесплатных файлов.
    Отзыв о системе "Студизба"
    Отличная платформа для распространения работ, востребованных студентами. Хорошо налаженная и качественная работа сайта, огромная база заданий и аудитория.
    Отличный помощник
    Отличный сайт с кучей полезных файлов, позволяющий найти много методичек / учебников / отзывов о вузах и преподователях.
    Отлично помогает студентам в любой момент для решения трудных и незамедлительных задач
    Хотелось бы больше конкретной информации о преподавателях. А так в принципе хороший сайт, всегда им пользуюсь и ни разу не было желания прекратить. Хороший сайт для помощи студентам, удобный и приятный интерфейс. Из недостатков можно выделить только отсутствия небольшого количества файлов.
    Спасибо за шикарный сайт
    Великолепный сайт на котором студент за не большие деньги может найти помощь с дз, проектами курсовыми, лабораторными, а также узнать отзывы на преподавателей и бесплатно скачать пособия.
    Популярные преподаватели
    Нашёл ошибку?
    Или хочешь предложить что-то улучшить на этой странице? Напиши об этом и получи бонус!
    Бонус рассчитывается индивидуально в каждом случае и может быть в виде баллов или бесплатной услуги от студизбы.
    Предложить исправление
    Добавляйте материалы
    и зарабатывайте!
    Продажи идут автоматически
    5076
    Авторов
    на СтудИзбе
    455
    Средний доход
    с одного платного файла
    Обучение Подробнее