Создание сайта в текстовом редакторе - Страница 4

СтеклышеК · 09.10.2009, 11:26

Цитата:

Сообщение от Black Parrot.

К вопросу о создании сайта:
Ищу быстрый бесплатный хостинг с поддержкой пользовательских доменов типа ****.***.**(net.ru, co.cc) места нужен где-то 1мб. Будет размещена Html-страничка с моими контактами(Аля бесплатный .tel)...

я конечно не знаю точно, с хостингами дело не имею, да и вряд ли буду иметь но вот что нашёл: Народ

Сергей · 09.10.2009, 11:37

алексей, лучше такие размеры указывать в том случае, если сайт фикс., иначе же лучше указывать размеры в процентах... просто попробуй на сайт посмотреть на разных мониках(4:3, 16:9) и при разных разрешениях - увидишь как вся эта красота разползается))

СтеклышеК · 09.10.2009, 11:58

Сергей, жаль но возможности посмотреть на разных мониторах нет, сижу сам на 17 ЭЛТ, ну разве что разрешение 1280х1024. Как я понял ты хочешь сказать, что если монитор будет допустим 4:3 то строка будет очень гигантской или наоборот почти не видно будет? Просто если выставить в % то боюсь при большом разрешении текст будет выходит за пределы рамки. Ну или как лучше отредактировать по твоему мнению?
Caut.zip - вот то что у меня получилось, вроде при смене разрешения всё нормально.

Сергей · 09.10.2009, 15:29

отлично) очень хорошо получилось! у меня моник 19", 16:9, все нормально отображается. просто у меня была такая беда, когда я указывал размер в пикселях, на другом мониторе страница выглядела несколько криво, в любом случае для резинового сайта пропорциональные размеры лучше фиксированных. хочу еще добавить, что неплохо бы css в отдельный файл поместить и в нем оставить подробные комментарии - что и для чего нужно, потом можешь и не вспомнить...

VedebellO · 09.10.2009, 18:36

Боюсь, что вертикальное выравнивание по низу возможно реализовать только через таблицу. Там выравнивается через <td valign="bottom">

Сергей · 09.10.2009, 18:47

Цитата:

Сообщение от VedebellO

Боюсь, что вертикальное выравнивание по низу возможно реализовать только через таблицу. Там выравнивается через <td valign="bottom">

об этом лучше забыть, табличная разметка это прошлый век

VedebellO · 09.10.2009, 19:04

Цитата:

Сообщение от Сергей

об этом лучше забыть, табличная разметка это прошлый век

Тем не менее еще не видел ни одной СОВРЕМЕННОЙ верстки, которая бы обходилась совсем без таблиц. А вертикальное выравнивание достигается либо простым способом - через таблицу, - либо сложным - через дополнительный <div style="position: relative; margin-top:***px;">.
Так что я понимаю, можно гнуть пальцы и гордо нос воротить, мол, свечи - прошлый век, однако если электричество отключено, выбора особого нет.

VedebellO · 09.10.2009, 19:11

Специально для тех, кто любит заниматься сексом в гамаке и стоя: нашел ЕЩЕ БОЛЕЕ ДОЛГИЙ И ТРУДНЫЙ СПОСОБ. Зато - в духе ХХI века, все по взрослому, никаких таблиц.

Необходимость вертикального выравнивания текста (к примеру, центрирования) относительно блочного контейнера возникает достаточно редко. Как правило, подобное поведение требуется в таблицах, и собственно для таблиц существует простой универсальный инструмент – CSS-свойство vertical-align. C произвольным же блочным элементом дела обстоят немного хуже. Существует несколько путей решения проблемы (сторонники «валидной» верстки, уверен, хорошо знакомы с ними), я же решил предложить не худший и не лучший, а просто еще один вариант.
Задача: Дан блочный элемент, к примеру div с классом valign, содержащий некоторый текст.

Код:

<div class="valign">
   ... некий текст ...
</div> Необходимо выровнять текст по вертикали, к примеру, отцентрировать, относительно родителя.  Для «продвинутых» веб-обозревателей существует простое решение:
 .valign{
   display:table-cell;
   vertical-align:middle;         
}

Данный способ к браузеру от Microsoft, к сожалению, не применим, так как он поддерживает vertical-align только для табличных элементов, однако IE версии 6 и старше успешно применяет данное свойство и для inline-элементов, значит можно попытаться найти особый путь и для этого веб-проводника.
В общем виде идея выглядит так. Дополним HTML-код: обернем текст, к примеру, тегом p, а также добавим на том же уровне пустой inline-элемент (к примеру span).

