Фильтр по:
  

Кривое отображение списков в Opera 12.14

Оптимизация дизайна сайта под различные браузеры ...

  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Оптимизация дизайна сайта под различные браузеры ... » Кривое отображение списков в Opera 12.14
Кривое отображение списков в Opera 12.14
Дата: Вторник, 19.11.2013, 04:30 |
Майор
Группа: Проверенные
Сообщений: 82
Награды: 0
Репутация: 0
Статус: Offline


 Доброго времени суток всем! Не знаю, может я пишу, не совсем туда,
заранее прошу прощения, если это так. У меня такая проблема.
С тех пор как я обновила 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
 
Дата: Вторник, 19.11.2013, 08:11 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 beginner,
Добрый.
Ваш пост копи/паст? .. уж и не знаю - разбираться с вашей проблемой или как..

Про доктайп так, ставьте либо HTML5:
Код
<!DOCTYPE html>


Либо XHTML 1.0 Transitional:
Код
<!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:30:24
точнее те страницы в каталоге рецептов на http://sg12-01.ucoz.ru/load/,
на которых используются теги списков, отображаются криво.</br>
Для примера:
на http://sg12-01.ucoz.ru/load/1/1/11-1-0-1

Не увидел на данной странице списков..
И не помешал бы скриншот того как “криво” отображаются они..
---

 
Дата: Среда, 20.11.2013, 10:56 |
Майор
Группа: Проверенные
Сообщений: 82
Награды: 0
Репутация: 0
Статус: Offline


 Добрый день! Прошу прощения за прошлый неудачный пост.
Вы уж меня сильно не ругайте: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>
Прикрепления: 3822435.jpg (111.5 Kb)

Сообщение отредактировал beginner - Среда, 20.11.2013, 12:01
 
Дата: Среда, 20.11.2013, 19:54 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 beginner,
Добрый )
Цитата beginner, Ср, 20.11.2013, 10:56:00
Вот скрин другой страницы
Надеюсь здесь понятно, в чем проблема...

Ну так, в общих чертах )
В стили - ПУ » Управление дизайном » Таблица стилей 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;
}

Я бы изменил на
Код
text-align:left;

---

 
Дата: Четверг, 21.11.2013, 05:24 |
Майор
Группа: Проверенные
Сообщений: 82
Награды: 0
Репутация: 0
Статус: Offline


 Здравствуйте! Большое человеческое спасибо! Стало гораздо лучше.
Осталась одна небольшая проблемка. Заголовки немного сползают вниз.

Что здесь можно сделать?
Прикрепления: 9267110.jpg (108.9 Kb)

Сообщение отредактировал beginner - Четверг, 21.11.2013, 11:52
 
Дата: Четверг, 21.11.2013, 08:12 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 beginner,
Цитата beginner, Чт, 21.11.2013, 05:24:54
Здравствуйте! Большое человеческое списибо! Стало гораздо лучше.

Доброе)
Пожалуйста)
Не сомневаюсь))

Цитата beginner, Чт, 21.11.2013, 05:24:54
Осталась одна небольшая проблемка. Заголовки немного сползают вниз.

Они не сползают, просто переносятся на новую строку..

Цитата beginner, Чт, 21.11.2013, 05:24:54
Что здесь можно сделать?

..Ну, .. если глобально, то купить монитор побольше .. имхо, сейчас 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
поставить ссылку на свою картинку, которую скачали и залили.
..

Как-то так.
---

 
Дата: Четверг, 21.11.2013, 11:43 |
Майор
Группа: Проверенные
Сообщений: 82
Награды: 0
Репутация: 0
Статус: Offline


 Еще раз здравствуйте! Значит, так свой сайт вижу только я...
А разрешение такое потому, что у меня проблемы со зрением.
Но за совет все равно спасибо.

 
Дата: Четверг, 21.11.2013, 20:09 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 beginner,
Цитата beginner, Чт, 21.11.2013, 11:43:18
Еще раз здравствуйте! Значит, так свой сайт вижу только я...

Добрый.
Ну почему только, не только, но и те, у кого разрешение монитора меньше 1024..

Цитата beginner, Чт, 21.11.2013, 11:43:18
А разрешение такое потому, что у меня проблемы со зрением.

