Ссылки не окрашиваются, адекватность изображения в браузерах исчезла и вообще...

beze · February 9, 2009

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

Раньше делал сайт в программе Фронтпейдж. Но весомые замечания гуру этого форума убедили меня что лучше делать своими руками.

Для начала я начал переделывать страничку своего сайта http://www.po-miry.ru/POHOD/PVD/raspisaniei.htm поскольку она была самая проблемная. Действительно, сейчас она стала гораздо лучше, но у меня появились вопросы, может кто и ответит

1) У меня ссылки в одной горизонтальной ячейке и двух вертикальных. Я хочу, чтобы они были разных цветов. Но в Опере они все зеленые, а в ИЕ непонятно какие. Как выполнить задуманное?

2) Написал, чтобы при наведении мышки ссылка подчеркивалась. В Опере подчеркивается. в ИЕ нет. Почему?

3) Вместо слова телефон вставил рисунок телефона из Webdings. В Опере вместо этого буква Е. Из какого шрифта можно взять лелефон, чтобы он читался всеми браузерами?

4) Базовые таблицы с расписанием походов вставлял из Ворда. Но там получалось слишком много мусора. Сегодня первую таблицу- Прогулки в лесопарках переделал, вставил - и у меня поплыл при просмотре в Фронтпейдж весь верх. Каждая ячейка стала шире в два раза. Но, тем не менее, при просмотре в браузере, ИЕ опказывает все, как записано в коде, а вот у Оперы все-равно табличка заголовка немного шире. Что делать?

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

Victor Ananiev · February 9, 2009

Для начала все стили вынести в шапку, тег <style></style> должен быть в ШАПКЕ а у тебя он в середине, с подчеркиванием, попробуй так:

A
{
 text:decoration:none;
}
A:hover
{
 text-decoration:underline;
}

с цветами туда же! и не забываем про наследование)

Телефон нужно вставить в фотошоп и сохранить как картинку.

Edited February 9, 2009 by Victor Ananiev

beze · February 10, 2009

Для начала все стили вынести в шапку, тег <style></style> должен быть в ШАПКЕ а у тебя он в середине, с подчеркиванием, попробуй так:

извините, но что касается приводимого кода, то он ничем не отличается от моего, разве что выстроен в столбик. Соответсвенно, при замене моего кода вашим ничего не произошло (я это знал, но надеялся на чудо - для меня как чайника верстка сайтов - это такое шаманство

с цветами туда же! и не забываем про наследование

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

Vlad · February 10, 2009

С ссылками какой-то бардак. Зачем к ссылке применять три разных цвета подряд?

A:link {text-decoration: none; }

a:hover {text-decoration:underline;}

a:link {color: red}

a:active {color: red}

a:link {color: blue}

a:link {color: green}

beze · February 10, 2009

С ссылками какой-то бардак. Зачем к ссылке применять три разных цвета подряд

Я бы так и сделал, но у меня три групы ссылок в трех ячейках таблицы. Хотелось бы, тобы они отличались. Пусть цвет остаётся одним у активной и пассивной ссылки, главное, чтобы оп цвету отличались группы. Для этого надо применить классы, как я понимаю. Но как это сделать? Обычно в книгах примеры отсятся к заголовкам. Там конкретно Н1, Н2. А здесь?

Сейчас сижу, экспериментирую, но все это методом тыка. Книги дают только общие зания. Действительные знания достигаются на практике и этом форуме

beze · February 10, 2009

Вот, попробовал написать. Все ссылки подчеркнуты , хотя должны быть только при наведении мышки, и по прежнему с цветами путаница. В Опере все синее, а в ИЕ красное, а при наведении синее

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>эксперимент</title>

.meny a:link {color: red; text-decoration: none;}

a:hover{color: red;text-decoration:underline;}

.meny1 a:link {color: blue; text-decoration: none;}

a:hover{color: blue;text-decoration:underline;}</style>

</head>

<tr>

Вечный странник</td>

</tr>

<tr>

<style>

</style>

Главная</a>

Спорт Туризм</a> Душевное здоровье

Кулинария Форумы</td>

</tr>

<tr>

<a href="../novosti.htm">Новости</a>

Статьи о туризме

Статьи о спорте

Анекдоты

Расписание автовокзалов</td>

Расписание

ПВД</td>

</tr>

Searcher · February 10, 2009

Что ж за книги такие вы читаете?!

Где вы в книгах видели такое class=".meny"? Здесь имя класса должно быть без точки, а в описании стилей точка нужна чтобы обозначить то что это класс, а не тэг или идентификатор.

Потом это:

.meny a:link {color: red; text-decoration: none;}
a:hover{color: red;text-decoration:underline;}
.meny1 a:link {color: blue; text-decoration: none;}
a:hover{color: blue;text-decoration:underline;}

Подумайте логически. Первая строчка задала стиль всех ссылок внутри контейнера с классом meny. Вторая строка задала стиль ссылок когда к ним подведена мышка для всего документа, поскольку перед a:hover нет имени класса. Третья строка аналогично первой только для контейнера meny1. А четвертая строка опять задает стиль ссылок под мышью для всего документа. Вы явно хотели добиться не этого. Но как же дать понять броузеру что 2-ая и 4-ая строки относятся не ко всему документу а к контейнерам meny и meny1 соответственно? Ответте на этот вопрос.

И почитайте про классы и про контекстные селекторы

beze · February 10, 2009

Спасибо товарищ Searcher. Почитал. Сделал, как вы советовали. Страничка уже в интернете и можно посмотреть. Однако по-прежнему несколько ссылок Как в ИЕ, так и в Опере окрашены в пурпурный цвет (а я такого вообще не писал) и, вдобавок подчеркнуты постоянно. Я поставил верхнее и нижнее подчеркивание, а в ИЕ осталось толко верхнее. Как все это исправить?

И остаются вопросы, на которые еще не дали ответов. Дублирую их снова

3) Вместо слова телефон вставил рисунок телефона из Webdings. В Опере вместо этого буква Е. Из какого шрифта можно взять лелефон, чтобы он читался всеми браузерами? ( тут один из знатоков посоветовал вставить фото, но не хочется пока с ними связываться. Может есть символьный шрифт, отображаемый адекватно во всех браузерах?)