Код:

<div class="valign">
   <span></span>
   <p>... некий текст ...</p>
</div>  Тогда вертикально выровнить текст внутри контейнера с классом valign можно следующим образом (только для IE):
  .valign{
   height:300px; /* определенное значение высоты */
   line-height:300px;
}

.valign p{
   vertical-align:middle; /* здесь выравниваем текст по вертикали */
   display:inline;   
   line-height:normal;
}

.valign *{
   zoom:1;  /* Важно! Устанавливаем hasLayout = true */
}

Ключевыми моментами приведенной техники являются:

задание значения свойству line-height главного контейнера аналогичного значению его высоты;
добавленные нами дополнительные элементы должны быть встроенными (inline) и иметь «включенным» Microsoft'овский hasLayout (делаем при помощи zoom:1.

Приведенный способ вертикального выравнивания текста вполне самодостаточный и может с успехом применятся на практике. Необходимо лишь дополнить CSS-код, сделав его более универсальным.

Код:

.valign{
   height:300px;
   *line-height:300px; /* для IE */
}

.valign, .valign p{
   display:table-cell; 
   vertical-align:middle; /* здесь выравниваем текст по вертикали */
}
/* для IE */ 
.valign p{
   *display:inline;   
   line-height:normal;
}
/* для IE */ 
.valign *{
   zoom:1;  /* Важно! Устанавливаем hasLayout = true */
}

Однако, вернемся к нашей задаче. Итак, мы имеем простое решение для браузеров с поддержкой display:table-cell; и вариант с дополнительными элементами для Internet Explorer версии 6 и выше. Так как эти дополнительные элементы мы можем добавить при помощи expression(), то указанный вариант успешно применим и для нашего случая.
Окончательно приходим к следующему решению:

Код:

.valign{
   ...
   display:table-cell; /* для не IE */
   line-height: expression(this.offsetHeight + "px"); /* для IE */ 
   behavior: expression(!this.extra ? this.extra = this.innerHTML = '<span></span><p>' + this.innerHTML + '</p>' : ''); /* для IE */
}

.valign, .valign p{
   vertical-align:middle; /* здесь выравниваем текст по вертикали */ 
}
/* для IE */ 
.valign p{
   line-height:normal;
   display:inline;   
}
/* для IE */
.valign *{
   zoom:1; /* Важно! Устанавливаем hasLayout = true */
}

Сергей · 09.10.2009, 19:38

что вы, что вы...

я не против таблиц, они конечно нужны... но не для разметки а для структурирования информации... я и спорить не собирался, просто мнение выразил... видимо этим я вас как-то задел, извиняйте

статья кстати хорошая))

СтеклышеК · 09.10.2009, 19:52

Цитата:

Сообщение от Сергей

статья кстати хорошая))

впору в библиотеку выкладывать

