23.11.2006

Как расположить теги DIV. Консультируют специалисты студии веб дизайна ClearDesign (Киев)

Студия веб дизайна Киев.

Дизайн. Для человека, который работает с HTML , одна из ассоциаций - "табличный дизайн".

Есть как сторонники, так и противники такого технического решения. Со сторонниками всё понятно, а вот чем хотят пользоваться противники? Это тег DIV .

Один из вопросов, который возникает у людей, работающих с DIV - как сделать аналог свойства nowrap средствами CSS (т.е. необходимо разместить неограниченное количество елементов DIV в одной строке, так чтобы при изменениии размеров экрана они не переносились на новую строчку )

Всё дело в том, что DIV является блочным элементом, и создаёт разрывы до, и после себя.

Соответственно, рядом расположенные DIV, будут отображены друг под другом.

Даже если установить размеры и выравнивание для этих тегов, то при уеньшении окна браузера, всёравно может произойти перенос DIV'ов.

Решение, которое позволит расположить неограниченное количество DIV'ов рядом весьма простое :

1) Всё заключаем в DIV со стилем style="white-space: nowrap; "
(аналог nowrap)
2) На внутренние DIV назначаем display:inline; (объясняем DIV'ам , что
они не блоки , а банальный текст)
3) Наслаждаемся работающим дизайном, и добавляем другие свойства (по
вкусу)

Вот и всё ;)

Для новичков в этой области :

"Табличный дизайн" означает, что все элементы на странице закреплены на своих местах с помощью таблиц (т.е. находятся в ячейках таблицы).

DIV - от слова DIVISION. Один из тегов HTML . Вся информация по тегам размещена на сайте http://www.w3.org/.

CSS - каскадные таблицы стилей. Используются для оформления веб страниц.

nowrap - свойство ячейки таблицы, запрещающее автоматический перенос текста внутри этой ячейки. Применение такого свойства заставляет ячейку растягиваться по ширине, чтобы вместить всё содержимое.

P.S. На написание этой справки подтолкнул вопрос , который был задан мне.

Задавайте вопросы - получите ответы.

Дизайн - искуство, приправленное точным рассчётом

НАШИ СТАТЬИ