| ← Апрель 2011 → | ||||||
|
1
|
2
|
|||||
|---|---|---|---|---|---|---|
|
4
|
5
|
6
|
7
|
8
|
9
|
10
|
|
11
|
12
|
13
|
14
|
15
|
16
|
17
|
|
18
|
19
|
20
|
21
|
22
|
23
|
24
|
|
25
|
26
|
27
|
28
|
29
|
30
|
|
За последние 60 дней ни разу не выходила
Открыта:
02-06-2005
Статистика
0 за неделю
RFpro.ru: Элементы HTML и CSS
Хостинг портала RFpro.ru: РАССЫЛКИ ПОРТАЛА RFPRO.RU
Чемпионы рейтинга экспертов в этой рассылке
/ КОМПЬЮТЕРЫ И СОФТ / Программирование / Элементы HTML и CSS
Вопрос № 101057: Здравствуйте, ув. эксперты! У меня есть проблемка. Во всех книгах и статьях твердят, что надо уходить от табличного дизайна, вот я и решил это опробовать, но столкнулся с элементарным: необходимо разместить инфу в 2 колонки, т.е. как в т... Вопрос № 138041: Здравствуйте. Вопрос связан с позиционированием средствами CSS. Вроде бы строгое определение HTML не предполагает использование таблиц для позиционирования элементов. Попробовал добиться того же эффекта, который даёт таблица, средствами C... Вопрос № 39548: Здравствуйте уважаемые эксперты! Я новичок в этом деле, но очень хочется во всем разобраться. Что обозначает meta, их много разных и мне интересно что из них какая обозначает, что туда вписывать надо и все ли они должны быть вписаны в структуре сайта... Вопрос № 101057:
Здравствуйте, ув. эксперты!
Отправлен: 06.09.2007, 12:54 Отвечает Товарищ Бородин (Мастер-Эксперт) : Здравствуйте, Zotaper! Укажите для блоков свойства clear и float, либо задайте явно абсолютное позиционирование. Если идем первым путем, то левому блоку float и clear задаем left, правому - right. #leftcolumn { float:left; clear:left; } #rightcolumn { float:right; clear:right; } По второму пути задайте координаты для каждого из блоков. #leftcolumn { position:absolute; top:220px; left:0%; width:25%; } #rightcolumn { position:absolute; top:220px; right:0%; width:75%; } Следите, чтобы блоки не превышали по сумме ширины ширину страницы, иначе они будут "не в одной строке". Если по первому пути они будут в разных строках, просто поменяйте их местами. И естественно, тоже соблюдайте их ширину, чтобы они в сумме не были шире самой страницы. Дерзайте, маэстро! :))) Россия, Новосибирск Тел.: 7-923-245-3366 ICQ # 346988855
Ответ отправил: Товарищ Бородин (Мастер-Эксперт)
Вопрос № 138041:
Здравствуйте.
Отправлен: 27.05.2008, 11:12 Отвечает Web-Extrime (Специалист) : Здравствуйте, Dicot! Страницы сайта можно писать с использованием табличной или блочной верстки. Не совсем понятно что именно вы хотите получить, но что касается позиционирования, то HTML-разметки в рабочей области браузера можно разместить с точностью до пикселя. Позиционирование и его программирование на JavaScript - это сплошное "минное поле" между основными браузерами. При просмотре этих страниц следует отдавать отчет, что для каждого браузера загружается своя страница описания свойств. До появления CSS-P единственным средством точного позиционирования были таблицы. Они позволяли точно расположить компоненты страницы относительно друг друга. CSS-P описание позволяет точно разместить элемент разметки не только относительно других компонентов, но и относительно границ страницы. Кроме этого CSS-P добавляет странице еще одно измерение - элементы разметки могут "наезжать" друг на друга. Исходный код этого примера будет выглядеть вот так: <p style=""border-width:1px;" font-size:20px; position:relative; top:0px; left:0px; height:20px; color:white; background-color:#990000;"> Первый слой, на который наедем другим. </p> <div style=""border-width:1px;" position:relative; top:-55px; left:10px; background-color:#009900; padding:0px; font-size:20px; height:20px; color:#FFFFFF;"> Второй слой, который наезжает на первый. </div> При этом можно менять порядок "наезда" - "перекладывать" слои. Термин "слой" вместо "блочный элемент разметки" используется здесь по той причине, что он лучше отражает эффект, который достигается за счет позиционировани. Стандарт CSS-P позволяет с точностью до пикселя разместить блочный элемент разметки в рабочем поле окна браузера. При таком подходе возникает вопрос, как устроена система координат, в которой автор страницы производит размещение компонентов страницы. CSS-P определяет две системы координат: относительную и абсолютную. Это позволяет обеспечить гибкость размещения элементов как относительно границ рабочего поля окна браузера, так и относительно друг друга. Блоки - это не абстрактные точки, которые не занимают на плоскости cтраницы места. Блоки - прямоугольники, которые "заметают" площадь. Текст и другие компоненты страницы под блоком перестают быть доступными пользователю, поэтому линейные размеры блока имеют для создания HTML-страниц не меньшее значение, чем координаты блока. При использовании "абсолютных" координат точка отсчета помещается в верхний левый угол окна браузера, а оси X и Y направлены вправо по горизонтали и вниз по вертикали. Если в этой системе координат некоторый блочный элемент должен быть размещен на 10px ниже верхнего обреза рабочей области браузера и на 20px правее правого края рабочей области браузера, то его описание будет выглядеть следующим образом: .example { position:absolute; top:10px; left:20px; } В данной записи тип системы координат задан атрибутом position (значение - absolute), координата X задана атрибутом left (значение - 20px), Y задана атрибутом top (значение - 10px). Атрибуты top и left определяют координаты верхнего левого угла блока в абсолютной системе координат. Значения координат могут быть и отрицательными. Для того, чтобы убрать из отображаемой области блок с линейными размерами 100px (высота) на 200px (ширина) достаточно отпозиционировать его следующим образом: .example { position:absolute; top:-100px; left:-200px; width:200px; height:100px; } Абсолютное позиционирование применяется тогда, когда либо все содержание страницы должно быть доступно без скроллинга, либо когда элементы разметки находятся в начале страницы и их взаимное размещение важно с точки зрения дизайна. Относительная координатная система позволяет разместить блоки на странице в координатах охватывающего их блока. Преимущества наличия такой координатной системы очевидны. Она позволяет сохранять взаимное расположение элементов разметки при любом размере окна браузера. В качестве точки отсчета в этой системе координат выбрана точка размещения текущего блока по умолчанию. Ось X при этом направлена горизонтально вправо, а ось Y - вертикально вниз. Для задания координат блока в этой системе применяют запись типа: <div style=""border-width:1px;" border-style:solid; width:80%; height:100px;"> <div style=""xposition:relative;" top:0px; left:0px; border-width:1px;"> Этот блок находится в точке отсчета относительных координат </div> <div style=""xposition:relative;" top:0px; left:50px; border-width:1px;"> А этот блок смещен вправо на 50px </div> </div> Для работы с относительной системой координат лучше пользоваться универсальными блоками DIV. Это связано с тем, что в NN, например, параграф не может содержать параграфов. Любой блок немедленно закрывает параграф, следовательно, вложить в него что-либо нельзя. Следует отметить, что NN вообще непредсказуем в работе с относительными координатами, поэтому в нем их следует избегать. В относительной системе координат можно пользоваться отрицательными смещениями: <div style=""xposition:relative;" top:0; left:50; border-width:1px; border-style:solid; width:200px;"> <a class=doc href="javascript: if(flag==0) {window.document.layers[2].left=-50;flag=1;} else {window.document.layers[2].left=50;flag=0;}; void(0);"> Сдвинуть слой </a> </div> В примере слой, первоначально сдвинутый на 50 пикселей вправо, после нажатия на гипертекстовую ссылку смещается на 100 пикселей влево, получая отрицательную величину смещения по оси X (left:-50px). После повторного нажатия положение восстанавливается. Линейные размеры блока задаются двумя параметрами: шириной (width) и высотой (height) блока. В браузерах ширина и высота блока интерпретируется по разному. В NN к примеру ширина и высота блока - это рекомендуемые параметры. Если текст выходит за эти ограничения, то блок увеличивается до необходимых размеров, если текста нет вообще, то блок сжимается до маленького квадрата: <p style=""width:200px;" height:100px; background-color:#0000FF; color:#FFFFFF;"> .. </p> Приведенного в примере описания должно хватить для получения результата, но в NN для такого блока нужно применить некоторые дополнительные атрибуты: <p style=""width:200px;" height:100px; background-color:#0000FF; color:#FFFFFF; border-width:1px; border-color:#FFFFFF;"> <span style=""color:#FFFFFF;">" .. </span> </p> Без границы блок не будет залит синим цветом, а без span текст будет отображаться цветом умолчания для данной страницы. Никакому разумному объяснению такое поведение браузера не поддается :), поэтому не стоит на этих атрибутах строить дизайн страниц. Абсолютное и относительное позиционирование блоков позволяют придать странице третье измерение. Координаты блока, а точнее левого верхнего угла прямоугольника блока, и его линейные размеры определяют место положение блока на плоскости. Так как блок не является абстрактной точкой, то прямоугольники блоков перекрываются. Порядок наложения блоков определяется атрибутом z-index. При позиционировании блоков и их наложении друг на друга возникают видимые и невидимые области блоков. CSS позволяет произвольно управлять видимостью прямоугольной части блока. За это в спецификации CSS-P отвечает атрибут clip. Если быть более точным, то блоки - это прямоугольные карточки, которые лежат на поверхности, перекрывая друг друга. Расстояние между ними задать нельзя, т.е. полноценного третьего измерения нет. Порядок перекрытия блоков определяется атрибутом z-index. Чем больше значение z-index, тем ближе к наблюдателю находится слой. При работе с атрибутом следует иметь в виду, что NN и IE применяют разные модели описания. В IE - это просто числовой параметр, который закреплен за блоком. В NN изменение параметра z-index одного блока влиет на значения этого параметра у других. <div> <div name=first style=""xposition:relative;" top:0; left:0; width:300px; height:224px;"> <img src="image1.gif" border=1 width=300 height=224> </div> <div name=second style=""xposition:relative;" top:-160; left:80; width:300px; height:224px;"> <img src="image2.gif" border=1 width=300 height=224> </div> </div> Ну и наконец советую вам почитать интересную книгу по блочной верстке страниц сайта. Выложил специально для вас минут 10 назад.  Загрузить (700 Кб.) сможете по этой ссылке.Успехов! Тел.: 995-93-22-79-54 Адрес сайта: Web-дизайн ICQ # 347121808 ----- Делай добро сам, и всегда помни что сделали для тебя!
Ответ отправил: Web-Extrime (Специалист)
Вопрос № 39548:
Здравствуйте уважаемые эксперты! Я новичок в этом деле, но очень хочется во всем разобраться. Что обозначает meta, их много разных и мне интересно что из них какая обозначает, что туда вписывать надо и все ли они должны быть вписаны в структуре сайта, меня не все они интересуют а только эти.С уважением Ирина.
Отправлен: 06.04.2006, 15:22 Отвечает Egor : Здравствуйте, Kleopatra(или ирина)! Тег META предназначен для хранения т.н. метаданных ,т.е. данных ,описывающих документ и обычно на экран не выводящихся(вроде свойств документа в ворде).Этот тег размещается м\у тегами <HEAD> и </HEAD>. Тег META бывает 2 основных видов: 1)<META HTTP-EQUIV="http-заголовок" CONTENT="его значение"> Этот тег воспринимается браузером как дополнительный http-заголовок.(когда браузер посылает запрос к сепрверу он кроме самой страницы получает и набор заголовков ,описывающих тип содержимого ,кодировку ,длину , и др параметры страницы). В приведенном выше примере это тег <META Content="text/html; charset=windows-1251" Http-equiv="Content-Type">.Он сообщает браузеру о типе содержимого и кодировке(вин 1251). Час то исользуется тег вида <META HTTP-EQUIV="Refresh" CONTENT="5"> он заставляет браузер перезагружать страницу каждые 5 секунд. Или:<META HTTP-EQUIV="Refresh" CONTENT="1;URL=www.google.com"> Заставляет браузер перейти на гугл через 1 сек. Если интересно еще несколько примеров(но уже без перевода) <META HTTP-EQUIV=Expires CONTENT="Sun, 22 Mar 1998 16:18:35 GMT"> sets the expiry date of the document.(устанавливает время после которого док-т считается устаревшим и загружается не из кеша а из сети) <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> sets the client-side scripting language for inline scripts to JavaScript. <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> sets the style language for inline styles to CSS. 2)Тег описывающий автора дату создания итд(этой информацией пользуются роботы ,когда индексируют страницы,в браузере она не отображается( в Mozille ее увидеть можно нажав Ctrl+I) <META NAME="generator" CONTENT="Some program">Программа с помощью которой создана страница. <META NAME="author" CONTENT="Егор">Автор документа. <META NAME="copyright" CONTENT="Авторские права"> <META NAME="date" CONTENT="Дата создания"> <META NAME="keywords" CONTENT="ключевые слова" LANG="ru"> <META NAME="description" CONTENT="Описание"> Эти теги как правило используются поисковиками. +: <META name="Abstract" content="Abstract phrase">Общее описание страницы <META name="Distribution" content="Global">(м.б.также local и IU=internal use) <META HTTP-EQUIV="Content-Language" content="EN"> <META name="Revisit-After" content="X Days">Это тоже для поисковиков А остальные теги вроде <meta name="DC.Creator" content=" "> не стандартизованы и предназначены для употребления какой-либо системой о которой я по крайней мере не слышал. Из этих тегов реально полезен Content-Type(!!строго желателен иначе браузеор не определит кодировку),Refresh иногда используется и теги Keywords Description для поисковиков, а остальные вводитьь - только время тратить. А вот и ссылочки из гугл содержащие чуть побольше инфы: http://www.submitcorner.com/Guide/Meta/ http://www.htmlbook.ru/html/meta.html http://design.wmplace.net/?id=_html&sid=_format&page=meta http://www.w3.org/TR/REC-html40/struct/global.html#edef-META http://www.htmlhelp.com/reference/html40/head/meta.html
Ответ отправил: Egor
Здравствуйте, Kleopatra! Meta ata tag dlea poiskovih sistem i dlea http headerov dlea browsera - Pro Sait - Tut nujno napisat\' Slova Po kotorim hocesh shob tvoi sait nashli - toje samoe - razreshaitsea poisk - Imea Web Disignera - Kto Pomogal -Kodirofka stranitze! Молдова, Кишинёв Адрес сайта: Xakep Mail.ru-агент: rus_faq@mail.ru ----- Vse ili nicevo (Iziki programirovanie)
Ответ отправил: spider (Студент)
Здравствуйте, Kleopatra! Может то что тебе надо есть здесь http://www.chebot.ru/tmeta.php Лучше всего купить не большой справочник по html и через месяц вы будете владеть им в совершенстве. А использую какой-нибуть текстовый редактор например dreamweaver такие вещи пр&# 1086;сто перестаешь замечать и начинаешь концентрироваться на более важных вещах! Удачи в изученнии!
Ответ отправил: Gwest
Оценить выпуск »
подать вопрос экспертам этой рассылки »Скажите "спасибо" эксперту, который помог Вам!Отправьте СМС-сообщение с тестом #thank НОМЕР_ОТВЕТАна короткий номер 1151 (Россия) Номер ответа и конкретный текст СМС указан внизу каждого ответа.
* Стоимость одного СМС-сообщения от 7.15 руб. и зависит от оператора сотовой связи.
(полный список тарифов) © 2001-2011, Портал RFPRO.RU, Россия
Авторское право: ООО "Мастер-Эксперт Про" Калашников О.А. | Гладенюк А.Г. Хостинг: Компания "Московский хостер" Версия системы: 2011.6.31 от 03.04.2011 |
| В избранное | ||
