Харьков Форум
  Харьков Форум > Hi-Tech... > Программирование и создание сайтов

Старый 1.09.2010, 21:05   #1
Del


 
 
Регистрация: 6.12.2003
Адрес: Малиновка-Харьков
Сообщений: 1,382
 
Очкарик Консультации и оценка качества html-вёрстки (бесплатно)

Пишите в топик - постараюсь решить/ответить на вопрос.

Серьёзно занимаюсь вёрсткой с 2006 (до этого было for fun), 4 года был PM, сейчас возвращаюсь в разработку. Подробней проф. пригодность можно оценить в профиле на LinkedIn и Хабре.

Топик решил поднять чтоб не терять скилл в отсутствии работы "руками" да и интересные вопросы заставляют разбираться в тех областях, в которые иначе углублялся бы только по делу.

Также можем разбирать уже готовую вёрстку: что хорошо, что плохо, как сделать лучше. Если вам кто-то сверстал сайт - тоже можно смело спрашивать - "ну как?"


__________________
[ Коли кожен за себе у своїй хаті скраю – У такого народу і героїв немає! ]
    Вверх
Старый 2.09.2010, 01:13   #2
Greggy

 
 
Регистрация: 5.12.2009
Адрес: Харьков
Сообщений: 5
 
По умолчанию
Круть. чувак молодец. спасибо за тему. собираюсь вплотную заняться версткой. вот только дойду до конца Соло на клавиатуре и тогда держись. .
Р.S. надеюсь не закиснет тема и сдержишь обещание


    Вверх
Старый 2.09.2010, 21:36   #3
Renegade


 
 
Регистрация: 27.08.2005
Адрес: Салтовка
Сообщений: 15,483
 
По умолчанию
http://www.hentairo.org.ua/

Два баннера (под модулем "последнее с форума") во всех браузерах отрисовываются как и должны.

В грёбаном ИЕ внизу по центру страницы. Всю голову уже поламал.


__________________
Renegade - человек отвергающий традиции, общепринятые взгляды, нонконформист, диссидент.
    Вверх
Старый 2.09.2010, 23:31   #4
maxshevtsov

 
Регистрация: 16.03.2009
Адрес: Харьков
Сообщений: 602
 
По умолчанию
+ в IE8 проблемы сменю


    Вверх
Старый 3.09.2010, 02:50   #5
Del


 
 
Регистрация: 6.12.2003
Адрес: Малиновка-Харьков
Сообщений: 1,382
 
По умолчанию
Под грёбанным IE как я понял имеется в виду 6-ой и 7-ой?
В IE8 баннеры отрисовываются где надо: http://clip2net.com/clip/m20050/1283471526-clip-202kb.jpg

Если в 8-ке у вас таки отрисовываются не так, то проверьте что этот сайт у вас не включен в Compatibility View и галочка "Display all websites in Compatibility View" выключена: http://clip2net.com/clip/m20050/1283471737-clip-29kb.png

Также Compatibility View будет включаться если вы просматриваете сайт локально или по локальной сети. Проверить режим отобраения можно нажав F12 в IE8.
В строке меню появившегося окна должно быть: "Browser Mode: IE8", "Document Mode: IE8 Standarts": http://clip2net.com/clip/m20050/1283471909-clip-34kb.jpg

Чтобы в IE8 сайт всегда отрисовывался в стандартах а не в IE7 mode или Quirks mode нужно либо добавить в head строку
Код HTML:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
(она должна быть самой первой после открытия head, это важно!)
либо отправлять header через .htaccess:
Код:
<IfModule headers_module>
  Header set X-UA-Compatible: IE=edge 
</IfModule>
или через PHP:
PHP код:
header("X-UA-Compatible: IE=edge"); 
Кстати в вас в head есть строка
Код HTML:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
удалите её.
во-первых она не работает (т.к. идёт после favicon)
во-вторых зачем сбрасывать IE в режим совместимости с IE7, это ж самому себе проблемы создавать.

