Кнопки (картинка кнопка)

Acret · 14.05.2009

Делал кнопки на сайте и столкнулся с такой проблемой, между картинками появляется фиолетовая линия (Хоть и малозаметная, но портит весь дизайн). Хотелось бы избавиться он нее..думал что это из за рамки и поставил border=0 у картинок но всеравно. Если есть CSS код чтобы избавиться от этих линий прошу выложить)
Заранее спасибо)
вот код кнопок:

Код:

<a href="../../index.php"
   onMouseOver="document.Home.src='../../pic/butHome/butHome2.gif'"
   onMouseOut="document.Home.src='../../pic/butHome/butHome1.gif'">
<img src="../../pic/butHome/butHome1.gif" name="Home" alt="На главную" border="0">
</a>
<a href='../../news/news.php'
   onMouseOver="document.News.src='../../pic/butNews/butNews2.gif'"
   onMouseOut="document.News.src='../../pic/butNews/butNews1.gif'">
   <img src="../../pic/butNews/butNews1.gif" name="News" alt="Новости"border="0">
</a>
<a href='../../other/upload/form.php'
   onMouseOver="document.Down.src='../../pic/butDown/butDown2.gif'"
   onMouseOut="document.Down.src='../../pic/butDown/butDown1.gif'">
   <img src="../../pic/butDown/butDown1.gif" name="Down" alt="Добавление уроков" border="0">
</a>
<a href="../../other/mail/mail.php"
   onMouseOver="document.Sup.src='../../pic/butSup/butSup2.gif'"
   onMouseOut="document.Sup.src='../../pic/butSup/butSup1.gif'">
   <img src="../../pic/butSup/butSup1.gif" name="Sup"  alt="Потдержка" border="0">

я красными кружками выделил эти линии =)

komusite · 14.05.2009

Ну вот... держите на заметку. Никакой ява скрипт. Усе будет работать. Я думаю в дополнительных разяснениях не нуждаеЦа. Если фсё таки возникнут вАпросы то тада пишите. Испытывал тока в последней ОПЕРЕ. Другие бровзеры оставил без внимания патамуша был слишком пян. Думаю ШО усе будет фпарятке. Не такой сложный задание.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/DTD/transitional.dtd">
<html>
<head>
   <title>трали вали</title>
   <meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style type="text/css">


.vertikalmenu a
{
width: 80px;
height: 32px;
text-decoration: none;
display: block;
float:left;
}

#buthome{
background: url(images/buthome.jpg) no-repeat;
}
#buthome:hover{
background: url(images/buthome1.jpg) no-repeat;
}
#butnews{
background: url(images/butnews.jpg) no-repeat;
}
#butnews:hover{
background: url(images/butnews1.jpg) no-repeat;
}
#butdown{
background: url(images/butdown.jpg) no-repeat;
}
#butdown:hover{
background: url(images/butdown1.jpg) no-repeat;
}
#butsupport{
background: url(images/butsup.jpg) no-repeat;
}
#butsupport:hover{
background: url(images/butsup1.jpg) no-repeat;
}


</style>

</head>
<body>
<div class="vertikalmenu">
<a  id="buthome"		href="#">  </a>
<a  id="butnews"		href="#">  </a>
<a  id="butdown"		href="#">  </a>
<a  id="butsupport"	 href="#">  </a>
</div>
</body>
</html>

Да... эта, таво. Альты на картинки добафте сами. Енто важно ! Без альтоф ща никуда. Просто мне ща лень :biggrin:

komusite · 14.05.2009

А ваще то нужно пасатреть списки. Всмысле ща модно меню организовыфать списком. Кстати на энтом форуме есть темы посвященные спискам. Я их не смотрел. Но думаю стоит посмотреть.

Acret · 14.05.2009

списком я думал левое меню сделать) вот ток с кнопками тама хрень с полоской)

Komusite, спасибо =)
а еси это в ЦСС файл общий для сайта это все запихнуть и кнопки

Код:

<a id="buthome" href="#"> </a>
<a id="butnews" href="#"> </a>
<a id="butdown" href="#"> </a>
<a id="butsupport" href="#"> </a>

сделать Includ'ом из файла с помощью пхп)...еще одно уточнение) я <div> в сайте не использовал) делал по старинке как научился таблицами...а про див узнал, уже позно было)

P.s. Почему нельзя ява скрипт использовать на сайте?
P.s.s Дело в том, что я ЦСС аще не знаю)

komusite · 15.05.2009

Полоска, полоска ... хм. Даже не знаю что это, по умолчанию все ссылки синего цвета и у них есть подчеркивание. Может это подчеркивание ? Если да, то от него можно избавиться свойством text-decoration: none;Общий CSS файл для сайта подключается в index.html вот таким образом - <link rel="stylesheet" type="text/css" href="style.css"> писать нужно в разделе HEAD. соответственно style.css это имя файла.
Если не хотите использовать DIV то тогда запишите свойство так :

Код:

#buthome, #butnews, #butdown, #butsupport
{
width: 80px;
height: 32px;
text-decoration: none;
display: block;
float:left;
}

#buthome{
background: url(images/buthome.gif) no-repeat;
}
#buthome:hover{
background: url(images/buthome1.gif) no-repeat;
}
#butnews{
background: url(images/butnews.gif) no-repeat;
}
#butnews:hover{
background: url(images/butnews1.gif) no-repeat;
}
#butdown{
background: url(images/butdown.gif) no-repeat;
}
#butdown:hover{
background: url(images/butdown1.gif) no-repeat;
}
#butsupport{
background: url(images/butsup.gif) no-repeat;
}
#butsupport:hover{
background: url(images/butsup1.gif) no-repeat;
}

Сейчас все переходят на DIV кругом кричат что это круто. Таблицы должны выполнять только свою функцию - представлять данные в табличном виде, а не заниматься оформлением внешнего вида сайта.
Ява скрипт можно использовать на сайте. Но мне кажется в данном случае она неуместна. Если уже ничего нельзя сделать при помощи стилей, тогда уж конечно нужно использовать Яву.
У явы как бы другое предназначение. Использовать яву, php чисто в оформительских целях - для меня дурной вкус. Есть как бы такая мода, все отдельно. Но это только мое мнение.
http://www.htmlbook.ru/ - хороший ресурс по HTML CSS что бы его освоить нужно гдето 2 дня. Заниматься каждый день по 2 часа. И даю вам слово вы станете по другому мыслить, ну а дальше
опыта набираться бесконечно.

Кнопки (картинка кнопка)

Acret

Active Member

Вложения

komusite

Active Member

komusite

Active Member

Acret

Active Member

komusite

Active Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей