У Вас не удалена папка /install/?
Хакеры идут к Вам!!!

Файловый Архив

  • Неограниченное количество категорий и суб-категорий
  • Настройки прав доступа по группам
  • Настройки прав доступа по каждой категории
  • Предпросмотр медиа файлов: FLV, IFLV, F4A, F4V, MP4, MP3, MOV и других...
  • Мультизагрузка файлов - SWFUploader
  • Добавление файлов с сервера
Подробности и история обновлений продукта в этой теме
Loading

Go Back   форум vBSupport.org > > >
Register Изображения Меню vBsupport Files Manager Аллея Звёзд Реклама на форуме Search Today's Posts Mark Forums Read
  • Мемберка
  • Администраторам
  • Premoderation
  • For English speaking users
  • Изменения в правах
  • Каталог Фрилансеров
Пароли на скачивание файлов в Member Area меняются автоматически каждый день
Если вам нужно скачать какой то скрипт, за паролем ко мне в ЛС
привет какирам kerk
Ещё раз обращаем Ваше внимание: всё, что Вы скачиваете и устанавливаете на свой форум, Вы устанавливаете исключительно на свой страх и риск.
Сообщество vBSupport'а физически не в состоянии проверять все стили, хаки и нули, выкладываемые пользователями.
Помните: безопасность Вашего проекта - Ваша забота.
Убедительная просьба: при обнаружении уязвимостей или сомнительных кодов обязательно отписывайтесь в теме хака/стиля
Спасибо за понимание
На форуме введена премодерация ВСЕХ новых пользователей

Почта с временных сервисов, типа mailinator.com, gawab.com и/или прочих, которые предоставляют временный почтовый ящик без регистрации и/или почтовый ящик для рассылки спама, отслеживается и блокируется, а так же заносится в спам-блок форума, аккаунты удаляются
for English speaking users:
You may be surprised with restriction of access to the attachments of the forum. The reason is the recent change in vbsupport.org strategy:

- users with reputation < 10 belong to "simple_users" users' group
- if your reputation > 10 then administrator (kerk, Luvilla) can decide to move you into an "improved" group, but only manually

Main idea is to increase motivation of community members to share their ideas and willingness to support to each other. You may write an article for the subject where you are good enough, you may answer questions, you may share vbulletin.com/org content with vbsupport.org users, receiving "thanks" equal your reputation points. We should not only consume, we should produce something.

- you may:
* increase your reputation (doing something useful for another members of community) and being improved
* purchase temporary access to the improved category:
10 $ for 3 months. - this group can download attachments, reputation/posts do not matter.
20 $ for 3 months. - this group can download attachments, reputation/posts do not matter + adds eliminated + Inbox capacity increased + files manager increased permissions.

Please contact kerk or Luvilla regarding payments.

Important!:
- if your reputation will become less then 0, you will be moved into "simple_users" users' group automatically.*
*for temporary groups (pre-paid for 3 months) reputation/posts do not matter.
Не можете скачать вложение?
Изменения в правах групп пользователей
внимательно читаем эту и эту темы
Короткая версия - тут
Уважаемые пользователи!

На форуме открыт новый раздел "Каталог фрилансеров"

и отдельный раздел для платных заказов "Куплю/Закажу"

 
 
Old  
Luntick
На доске почёта
Прощаемся
 
banned nax
Default Дивные блоки PRO 7

Решил немного систематизировать поиск различных решений (ошибок) в вёрстке в дивах (div). Без этого такая работа превращается в метод научного тыка, что отнимает уйму времени.

Что бы понять суть, а не пытаться всё запомнить, начну с того, что имеется из браузеров для просмотра сайта. По отношению к вёрстке в дивах браузеры делятся на IE и остальные. Здесь и далее пишу не ради дискуссии о том, кому какие браузеры нравятся, а с точке зрения работы браузера с дивными блоками.

Браузера НЕ IE, появились и предназначались для быстрой обработки таблиц, на которых верстались сайты. Браузер IE так и не смог освоить табличную верстку и загружал сайты много медленнее, обсчитывая каждую таблицу.
Ныне вёрстка в таблицах уходит в прошлое с появлением таблиц стилей (CSS), а браузеры сделанные под таблицы остались. Эти браузеры ведут себя в дивной вёрстке так же как с таблицами.

Браузер IE так же не изменил своим "привычкам" и продолжает в дивах обсчитывать вёрстку, что намного привлекательнее, поскольку дивный блок в отличии от таблицы не будет работать без стилей из таблицы стилей, а в IE будет работать.

Таким образом, для НЕ IE в обязательном порядке необходимо применение таблиц стилей и что ещё более отягощает верстальщика, с помощью таблиц стилей требуется эмулировать таблицу, иначе указанные браузеры работать не будут. В тоже время для браузера IE верстка под табличные браузеры содержит много излишнего кода, который может исказить отображение сайта в этом браузере до такой степени, что станет невозможным просматривать сайт.

Собственно, вот то основное, что по моему надо помнить при вёрстке в дивах или редактировании дивной вёрстки. Для закрепления выше написанного приведу несколько примеров вёрстки в дивах.
HTML Code:
<div>
содержимое блока
</div>
Это самый простой код дивного блока. Но он будет по разному отображаться в браузерах. В IE блок автоматически растянется на всю ширину страницы, а содержимое блока получит отступы по вертикали. В остальных браузерах блок "повиснет" на содержимом. В последнем случае, что бы блок растянулся по горизонтали следует указать размер ширины блока. Если на всю ширину страницы, то значение width (ширина) будет равно 100% - всё как в табличной вёрстке.
Код блока с размером по ширине во всю страницу будет следующим
HTML Code:
<div style="width:100%;">
содержимое блока
</div>
Но для IE код избыточен, в результате в браузере может появится горизонтальная прокрутка, а часть страницы справа может вовсе исчезнуть. Что бы вернуть IE в работоспособное состояние применяют хаки. То есть, продолжим "принуждать" IE к работе с приёмами табличной вёрстки и, хотя, таблиц уж нет в вёрстке, но есть теперь браузеры работающие с этой вёрсткой.
В случае с шириной браузера во всю страницу код дивного блока для всех браузеров будет выглядеть так.
HTML Code:
<div <if condition="!is_browser(ie)">style="width:100%;"</if>>
содержимое блока
</div>
На человеческом языке означает, что если браузер НЕ IE, то добавляется стиль, указывающий ширину блока. По функции последний код дивного блока аналогичен самому первому. Но в первом варианте браузер IE автоматически растягивал блок по ширине, а другие нет. Так в каком варианте поведение браузера будет правильнее? Правильнее будет тот вариант, который чаще применяется в вёрстке - это растянутый блок по ширине страницы или родительского блока.
Если же потребуется обтянуть блоком его содержимое, то в браузере IE следует отключить отступы, которые он создаёт автоматически в блоке. Код дивного блока будет следующим.
HTML Code:
<div style="overflow:hidden;">
содержимое блока
</div>
Этот код будет работать во всех браузерах.

Выше я разобрал наиболее распространённый вариант вёрстки, который подвергается редактированию. Но, к сожалению, в таком виде, с одним только стилем по ширине, вёрстка блока встречается реже. В основном в блоке применяются сразу несколько стилей. В тоже время, блок, в отличие от таблиц не имеет видимых границ, а сами блоки, в отличии от ячеек таблиц, располагаются на странице в произвольной последовательности. Указанные обстоятельства сильно затрудняют редактирование вёрстки в дивах. Даже опытный верстальщик может часы, а то и дни, проводить в поиске причины, по которой блок не хочет вести себя так, как написано в его HTML коде.

