Кривое отображение списков в Opera 12.14
|
|
[1] beginner [19.11.2013, 04:30] |
Доброго времени суток всем! Не знаю, может я пишу, не совсем туда, заранее прошу прощения, если это так. У меня такая проблема. С тех пор как я обновила Opera до версии 12.12 (сейчас у меня версия 12.14) мой сайт http://sg12-01.ucoz.ru, точнее те страницы в каталоге рецептов на http://sg12-01.ucoz.ru/load/, на которых используются теги списков, отображаются криво.</br> Для примера: на http://sg12-01.ucoz.ru/load/1/1/11-1-0-1 Я пыталась найти способ как исправить в Интернете, например на форуме my.opera.com. Мне указали на <a href="http://validator.w3.org/unicorn/check?ucn_uri=http://sg12-01.ucoz.ru/load&tests=markup-validator&tests=css-validator&ucn_lang=ru&ucn_task=custom&warning=2&profile=css3&usermedium=all#css-validator">ошибки</a>, но я не совсем поняла, как именно могут повлиять эти ошибки на отображение списков. Сама я пыталась что-то исправить, подбирая доктайп. Но так и не определилась с версией Из различных вариантов выбрала три, как мне показалось наиболее подходящих:</br> < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> и < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> а также: < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. Не подошел ни один. Может, я ошибаюсь, и дело совсем в другом? В последнее время я отказалась от использования списков, пишу, используя другой код, но остались сотни страниц, где они (списки) есть. Сразу все переписать тяжело, а как объяснить посетителям внешний вид сайта? Посоветуйте что-нибудь...
Сообщение отредактировал beginner - Вторник, 19.11.2013, 04:35 |
|
[2] likbezz [19.11.2013, 08:11] |
beginner, Добрый. Ваш пост копи/паст? .. уж и не знаю - разбираться с вашей проблемой или как..
Про доктайп так, ставьте либо HTML5:
Либо XHTML 1.0 Transitional: Код <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
В данном случае - не особо важно, главное что был ) ---
точнее те страницы в каталоге рецептов на http://sg12-01.ucoz.ru/load/, на которых используются теги списков, отображаются криво.</br> Для примера: на http://sg12-01.ucoz.ru/load/1/1/11-1-0-1 Не увидел на данной странице списков.. И не помешал бы скриншот того как “криво” отображаются они.. --- |
|
[3] beginner [20.11.2013, 10:56] |
Добрый день! Прошу прощения за прошлый неудачный пост. Вы уж меня сильно не ругайте:D , просто у меня почти нет опыта общения на форумах, до недавнего не было нужды. Вот скрин другой страницы . Надеюсь здесь понятно, в чем проблема... Я подчеркнула проблемные места. Тут видно, что отсутствуют первые строки текста, заключенного в теги списков и одна строка залезает в меню. Для этой страницы был использован такой код <div class="hrecipe"> <h2 class="fn">Говядина, тушенная по-гусарски</h2> <ul> <li class="ingredient"> <span class="value">900</span> <span class="type">гр.</span> <span class="name">говядины</span> </li> <li class="ingredient"> <span class="value">90</span> <span class="type">гр.</span> <span class="name">жира</span> </li> <li class="ingredient"> <span class="value">20</span> <span class="type">гр.</span> <span class="name">муки</span> </li> <li class="ingredient"> <span class="value">15</span> <span class="type">гр.</span> <span class="name">соли</span> </li> <li class="ingredient"> <span class="value">100</span> <span class="type">гр.</span> <span class="name">репчатого лука</span> </li> <li class="ingredient"> <span class="value">70</span> <span class="type">гр.</span> <span class="name">сухарей</span> </li> <li class="ingredient"> <span class="value">40</span> <span class="type">гр.</span> <span class="name">сливочного масла</span> </li> <li class="ingredient"> <span class="name">специи</span> <span class="amount">по вкусу</span> </li> <li class="ingredient"> <span class="value">150</span> <span class="type">гр.</span> <span class="name">красного соуса</span> </li> </ul> <ul class="instructions"> <li>Зачищенные кострец, огузок или лопатку говядины натереть солью, запанировать в муке и целыми кусками обжарить со всех сторон на раскаленном жире.</li> <li>Переложить в кастрюлю, влить остатки жира, горячую воду, чтоб покрылось мясо, и тушить 2-3 часа при медленном кипении до мягкости.</li> <li>Толченые сухари из белого хлеба натереть со сливочным маслом и очищенным мелко рубленым луком, затем фарш посолить, поперчить.</li> <li>Готовое мясо вынуть и нарезать наискось поперек волокон тонкими ломтиками, причем каждый второй ломтик не дорезать до конца. В надрезы вложить фарш, два ломтика образующих порцию, прижать друг к другу.</li> <li>Порции мяса снова сложить в кастрюлю с соусом, в котором тушилось мясо, добавить <a href="http://sg12-01.ucoz.ru/load/">красного соуса</a> и тушить 10 минут.</li> </ul> </div>
Сообщение отредактировал beginner - Среда, 20.11.2013, 12:01 |
|
[4] likbezz [20.11.2013, 19:54] |
beginner, Добрый ) Вот скрин другой страницы Надеюсь здесь понятно, в чем проблема... Ну так, в общих чертах ) В стили - ПУ » Управление дизайном » Таблица стилей CSS Добавьте строку: Код ul li,ul ol{text-align:left;}
В принципе, в любое место, например на новой строке после: Код .copy {font-size:7pt;} ---
А вообще, в грамотной верстке, выравнивание по ширине применяется достаточно редко, и только если следят за переносами в словах (shy и wbr), висячими предлогами, союзами, а так же, чтобы пробелы в соседних строках не сильно различались по ширине и т. д. и т. п. Короче, серьезно относятся к форматированию текста. Если вы не готовы следить за этим, забудьте про выравнивание по ширине.
Это относится вот к этому: Цитата Code .eText { border-top: 1px solid #DB4D00; padding-bottom: 5px; padding-top: 5px; text-align: justify; } Я бы изменил на --- |
|
[5] beginner [21.11.2013, 05:24] |
Здравствуйте! Большое человеческое спасибо! Стало гораздо лучше. Осталась одна небольшая проблемка. Заголовки немного сползают вниз. Что здесь можно сделать?
Сообщение отредактировал beginner - Четверг, 21.11.2013, 11:52 |
|
[6] likbezz [21.11.2013, 08:12] |
beginner, Здравствуйте! Большое человеческое списибо! Стало гораздо лучше. Доброе) Пожалуйста) Не сомневаюсь))
Осталась одна небольшая проблемка. Заголовки немного сползают вниз. Они не сползают, просто переносятся на новую строку..
..Ну, .. если глобально, то купить монитор побольше .. имхо, сейчас 800x600 мало где используется.
Ну а так, .. вот так: Код .eTitle { background:#ffd800 url(http://likbezz.ru/_source/_rst/2013/14.gif) repeat left bottom; height: auto; min-height:18px; max-height:50px; } То бишь: 1. скачать картинку: http://likbezz.ru/_source/_rst/2013/14.gif 2. Залить себе на сайт. 3. Снова открыть стили и найти строку: Код .eTitle {font-family:Verdana,Arial,Sans-Serif;font-size:12px;font-weight:bold;color:#DB4D00; padding: 3px 0 0 15px; background: url('/.s/t/921/14.gif');height:20px;border:1px solid #FFFF00;} Заменить на: Код .eTitle { font-family:Verdana,Arial,Sans-Serif; font-size:12px; font-weight:bold; color:#DB4D00; border:1px solid #FFFF00; padding:3px 0 0 15px; background:#ffd800 url(http://likbezz.ru/_source/_rst/2013/14.gif) repeat left bottom; height:auto; min-height:18px; max-height:50px; } Где: вместо: http://likbezz.ru/_source/_rst/2013/14.gif поставить ссылку на свою картинку, которую скачали и залили. ..
Как-то так. --- |
|
[7] beginner [21.11.2013, 11:43] |
Еще раз здравствуйте! Значит, так свой сайт вижу только я... А разрешение такое потому, что у меня проблемы со зрением. Но за совет все равно спасибо. |
|
[8] likbezz [21.11.2013, 20:09] |
beginner, Еще раз здравствуйте! Значит, так свой сайт вижу только я... Добрый. Ну почему только, не только, но и те, у кого разрешение монитора меньше 1024..
А разрешение такое потому, что у меня проблемы со зрением. Простите мою бестактность..
Отредактируйте стили, как описано выше, и все будет нормально ) --- |
|
[9] beginner [27.11.2013, 04:32] |
Здравствуйте! Еще раз спасибо. Обязательно воспользуюсь Вашим советом, как только смогу. Добавлено (27.11.2013, 04:32) --------------------------------------------- Здравствуйте! Уже все сделала. Чтобы проверить, ненадолго изменила разрешение монитора, в смысле параметры. Все в порядке. Спасибо. |
|
[10] likbezz [27.11.2013, 04:47] |
beginner, Здравствуйте! Уже все сделала. Добрый) Не-а),
вот это в строке: Код .eTitle {font-family:Verdana,Arial,Sans-Serif;font-size:12px;font-weight:bold;color:#DB4D00; padding: 3px 0 0 15px; background: url(http://sg12-01.ucoz.ru/14.gif);height:20px;border:1px solid #FFFF00;} заменить на: Код min-height:18px;max-height:50px; ...
|
|
|
[12] likbezz [03.12.2013, 05:15] |
beginner, Здравствуйте! Не заметила, близорукая! Доброй ночи) [Ctrl] [+] очень помогает)
Кстати, у меня возник еще один вопрос. Я попыталась определиться с доктайпом. Вот так выглядит сайт, точнее меню категорий, без доктайпа. То есть одинаково. Но в обоих случаях хуже, чем без доктайпа. Почему? Потому что шаблон старый, и написан в cтиле HTM 4.1 - лет шесть назад. Ну и системные шаблоны вообще не отличаются “грамотностью”. Практически в каждом (не видел ни одного абсолютно ровного, но допускаю) присутствуют грубые ошибки. Без доктайпа они трактуются по разному в разных браузерах, в одних лучше, в других хуже. Некоторые ошибки просто игнорируются. Прописывая доктайп, вы автоматически соглашаетесь с правилами написания HTML и CSS. Браузеры уже не игнорируют грубые нарушения, и трактуют код так, как и должен трактоваться. Отсюда и выплывают изначальные неровности в вашем шаблоне. --- |
|
[13] true [03.12.2013, 05:22] |
_http://www.dejurka.ru/web-design/doctype-yesterday-and-today/ о доктайпе
а если не указан,то браузер читает страницу по умолчаниюДобавлено (03.12.2013, 05:20) --------------------------------------------- _http://phpmove.ru/html-doctype.html Добавлено (03.12.2013, 05:22) --------------------------------------------- Большинство начинающих верстальщиков просто копируют аккуратно строчку doctype из какого-нибудь файла. Либо соглашаются с тем, что им предлагает редактор типа Dreamweaver. А наиболее самоуверенные, заметив, что страничка работает и без него, вообще не указывают doctype, решив, что это — какой-то пережиток прошлого. Натыкаясь в комментариях на фразы типа «зачем в html5 придумали еще какой-то doctype», решил напомнить (а кому-то и рассказать), откуда у doctype ноги растут.
Сегодня doctype выглядит очень просто:
<!DOCTYPE html> |
|
[14] beginner [03.12.2013, 05:57] |
Еще раз здравствуйте! Спасибо, а делать то что? Кстати, возвращаясь к предыдущему вопросу... Я все-таки исправила css код. Теперь вроде бы нормально...:D |
|
[15] true [03.12.2013, 06:05] |
2 варианта
либо писать доктип и делать шаблон по стандарту , либо оставить как есть без доктипа и в каждой версии и виде браузера у пользователей сайт будет виден немного по разному |
|