CSS примеры
Как убрать лишнее пространство вокруг формы? html css
Есть два способа сделать это - с помощью хитрости и с помощью 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 каждый раз отрисовывают их заново.
Даже проблема возникает практически во всех новых броузерах при
отображении плагинов и слоёв.
На сайте 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; }
Могу ли я использовать выпадающее меню для навигации? ia/u gd
Как и многое в веб-дизайне, целесообразность использования выпадающего
меню зависит от аудитории. На обычных сайтах лучше от него отказаться.
Впрочем, иногда бывает удобно собрать вместе несколько ссылок на
ограниченном пространстве.
Минусы использования выпадающих меню:
- длинный текст делает меню чрезмерно широким
- трудности доступа к опциям в текстовых и речевых броузерах
- невозможно увидеть сразу все доступные варианты
- некоторые пользователи не догадываются о наличии скрытых опций
- оперирование выпадающими меню может представлять трудности для
некоторых пользователей ("Я не понял, что надо нажать 'перейти'")
- различный внешний вид в различных броузерах
- требует небольшого, но все же программирования (на стороне клиента
или сервера)
Еще на эту тему имеет смысл почитать Macintosh
Human Interface Guidelines.
Почему у картинок в таблицах появляется отступ внизу? html css
Особенно это заметно в броузерах на базе Gecko (например, в Netscape
6.x) и некоторых версиях Mozilla. Скорее всего это происходит потому, что
броузер интерпретирует <img> как строчный элемент. Проблема решается
следующей декаларацией:
TD>IMG { display: block; }
(подробное объяснение вы можете найти в статье "Tables,
Images, and Mysterious Gaps".)
После выхода Mozilla 1.0 в него был добавлен "почти стандартный" режим
для исправления вышеописанной проблемы. Этот режим включается
декларированием в DOCTYPE transistional HTML 4.01 (с системным
идентификатором) или transistional XHTML 1.0 (на Mozilla.org есть полный
список типов DOCTYPE).
В старых броузерах отступ может появляться из-за пробелов между
<img> и закрывающим <td>. Удалите лишние пробелы и проблема
скорее всего решится.
Как удалить рамку вокруг картинки-ссылки? 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 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 */
Для более подробной информации по этой теме читайте статью Marek Prokop
"Styling
<hr>".
Как изменить отступ для элементов списка с помощью css? css
Единственного правильного пути не существует. Броузеры Gecko и Internet
Explorer по-разному интерпретируют css в данном случае. Самый простой
вариант для уменьшения отступа - очистить поля и отступы слева. Для
увеличения же отступа можно сделать так:
ul { margin-left: 0; padding-left: 20px; }
или
ul { margin-left: 20px; padding-left: 0; }
(Те же правила применимы к ol и dl)
Как можно добавить отступ между элементами списка? html css
Если элемент списка - текст, лучше всего оформить его как
параграф:
<li><p>a list item</p></li>
В других случаях можно добавить два переноса строки в конце каждого
элемента списка:
<li>a list item<br><br></li>
Для более аккуратного и эффективного решения проблемы следует
использовать CSS, так как он не затрагивает структуру документа. Эта
декларация даст тот же эффект, что и уже приведенные способы:
li { margin-top: 1em; }
Внимание: установка line-height для списка приведет не только к
увеличению расстояния между элементами, но добавит междустрочное
расстояние для содержания каждого элемента.
Почему текст в Netscape 4.* становится все меньше и меньше? html
css
Netscape 4.* рассматривает следующие один за другим тэги <p>
(даже корректно закрытые) как вложенные, и поэтому уменьшает размер
текста.
Проблема возникает оттого, что пары </p><p> в модели
отображения Netscape 4.* взаимно уничтожаются. Добавьте пробел или любой
другой символ между тэгами (например, так: </p> <p>) и
проблема решится.
|