Теперь исправляем баг с баннерами в IE6/7:
(кстати это не совсем проблема IE, там получается что блок с баннерами обтекает новость, если новость убрать он улетит влево и в остальных браузерах: http://clip2net.com/clip/m20050/1283472515-clip-71kb.png)

в style.css
строку 41 меняем с
Код HTML:
.banner { width:870px; height:150px;}
на
Код HTML:
.banner { clear: both; width: 250px; height:150px; margin-left: auto;}
Теперь проблема с меню в IE:
в style.css
после строки 16
Код HTML:
.menu { width:672px; margin:0 auto; margin-left:10px; }
дописываем
Код HTML:
.menu a {display: block;}
.menu a div {position: relative;}


__________________
[ Коли кожен за себе у своїй хаті скраю – У такого народу і героїв немає! ]
    Вверх
Старый 4.09.2010, 10:05   #6
bootman


 
 
Регистрация: 25.11.2007
Адрес: Океан
Сообщений: 4,504
По умолчанию
Уважаемый Дел! Не подскажете ли как подключить БД Аксесс к сайту на Джумла? Хотелось бы сделать так, что бы пользователи могли просматривать записи в виде форм, а таблицу в целом что бы было не видно, или видно только зарегистрированным пользователям. Спасибо.
З.Ы. БД из сети не нужно редактрировать либо пополнять, это будет контент сайта, т.е. сайт нужен что бы демонстрировать содержание этой БД.


    Вверх
Старый 4.09.2010, 16:28   #7
Del


 
 
Регистрация: 6.12.2003
Адрес: Малиновка-Харьков
Сообщений: 1,382
 
По умолчанию
Цитата:
Сообщение от bootman
Не подскажете ли как подключить БД Аксесс к сайту на Джумла?
к сожалению не мой профиль, это к программерам.
вот если - как сверстать какой-то хитрый блок, почему в каком-то браузере что-то криво отображается, как оформить версию для печати, как поместить альтернативное содержимое вместо флеша тем кто смотрит сайт на iPhone, как разметить таблицу чтоб она была читабельной для слепых пользователей и т.п. - это всегда пожалуйста.


__________________
[ Коли кожен за себе у своїй хаті скраю – У такого народу і героїв немає! ]
    Вверх
Старый 4.09.2010, 19:32   #8
dr_mousefly


 
Регистрация: 10.10.2007
Сообщений: 13,171
 
По умолчанию
Цитата:
Сообщение от bootman
Уважаемый Дел! Не подскажете ли как подключить БД Аксесс к сайту на Джумла? Хотелось бы сделать так, что бы пользователи могли просматривать записи в виде форм, а таблицу в целом что бы было не видно, или видно только зарегистрированным пользователям. Спасибо.
З.Ы. БД из сети не нужно редактрировать либо пополнять, это будет контент сайта, т.е. сайт нужен что бы демонстрировать содержание этой БД.
ну вот, как человек предложил свою помощь, так айда закидаем его тупыми вопросами...
смотрите сюда: http://citforum.ru/internet/php/access_php/ гугл никто не отменял.
либо экспортируйте вашу базу в MySQL и не мучайтесь, если она не меняется.
если меняется, можете экспортировать ее периодически.
заведите отдельную тему там и обсудим.

Цитата:
Сообщение от Del
Пишите в топик - постараюсь решить/ответить на вопрос.

Серьёзно занимаюсь вёрсткой с 2006 (до этого было for fun), последний год - PM, подробней проф. пригодность можно оценить в профиле на МойКруг.

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

пока что я видел только варианты "никак", "жабаскриптом", "создать видимость фоновой картинкой" и "что-то такое есть в новых стандартах, но в ИЕ все равно не работает".


    Вверх
Старый 4.09.2010, 20:01   #9
bootman


 
 
Регистрация: 25.11.2007
Адрес: Океан
Сообщений: 4,504
По умолчанию
Цитата:
Сообщение от Del
к сожалению не мой профиль, это к программерам.
вот если - как сверстать какой-то хитрый блок, почему в каком-то браузере что-то криво отображается, как оформить версию для печати, как поместить альтернативное содержимое вместо флеша тем кто смотрит сайт на iPhone, как разметить таблицу чтоб она была читабельной для слепых пользователей и т.п. - это всегда пожалуйста.
Что ж, спасибо за вежливый ответ.

добавлено

Цитата:
Сообщение от dr_mousefly
ну вот, как человек предложил свою помощь, так айда закидаем его тупыми вопросами...

простите, у меня очень тупой вопрос.
"Попрошу не обобщать!" © - не помню откуда.
А если серьезно - неужели никто не встречал такой проблемы - продемонстрировать систематизированную информацию на Джумла-сайте?


    Вверх
Старый 4.09.2010, 20:47   #10
dr_mousefly


 
Регистрация: 10.10.2007
Сообщений: 13,171
 
По умолчанию
Цитата:
Сообщение от bootman
А если серьезно - неужели никто не встречал такой проблемы - продемонстрировать систематизированную информацию на Джумла-сайте?
заведите, пожалуйста, отдельную тему и объясните там, в чем проблема. я ее пока в упор не вижу.


    Вверх
Старый 4.09.2010, 21:33   #11
bootman


 
 
Регистрация: 25.11.2007
Адрес: Океан
Сообщений: 4,504
По умолчанию
Цитата:
Сообщение от dr_mousefly
заведите, пожалуйста, отдельную тему и объясните там, в чем проблема. я ее пока в упор не вижу.
спасибо, именно так и поступлю.
ТСу респект за его тему.


    Вверх
Старый 4.09.2010, 21:38   #12
Del


 
 
Регистрация: 6.12.2003
Адрес: Малиновка-Харьков
Сообщений: 1,382
 
По умолчанию
Цитата:
Сообщение от dr_mousefly
как без таблиц сделать, чтобы две (и более) колонок были всегда одинаковой высоты, автоматически подстариваемой под содержимое максимальной?

пока что я видел только варианты "никак", "жабаскриптом", "создать видимость фоновой картинкой" и "что-то такое есть в новых стандартах, но в ИЕ все равно не работает".
вариант, подразумевающийся стандартами это задание колонкам display: table-cell. Но это не подерживает IE<8. C одной стороны вот-вот уже IE9 выйдет, с другой - как минимум IE7 ещё рано списывать.

Второй вариант - помещать вторую колонку внутрь первой, и через position: absolute растягивать её по высоте и смещать в сторону.
Всё отлично, но один блок вложенный в другой, если это не смущает - отличный вариант. Тем более блоки можно расставить в произвольном порядке (вложенный блок может быть и сверху и снизу).

Два года назад я пробовал сделать следующий финт:
  • для современных браузеров - display: table-cell
  • для IE6/7 - float + width через expression
тогда столкнулся с двумя проблемами: в FF3.1, он при первой загрузке ставил колоки одна под другой, и в IE6/7 бывает приходилось дописывать в expression дополнительные минус пикселей 5, а то колонки не помещались. Из-за этого русскоязычную статью не написал, но есть краткий вариант на бусурманском: http://net-craft.com/blog/2009/12/18...ay-table-cell/

Среди неназванных вами есть ещё способ через padding-bottom: 32768px, margin-bottom: -32768px, но имхо это изврат.

Резюмируя, лучше всего:
  1. или faux columns (подкладываем картинку, имитирующую колонки)
  2. или его вариация с наложением border (у левой колонки border-right, у правой - border-left, правый блок смещаем на -1px влево, рамки накладываются друг на друга - визуально, как-будто кологки)
  3. или одна колонка вложенная в другую и position absolute

Ну и не загорами IE9, закапывание стюардессыIE6/7 и светлое будующее table-cell

Ах, да ещё вариант есть через display: inline-block, но он тоже не без греха.


__________________
[ Коли кожен за себе у своїй хаті скраю – У такого народу і героїв немає! ]
    Вверх
Старый 4.09.2010, 21:53   #13
dr_mousefly


 
Регистрация: 10.10.2007
Сообщений: 13,171
 
По умолчанию
Цитата:
Сообщение от Del
вариант, подразумевающийся стандартами это задание колонкам display: table-cell. Но это не подерживает IE<8. C одной стороны вот-вот уже IE9 выйдет, с другой - как минимум IE7 ещё рано списывать.

Второй вариант - помещать вторую колонку внутрь первой, и через position: absolute растягивать её по высоте и смещать в сторону.
Всё отлично, но один блок вложенный в другой, если это не смущает - отличный вариант. Тем более блоки можно расставить в произвольном порядке (вложенный блок может быть и сверху и снизу).

Два года назад я пробовал сделать следующий финт:
  • для современных браузеров - display: table-cell
  • для IE6/7 - float + width через expression
тогда столкнулся с двумя проблемами: в FF3.1, он при первой загрузке ставил колоки одна под другой, и в IE6/7 бывает приходилось дописывать в expression дополнительные минус пикселей 5, а то колонки не помещались. Из-за этого русскоязычную статью не написал, но есть краткий вариант на бусурманском: http://net-craft.com/labs/2009/12/18...ay-table-cell/

Среди неназванных вами есть ещё способ через padding-bottom: 32768px, margin-bottom: -32768px, но имхо это изврат.

Резюмируя, лучше всего:
  1. или faux columns (подкладываем картинку, имитирующую колонки)
  2. или его вариация с наложением border (у левой колонки border-right, у правой - border-left, правый блок смещаем на -1px влево, рамки накладываются друг на друга - визуально, как-будто кологки)
  3. или одна колонка вложенная в другую и position absolute

Ну и не загорами IE9, закапывание стюардессыIE6/7 и светлое будующее table-cell

Ах, да ещё вариант есть через display: inline-block, но он тоже не без греха.
спасибо, то что нужно.
я грешным делом почему-то думал, что table-cell не работает даже в IE8.
наша жизненная позиция какбе "ваше IE7 не наша проблема".
так что table-cell подходит.


    Вверх
Старый 5.09.2010, 01:26   #14
maxshevtsov

 
Регистрация: 16.03.2009
Адрес: Харьков
Сообщений: 602
 
По умолчанию
<link type="text/css" href="style.css?prefect=1">
Может вопрос тупой, но что может означать предача параметра prefect=1?


    Вверх
Старый 5.09.2010, 02:11   #15
dr_mousefly


 
Регистрация: 10.10.2007
Сообщений: 13,171
 
По умолчанию
Цитата:
Сообщение от maxshevtsov
<link type="text/css" href="style.css?prefect=1">
Может вопрос тупой, но что может означать предача параметра prefect=1?
вопрос точно не по верстке.
может автор хотел сказать "prefetch=1"?
ознчает оно точечку во лбу, если style.css - файло на сервере.
если же CSS генерирует скрипт (ОМФГ??!), то объяснение очевидно внтури него.
есть еще небольшая вероятность, что параметр обрабатывется в .htaccess... зачем??


    Вверх
Старый 5.09.2010, 13:01   #16
Del


 
 
Регистрация: 6.12.2003
Адрес: Малиновка-Харьков
Сообщений: 1,382
 
По умолчанию
Цитата:
Сообщение от dr_mousefly
спасибо, то что нужно.
я грешным делом почему-то думал, что table-cell не работает даже в IE8.
наша жизненная позиция какбе "ваше IE7 не наша проблема".
так что table-cell подходит.
на сайте When can I use есть хорошие таблички "когда же долгожданная фича появится во всех браузерах".

Цитата:
Сообщение от maxshevtsov
<link type="text/css" href="style.css?prefect=1">что может означать передача параметра prefect=1?
вероятно это используется для сброса кеша css на клиенте.
Если цифры в GET-параметре меняются, то пользователь каждый раз будет загружать css заново. Если не меняются - то лишь у части юзеров (афаик у тех кто сидит через прокси, может ещё в каких случаях).
Смысл сего малопонятен - сейчас клиентская оптимизация, борьба за секунды, кеширование, gzip всего и вся это тренд, гугль даже ранжирует тормознутые сайты ниже.


__________________
[ Коли кожен за себе у своїй хаті скраю – У такого народу і героїв немає! ]
    Вверх
Старый 5.09.2010, 13:35   #17
maxshevtsov

 
Регистрация: 16.03.2009
Адрес: Харьков
Сообщений: 602
 
По умолчанию
про кеш не подумал, спасибо


    Вверх
Старый 10.09.2010, 03:23   #18
dr_mousefly


 
Регистрация: 10.10.2007
Сообщений: 13,171
 
По умолчанию
Цитата:
Сообщение от Del
на сайте When can I use есть хорошие таблички "когда же долгожданная фича появится во всех браузерах".
оу!


    Вверх
Старый 12.09.2010, 00:56   #19
Del


 
 
Регистрация: 6.12.2003
Адрес: Малиновка-Харьков
Сообщений: 1,382
 
По умолчанию
там кстати не всё показывается по дефолту, рекомендую попробовать повключать доп. галочки, как минимум "Unofficial / Note".

Вот ещё хорошая ссылочка на эту тему: Compatibility Master Table, тут в отдельности различные css selectors/declarations, js и вообще на этом сайте много полезной инфы.

добавлено

и ах, да! как мог забыть - CSS tests and experiments, over9000 различнейших тестов, проверок, багов и их фиксов. Автор - просто нереальный задрот, в хорошем смысле этого слова!
Если в IE6/7 вдруг происходит какая-то неведомая фигня - надо искать её у Брунилдо, почти наверняка она там описана, протестирована во всех возможных вариациях и к ней найден workaround.


__________________
[ Коли кожен за себе у своїй хаті скраю – У такого народу і героїв немає! ]
    Вверх
Старый 12.09.2010, 03:08   #20
dr_mousefly


 
Регистрация: 10.10.2007
Сообщений: 13,171
 
По умолчанию
кстате, вот такой вопрос.
меня заломало выставлять в каждой ячейке столбца таблицы одну и ту же ширину и выравнивание.
вычитал про тэг col и вставил их перед thead, для каждого столбца прописал ширину и выравнивание.
ширина работает (причем как из аттрибута style так и из аттрибута width), а вот выравнивание - ни в какую. есть ли способ задавать его все-таки единожды для столбца?


    Вверх

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск

Харьков Форум > Hi-Tech... > Программирование и создание сайтов

Быстрый переход


Часовой пояс GMT +2, время: 06:13.


Харьков Форум Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.