Простите мою бестактность..

Отредактируйте стили, как описано выше, и все будет нормально )
---

 
Дата: Среда, 27.11.2013, 04:32 |
Майор
Группа: Проверенные
Сообщений: 82
Награды: 0
Репутация: 0
Статус: Offline


 Здравствуйте! Еще раз спасибо. Обязательно воспользуюсь Вашим советом, как только смогу.

Добавлено (27.11.2013, 04:32)
---------------------------------------------
Здравствуйте! Уже все сделала. Чтобы проверить, ненадолго изменила разрешение монитора,
в смысле параметры. Все в порядке. Спасибо.

 
Дата: Среда, 27.11.2013, 04:47 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 beginner,
Цитата beginner, Ср, 27.11.2013, 04:32:25
Здравствуйте! Уже все сделала.

Добрый)
Не-а),



вот это
Код
height:20px;

в строке:
Код
.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;

...
Прикрепления: 5568870.png (53.1 Kb)

 
Дата: Вторник, 03.12.2013, 04:45 |
Майор
Группа: Проверенные
Сообщений: 82
Награды: 0
Репутация: 0
Статус: Offline


 Здравствуйте! Не заметила, близорукая! wink
Поторопилась отчитаться... biggrin Исправлю...:D
Кстати, у меня возник еще один вопрос.
Я попыталась определиться с доктайпом.
Без него сайт, точнее меню категорий выглядит нормально.
Вот так с доктайпом HTML5

А вот так с доктайпом XHTML 1.0 Transitional
$
То есть одинаково. Но в обоих случаях хуже, чем без доктайпа.
Почему?
Прикрепления: 9558242.jpg (113.7 Kb)

Сообщение отредактировал beginner - Вторник, 03.12.2013, 06:07
 
Дата: Вторник, 03.12.2013, 05:15 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 beginner,
Цитата beginner, Вт, 03.12.2013, 04:45:21
Здравствуйте! Не заметила, близорукая!

Доброй ночи)
[Ctrl] [+] очень помогает)

Цитата beginner, Вт, 03.12.2013, 04:45:21
Кстати, у меня возник еще один вопрос.
Я попыталась определиться с доктайпом.
Вот так выглядит сайт, точнее меню категорий, без доктайпа. То есть одинаково. Но в обоих случаях хуже, чем без доктайпа.
Почему?

Потому что шаблон старый, и написан в cтиле HTM 4.1 - лет шесть назад. Ну и системные шаблоны вообще не отличаются “грамотностью”.
Практически в каждом (не видел ни одного абсолютно ровного, но допускаю) присутствуют грубые ошибки.
Без доктайпа они трактуются по разному в разных браузерах, в одних лучше, в других хуже. Некоторые ошибки просто игнорируются.
Прописывая доктайп, вы автоматически соглашаетесь с правилами написания HTML и CSS. Браузеры уже не игнорируют грубые нарушения, и трактуют код так, как и должен трактоваться.
Отсюда и выплывают изначальные неровности в вашем шаблоне.
---

 
Дата: Вторник, 03.12.2013, 05:22 |
Генерал-майор
Группа: Проверенные
Сообщений: 408
Награды: 2
Репутация: 8
Статус: Offline


 _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>

 
Дата: Вторник, 03.12.2013, 05:57 |
Майор
Группа: Проверенные
Сообщений: 82
Награды: 0
Репутация: 0
Статус: Offline


 Еще раз здравствуйте! Спасибо, а делать то что?
Кстати, возвращаясь к предыдущему вопросу...
Я все-таки исправила css код. Теперь вроде бы нормально...:D

 
Дата: Вторник, 03.12.2013, 06:05 |
Генерал-майор
Группа: Проверенные
Сообщений: 408
Награды: 2
Репутация: 8
Статус: Offline
Цитата beginner, Вт, 03.12.2013, 05:57:56
а делать то что?


2 варианта

либо писать доктип и делать шаблон по стандарту ,
либо оставить как есть без доктипа и в каждой версии и виде браузера у пользователей сайт будет виден немного по разному

 
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Оптимизация дизайна сайта под различные браузеры ... » Кривое отображение списков в Opera 12.14
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:


Мобильная версия