09.10.2009, 19:11	#38 (permalink)
VedebellO Member Регистрация: 13.05.2008 Сообщений: 719 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 278	Специально для тех, кто любит заниматься сексом в гамаке и стоя: нашел ЕЩЕ БОЛЕЕ ДОЛГИЙ И ТРУДНЫЙ СПОСОБ. Зато - в духе ХХI века, все по взрослому, никаких таблиц. Необходимость вертикального выравнивания текста (к примеру, центрирования) относительно блочного контейнера возникает достаточно редко. Как правило, подобное поведение требуется в таблицах, и собственно для таблиц существует простой универсальный инструмент – CSS-свойство vertical-align. C произвольным же блочным элементом дела обстоят немного хуже. Существует несколько путей решения проблемы (сторонники «валидной» верстки, уверен, хорошо знакомы с ними), я же решил предложить не худший и не лучший, а просто еще один вариант. Задача: Дан блочный элемент, к примеру div с классом valign, содержащий некоторый текст. Код: <div class="valign"> ... некий текст ... </div> Необходимо выровнять текст по вертикали, к примеру, отцентрировать, относительно родителя. Для «продвинутых» веб-обозревателей существует простое решение: .valign{ display:table-cell; vertical-align:middle; } Данный способ к браузеру от Microsoft, к сожалению, не применим, так как он поддерживает vertical-align только для табличных элементов, однако IE версии 6 и старше успешно применяет данное свойство и для inline-элементов, значит можно попытаться найти особый путь и для этого веб-проводника. В общем виде идея выглядит так. Дополним HTML-код: обернем текст, к примеру, тегом p, а также добавим на том же уровне пустой inline-элемент (к примеру span). Код: <div class="valign"> <span></span> <p>... некий текст ...</p> </div> Тогда вертикально выровнить текст внутри контейнера с классом valign можно следующим образом (только для IE): .valign{ height:300px; /* определенное значение высоты / line-height:300px; } .valign p{ vertical-align:middle; / здесь выравниваем текст по вертикали / display:inline; line-height:normal; } .valign { zoom:1; /* Важно! Устанавливаем hasLayout = true / } Ключевыми моментами приведенной техники являются: задание значения свойству line-height главного контейнера аналогичного значению его высоты; добавленные нами дополнительные элементы должны быть встроенными (inline) и иметь «включенным» Microsoft'овский hasLayout (делаем при помощи zoom:1. Приведенный способ вертикального выравнивания текста вполне самодостаточный и может с успехом применятся на практике. Необходимо лишь дополнить CSS-код, сделав его более универсальным. Код: .valign{ height:300px; line-height:300px; /* для IE / } .valign, .valign p{ display:table-cell; vertical-align:middle; / здесь выравниваем текст по вертикали / } / для IE / .valign p{ display:inline; line-height:normal; } /* для IE / .valign { zoom:1; /* Важно! Устанавливаем hasLayout = true / } Однако, вернемся к нашей задаче. Итак, мы имеем простое решение для браузеров с поддержкой display:table-cell; и вариант с дополнительными элементами для Internet Explorer версии 6 и выше. Так как эти дополнительные элементы мы можем добавить при помощи expression(), то указанный вариант успешно применим и для нашего случая. Окончательно приходим к следующему решению: Код: .valign{ ... display:table-cell; / для не IE / line-height: expression(this.offsetHeight + "px"); / для IE / behavior: expression(!this.extra ? this.extra = this.innerHTML = '<span></span><p>' + this.innerHTML + '</p>' : ''); / для IE / } .valign, .valign p{ vertical-align:middle; / здесь выравниваем текст по вертикали / } / для IE / .valign p{ line-height:normal; display:inline; } / для IE / .valign { zoom:1; /* Важно! Устанавливаем hasLayout = true */ }

09.10.2009, 11:37	#32 (permalink)
Сергей Member Регистрация: 15.12.2007 Сообщений: 889 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 262	алексей, лучше такие размеры указывать в том случае, если сайт фикс., иначе же лучше указывать размеры в процентах... просто попробуй на сайт посмотреть на разных мониках(4:3, 16:9) и при разных разрешениях - увидишь как вся эта красота разползается))

09.10.2009, 11:58	#33 (permalink)
СтеклышеК Эколог Регистрация: 02.08.2009 Сообщений: 1,938 Записей в дневнике: 3 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 1077	Сергей, жаль но возможности посмотреть на разных мониторах нет, сижу сам на 17 ЭЛТ, ну разве что разрешение 1280х1024. Как я понял ты хочешь сказать, что если монитор будет допустим 4:3 то строка будет очень гигантской или наоборот почти не видно будет? Просто если выставить в % то боюсь при большом разрешении текст будет выходит за пределы рамки. Ну или как лучше отредактировать по твоему мнению? Caut.zip - вот то что у меня получилось, вроде при смене разрешения всё нормально.

09.10.2009, 15:29	#34 (permalink)
Сергей Member Регистрация: 15.12.2007 Сообщений: 889 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 262	отлично) очень хорошо получилось! у меня моник 19", 16:9, все нормально отображается. просто у меня была такая беда, когда я указывал размер в пикселях, на другом мониторе страница выглядела несколько криво, в любом случае для резинового сайта пропорциональные размеры лучше фиксированных. хочу еще добавить, что неплохо бы css в отдельный файл поместить и в нем оставить подробные комментарии - что и для чего нужно, потом можешь и не вспомнить...

09.10.2009, 18:36	#35 (permalink)
VedebellO Member Регистрация: 13.05.2008 Сообщений: 719 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 278	Боюсь, что вертикальное выравнивание по низу возможно реализовать только через таблицу. Там выравнивается через <td valign="bottom">

Ads
Яндекс Member Регистрация: 31.10.2006 Сообщений: 40200 Записей в дневнике: 0 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 55070

09.10.2009, 19:38	#39 (permalink)
Сергей Member Регистрация: 15.12.2007 Сообщений: 889 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 262	что вы, что вы... я не против таблиц, они конечно нужны... но не для разметки а для структурирования информации... я и спорить не собирался, просто мнение выразил... видимо этим я вас как-то задел, извиняйте статья кстати хорошая))