Название: Кулинарные рецепты CSS
Вид работы: реферат
Рубрика: Информатика и программирование
Размер файла: 20.85 Kb
Скачать файл: referat.me-137378.docx
Краткое описание работы: Как убрать лишнее пространство вокруг формы. Почему элементы формы видны даже через перекрывающие их слои. Как убрать полосу прокрутки.
Кулинарные рецепты CSS
Кулинарные рецепты CSS
CraigSaila
Как убрать лишнее пространство вокруг формы? htmlcss
Есть два способа сделать это - с помощью хитрости и с помощью css. Хитрость: вставляем форму в таблицу, помещая её между открывающим и закрывающим тэгами:
<table>
<form>
<tr>...</tr>
</form>
Второй способ - с помощью css выставить отступы в ноль:
<form style="margin-top: 0; margin-bottom: 0;">
Почему элементы формы видны даже через перекрывающие их слои? css
Это особенность отображения имеет место в IE и Opera под Windows и, к сожалению, ничего поделать с этим нельзя.
Opera показывает все элементы формы, IE только select. Пример.
Это происходит потому, что эти броузеры при отображении форм используют стандартные элементы интерфейса Windows, в то время как Netscape 6.x/Mozilla каждый раз отрисовывают их заново.
Даже проблема возникает практически во всех новых броузерах при отображении плагинов и слоёв.
На сайте DHTMLLab есть более подробная статья на эту тему. ThomasBrattli предлагает решение проблемы на JavaScript в своем скрипте CoolMenus.
Как убрать полосу прокрутки? html
Прежде всего, у вас должна быть действительно веская причина для этого. Отключение полосы прокрутки создает массу проблем с юзабилити и смущает пользователей. Если причина все же имеется, то достичь желаемого можно несколькими способами, но все они чрезвычайно опасны в неумелых руках.
Отключить полосу прокрутки во фрейме элементарно, просто добавьте атрибут
scrolling="no"
Убрать её из основного окна несколько сложнее. Во-первых, можно открыть окно с помощью JavaScript без активирования прокрутки:
window.open(this.href,'newWindow','scrollbars=no');
Во-вторых, в некоторых броузерах (IE под Windows пятой версии и старше, а также броузерах на базе Gecko) можно использовать нижеследующую декларацию:
HTML, BODY { style="overflow: hidden; }
Как можно контролировать размер текстового поля? htmlcss
Увы, Netscape 4.x отображает элементы формы по иному алгоритму, нежели прочие броузеры (InternetExplorer, Opera, и на базе Gecko).
Так как Netscape 4.x использует основной моноширинный шрифт для отображения текста в полях для ввода текстовой информации, а IE использует варьирующийся шрифт (обычно sans-serif) - лучше всего оптимизировать текстовое поле прежде всего для Netscape.
После этого можно использовать декларацию css (которую старые версии Netscape проигнорируют) для подгонки поля под прочие броузеры.
Примеры:
![]() |
Обычноеполедлявводав Netscape 4.7:<input type="text" value="netscape" size="8"> |
![]() |
Поле для ввода в IE 5.5, подогнанное под размер поля в Netscape (отступы добавлены для вертикального выравнивания текста)<input type="text" value="ie" size="8" style="width: 90px; height: 27px; padding-top: 3px;"> |
![]() |
Поле для ввода в IE 5.5, подогнанное под размер и внешний вид поля в Netscape (имитация достигается за счет рамки и шрифта)<input type="text" value="ie" size="8" style="font: 16px 'courier new'; width: 90px; height: 27px; border: 3px inset #DDD;"> |
Могу ли я использовать выпадающее меню для навигации? ia/ugd
Как и многое в веб-дизайне, целесообразность использования выпадающего меню зависит от аудитории. На обычных сайтах лучше от него отказаться. Впрочем, иногда бывает удобно собрать вместе несколько ссылок на ограниченном пространстве.
Минусы использования выпадающих меню:
длинный текст делает меню чрезмерно широким
трудности доступа к опциям в текстовых и речевых броузерах
невозможно увидеть сразу все доступные варианты
некоторые пользователи не догадываются о наличии скрытых опций
оперирование выпадающими меню может представлять трудности для некоторых пользователей ("Я не понял, что надо нажать 'перейти'")
различный внешний вид в различных броузерах
требует небольшого, но все же программирования (на стороне клиента или сервера)
Еще на эту тему имеет смысл почитать MacintoshHumanInterfaceGuidelines.
Почему у картинок в таблицах появляется отступ внизу? htmlcss
Особенно это заметно в броузерах на базе Gecko (например, в Netscape 6.x) и некоторых версиях Mozilla. Скорее всего это происходит потому, что броузер интерпретирует <img> как строчный элемент. Проблема решается следующей декаларацией:
TD>IMG { display: block; }
(подробное объяснение вы можете найти в статье "Tables, Images, andMysteriousGaps".)
После выхода Mozilla 1.0 в него был добавлен "почти стандартный" режим для исправления вышеописанной проблемы. Этот режим включается декларированием в DOCTYPEtransistionalHTML 4.01 (с системным идентификатором) или transistionalXHTML 1.0 (на Mozilla.org есть полный список типов DOCTYPE).
В старых броузерах отступ может появляться из-за пробелов между <img> и закрывающим <td>. Удалите лишние пробелы и проблема скорее всего решится.
Как удалить рамку вокруг картинки-ссылки? htmlcss
В HTML (и старых броузерах) необходимо добавить атрибут border="0" к тэгу img.
В CSS (и новых броузерах) достаточно добавить стилевую декларацию
AIMG { 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; }
Для подробного изучения данной проблемы рекомендуем статью "CenteringTables".
Как сделать резиновую верстку с ограничением по ширине? 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
InternetExplorer и большая часть css-совместимых броузеров (например, на основе Gecko, Opera имеет одну странность, которую документировал StefanM. Huber) работают с hr по-разному. Суть в том, что IE обрабатывает его как строчный элемент, а прочие - как блочный. Поэтому, для горизонтального разделителя красного цвета мы делаем:
InternetExplorer:
HR { color: #F00; }
Прочие CSS-совместимые броузеры: HR { background-color: #F00; }
Тоже самое верно и для выравнивания:
Internet Explorer:
HR { text-align: right; }
Прочие CSS-совместимые броузеры:
HR { margin-right: 0; }
Итак, достичь с помощью css того, что в html выглядит как
<hr align="right" width="30%" size="2" color="#000F00" noshade>
...вы можете следующим образом:
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 */
Для более подробной информации по этой теме читайте статью MarekProkop "Styling <hr>".
Как изменить отступ для элементов списка с помощью css? css
Единственного правильного пути не существует. Броузеры Gecko и InternetExplorer по-разному интерпретируют css в данном случае. Самый простой вариант для уменьшения отступа - очистить поля и отступы слева. Для увеличения же отступа можно сделать так:
ul { margin-left: 0; padding-left: 20px; }
или
ul { margin-left: 20px; padding-left: 0; }
(Те же правила применимы к ol и dl)
EricA. Meyer написал подробное объяснение по этой проблеме.
Как можно добавить отступ между элементами списка? htmlcss
Если элемент списка - текст, лучше всего оформить его как параграф:
<li><p>a list item</p></li>
В других случаях можно добавить два переноса строки в конце каждого элемента списка:
<li>a list item<br><br></li>
Для более аккуратного и эффективного решения проблемы следует использовать CSS, так как он не затрагивает структуру документа. Эта декларация даст тот же эффект, что и уже приведенные способы:
li { margin-top: 1em; }
Внимание: установка line-height для списка приведет не только к увеличению расстояния между элементами, но добавит междустрочное расстояние для содержания каждого элемента.
Почему текст в Netscape 4.* становится все меньше и меньше? htmlcss
Netscape 4.* рассматривает следующие один за другим тэги <p> (даже корректно закрытые) как вложенные, и поэтому уменьшает размер текста.
Проблема возникает оттого, что пары </p><p> в модели отображения Netscape 4.* взаимно уничтожаются. Добавьте пробел или любой другой символ между тэгами (например, так: </p> <p>) и проблема решится.
Похожие работы
-
Информационная система "Книга рецептов"
Функциональная структура системы. Формирование отчета о расходе продуктов и их стоимости в проектируемой информационной системе. Структура базы данных. Логическая модель базы данных. Триггер на удаление и изменение записи таблицы продукты, рецепты.
-
«Здоровый» портрет
Из всех задач обработки изображений самая востребованная — портретная ретушь. Этому есть простое объяснение: главные объекты фотосъёмки — люди.
-
Windows Xp: Войди в систему красиво
Wellcome Screen. Boot Screen.
-
Компьютерная графика VISIO
Основы компьютерной графики VISIO
-
Слои, страницы и рабочая область в CorelDraw
Работа со страницами. Управление слоями в Диспетчере объектов. Создание слоя-шаблона. Настройка макета страницы. Настройка свойств области иллюстрации. Сетка и направляющие. Выбор режима качества просмотра.
-
Опасности при поисковом продвижении сайтов
Опасности, связанные с поисковым продвижением сайтов бывают двух видов: Опасность для заказчика; Опасность для исполнителя.с
-
Текстовый процессор Microsoft Office Word. Создание, редактирование и форматирование текстового документа
Способы запуска и выхода из Word. Элементы интерфейса Microsoft Word. Разделы меню офиса. Отображение на экране необходимой панели инструментов. Копирования, перемещение и удаление фрагмента текста. Автоматизация процессов ввода и редактирования текста.
-
Построение многооконных приложений для Windows
После запуска C++ Builder в вашем распоряжении имеется только одна форма Form1 – стартовая форма будущего приложения для Windows.
-
Разработка базы данных средствами программы MS Access "Сотрудники"
Порядок выполнения задания при разработке базы данных средствами программы MS Access "Сотрудники". Создать данные таблицы в режиме конструктора и форму для каждой таблицы. Многотабличная форма создается в режиме мастера форм. В конце создается отчет.
-
Создание баннеров с помощью программы Adobe PhotoShop 7.0
Пользовательский интерфейс программы. Меню. Палитры. Палитра Navigator (Навигатор). Палитра Info (Инфо). Палитра Options (Параметры). Палитра Color (Синтез). Палитра Swatches (Каталог). Создание баннеров.