Решение этой проблемы простое – блок необходимо вооружить видимыми границами. Изначально это потребует изменение HTML кода блока, то есть траты на это действие времени, при кажущейся простоте редактирования блока. Ну это сами решите, какова будет последовательность действий.
Ниже напишу о том, как сделать границы блока видимыми.
Для этого в стиль блока (или к имеющемуся стилю блока) необходимо добавить свойства бордера. Border позволяет одновременно установить толщину, стиль и цвет границы вокруг блока.
HTML Code:
<div style="border:1px solid black;">
содержимое блока
</div>
В приведённом примере границы блока обозначены линией толщиной в 1 пиксель, чёрного цвета. Толщину линии и цвет линии можно изменять.
Напишу HTML код из нескольких блоков
HTML Code:
<div id=”1” style="border:1px solid #000000;">
<div id=”2” style="border:1px solid #FF0000;">
<div id=”3” style="border:1px solid #0000FF;">
содержимое блока
</div>
</div>
</div>
Получилось три блока, встроенных один в другой с номерами id от 1 до трёх. Если посмотреть на блоки через браузер, то увидите три рамки, чёрную снаружи красную посередине и синим цветом внутри. При этом в браузере IE рамки будут растянуты по ширине окна браузера. Следующим шагом выравниваем содержимое внутреннего блока по центру окна по горизонтали.
HTML Code:
<div id=”1” style="border:1px solid #000000;">
<div id=”2” style="border:1px solid #FF0000;">
<div id=”3” style="border:1px solid #0000FF;text-align:center">
содержимое блока
</div>
</div>
</div>
В браузере IE выравнивание произошло, в остальных нет. Следуя моим инструкциям в начале темы вы поставите внутреннему блоку размер ширины в 100% и ни какого результата не получите, содержимое блока останется на месте. Если бы границы блоков не были раскрашены, то причина этого была бы неясна. Правильнее сказать, виноват был бы Лунтик, поскольку его код не работает.
НО тот кто не поленился и предварительно раскрасил границы блока видит, что внутренний блок обжимают снаружи два блока, поэтому содержимое внутреннего блока, хотя и центрируется, но остаётся на месте. Исправляем ситуацию тем, что внешним блокам присваиваем свойства ширины со значением 100%
HTML Code:
<div id=”1” style="border:1px solid #000000;width:100%;">
<div id=”2” style="border:1px solid #FF0000;width:100%;">
<div id=”3” style="border:1px solid #0000FF;text-align:center;width:100%;">
содержимое блока
</div>
</div>
</div>
После того, как получите результат, свойства бордера нужно удалить из стилей блоков и границы блоков вновь станут невидимыми.

Last edited by Luntick : 08-24-2012 at 12:05 AM.
 
Bot
Yandex Bot Yandex Bot is online now
 
Join Date: 05.05.2005
Реклама на форуме А что у нас тут интересного? =)
Old  
kerk
k0t
 
kerk's Avatar
Default 2

а зачем ИЕ растягивает блок по ширине по умолчанию?
ну вот не догоняю я, нафига?
из-за этого куча проблем с версткой
нормальное явление, когда ширина блока выравнивается по содержимому, в случае
если нужен блок с заданным размером, просто ставим размер, тоесть логика такая: нужно - ставим, ненужно - auto
для ешака нужно делать костыли, иначе блок разнесет в стороны, если не указывать ширину блока
в свое время попортил себе кучу нервов в одном из своих хаков - файловик
очень многое там реализовано на аяксе, всплывающие окна к примеру
яваскриптом создается оболочка - блок и затем в этот блок подгружается содержимое
следите за мыслью
создаваемый яваскриптом блок без указания ширины, т.к. я еще не знаю, какой контент придет туда
если это такой же блок с текстом внутри, ок, я могу указать у дочернего ширину 600, у родительского +3px на сторону и все ок
но если приходит более сложный код с объектами флеш проигрывателей, размеры которых я не могу знать, т.к. админ выставляет их в настройках И если размер дочернего больше, чем родителя, получаем кривое окно
границы внешнего блока меньше, чем внутреннего
вот примеры таких окошек
Каталог ссылок - скрины (267.2 Кб)
это окошко файла-архива
растянуто по ширине автоматически, в зависимости от кол-ва кнопок, т.е. по максимальной ширине содержимого
админ и узер видят разное окошко, кол-во кнопок разное
если указать фикс. размер блока, окно будет кривое

или вот пример файл с медиа плеером

Filename Edit AJAX (1.31 Мб)
кол-во кнопок другое (меньше), но в блоке другое содержимое, с фикс. размером
внешний блок выравнивается по своему содержимому

подытожу
только для ешака нужно делать костыли, в остальных браузерах нормально
 
Old  
Luntick
На доске почёта
Прощаемся
 
banned nax
Default 0

Quote:
Originally Posted by kerk View Post
подытожу
только для ешака нужно делать костыли, в остальных браузерах нормально
Ничуть не сомневался в том, имеются противоположные мнения о браузерах, поскольку это определяется в функционале самих браузеров. Для дивной вёрстки различия в работе браузеров существенные, поэтому упомянул о их существовании, а также привёл несколько примеров того в чём различие в вёрстке. При этом я упомянул суть различия и отметил, что это главное помнить.
Quote:
Originally Posted by kerk View Post
для ешака нужно делать костыли, иначе блок разнесет в стороны, если не указывать ширину блока
Писал об этом, повторю. Отступы и поля, создаваемые IE отменяются в CSS overflow:hidden А, вот, чтоб создать такие поля ручками для других браузеров требуется описать много свойств в стилях блока.