4) Базовые таблицы с расписанием походов вставлял из Ворда. Но там получалось слишком много мусора. Сегодня первую таблицу- Прогулки в лесопарках переделал, вставил - и у меня поплыл при просмотре в Фронтпейдж весь верх. Каждая ячейка стала шире в два раза. Но, тем не менее, при просмотре в браузере, ИЕ показывает все, как записано в коде, а вот у Оперы все-равно табличка заголовка немного шире. Что делать?

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

Edited February 10, 2009 by beze

rus · February 10, 2009

Из приведенного кода вот что не правильно:

a:hover{color: red;text-decoration:underline;}

a:hover{color: blue;text-decoration:underline;}

А правильно так:

.meny a:hover{color: red;text-decoration:underline;}

.meny1 a:hover{color: blue;text-decoration:underline;}

А то получается так, что браузер не понимает к какому классу ему ховер применить.

З.Ы пурпурный цвет - это цвет посещенной ссылки (a:visited) и по умолчанию он такого цвета.

Edited February 10, 2009 by rus

Searcher · February 10, 2009

Броузер понимает рисунки форматов gif, jpeg, png, ico. А что такое "рисунок телефона из Webdings" ?? это не рисунок, это символ шрифта. Для того чтобы в броузере увидеть символ из шрифта, надо выводить его именно этим шрифтом. Но есть проблема, у посетителя в системе может и не стоять такой шрифт, тогда броузер подбирает другое шрифт. И символ с этим кодом уже будет другим. Значек телефона надо нарисовать в графическом редакторе, сохранить в понятном броузеру формате и вставлять в документ тэгом <img>.

А для того чтобы понять что там у вас с таблицей нужен ваш html-код. Почитайте раздел "шаг за шагом". Там все просто и с примерами объяснено и про таблицы и про изображения. Разберитесь в том как работают примеры, попробуйте повторить сами. Поймите саму логику html и css, тогда и проблем будет меньше.

beze · February 10, 2009

А для того чтобы понять что там у вас с таблицей нужен ваш html-код.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Походы выходного дня</title>

.meny a:link {color: red; text-decoration: none;}

.meny a:hover{color: red;text-decoration:underline overline;}

.meny1 a:link {color: blue; text-decoration: none;}

.meny1 a:hover{color: blue;text-decoration:underline overline;}

.meny2 a:link {color: green; text-decoration: none;}

.meny2 a:hover{color: green;text-decoration:underline overline;}

</style>

</head>

<tr>

Спорт. Туризм</td>

</tr>

<tr>

Главная</a>

Спорт Туризм</a>

Душевное здоровье </a>

Кулинария

Форумы</a>

</td>

</tr>

Новости</a>

Статьи о туризме</a>

Статьи о спорте</a>

Анекдоты</a>

<a href="bereza.htm">Расписание автовокзалов</a></td>

Расписание

ПВД</td>

</tr>

<tr>

Анонсы походов

<a href="lesopark.htm">Прогулки по лесопаркам</a></td>

Все походы проводятся городским турклубом города Ёбурга.

Все инструктора – общественники.

В отличие от турфирм, турклубу за участие в походе, платить не надо.

Телефон турклуба:

É3-59-86-83É3-59-86-52

Время, приводимое в расписании – местное.

При Т воздуха ниже -200C на 6 часов утра лыжные походы отменяются

</td>

</tr>

<caption>ПРОГУЛКИ В ЛЕСОПАРКАХ</caption>

<tr>

