Форум АНТИЧАТ - [HTML, Css] - Задай вопрос, получи ответ

УСТРАНЕНИЕ КОНКУРЕНТОВ. БЛОКИРОВКА ДОМЕНОВ, БЛОКИРОВКА ИНСТАГРАМ/ТЕЛЕГРАМ И ДРУГОЕ. ПРОВЕРЕННЫЙ СЕЛЛЕР.

Antichat снова доступен.
Форум Antichat (Античат) возвращается и снова открыт для пользователей. Здесь обсуждаются безопасность, программирование, технологии и многое другое. Сообщество снова собирается вместе.
Новый адрес: forum.antichat.xyz

		Форум АНТИЧАТ > Программирование > PHP, PERL, MySQL, JavaScript
[HTML, Css] - Задай вопрос, получи ответ

Страница 23 из 150

« Первая

123

Последняя »

Опции темы

Поиск в этой теме

Опции просмотра

#221

18.01.2008, 13:33

Helios

Постоянный

Регистрация: 14.01.2007

Сообщений: 459

Провел на форуме:
1469995

Репутация: 589

Отправить сообщение для Helios с помощью ICQ

Цитата:

Сообщение от -=lebed=-

Может и легче, но я хочу через CSS сделать сие дело...

Up: вот сделал как рекомендовал Helios

Код:

<body>
<table align="center" id="1" cellspacing="0" cellpadding="0">
  <tr>
    <th><span class="logo1"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="285" height="36"/></a></span></th>
    <th><span class="logo2"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="178" height="36"/></a></span></th>
    <th><span class="logo3"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="205" height="36"/></a></span></th>
  </tr>
</table>
</body>

style.css

Код:

body {
	margin-left: 0px;
	margin-top: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin: 0;
}

a
{
  background: top left;
}
a:hover
{
  background-position: bottom left;
}

.logo1 a img 
	{
	background: url(images/logo_1.png);
	}
	
.logo1 a:hover img
{
	background-position: bottom left;	 
}

.logo2 a img 
	{
	background: url(images/logo_2.png);
	}
	
.logo2 a:hover img
{
	background-position: bottom left;	 
}

.logo3 a img 
	{
	background: url(images/logo_3.png);
	}
	
.logo3 a:hover img
{
	background-position: bottom left;	 
}

Т.е. фоновая картинка в два раза больше ячейки таблицы по высоте, в начале отображается верхняя часть, при наведении курсора - нижняя. В принципе всё работает ок! Но в IE ячейки таблицы обраблены рамкой синего цвета, в Опере такого нету - там всё норм. В чём трабл?

Код:

body {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

* a img {border: none 0px;}
a img {border: none 0px;}

.logo1 a img {background: url(images/logo_1.png) no-repeat top left;}
.logo1 a:hover img {background-position: bottom left;}
	

.logo2 a img {background: url(images/logo_2.png) no-repeat top left;}
.logo2 a:hover img {background-position: bottom left;}

.logo3 a img {background: url(images/logo_3.png) no-repeat top left;}
.logo3 a img:hover {background-position: bottom left;}

Так будет лучше и оптимальнее, + убрана рамка вокруг картинок в ссылке

Последний раз редактировалось Helios; 18.01.2008 в 14:14..

#222

18.01.2008, 13:56

Корвин

Участник форума

Регистрация: 26.02.2007

Сообщений: 259

Провел на форуме:
302951

Репутация: 67

Отправить сообщение для Корвин с помощью ICQ

Цитата:

Сообщение от Helios

Многие люди из морально-этических соображений выключают JavaScript у себя в браузере, поэтому эти функции работать не будут. Людей же, отрубающих CSS практически нет, поэтому это будет работать везде.

в наше время практически на каждом сайте есть ява скрипт,и рядовой пользователь на полезет отключать яваскрипт, отключают те кто знают что делают,следовательно это их проблемы,а не создателя сайта

Цитата:

чтобы не было рамки нада у прозрачного гифа поставить style="border: 0px;",имхо по умолчанию он может быть другим, и еще style="visibility:hidden;",чтобы прозрачный гиф ваще не показывался никак,он тада даже выделяца не будет

#223

18.01.2008, 14:20

astrologer

Постоянный

Регистрация: 30.08.2007

Сообщений: 773

Провел на форуме:
3069349

Репутация: 808

Код:

body {
	padding: 0;
	margin: 0;
}
a img {border: none;}

"none" - это слово-синоним для нулевой ширины границы

padding и margin, если у них установлено только одно значение, автоматически распространяют его на каждую сторону.
Это так называемые "shorthand properties"

#224

18.01.2008, 14:37

Helios

Постоянный

Регистрация: 14.01.2007

Сообщений: 459

Провел на форуме:
1469995

Репутация: 589

Цитата:

Сообщение от astrologer

"none" - это слово-синоним для нулевой ширины границы

При указании border: none; указывается только тип границы 'none', но место под эту границу выделяется по умолчанию браузера. Поэтому обязательно необходимо указать ширину границы.

Цитата:

Сообщение от astrologer

По стандарту - да, но есть такой забавный браузер IE, которому стандарты до одного места, и реакция его на CSS с каждой версией разная, поэтому лучше указать все явно, тем более, что это не составляет особого труда. Это во-первых.

Во-вторых всегда необходимо указывать единицы измерения(em, px, pt, etc) в таких параметрах, т.к. есть два типа рендеринга: Quirks mode и Standarts mode(подробнее на русском), оба имеют свои единицы измерения, а благодаря разным мнениям браузеров в отношении что в каком режиме рендерить могут возникнуть ошибки

Последний раз редактировалось Helios; 18.01.2008 в 17:16..

#225

18.01.2008, 17:03

NOmeR1

Познавший АНТИЧАТ

Регистрация: 02.06.2006

Сообщений: 1,188

Провел на форуме:
6023777

Репутация: 2642

Отправить сообщение для NOmeR1 с помощью ICQ

Цитата:

Сообщение от -=lebed=-

Забыл сделать border="0"

Исправь код на этот и забей на всё:

Код:

<body>
<table align="center" id="1" cellspacing="0" cellpadding="0">
  <tr>
    <th><span class="logo1"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="285" height="36" border="0"/></a></span></th>
    <th><span class="logo2"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="178" height="36" border="0"/></a></span></th>
    <th><span class="logo3"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="205" height="36" border="0"/></a></span></th>
  </tr>
</table>
</body>

Обрамлена не таблица, а картинка. В ие почемуто по дефолту стоит border="1"

Последний раз редактировалось NOmeR1; 18.01.2008 в 17:12..

#226

18.01.2008, 19:09

Корвин

Участник форума

Регистрация: 26.02.2007

Сообщений: 259

Провел на форуме:
302951

Репутация: 67

а ну вот,я прально написал про бордер

#227

19.01.2008, 14:02

-=lebed=-

Флудер

Регистрация: 21.06.2006

Сообщений: 3,193

Провел на форуме:
12702287

Репутация: 4738

Помогите сделать "продвинутую" кнопку для отправки данных на сервер (type=submint)
1. Кнопка - картинка изображение1.
2. При наведении курсора на кнопку вид кнопки изменяется=изображение2.
3. При нажатии на кнопку=изображение3 и данные формы отправляются на сервер.
4. Условие: яваскриптом не пользоваться, только CSS (по типу ссылок картинок, рассмотренных мной выше).
ЗЫ По сути нужно сделать почти то же самое, но не ссылку а кнопку!
Просто кнопка-картинка:

Код:

<input type="image" border="0" src="images/logo_4.gif" width="180" height="180">

Надо теперь к ней написать стиль CSS, чтоб она была динамической...

Последний раз редактировалось -=lebed=-; 19.01.2008 в 14:39..

#228

19.01.2008, 14:29

NOmeR1

Познавший АНТИЧАТ

Регистрация: 02.06.2006

Сообщений: 1,188

Провел на форуме:
6023777

Репутация: 2642

Код:

<style>
input[type="image"]
{
	width: 100;
	height: 100;
	background: url(image1.png);
}
input[type="image"]:hover
{
	width: 100;
	height: 100;
	background: url(image2.png);
}
</style>
<form method="GET">
<input type="image">
</form>

Не забудь изменить ширину и высоту картинок.

#229

19.01.2008, 15:14

-=lebed=-

Флудер

Регистрация: 21.06.2006

Сообщений: 3,193

Провел на форуме:
12702287

Репутация: 4738

Цитата:

Сообщение от NOmeR1

Код:

<style>
input[type="image"]
{
	width: 100;
	height: 100;
	background: url(image1.png);
}
input[type="image"]:hover
{
	width: 100;
	height: 100;
	background: url(image2.png);
}
</style>
<form method="GET">
<input type="image">
</form>

Не забудь изменить ширину и высоту картинок.

Ага, спасиб, я уже тоже реализовал: (три состояния)

Код:

<a href="#" class="button"><span><img src="images/none.gif" width="180" height="180" /></span></a>

CSS

Код:

a.button {
  background: url(images/logo_4.gif);
  outline: none;
}
a.button span {
  display: block;
  background: url(images/logo_4.gif);
}

a.button:hover {
  background: url(images/logo_4.gif)
}
a.button:hover span {
  background: url(images/logo_4_turn.gif)
}
a.button:active {
  background: url(images/logo_4_turn.gif)
}
a.button:active span {
background: url(images/logo_4_click.gif)
}

Вопрос такой, если такая кнопка внутри формы, то её действие такое-же как и у type=submit ? Т.е при нажатии будет отправка данных из формы на сервер?
UP: в ссылке пишем тогда то же что и в action формы, например:

Код:

<a href="<?=$_SERVER['PHP_SELF']?>" class="button"><span><img src="images/none.gif" width="180" height="180" /></span></a>

так ?

Последний раз редактировалось -=lebed=-; 19.01.2008 в 18:13..

#230

19.01.2008, 15:43

Helios

Постоянный

Регистрация: 14.01.2007

Сообщений: 459

Провел на форуме:
1469995

Репутация: 589

Можно и ссылку:

PHP код:


		
			
<a href="#"> ... </a>

При нажатии ничего не произойдет

UPD: имелось в виду с помещенным в нее input type=button || image

Последний раз редактировалось Helios; 19.01.2008 в 17:36..

Страница 23 из 150

« Первая

123

Последняя »

« Предыдущая тема | Следующая тема »

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
[Delphi]/[Pascal] Задай вопрос, получи ответ	Isis	С/С++, C#, Delphi, .NET, Asm	6762	17.06.2010 21:23
Проблемы с железом. Задай вопрос, получи ответ	Alexsize	Аппаратное обеспечение	1181	10.06.2010 12:08
Proxy FAQ	foreva	Чужие Статьи	12	04.01.2008 12:15
ЕсТь ВоПрос	Guma	Чаты	4	26.10.2005 21:48

Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)

Быстрый переход