Luntick добавил 24.08.2012 в 00:19
Quote:
Originally Posted by kerk View Post
это окошко файла-архива
растянуто по ширине автоматически, в зависимости от кол-ва кнопок, т.е. по максимальной ширине содержимого
админ и узер видят разное окошко, кол-во кнопок разное
если указать фикс. размер блока, окно будет кривое
HTML Code:
<div style="display:block;overflow:hidden;padding:6px;">
содержимое блока
</div>
Этот код подойдёт для всех браузеров.

Last edited by Luntick : 08-24-2012 at 01:19 AM. Reason: Добавлено сообщение
 
Old  
kerk
k0t
 
kerk's Avatar
Default 0

Quote:
Originally Posted by Luntick View Post
поскольку это определяется в функционале самих браузеров
да, разумеется
но я имел ввиду другое
удобней (и логичней, на мой взгляд) для верстальщика в описанном мною случае, именно поведение нЕ ешакоподобных браузеров
 
Old  
Luntick
На доске почёта
Прощаемся
 
banned nax
Default 0

Quote:
Originally Posted by kerk View Post
удобней (и логичней, на мой взгляд) для верстальщика в описанном мною случае, именно поведение нЕ ешакоподобных браузеров
Так спору нет в том, чтобы браузеры были подобные тем, у которых вёрстка проще и работоспособна. Но первое, простота, не позволяет реализовать все преимущества дивной вёрстки, а второе определяется не самим браузером, а исполнением скормленного ему HTML кода. Поскольку роботы пока не умеют капризничать, то и показывают на мониторе то, чем их "кормил" верстальщик HTML-кода.

Luntick добавил 24.08.2012 в 09:11
Quote:
Originally Posted by kerk View Post
а зачем ИЕ растягивает блок по ширине по умолчанию?
ну вот не догоняю я, нафига?
В этом заключается смысл вёрстки в дивах. Блоки див помещаются в контейнер див, контейнеры див объединяются в ещё большие контейнеры и т.д. Блок помещённый в контейнер должен по умолчанию занять всё пространство контейнера. Если в контейнере несколько блоков, то по умолчанию они размещаются один под другим по всей ширине контейнера. Верстальщик может разместить блоки в контейнере по своему усмотрению, например, расположить блоки по горизонтали, а один сделать вертикальным (меню слева). Если потребуется, что бы дивный блок занимал минимум места в контейнере, равному размеру содержимого, то с помощью инструкции CSS блоку придают соответствующие свойства.
Контейнеру можно задать размер по ширине и все блоки в нём изменят свою ширину пропорционально. Внешнему контейнеру можно не присваивать размер ширины и тогда содержимое контейнера расположится по всей площади окна браузера, изменение размера окна которого будет приводить к пропорциональному изменению размеров дивных блоков (резиновая вёрстка).

kerk, то о чём пишешь ты, это вёрстка в таблицах. Разработчики табличных браузеров создают видимость понимания дивов своими браузерами, не забывая пинать тех кто это умеет делать. Как результат появляются уё..ща типа чётвёрки. Серьезные проекты не переходят с таблиц, что бы не рождать дизайнерские уродства, обеспечивая работоспособность сайта во всех браузерах.
Разрабы IE не перевели его на работу с таблицами в пике популярности последних, теперь и смысла в этом нет. Как выход для почитателей других браузеров, это продолжить создавать серьёзные проекты в табличной вёрстке, мирясь со всеми её недостатками.

Last edited by Luntick : 08-24-2012 at 10:11 AM. Reason: Добавлено сообщение
 
Old  
kerk
k0t
 
kerk's Avatar
Default 0

не вижу недостатка в таблицах
и нет смысла меня в этом переубеждать
и блоки и таблицы хороши каждый на своем месте
 
Old  
sanika
Продвинутый
 
sanika's Avatar
Default 0

А что делать если блок CODE растягивает дизайн из-за тега <pre> в нем? Когда вставляют код имеющий большую ширину
 
 

Tags
вёрстка в дивах, редактирование div, редактирование шаблонов

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off




All times are GMT +4. The time now is 02:25 AM.


Powered by vBulletin® Version 3.0.8
Copyright ©2000 - 2016, Jelsoft Enterprises Ltd.