Посмотрите и подскажите, как сделать лучше

beze · February 22, 2009

Здравствуйте уважаемые знатоки

Делал сайт во программе Фронтпейдж. Теперь переписываю вручную. убедился - так лучше.

Не могли бы вы посмотреть переделанную страничку http://www.po-miry.ru/POHOD/anekdoti.htm и сказать - что еще надо сделать. А косяков у меня хватает - хотя бы как выровнять диалоги, если они начинаются с красной строки

Заранее благодарен

rus · February 22, 2009

Непонятна структура:

<br> Альпинизм</br>

<br> Биатлон</br>

Если это меню, то почему нет ссылок, и почему оформлено через <br>, когда можно и через:

<ul>

</ul>

Очень много:

-

Можно попробовать так:

<style type="text/css">
LI {
 list-style-type: none; /* Убираем маркеры у списка */
}
LI:before {
 content: "\002D"; /* Добавляем в качестве маркера символ "плюс" */
}
</style>

<ul>
<li>Тренер утешает проигравшего боксера:</li>
<li>Но в третьем раунде ты своего противника здорово напугал.</li>
<li>Чем это?</li>
<li>Ему показалось, что он тебя убил.</li>
<li>Потерпев поражение, боксер возвращается в раздевалку. Нос у него разбит, скула свернута, чувствовал он себя отвратительно.</li>
<li>Но тут к нему подошел тренер и сказал:</li>
<li>Я принес отличные новости!</li>
<li>Какие же? – прошептал еле живой боксер.</li>
<li>Мне удалось договориться о матче-реванше на завтра.</li>
</ul>

Ну а если с отступами, то завернуть тире (-) в тег <span> вместо предложеного мною способа и дать ему свои стили.

З.Ы. оттолкнуться (так сказать пища к размышлению) можно от этих статей:

Применение тега <span> в списках.

Изменить стандартный маркер на спецсимвол.

Edited February 22, 2009 by rus

Glebr · February 23, 2009

Мне кажется что будет лучше, если каждый блок(меню и тд) будет в рамке(border)

beze · February 24, 2009

Тег BR у меня потому, что я немножко пользовлся Дримвивером и это он сделал.

По ссылкам к Рецептам списоков я прошел и увидел, что в конце каждого рецепта написано Учтите, что псевдоэлемент before и атрибут content не поддерживаются в браузере Internet Explorer ни в одной его версии. Зато прекрасно работают в Firefox и Opera.

Я, конечно, чайник, но уже усвоил одну истину - написанное мной должно адекватно отображаться во всех браузерах. А ведь у большинства пользователей стоит именно ИЕ.

Так что должен быть другой путь. Или я не прав?

Vlad · February 24, 2009

С тире конечно некрасиво все сделано. Какие-то отступы, пробелы лишние. Почему просто не написать так:

— Папа, я больше не пойду с тобой на санках кататься.

— Заткнись и тащи…

И универсальнее и красивее получается.

psywalker · February 24, 2009

Не мне судить конечно, но я бы сделал по проще при таком раскладе: :lol:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Strannik</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin: 0; padding: 0;}
body { font: bold 0.625em Tahoma, Geneva, sans-serif; background: #ffffcc; min-width: 75em; }
a { text-decoration: none; font-size: 1.5em;}
a:hover { text-decoration: underline;}
h1 { background:url(img/zagolovok_stranik.jpg); text-align: center; padding: .5em; color: #ccffcc; font-size: 5em;}
h2 { text-align: center; font-size: 2.9em; color: #718fca; }
h3 { font-size: 1.4em;}
#head { overflow: hidden;}
#topmenu li { float: right; list-style: none; margin: .5em 1em;}
#topmenu li a { color: #f00;}
#left{ float: left; width: 17em;}
#right{ margin-left: 20em;}
#right p{ line-height: 1.3em; margin: .5em 0; font: 1.4em Arial, Helvetica, sans-serif;}
.btleftmenu { border-top: .4em solid #008000; padding-top: 1em;}
.tpleftmenu a, .btleftmenu a { display: block; }
.tpleftmenu a { color: #03F; margin: .5em 0; }
.btleftmenu a { color: #663333; line-height: 1.1em; }
#footer{ width: 100%; clear: left; margin: 1em; border-top: #03F solid .2em; padding: .5em; margin: 1em; text-align: center;}
#footer a{ color: #f00; font-size: 1em; text-decoration: underline;}
</style>
</head>
<body>
<div id="head">
<h1>Вечный странник</h1>
<ul id="topmenu">
<li><a href="">Форумы</a></li>
<li><a href="">Кулинария</a></li>
<li><a href="">Душевное здоровье</a></li>
<li><a href="">Спорт Туризм</a></li>
<li><a href="">Главная</a></li>
</ul>
</div>
<div id="left">
<p class="tpleftmenu">
<a href="">Новости</a>
<a href="">Расписание походов</a>
<a href="">Статья о туризме</a>
<a href="">Статья о спорте</a>
</p>
<p class="btleftmenu">
<a href="">Автогонки</a>
<a href="">Альпинизм</a>
<a href="">Биатлон</a>
<a href="">Бокс</a>
<a href="">Велоспорт</a>
<a href="">Водные лыжи</a>
<a href="">Гимнастика</a>
<a href="">Горнолыжный спорт</a>
<a href="">Городки</a>
<a href="">Гребля</a>
<a href="">Грибники</a>
<a href="">Дайвинг</a>
<a href="">Комары</a>
<a href="">Конный спорт</a>
<a href="">Легкая атлетика</a>
<a href="">Лыжный спор </a>
<a href="">Ориентирование</a>
<a href="">Парашютный спорт</a>
<a href="">Плавание</a>
<a href="">Прыжки в воду</a>
<a href="">Рыбалка</a>
<a href="">Туризм</a>
<a href="">Тяжелая атлетика</a>
<a href="">Горнолыжный спорт</a>
<a href="">Фигурное катание</a>
<a href="">Физкультура</a>
<a href="">Футбол</a>
<a href="">Хоккей</a>
<a href="">Шахматы</a>
<a href="">Экскурсовод</a>
</p>
</div>
<div id="right">
<h2>Анекдоты</h2>
<p> Из дневника полярной экспедиции: «15 января. Идем третью неделю. Андрюшка слабенький, боюсь, не выдержит. Да и нас в сани много набилось…».
Я знаю каратэ, джиу-джитсу, дзюдо, самбо и много других страшных слов!
Кто в пробках постоял, тот над мопедом не смеется!
- Папа, я больше не пойду с тобой на санках кататься.
- Заткнись и тащи…
Если у вас в крови гемоглобин, а в моче – моча, то вам в спорте делать нечего!
Новости спорта. Вчера студенты физкультурного техникума Петров А.А. и Сидоров В.В. установили новый мировой рекорд для закрытых помещений. Закрывшись в комнате общежития, они за сутки выпили 17 ящиков пива.
К браткам приходят два чувака:
- Мы слышали, что вам нужны бывшие спортсмены?
- Ну нужны, а вы кто?
- Я фигурист, а это – чемпион области по шахматам!
Разговор геологов:
- Зачем ты фотографию тещи с собой таскаешь?
- Сам посуди, тут, в поле, комары, дождь, холод… А на нее посмотрю – господи, хорошо-то как!</pre>
<h3>Автогонки</h3>
<p> Эстонский комментатор автогонок:
- С-с-т-а-а-ар-р-т…. Ф-и-и-н-н-н-и-и-ш-ш-ш…
На соревнованиях «Кэмэл Трофи» победил украинский экипаж на обычном «Запорожце» без двигателя. Как объяснили спортсмены – так его легче толкать.</p>
<h3>АЛЬПИНИЗМ</h3>
<p> <strong>Объявление.</strong> Требуется в отъезд опытная няня, умеющая варить манную кашу и петь колыбельные песни, желательно со своим альпенштоком.
База альпинистов.</p>
<p><strong>Объявление.</strong>
«В альплагере сезон скидок. Скидывается каждый десятый».
Сорвались в пропасть два альпиниста – оптимист и пессимист.
Пессимист:
- Падаю…
Оптимист:
- Лечу!!!
Инструктор в горах говорит туристам:
- Это очень опасный склон. И если вы сорветесь, не забудьте в полете посмотреть направо: прекрасный вид открывается!</p>
<h3>БИАТЛОН</h3>
<p>Требуется в отъезд опытная няня, умеющая варить манную кашу и петь колыбельные песни, желательно со своим альпенштоком.База альпинистов.</p>
<p>Требуется в отъезд опытная няня, умеющая варить манную кашу и петь колыбельные песни, желательно со своим альпенштоком.База альпинистов.</p>
<h3>БОКС</h3>
<p>Требуется в отъезд опытная няня, умеющая варить манную кашу и петь колыбельные песни, желательно со своим альпенштоком.База альпинистов.</p>
<p>Требуется в отъезд опытная няня, умеющая варить манную кашу и петь колыбельные песни, желательно со своим альпенштоком.База альпинистов.</p>
</div>
<div id="footer">
<p>Все приличные люди при использовании материалов с этого сайта делают на него ссылку. А при перепечатке и гонорар высылают.</p>
<p>А вы пишите письма мелким почерком, поскольку места мало в рюкзаке <a href="">po-miry@mail.ru</a></p>
</div>
</body>
</html>

Edited February 24, 2009 by psywalker

beze · February 24, 2009

С тире конечно некрасиво все сделано. Какие-то отступы, пробелы лишние. Почему просто не написать так:
— Папа, я больше не пойду с тобой на санках кататься.
— Заткнись и тащи…
И универсальнее и красивее получается.

Извините, наверное я очень тупой, но в Ворде я так и делаю - просто. И вы это в Ворде печатали. А здесь у меня не получается. Или имеется в виду убрать красную строку. Тогда всё решается

И никто толком не может сказать, как это выправить. То есть люди знают, вот psywalker какой код написал. Мне, чтобы все понять, что он в стили забли, надо неделюучебники читать, но когда я скопировал этот код и вставил в блокнот, то опять получилась какая-то бяка.

И списком, как предлагает товарищ Рус не получается.

Вот его образец, немного переделанный

<body>

Тренер утешает проигравшего боксера:

<ul><li>Но в третьем раунде ты своего противника здорово напугал.</li>

<li>Ему показалось, что он тебя убил.</li></ul>

Потерпев поражение, боксер возвращается в раздевалку. Нос у него разбит, скула свернута, чувствовал он себя отвратительно.<br />

Но тут к нему подошел тренер и сказал:

<ul><li>Я принес отличные новости!</li>

<li>Какие же? – прошептал еле живой боксер.</li>

<li>Мне удалось договориться о матче-реванше на завтра.</li>

</ul>

</body>

В коде все нормально, но в браузере между первой и второй строчками пустая строка. Очевидно её LI даёт

Edited February 24, 2009 by beze

Vlad · February 25, 2009

psywalker, ничего сложного не написал, наоборот, предлагает упростить код, и я того же мнения. Зачем лишние списки вводить, когда имеется обычный текст, значит списки долой - оформить все с помощью тегов p и br. Это конечно не очень правильно, но для начала сойдет.

<p>Сорвались в пропасть два альпиниста — оптимист и пессимист.<br>

Пессимист:<br>

— Падаю…<br>

Оптимист:<br>

— Лечу!!!</p>

Либо так сделать. Тогда каждый анекдот можно будет оформить через класс next, да и абзацы регулировать внутри этого блока легче.

<p>Сорвались в пропасть два альпиниста — оптимист и пессимист.</p>

<p>Пессимист:</p>

<p>— Падаю…</p>

<p>Оптимист:</p>

</div>

Sign In

Посмотрите и подскажите, как сделать лучше

Recommended Posts

beze

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Glebr

Link to comment

Share on other sites

beze

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

beze

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Обсуждения

Forums

Important Information