<td>Вт. четв. суб</td><td>ЦПКиО-парк Лесоводов России, 10 км</td><td>Логинова</td><td>Вход в парк</td><td>10.00</td>

</tr>

<tr>

<td>Среда, воскр</td><td>Юго-Западный лесопарк, 10 км</td><td>Кунгурцева</td><td>Конечная ост. Громова, за пер. мостом</td><td>10.00</td>

</tr>

<tr>

<td>Воскр</td><td>Шарташский лесопарк, 8 км</td><td>Марфина</td><td>Ост «Каменные палатки»</td><td>11.00</td>

</tr>

<tr>

<td>Cубб</td><td>Окрестности ст. Палкино, 10 км</td><td>Швейкина </td><td>5-й вагон эл-ки «Св-ск-Шаля», отпр</td><td>9.00</td>

</tr>

</table>

Вот из-за этой таблички все и полетело. До этого была мощная таблица, сделанная во Фронтпейдже. Занимала она раз в пять больше места, но ничего не ползло и все было нормально.

Советы РУС учту, сейчас вставлю цвет посещенной ссылки

Searcher · February 10, 2009

Насколько из этого кода можно судить вы табличку вставили в другую табличку. Но вставили, похоже, между строками. Нельзя ничего вставлять после закрывающего строку тэга </tr>. Либо новая строка с ячейками того же количества что и в предыдущей строке <tr><td</td>...</tr> либо конец таблицы </table>. А вложенную таблицу можно вставлять только в ячейку между <td> и </td>

Можно объединять столбцы если надо вставить что-то большое параметром colspan.

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

А вообще, старайтесь избавляться от мощных таблиц. Особенно там, где таблица используется не по назначению. У вас вся верстка на таблицах - это плохо. И размер документа увеличивается, и разобраться в коде сложно, в том числе и броузеру :blink: Таблица должна использоваться только для табличных данных. Это ведь логично, а в программировании все должно быть логично

Edited February 10, 2009 by Searcher

beze · February 11, 2009

Спасибо Searcher. В общении с вами я расту ( умственно). Действительно, вставив две строчки, кторые я здесь выделил красным, все вернулось на круги своя, как в визуальном редакторе, так и в ИЕ. А вот Опера показывает по-прежнему растянутый заголовок, можете зайти на страничку, убедиться.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Походы выходного дня</title>

.meny a:link {color: red; text-decoration: none;}

.meny a:hover{color: red;text-decoration:underline overline;}

.meny a:visited {color: red; text-decoration: none;}

.meny1 a:link {color: blue; text-decoration: none;}

.meny1 a:hover{color: blue;text-decoration:underline overline;}

.meny1 a:visited {color: blue; text-decoration: none;}

.meny2 a:link {color: green; text-decoration: none;}

.meny2 a:hover{color: green;text-decoration:underline overline;}

.meny2 a:visited {color: green; text-decoration: none;}

td {padding=5px;}

</style>

</head>

<tr>

Спорт. Туризм</td>

</tr>

<tr>

Главная</a>

Спорт Туризм</a>

Душевное здоровье </a>

Кулинария

Форумы</a>

</td>

</tr>

Новости</a>

Статьи о туризме</a>

Статьи о спорте</a>

Анекдоты</a>

<a href="bereza.htm">Расписание автовокзалов</a></td>

Расписание

ПВД</td>

</tr>

Анонсы походов

<a href="lesopark.htm">Прогулки по лесопаркам</a></td>

Все походы проводятся городским турклубом города Ёбурга.Все инструктора – общественники.

В отличие от турфирм, турклубу за участие в походе, платить не надо.

Телефон турклуба: 3-59-86-83 (3-59-86-52)

Время, приводимое в расписании – местное.

При Т воздуха ниже -200C на 6 часов утра лыжные походы отменяются

</td>

</tr>

<tr>

<caption>ПРОГУЛКИ В ЛЕСОПАРКАХ</caption>

<tr>

<td>Вт. четв. суб</td><td>ЦПКиО-парк Лесоводов России, 10 км</td><td>Логинова</td><td>Вход в парк</td><td>10.00</td>

</tr>

<tr>

<td>Среда, воскр</td><td>Юго-Западный лесопарк, 10 км</td><td>Кунгурцева</td><td>Конечная ост. Громова, за пер. мостом</td><td>10.00</td>

</tr>

<tr>

<td>Воскр</td><td>Шарташский лесопарк, 8 км</td><td>Марфина</td><td>Ост «Каменные палатки»</td><td>11.00</td>

</tr>

<tr>

<td>Cубб</td><td>Окрестности ст. Палкино, 10 км</td><td>Швейкина </td><td>5-й вагон эл-ки «Св-ск-Шаля», отпр</td><td>9.00</td>

</tr>

</table>

ФЕВРАЛЬ

а дальше вторая вложенная таблица

Sign In

Ссылки не окрашиваются, адекватность изображения в браузерах исчезла и вообще...

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information